1. Set Up Data Relationships
a) Table to store reasons
Create or identify the table that holds your “reason for visit” entries. If you’re using the out-of-the-box Walk-Up Experience (the sn_walkup tables), confirm that each reason includes a field that indicates whether it’s IT, HR, or Finance. This could be a reference field to a “Department” table, a choice field, or something similar:
Reason Table (e.g., sn_walkup_reason)
------------------------------------
Label Department
--------------------
Password Reset IT
Onboarding HR
Budget Query Finance
Hardware Issue IT
...
b) Additional Data
If the second dropdown is, say, location or staff, you might also store department references for them. Or if you want to keep it more flexible, you can add another table or field that associates these items to IT, HR, or Finance.
2. Building the Widget or Page
Because you’re customizing the Walk-Up portal, you’ll likely create a custom widget in Service Portal to handle the logic of displaying the buttons and driving the next two dropdowns.
a) Three Buttons
In your widget HTML, set up three buttons:
<div>
<button class="btn btn-primary" ng-click="c.selectDepartment('IT')">IT</button>
<button class="btn btn-primary" ng-click="c.selectDepartment('HR')">HR</button>
<button class="btn btn-primary" ng-click="c.selectDepartment('Finance')">Fin</button>
</div>
Each button calls a function, selectDepartment('IT'), etc., passing in which department was selected.
b) Dropdowns
Then, under those buttons, place your two dropdowns:
<div>
<label for="usernameSelect">Enter your name or email</label>
<select id="usernameSelect" ng-model="c.data.selectedUser" ng-options="user.sys_id as user.name for user in c.data.userList">
<option value="">--Select--</option>
</select>
</div>
<div>
<label for="reasonSelect">Select reason for visit</label>
<select id="reasonSelect" ng-model="c.data.selectedReason" ng-options="reason.sys_id as reason.label for reason in c.data.reasonList">
<option value="">--Select reason--</option>
</select>
</div>
The idea is that c.data.reasonList will change dynamically depending on which department was selected.
3. Client Controller Logic
In your widget’s client controller (the Angular/Service Portal side), you’d have something like:
function($scope, $rootScope, spUtil, $http) {
var c = this;
// This function is called when a user clicks on one of the department buttons
c.selectDepartment = function(dept) {
c.data.selectedDepartment = dept;
c.server.update(); // This calls the server script below, passing in the selected dept
};
}
4. Server Script to Dynamically Filter
The Server Script portion of your widget is where you can use GlideRecord or sn_walkup APIs to fetch only the reasons that match the chosen department:
(function() {
if (input && input.selectedDepartment) {
var dept = input.selectedDepartment;
// 1. Query your reason table
var grReason = new GlideRecord('sn_walkup_reason');
grReason.addQuery('u_department', dept); // or however your department field is named
grReason.query();
var reasons = [];
while (grReason.next()) {
reasons.push({
sys_id: grReason.getValue('sys_id'),
label: grReason.getValue('label') || grReason.getValue('name') // whichever field you use
});
}
// 2. Return the filtered reason list
data.reasonList = reasons;
}
})();
data.reasonList is returned to your client controller, so your dropdown <select> can display only the relevant items
You can do the same process for the second dropdown if you want that to be filtered as well. For example, once a user picks an IT reason, you could run a second query that filters relevant staff or location. That might mean hooking into the onChange of the first dropdown (selected reason) to do a second c.server.update().
Please mark it helpful
thank you
Sundaram
https://www.linkedin.com/in/sundaram-s-454718156/
