How to make one ui_reference field dependent on another ui_reference in a UI Page

[agulati]

I have 2 UI reference fields in a UI Page

- Assigned To

- Assignment Group

I want to show list of assignment groups based on assigned to selection.

Is there a way to do that in a UI Page? Is there a way to call a custom javascript that does this?

Thanks

[marcguy]

you would need to reverse this logic below as we do it by populating the group and then returning the users availalbe in that group in a UI Page, but might show you the way, basically you call a function to return values to the group/user field, depending on the new value in the group/user field.

This part goes in the HTML section to get the fields displayed and call the 'getPeopleInGroup' client script;

          <td nowrap="true">

              <span class="mandatory" title="Mandatory - must be populated before Submit"

              style="margin-right:3px; margin-left:1px; cursor:default;"

              mandatory="true" oclass="mandatory">$[SP]</span>

              <label for="${item_id}">Assignment Group: </label>

              <g:ui_reference name="${item_id}" table="sys_user_group" onchange="getPeopleInGroup()"/>

          </td>

          <td nowrap="true">

              <label for="assigned_to">Assign To: </label>

              <select name="assignedToSelect" id="assignedToSelect"

                  style="width:200px">

                  <option value="">Select Item</option>

              </select>

          </td>

-----------------------------------------------------------------------

This part goes in the client script section to return the members of that group that are valid;

function getPeopleInGroup() {

  var field = document.getElementById('assignedToSelect'),

          ga,

          group;

  removeAllOptions(field);

  field.options[0] = new Option("Select Item", "");

  group = gel("QUERY:active=true^sys_class_name=sys_user_group").value;

  ga = new GlideAjax('BulkOperationsAjaxFunctions');

  ga.addParam('sysparm_name', 'getPeopleInTheGroup');

  ga.addParam('sysparm_sGroupID', group);

  ga.getXMLAnswer(parsePeopleInGroup);

  function parsePeopleInGroup(response) {

      var field = document.getElementById('assignedToSelect'),

              resultArray,

              newVal,

              options;

      if (response) {

          resultArray = response.split(":::");

          options = field.options.length;

          for (var i = 0, length = resultArray.length; i < length; i++) {

              newVal = resultArray[i].split('=');

              if (newVal && newVal.length > 0 && typeof newVal[1] !== 'undefined') {

                  field.options[options++] = new Option(newVal[1], newVal[0]);

              }

          }

      }

  }

}

-------------------------------------------------------------------------

All that the script include     ga = new GlideAjax('BulkOperationsAjaxFunctions'); does is return the list of sys_ids of the users (or in your case it would be groups that user belongs to).

Hope that helps you.

marc

[agulati]

Thanks for the reply Marc.

The snippet you mentioned has assigned to as a select control. In my scenario it is a ui_reference.

Is there a way to do the filtering for UI reference similar to what you mentioned for select control

[marcguy · Accepted solution]

Good point it says on the wiki that since calgary, you can put a reference qualifier

This tag adds a reference to a page that can be referenced by a Processing Script. The following example creates a reference defined by name, id, and table parameters in the tag:

<g:ui_reference name="QUERY:active=true^roles=itil" id="assigned_to" table="sys_user" />

Then in the Processing Script, reference the name field like this:

newTask.assigned_to = request.getParameter("QUERY:active=true^roles=itil");

Beginning with the Calgary release, this tag has been enhanced to allow you to specify a reference qualifier, so that the "name" attribute can be unique. The following example creates a reference defined by name, id, and table parameters in the tag. Note: the "columns" attribute only applies to the auto-completer.

<g:ui_reference name="parent_id" id="parent_id" table="pm_project" query="active=true" completer="AJAXTableCompleter"  columns="project_manager;short_description"/>

[agulati]

Thanks Marc. I implemented where the first control was reference and second control   was a dropdown.

-Aman