Reference field dependency in UI Page

[Shankar Manohar]

Greetings Everyone!

  I have   a catalog item and have a classification Field( Variable) which is reference to custom table ( Classification). I have created a UI page in my Catalog Item with Group Roles and User ID.

  Now, the Group Role is reference to Custom Table ( Group) which has Group Roles tagged to Classification above ( Only two Classification, A & B).

Now, My requirement is If I choose A in my Classification Field,Only the roles tagged to A should be listed in my Group Role Field and If Chosen B, the roles that are tagged to B should be listed in my Group Role reference field.

    I have tried different option but no luck. Please let me know if there is something way we can achieve my requirement.

My HTML Code:

                    <TD><g:ui_reference name="group_role" query="u_classification=u_pgm_classification.value" id="Group_Role" table="u_pgm_group_role" completer="AJAXTableCompleter" columns="u_group_role" /></TD>                                                

              <TD><g:ui_reference name="ln_user" query="active=true^u_employee_type=SAPHR" id="ln_user" table="sys_user" completer="AJAXTableCompleter" columns="user_name" /></TD>

Corresponding Client Script:

var root = document.getElementById(r);

      var allRows = root.getElementsByTagName('tr');

      var cRow = allRows[1].cloneNode(true);

      var j = 0;

      for (j = 0; j < cRow.cells.length; j++) {

              if(j>0 && j!=4){

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

                      document.getElementById('sys_display.fn_user').value = '';

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

                      document.getElementById('ln_user').name = '';

                      document.getElementById('sys_display.ln_user').value = '';

              }

      }

      root.appendChild(cRow);

}

function deleteRow(r) {

      try {

              var table = document.getElementById(r);

              var rowCount = table.rows.length;

              for(var i=0; i<rowCount; i++) {

                      var row = table.rows[i];

                      var chkbox = row.cells[0].childNodes[0];

                      if(rowCount>2){

                              if(null != chkbox && true == chkbox.checked) {

                                      table.deleteRow(i);

                                      rowCount--;

                                      i--;

                              }

                      }

              }

      }

      catch(e) {

              alert(e);

      }

}

[Richard Schmidt]

Hi everyone,

I know this is quite an old post, but I was facing a similar issue recently and I was able to solve this problem with a new approach. I wanted to share my solution in case anyone else encounters the same challenge.

Solution:

I used an approach that takes the value from the first reference field, sets it as a preference, and reloads the modal with this preference. The Jelly script then evaluates the preference (choice sys_id) and populates the GlideRecord for the choice record. This allows us to automatically populate the user's previous selection in the reference field using the sys_id and the display value, while also generating the dynamic reference qualifier for the second reference field.

HTML:

<?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 var="jvar_choiceGR" object="true">
		var choiceGR = new GlideRecord('sys_choice');
		choiceGR.get(RP.getWindowProperties().get('choiceID'))
		choiceGR;
	</g:evaluate>

	<g:ui_form>
		<!-- Category Reference Field -->
		<div class="form-group" style="display: flex; gap: 2rem; align-items: center;">
			<label style="flex-shrink: 0" for="sys_display.category">
				${gs.getMessage("Select Category")}
			</label>
			<g:ui_reference style="width: 100%" name="category" id="category"
				table="sys_choice" query="name=incident^element=category^inactive=false"
				value="${jvar_choiceGR.getUniqueValue()}" displayValue="${jvar_choiceGR.getDisplayValue()}"
				onchange="updateSubcategory(this.value)"/>
		</div>
		<!-- Subcategory Reference Field -->
		<div class="form-group" style="display: flex; gap: 2rem; align-items: center;">
			<label style="flex-shrink: 0" for="sys_display.subcategory">
				${gs.getMessage("Select Subcategory")}
			</label>
			<g:ui_reference style="width: 100%" name="subcategory" id="subcategory"
				table="sys_choice" query="name=incident^element=subcategory^inactive=false^dependent_value=${jvar_choiceGR.getValue('value')}"
				value="" displayValue=""
				onchange=""/>
		</div>
		<!-- Footer action buttons -->
		<div align="right" class="modal-footer">
			<g:dialog_buttons_ok_cancel ok="return onSubmit()" ok_style_class="btn btn-primary"
				cancel="window.GlideModalForm.prototype.locate(this).destroy(); return false"
				ok_text="${gs.getMessage('Update')}" cancel_text="${gs.getMessage('Cancel')}" />
		</div>
	</g:ui_form>
	
</j:jelly>

Client Script:

function updateSubcategory(choiceID) {
	var gm = GlideModal.prototype.get("community_demo"); //This is the name of the UI page
	gm.setPreferenceAndReload(
		{ "choiceID": choiceID }
	);
}