UI Builder - Client Script [Need assistance]

[Community Alums]

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

[Community Alums]

@Ankur Bawiskar  @Aman Kumar S 

Could you please help with this one.

[Community Alums · Accepted solution]

Hi All,

I've logged the logs to the console and then faced below error wrt UI Script Include. 

to string methodTypeError: Cannot destructure property 'getScopePermissionSetRoleAssignments' of 'imports.x_iem_xom_ws_manag.GetDelegatedUsers(...)' as it is undefined. in servicenow

Not very sure whether GlideRecord is supported in UI Script Includes or am I using the syntax wrongly for other script statements when specific to UI Script Includes.

Debugging tips in UI Builder (ServiceNow - Now Experience)

UI BUILDER - DATA RESOURCES

So, I removed this client script/script include and created Transform Data Resource.

Passed the client state parameter to the Data Resource:

Update the client state parameter from the typeahead component event handle:

Finally the data resource output is referred in the simple list component.

Magic worked.

Thanks,

Raghu