Custom Slushbucket in Scoped App

[Sue Frost]

I have a requirement to create a custom slushbucket and eventually use the selections to create some records.

I found ServiceNow Guru's awesome document which gets me 80% of the way to where I need to be and I'm trying to get the example working before I customize it to my requirments.

I'm trying this out in my personal instance, just as is. I've added the elements - UI Action, UI Page with HTML & Client Script, Script Include.

I'm stuck now because the slushbucket appears but there are no items to be selected in the left bucket:

It seems to be that the issue may be in the UI Macro "ui_slushbucket". (There are two OOTB macros with this name. I narrowed it down to the one with a description of "(Doctype) macro to render a slushbucket").

This macro is written in Jelly. I've never used Jelly. I can see where I need to get the list of groups but I'm at a loss on how to write this. I should be pulling a list of available (and possibly filtered) groups.

UI Macro: ui_slushbucket

<?xml version="1.0" encoding="utf-8"?>

<!-- slushbucket creates its own table -->

<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:macro name="slush" left_header="${gs.getMessage('Available')}" right_header="${gs.getMessage('Selected')}" up_down="false"/>

<script>

  var ${jvar_name};

  addLoadEvent(function() {

${jvar_name} = new SlushBucket('${jvar_name}');

  });

</script>

<div id="${jvar_name}" class="container-fluid slushbucket">

<div class="row form-group">

<div class="col-xs-6">

<div class="glide-list">

<label for="${jvar_name}_left">${jvar_left_header}</label>

<div class="slushbucket-top">

<!-- left selection -->

<select id="${jvar_name}_left"

name="${jvar_name}_left" class="slushselect form-control"

multiple="yes" size="10" width="120"

ondblclick="${jvar_name}.moveLeftToRight();">

<!-- option that gets erased onload -->

<options></options>

<!-- you can build your options list inline... -->                           //Here's where I need to insert my customization - but how/what?

<options>Option A</options>                                                                         //These lines don't show up

<options>Option B</options>

<options>Option C</options>

<g:insert/>

</select>

<div class="button-column" id="addRemoveButtons">

<A title="${gs.getMessage('uppercase_add')}" class="btn btn-default icon-chevron-right"

  onclick="${jvar_name}.moveLeftToRight();" href="javascript:void(0)">

<span class="sr-only">

${gs.getMessage('uppercase_add')}

</span>

</A>

<A title="${gs.getMessage('Remove')}" class="btn btn-default icon-chevron-left"

  onclick="${jvar_name}.moveRightToLeft();" href="javascript:void(0)">

<span class="sr-only">

${gs.getMessage('Remove')}

</span>

</A>

</div>

</div>

</div>

</div>

<div class="col-xs-6">

<div class="glide-list">

<label for="${jvar_name}_right">${jvar_right_header}</label>

<div class="slushbucket-top slushbody">

<!-- left selection -->

<select id="${jvar_name}_right"

name="${jvar_name}_right" class="slushselect form-control"

multiple="yes" size="10" width="120"

ondblclick="${jvar_name}.moveRightToLeft();">

<!-- option that gets erased onload -->

<option>--</option>

</select>

<div id="upDownButtons" class="button-column">

<j:if test="${jvar_up_down != 'false'}">

<A title="${gs.getMessage('Move up')}" class="btn btn-default icon-chevron-up"

  href="javascript:void(0)"

  onclick="${jvar_name}.moveUp();" ondblclick="${jvar_name}.moveUp();">

<span class="sr-only">

${gs.getMessage('Move up')}

</span>

</A>

<A title="${gs.getMessage('Move down')}" class="btn btn-default icon-chevron-down"

  href="javascript:void(0)"

  onclick="${jvar_name}.moveDown();" ondblclick="${jvar_name}.moveDown();">

<span class="sr-only">

${gs.getMessage('Move down')}

</span>

</A>

</j:if>

</div>

</div>

</div>

</div>

</div>

</div>

</j:jelly>

Can someone point me in the right direction, perhaps to code example of this? Thanks!

[Sue Frost · Accepted solution]

I found the answer (though I suspect there will be more questions before this is done.)

I was able to pass the values for the slushbucket in from the UI Page.

The UI Macro "ui_slushbucket" remains as OOTB except that I will remove the default "--" (None) option from the right-hand bucket.

Here's the revised copy of my UI Page "add_approval_groups". I've highlighted the code I added.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:evaluate>

//Get all groups

var gr = new GlideRecord('sys_user_group');

gr.addQuery('active', true);

gr.orderBy('name');

gr.query();

</g:evaluate>

  <TABLE BORDER="0">

          <TR>

              <TD>

                      Please select the groups you wish to add as approvers.

              </TD>

          </TR>

          <TR>

              <TD>

                      <!-- Include the 'ui_slushbucket' UI macro -->

                      <g:ui_slushbucket name="sb" left_header="LEFT SIDE" right_header="RIGHT SIDE">

                            <j:while test="${gr.next()}">

                                      <option value="${gr.sys_id}"> ${gr.name} </option>

                            </j:while>

                      </g:ui_slushbucket>

              </TD>

          </TR>

          <TR>

              <TD align="right">

                      <!-- Include the 'dialog_buttons_ok_cancel' UI macro -->

                      <g:dialog_buttons_ok_cancel ok="return continueOK()" cancel="return continueCancel()" ok_type="button" cancel_type="button"/>

              </TD>

          </TR>

  </TABLE>

</j:jelly>

The end result: