Hi @Ujjwal1 ,
To create a simple widget in ServiceNow where a user can select a record from the sys_user table, you can use ServiceNow's widget editor and a combination of server-side and client-side scripts to query the sys_user table and display the results in a dropdown (or list). Here’s a step-by-step guide to achieve that:
Step 1: Create a New Widget
- Navigate to Service Portal > Widgets.
- Click on Create a new widget.
- Name your widget (e.g., "User Selector Widget").
Step 2: Widget Code (Server-side & Client-side)
The widget consists of HTML, Client Script, and Server Script.
HTML Template
This will display a dropdown with a list of users fetched from the sys_user table.
<div class="user-selector-widget">
<label for="userSelect" class="select-label">Select User:</label>
<select id="userSelect" ng-model="c.data.selectedUser" ng-options="user.sys_id as user.name for user in c.data.users" class="select-dropdown">
<option value="" disabled selected>Select a user</option>
</select>
<p class="selected-user">Selected User: {{c.data.selectedUser}}</p>
</div>CSS-
This will enhance your field design.
.user-selector-widget {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 20px auto;
text-align: center;
}
.select-label {
font-size: 18px;
color: #333;
margin-bottom: 10px;
display: block;
}
.select-dropdown {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s;
}
.select-dropdown:focus {
border-color: #4a90e2;
outline: none;
}
.selected-user {
font-size: 16px;
color: #555;
margin-top: 15px;
}
Client Controller Script
This script will bind the user selection and update the selected user value dynamically.
api.controller=function($scope) {
$scope.$watch('c.data.selectedUser', function(newValue, oldValue) {
if (newValue) {
console.log('Selected User:', newValue);
}
});
};Server Script
This script fetches the user records from the sys_user table and passes the data to the client-side for display.
(function() {
// Query the sys_user table for all active users
var userGR = new GlideRecord('sys_user');
userGR.addActiveQuery(); // Only fetch active users
userGR.query();
var users = [];
while (userGR.next()) {
users.push({
sys_id: userGR.getValue('sys_id'), // sys_id for the user
name: userGR.getValue('name') // Full name of the user
});
}
// Pass the users array to the client-side
data.users = users;
})();
Output Result:
If this solution worked for you, please consider marking the answer as correct or helpful. It encourages us to continue providing support and helps others find the solution more easily.
Thank you! 😊
Moin
Hello @Ujjwal1
Please follow the steps to create a widget with dropdown referencing to sys_user table and filter the record with active=true.
Navigate to service portal -> Service Portal Configuration ➚ -> widget editor -> create new widget and also create test page if required.
Open widget in widget editor to write the code.
Include the script in Html section
<div>
<!-- your widget template -->
<label for="user-lookup">Select Active User</label>
<select ng-model="c.selectedUser" ng-options="user.sys_id as user.name for user in data.activeUsers">
<option value="">-- Select a User --</option>
</select>
<p>selectedUserSys_Id: {{c.selectedUser}}</p>
</div>Client script:
api.controller=function($scope) {
/* widget controller */
var c = this;
c.selectedUserSys_Id="";
};Server script:
(function($sp) {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.activeUsers = [];
data.table = 'sys_user';
var gr = new GlideRecord(data.table);
gr.addQuery('active', true);
gr.query();
while (gr.next()) {
data.activeUsers.push({
sys_id: gr.getValue('sys_id'),
name: gr.getValue('name')
});
}
})();Preview the result
"If you found my answer helpful, please give it a like and mark it as the accepted solution. It helps others find the solution more easily and supports the community!"
Thank You
Juhi Poddar
