2 Replies Latest reply: Jul 2, 2013 10:49 AM by Joe Upshaw RSS

    How to "Reorder" Left Side of Shuttle Control

    Joe Upshaw
      For the first time today, I noticed some behavior of the shuttle control that I would not have expected.

      We have a region with a report in it and, as the user clicks a row, a shuttle control shows the available and selected elements associated with the selected row. This is working well.

      When the user selects the second row, the items which were selected from the first row are, correctly, returned to the left hand side. HOWEVER, they are added back to the bottom of the left hand side rather than, as I would have expected, in the correct, alphabetical (and original) order. This is the first issue.

      More troubling, when the user clicks the "Reset" button, e.g. P3_PROPERTY_SETS_RESET, the values are returned to what they were on the first row. That is, click row 1, see selected values. Click row 2, see selected values and row 1's values are now on the left and at the bottom of the list. Click the Reset button, the items from row 1 are now selected as being associated with row 2. Oops!

      I can simply remove the reset button to prevent the user from accidentally updating their values to the previously selected row's values. However, is there anyway, programatically, to reset the items in the left side so that they have their default sort order?


      Edited by: Joe Upshaw on Feb 4, 2013 6:36 PM
        • 1. Re: How to "Reorder" Left Side of Shuttle Control
          Joe Upshaw
          Fixed it myself. I do wish one of the developers would take a look at the original issue; however; as it really does seem to be an annoyance (the unordered left side following a change to the selected shuttle contents) and a bug (the choice of wrongly selected shuttle elements using the refresh button).

          Here is the solution in case anyone else needs it.

          Create a function that accepts a shuttle control as an argument and then sorts the contents
          function sortSelectOptions(selectElem)
              var selectedValue;
                      // Keep track of the selected option.
                      selectedValue = $(this).val();
                      // Sort all the options by text.
                      $(this).html($("option", $(this)).sort(
                          function(a, b) 
                              return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
          Above sort plagiarized (mostly) from the InterWeb but, I honestly can’t find the source again to give proper credit…sorry kindly developer.

          I am using AJAX to get the selected values from a method I named GET_TERM_PROPERTY_SETS so; mileage may very on this bit…The salient point is to show that I call the above sort function whenever the right-hand, i.e. selected, shuttle values change
          function getTermPropertySets(termID)
              var ajaxRequest = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=GET_TERM_PROPERTY_SETS',$v('pFlowStepId'));
              ajaxRequest.add( 'P3_TERM_ID', html_GetElement('P3_TERM_ID').value );
              var termPropertySets = ajaxRequest.get();
              ajaxRequest = null;
              $s('P3_PROPERTY_SETS', termPropertySets);
          I also removed the offensive, buggy refresh button. Couldn’t be done in the “Execute when Page Loads” section of the Page Attributes because this fires before the shuttle control is fully rendered. So, I added a Dynamic Action on Page Load to get rid of it.
          • 2. Re: How to "Reorder" Left Side of Shuttle Control
            Joe Upshaw

            I found a way to remove the offensive, buggy refresh button globally. On page 0, on Page Load add:


            $('td.shuttleControl a[id$="_RESET"]').remove();