How to dynamically set reference qualifier to the reference field on ui page in ServiceNow

[akshaychavan]

I’m working on a custom UI Page in ServiceNow where I need to dynamically filter the options shown in a reference field based on the selection made in another reference field.

🔹 Scenario:

• I have two reference fields:

  1. Assignment Group (vi_assignment_group) — referencing sys_user_group
  2. Assigned To (vi_assigned_to) — referencing sys_user

• Goal:
  When a user selects an Assignment Group, the Assigned To field should only show active users who belong to that selected group.

What I’ve Tried:

🔹HTML Code:

<div id="assignment_group" class="row form-section form-group">
    <label class="control-label col-xs-12 col-md-3">
        <span style="display:inline" class=""></span>
        <span class="label-text">${gs.getMessage('Assignment group')}</span>
    </label>
    <div class="col-md-9">
        <input type="hidden" name="assignmentType" id="assignmentType" value="2"></input>
        <g:ui_reference 
            name="vi_assignment_group" 
            id="vi_assignment_group" 
            table="sys_user_group" 
            query="type=null^ORtype=1cb8ab9bff500200158bffffffffff62^EQ" 
            completer="AJAXTableCompleter" 
            onChange="onAssignmentGroupChange()" 
        />
    </div>
</div>

<div id="assigned_to" class="row form-section form-group">
    <label class="control-label col-xs-12 col-md-3">
        <span style="display:inline" class=""></span>
        <span class="label-text">${gs.getMessage('Assigned to')}</span>
    </label>
    <div class="col-md-9">
        <g:ui_reference 
            name="vi_assigned_to" 
            id="vi_assigned_to" 
            table="sys_user" 
            query="active=true" 
        />
    </div>
</div>

🔹 Client Script:

function setAssignedToFilter() {
  var groupSysId = gel('vi_assignment_group').value;
  var userLookup = gel('lookup.vi_assigned_to');

  if (!groupSysId) return;

  var query = "active=true^user_group=" + groupSysId;

  userLookup.setAttribute(
    'onclick',
    "mousePositionSave(event); reflistOpen('vi_assigned_to', '', 'sys_user', '', 'false', '', '" + query + "')"
  );

  $j('#vi_assigned_to').val('');
  $j('#sys_display.vi_assigned_to').val('');
}

• I used the setAttribute('onclick', ...) method to dynamically set the reference qualifier using reflistOpen().

🔹 I confirmed that the query being generated is correct (e.g., active=true^user_group=974511c287eabcd4939643f80cbb35ff), and it works fine when used directly in a filter.

🔹Issue:

Despite setting the onclick dynamically, the Assigned To field still shows all active users, not just those from the selected group.

🔹What I Need Help With:

• Is the setAttribute('onclick', ...) approach correct for UI Pages?
• Is there a better or more reliable way to dynamically apply reference qualifiers in Jelly-based UI Pages?
• Are there any known limitations or additional steps required to make this work?

[akshaychavan]

Note: The Client Script function name should be "onAssignmentGroupChange", but it was mistakenly modified.

[Ankur Bawiskar]

@akshaychavan 

I shared solution many years ago for this, check that and enhance

Change ui reference query 

If my response helped please mark it correct and close the thread so that it benefits future readers.

[akshaychavan]

Hi @Ankur Bawiskar , 
I used only yours approach in this code, but still, it's not working. Please check my script and suggest me accordingly.
Regards,
Akshay

[Ankur Bawiskar]

@akshaychavan 

it has worked fine, somewhere you must have done some mistake about the html id, name etc

please compare

If my response helped please mark it correct and close the thread so that it benefits future readers.