1 Reply Latest reply on Dec 17, 2014 3:33 AM by Russell Christopher

    Javascript Event Handlers - Select/DeSelect

    Chris Toomey

      Is there any way of tracking whether or not an event listener (set for mark selection) is registering selection vs. deselection?

       

      I'm attempting to set up my web application to use a dashboard on the left and a cross tab on the right.  The dashboard is hierarchical (first element is region, second is market, etc), and actions pass down to guide the user.  Using the Javascript tutorial for event listeners, I was able to combine the actions + mark selection to filter the crosstab, but I can't go the other way (remove/reset the filter).

       

      I noticed in the documentation a reference to a SelectionUpdateType, in which a SelectMarksAsync registers an Add/Remove/Replace.  Can this be baked in or utilized for a normal mark selection?

       

      The end result I'm going is to have bi-directional analysis from a dashboard to a crosstab, in which selection of marks adjusts filters, and de-selection of marks resets the filter to all/none (at the top level).

       

      I've posted an adapted version of the code below.  The crosstab is embedded in a dashboard (hence the long-ish call to apply the Filter values from the actual dashboard). 

       

      var tableau = document.getElementById('tableau');
          var url = "dashboard1";
          var options = {
              width: tableau.clientWidth + "px",
              height: tableau.clientHeight + "px",
              hideTabs: true,
              hideToolbar: true,
              onFirstInteractive: function() {
                  workbook = viz.getWorkbook();
                  activeSheet = workbook.getActiveSheet();
                  listenToMarksSelection();
              }
          };
          viz = new tableauSoftware.Viz(tableau, url, options);
      
      
          var lookup = document.getElementById('lookup');
          var lookupurl = "dashboard2";
          var lookupoptions = {
              width: lookup.clientWidth + "px",
              height: lookup.clientHeight + "px",
              hideTabs: true,
              hideToolbar: true,
              onFirstInteractive: function() {
                  lookupworkbook = lookupviz.getWorkbook();
                  lookupactiveSheet = lookupworkbook.getActiveSheet();
                  //listenToMarksSelection();
              }
          };
          lookupviz = new tableauSoftware.Viz(lookup, lookupurl, lookupoptions);
      
      
          function listenToMarksSelection() {
              viz.addEventListener(tableauSoftware.TableauEventName.MARKS_SELECTION, onMarksSelection);
          }
      
      
          function onMarksSelection(marksEvent) {
              //alert(marksEvent.getEventName()+" "+marksEvent.getWorksheet().getName());
              return marksEvent.getMarksAsync().then(reportSelectedMarks);
          }
      
      
          function reportSelectedMarks(marks) {
              //var html = [];
              for (var markIndex = 0; markIndex < marks.length; markIndex++) {
                  var pairs = marks[markIndex].getPairs();
                  var pair = pairs[0];
                  //html.push(pair.fieldName + " " + pair.formattedValue);
              }
      
      
             //alert(pair.fieldName + " " + pair.formattedValue);
             //alert(html.length);
      
      
              lookupviz.getWorkbook().getActiveSheet().getWorksheets().get("LookupData").applyFilterAsync(pair.fieldName, pair.formattedValue, "REPLACE");
      
      
          }
      
        • 1. Re: Javascript Event Handlers - Select/DeSelect
          Russell Christopher

          The short answer is "no" - you must manage this yourself. You're really looking for something like getChangedMarksAsync (which doesn't exist);;

           

          • You select 3 marks (event fires)
          • You select an additional mark (event fires again)
          • getChangedMarksAsync returns one 1 mark, not 4.

           

          SelectionUpdateType refers to the type of selection being made, it's not a way to filter the results from getMarks() down to marks that WERE selected in a particular way. 


          You're probably going to have to get and assign the output of getMarks each time an event is raised to a multi-dimensional array or somesuch -- then compare the pairs in each dimension of the array to see "what changed". Not fun, but do-able, I guess.


          Good luck!

          2 of 2 people found this helpful