UI Builder - Client Script [Need assistance]

Hi All,

Requirement: When a user selects the application in the typeahead component then all the associated delegated developers should be listed in the stylized text or simple list component.

Reference blog: https://developer.servicenow.com/blog.do?p=/post/quebec-ui-builder-client-scripts/

Implementation details

Client state parameter: To hold the encoded query for the delegated developers to be queried from sys_user table

Script Include: To fetch the delegated developers sys_ids from the sys_user table

function include({imports}) { 
	return{
		getScopePermissionSetRoleAssignments: function(app_name){
			var arrUsers = [];
			var grScopePermissionRoles = new GlideRecord("sys_scope_permission_set_role_assignment");
			grScopePermissionRoles.addQuery("scope.name",${app_name});
			grScopePermissionRoles.query();
			while(grScopePermissionRoles.next()){
				var grUserRole = new GlideRecord("sys_user_has_role");
				grUserRole.addQuery("role",grScopePermissionRoles.role);
				grUserRole.query();
				while(grUserRole.next()){		
					arrUsers.push(grUserRole.user.sys_id.getDisplayValue());
				}
			}
			var arrUtil = new ArrayUtil();
			var arrDistinctUsers = arrUtil.unique(arrUsers);
			var listUsers = arrDistinctUsers.toString();
				
			return listUsers;
		}
	};
}

Client Script: Format the encoded query that needs to be passed in the simple list component or to be displayed in the stylized text for debugging purpose.

Sample one: sys_idIN65ced4221b4ad118728a7669cc4bcb74,25de1c221b4ad118728a7669cc4bcbaa,06c5ce4ddbd3f7004868776b8c96197f

function handler({api, event, helpers, imports}) {
    const sys_scope = api.elements.typeahead_1;
    const {getScopePermissionSetRoleAssignments} = imports['x_iem_xom_ws_manag.GetDelegatedUsers']();
    const userQuery = `sys_idIN${getScopePermissionSetRoleAssignments(sys_scope)}`;
    api.setState('delegated_developers',userQuery);
}

Typeahead: That invokes/executes the client script when a item selected from the typeahead component.

Stylized text component: Has a data binding to the client state parameter.

List - Simple component: has filer property data binding to client state parameter

Test Results

Client state parameter value doesn’t change. Seems client script is not invoked.

Could you please help me with this.

Thanks,

Raghu