3 Replies Latest reply on May 29, 2017 2:09 AM by Maciek La

    How do you have the API respond to events and pass only one value?

    Stephen Hellyar

      Hi,

       

      I just need the API to pass the name of the selected mark so that I can complete this sentence in my TWIG-HTML.

       

      {{ entry.name }}  -- where "name" is the value of the Product Name dimension selected in Tableau. 

       

       

      I used the Respond to Events KB article here to get the basic functionality of reporting the selected marks.   But, I only need the one value for the field name (aka the dimension) "Program Name".   This is the value I want to pass to "name" in {{ entry.name }}, which will allow me to pull up additional information outside of Tableau for the selected mark. 

       

      Here's the code from the tutorial that I used (and copy/paste created a lot of extra lines that don't exist in the original)  Of course I swiped out the default url for my own. 

      
          <script type="text/javascript">
      
              
              var viz;
              
              function initViz() {
                  var containerDiv = document.getElementById("vizContainer"),
                      url = "http://10ax.online.tableau.com/t/i2insights10/views/Budget18-OPA1-Test/Dashboard1",
                      options = {
                          "Academic Year": "",
                          hideTabs: true,
                          onFirstInteractive: function () {
                              listenToMarksSelection();
                          }
                      };
                  
                  viz = new tableau.Viz(containerDiv, url, options);
              }
      
      
              function listenToMarksSelection() {
                  viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
              }
      
      
              function onMarksSelection(marksEvent) {
                  return marksEvent.getMarksAsync().then(reportSelectedMarks);
              }
      
      
              function reportSelectedMarks(marks) {
                  var html = ""; 
                  
                  for (var markIndex = 0; markIndex < marks.length; markIndex++) {
                      var pairs = marks[markIndex].getPairs();
                      html += "<b>Mark " + markIndex + ":</b><ul>";
      
      
                      for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
                          var pair = pairs[pairIndex];
                          html += "<li><b>Field Name:</b> " + pair.fieldName;
                          html += "<br/><b>Value:</b> " + pair.formattedValue + "</li>";
                      }
                      html += "</ul>";
                  }
      
      
                  var infoDiv = document.getElementById('markDetails');
                  infoDiv.innerHTML = html;
              }
      
      
      
      
          </script>