Displaying Virtual Agent widget depending on User properties (company, department, etcetera)

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

Out-of-the-box the Service Portal Virtual Agent widget is always shown on the Service Portal ones you've added it to the header/footer/a certain page. You could have the topics shown conditionally, for example depending on User properties. Though what if you would like to display the Service Portal Virtual Agent widget conditionally, depending on User properties? For example, displaying the whole widget for Users with Department HR, though not for other users (and where all users use the same Service Portal)?

Basic thought

So could we display/hide the Service Portal Virtual Agent widget based on the department of the current logged in user? For example only for the users with department "HR"?

If we look at the out-of-the-box Service Portal Virtual Agent widget, we could add a condition (ng-if) to the first div element in the Body HTML Template. The ng-if should then dynamically be set, based on the Server Script or the Client controller. Because user data like company/department/cost center don't change that often, we'll go for Server Script. Within the Server Script we could query the user record, to find out which department the user belongs to and if this matches our criteria. If the department matches, a property will be set which we could use in the ng-if in the Body HTML Template.

Clone and edit widget

First, we would need to clone and the out-of-the-box Service Portal Virtual Agent widget. You could do this from the Platform UI, though also through the Widget Editor.

Server Script

Let's first set up the Server Script. Basically, we would need to query the user record. Which department does the current logged in user have?

gs.getUser().getRecord().getDisplayValue('department')

Additionally, we would need to match the department of the user. In this example, does the user's department match "HR"?

if(gs.getUser().getRecord().getDisplayValue('department') == 'HR') {
	...
}

Additionally, this should be set as a usable property for the ng-if in the Body HTML Template.

var user_property_match = false;
if(gs.getUser().getRecord().getDisplayValue('department') == 'HR') {
	user_property_match = true;
}		   
data.user_property_match = user_property_match;

Body HTML Template

Within the first div element in the Body HTML Template now we only need to add a ng-if which checks on data.user_property_match.

ng-if="data.user_property_match"

Service Portal

Don't forget to replace/add your new cloned and edited widget to your Service Portal 😀.

Result

When logged in as a user with has HR set as department, the Service Portal Virtual Agent widget will be displayed on the Service Portal. When logged in as a user which hasn't got HR set as department, the Service Portal Virtual Agent widget will not be displayed on the Service Portal.

Obviously, you might want to think of a more flexible way. What if you want to check on a different department? Or multiple departments? Or not a department, though a company instead? Also, this example contains a hardcoded display value that you might want to avoid.

All possible 😀. This is just an example of how to display the Service Portal Virtual Agent widget dynamically based on user properties.

---

And that's it. Hope you like it. If any questions or remarks, let me know!

Kind regards,

Mark Roethof

ServiceNow Technical Consultant @ Quint Technology

1x ServiceNow Developer MVP

1x ServiceNow Community MVP

---

LinkedIn