Adding slush bucket to form

[sbolton]

Can you add a Slush bucket directly onto a form?   Originally I thought it was just a different data type but cant seem to find it.

[jkc]

Hi Geoff,

That seems pretty awesome and I think we could use something similar.

Could you tell more about how you did this?

[geoffcox]

This is a UI page. I'll try to paste the html here, and the javascript below...

<g:ui_table>

<g:evaluate var="jvar_gig_id" expression="RP.getWindowProperties().get('gig_id')" />

<!-- header line -->

<tr class="header">

   <td colspan="3" class="column_head">

       <input type="hidden" id="gig_id" value="${jvar_gig_id}"/>

       <span id="gig_name" class="slushselect">Search</span>

   </td>

</tr>

<tr>

       <td colspan="3">Search: <input id="searchbox" type="text" name="searchbox" onkeyup="typewatch(function(){search_text_change();}, 1000 );"/></td>

</tr>

<tr class="header">

   <td class="column_head" colspan="2">

       <span class="slushselect">Charts</span>

   </td>

   <td class="column_head">

       <span class="slushselect">Gig</span>

   </td>

</tr>

<tr>

   <td width="100">

       <select id="charts" name="charts" multiple="multiple" size="8" readonly="readonly" ondblclick="do_doubleclick()" style="width:350px"></select>

   </td>

   <td align="center">

           <img src="/images/arrow_lt.gif" onclick="doLeft()" /><br />

           <img src="/images/arrow_rt.gif" onclick="doRight()" /><br /><br />

           <img src="break.pngx" width="48" height="21" onclick="doBreak()" /><br /><br />

           <img src="/images/arrow_up.gif" onclick="doUp()"/><br />

           <img src="/images/arrow_dwn.gif" onclick="doDown()"/>

   </td>

   <td valign="top" rowspan="4">

           <select id="the_gig" name="the_gig" multiple="multiple" size="20" readonly="readonly" style="width:350px"></select>

   </td>

</tr>

<tr>

   <th>

       Previous Set List

   </th>

   <td>$[SP]</td>

</tr>

<tr>

   <td colspan="2">

         <select id="past_set" name="past_set" onchange="pick_past_set()"></select>

   </td>   

</tr>

<tr>

   <td>

         <select id="past_set_list" multiple="multiple" name="past_set" size="8" style="width:350px" ondblclick="do_set_doubleclick()"></select>

   </td>   

   <td align="center" valign="top">

         <br /><img src="/images/arrow_rt.gif" onclick="doSetRight()" /><br /><br />

   </td>

</tr>

<tr><td colspan="3">

<!-- twin SELECTS -->

<div align="center">

<g:dialog_button onclick="save_chart_list();" name="ok_button" id="map_button">${gs.getMessage('Save')}</g:dialog_button>

<g:dialog_button onclick="cancel();" name="cancel_button" id="cancel_button">${gs.getMessage('Cancel')}</g:dialog_button>

</div>

</td></tr>

<tr><td colspan="3">

<div id="publish_choice" align="center"></div>

</td></tr>

</g:ui_table>

<script>

</script>

And here is the code:

var break_val = 'break';

var break_text = '--- BREAK ---';

var timer;





do_setup_chart_search_page();





function do_setup_chart_search_page() {

       var gig_id = document.getElementById('gig_id').value;

       var gig = new GlideRecord('u_gig');

       gig.get(gig_id);

       document.getElementById('gig_name').innerHTML = gig.u_name;

       var chart_list = document.getElementById('charts');

       var chart = new GlideRecord('u_chart');

       chart.addQuery('u_in_book',true);

       chart.orderBy('u_sort_field');

       chart.query();

       while (chart.next()) {

               jQuery('#charts').append(jQuery('<option>', { value : chart.sys_id }).text(chart.u_name)); 

       }

       document.getElementById("searchbox").focus();

       var set_position = new GlideRecord('u_set_position');

       set_position.addQuery('u_gig',gig.sys_id);

       set_position.orderBy('u_position');

       set_position.query();

       while (set_position.next()) {

               var list_position = new GlideRecord('u_list_position');

               list_position.addQuery('u_set_list',set_position.u_set_list);

               list_position.orderBy('u_position');

               list_position.query();

               while (list_position.next()) {

                       chart = new GlideRecord('u_chart');

                       chart.get(list_position.u_chart);

                       jQuery('#the_gig').append(jQuery('<option>', { value : chart.sys_id }).text(chart.u_name));               

               }               

               if (set_position.hasNext()) {

                       jQuery("#the_gig").append(jQuery('<option>', { value : break_val}).text(break_text));

               }

       }

       jQuery('#past_set').append(jQuery('<option>', { value : "" }).text(" ")); 

       var set_list = new GlideRecord('u_set_list');

       set_list.orderBy('u_name');

       set_list.query();

       while (set_list.next()) {

               jQuery('#past_set').append(jQuery('<option>', { value : set_list.sys_id }).text(set_list.u_name));                               

       }

       reset_search();

}





function reset_search () {

       document.getElementById('searchbox').value = '';

       document.getElementById('searchbox').focus();

}





var typewatch = function(){

       var timer = 0;

       return function(callback, ms){

               clearTimeout (timer);

               timer = setTimeout(callback, ms);

       }   ;

}();





function search_text_change() {

       var theSearchText = document.getElementById('searchbox').value;

       jQuery('#charts').empty();

       var chart_list = document.getElementById('charts');

       var chart = new GlideRecord('u_chart');

       chart.addQuery('u_in_book',true);

       chart.addQuery('u_name','CONTAINS',theSearchText);

       chart.orderBy('u_sort_field');

       chart.query();

       while (chart.next()) {

               jQuery('#charts').append(jQuery('<option>', { value : chart.sys_id }).text(chart.u_name)); 

       }

}





function doLeft() {

       jQuery("#the_gig option:selected").remove();

}





function doRight() {

       add_chart();

}





function doSetRight() {

       add_set_chart();

}





function doUp() {

       jQuery("#the_gig option:selected").each(function () {

               jQuery(this).insertBefore(jQuery(this).prev());

       });

}





function doDown() {

       jQuery("#the_gig option:selected").each(function () {

               jQuery(this).insertAfter(jQuery(this).next());

       });

}





function doBreak() {

       jQuery("#the_gig").append(jQuery('<option>', { value : break_val}).text(break_text));

}





function do_doubleclick() {

       add_chart();

}





function add_chart() {

       jQuery("#charts option:selected").each(function () {

               jQuery("#the_gig").append(jQuery('<option>', { value : jQuery(this).val() }).text(jQuery(this).text()));

       });

       reset_search();

}

function do_set_doubleclick() {

       add_set_chart();

}





function add_set_chart() {

       jQuery("#past_set_list option:selected").each(function () {

               jQuery("#the_gig").append(jQuery('<option>', { value : jQuery(this).val() }).text(jQuery(this).text()));

       });

}





function cancel() {

       GlideDialogWindow.get().destroy();

}





function save_chart_list() {

       if (!dupe_check()) {

               return;

       }

       var list_position;

       var set_list;

       var gig_id = document.getElementById('gig_id').value;

       var gig = new GlideRecord('u_gig');

       if (gig.get(gig_id)) {

               var set_position = new GlideRecord('u_set_position');

               set_position.addQuery('u_gig',gig.sys_id);

               set_position.query();

               while (set_position.next()) {

                       set_position.u_delete = true;

                       set_position.update();

               }

               var current_set = 1;

               var current_chart = 1;

               set_list = new GlideRecord('u_set_list');

               set_list.initialize();

               set_list.u_name = gig.u_name + ' Set ' + current_set;

               var current_set_list_id = set_list.insert();

               set_position = new GlideRecord('u_set_position');

               set_position.initialize();

               set_position.u_gig = gig_id;

               set_position.u_set_list = current_set_list_id;

               set_position.u_position = current_set++;

               set_position.insert();

               jQuery("#the_gig option").each(function () {

                       if (jQuery(this).val() == break_val) {

                               set_list = new GlideRecord('u_set_list');

                               set_list.initialize();

                               set_list.u_name = gig.u_name + ' Set ' + current_set;

                               current_set_list_id = set_list.insert();

                               set_position = new GlideRecord('u_set_position');

                               set_position.initialize();

                               set_position.u_gig = gig_id;

                               set_position.u_set_list = current_set_list_id;

                               set_position.u_position = current_set++;

                               set_position.insert();                       

                               current_chart = 1;

                       }

                       else {

                               list_position = new GlideRecord('u_list_position');

                               list_position.initialize();

                               list_position.u_set_list = current_set_list_id;

                               list_position.u_position = current_chart++;

                               list_position.u_chart = jQuery(this).val();

                               list_position.insert();

                       }

               });



               yesOrNo('Do you want to publish this set list?');

       }

       else {

               alert('Error: gig_id [' + gig_id + '] not found.');

       }

}





function yesOrNo(msg) {

       var inh = '<h3 style="text-align:center">'+msg+'</h3>' +

               '<p style="text-align:center">' +

               '<button type="button" onclick="publish_yes()">Yes</button>'+

               '<button type="button" onclick="publish_no()">No</button></p>';             

       document.getElementById('publish_choice').innerHTML = inh;

       window.scrollTo(0,1000);

}





function publish_yes() {

               g_form.setValue('u_set_list_status','Published');

               gsftSubmit(gel('sysverb_update_and_stay'));

               GlideDialogWindow.get().destroy();

               return true;

}





function publish_no() {

               gsftSubmit(gel('sysverb_update_and_stay'));

               GlideDialogWindow.get().destroy();

               return true;

}

function dupe_check() {

      var chart = new Object();

      jQuery("#the_gig option").each(function () {

              if (jQuery(this).val() != break_val) {

                      if (chart[jQuery(this).text()]) {

                              chart[jQuery(this).text()]++;

                      }

                      else {

                              chart[jQuery(this).text()] = 1;

                      }

              }

      });

      msg = '';

      for (var x in chart) {

              if (chart[x] > 1) {

                      msg += x + ' has been selected ' + chart[x] + ' times. ';

              }

      }

      if (msg) {

              return confirm(msg + ' Are you sure?');

      }

      return true;

}

function pick_past_set() {

      jQuery('#past_set_list').empty();

      jQuery("#past_set option:selected").each(function () {

              var list_position = new GlideRecord('u_list_position');

              list_position.addQuery('u_set_list',jQuery(this).val());

              list_position.orderBy('u_position');

              list_position.query();

              while (list_position.next()) {

                      var chart = new GlideRecord('u_chart');

                      if (chart.get(list_position.u_chart)) {

                              if (chart.u_in_book == 'true') {

                                      jQuery("#past_set_list").append(jQuery('<option>', { value : chart.sys_id }).text(chart.u_name));

                              }

                      }

              }

      });    

}

[johnnyjava]

Thank you for the code. This was very helpful.

[jlebec]

Hi Sean,

It depends on what you call a form.

On Incident, task, and so on forms there is no Slush Bucket data type what is use instead is list that could be used to add multiple reference at same time (but only once the record have been submited, when it is a new record you could only add one value by one).

On a catalog item the list collector variable will display, in this case a slush bucket when browsing the item on service catalog.

Hope that help.

[manish123]

Hi All,

We have a Catalog Item, which include list collector as ABC. When we select any value of our first variable i.e. first then it will passed that value to ABC list collector and filter out the rows in Catalog Item. Because I am calling scription include function of list collector field. It's working perfect while user's raising the request through Catalog Item. However, when user open the raised Request & RITM. In RITM's page, we have got variable editor and all variables are readonly however the list collector field is showing all values instead of the filtered ones. Here we should like to see only those rows which are related to first varibale.

Has anyone faced such issue earlier? Any help will be much appreciated.