Creating Dropdown Menus in ServiceNow Service Portal Widgets: A Complete Guide

Dropdown menus are essential UI components that allow users to make a selection from a list of options. In ServiceNow’s Service Portal, customizing widgets to include dropdowns enhances user interaction and streamlines data input. However, implementing dynamic or static dropdown fields inside a widget can sometimes be confusing, especially for developers unfamiliar with AngularJS in the Service Portal framework.

This guide provides a step-by-step walkthrough for adding and managing dropdown fields within Service Portal widgets. We’ll cover how to define dropdown options, bind them using AngularJS, handle selection changes, and pass values between client and server scripts. This approach ensures a smooth and efficient development experience within the ServiceNow environment.

1. Static Dropdown Creation in HTML

To begin, a simple static dropdown can be created directly in the widget’s HTML template. Here's a straightforward example:

<select id="mySelect" class="dropdown" ng-model="c.data.personalDetail.LevelOfAccess" required>
  <option value="none" selected>None</option>
  <option value="admin">Admin</option>
  <option value="user">User</option>
</select>

In this example:

• The dropdown is assigned to the LevelOfAccess property of the personalDetail object using ng-model.

• The default option is set to "None" using the selected attribute.

• Options are hard-coded for quick use cases.

  
  

This method is effective for simple, static dropdowns without requiring additional scripting logic.

2. Dynamic Dropdown Using ng-options and AngularJS

For dynamic dropdowns, especially when options may change or need to be reused, it's better to define them in the client script and bind them via ng-options.

Client Script:

// Define dropdown options
c.options = [
  { name: 'None', value: 'none' },
  { name: 'Admin', value: 'admin' },
  { name: 'User', value: 'user' }
];

// Optionally set the default selection
c.data.personalDetail = {};
c.data.personalDetail.LevelOfAccess = c.options[0];

HTML Template:

<select id="mySelect"
        ng-model="c.data.personalDetail.LevelOfAccess"
        ng-options="option.name for option in c.options"
        required>
</select>

In this approach:

• The dropdown options are declared in the c.options array.

• ng-options dynamically creates the dropdown options based on the array.

• The ng-model binds the selected option to LevelOfAccess.

  
  

3. Capturing Selected Dropdown Value in Server Script

To use the selected value in the server script, trigger c.server.update() and reference the bound model.

Client Script (with ng-change):

<select id="mySelect"
        ng-model="c.data.personalDetail.LevelOfAccess"
        ng-options="option.name for option in c.options"
        ng-change="c.server.update()"
        required>
</select>

Server Script:

if (input && input.personalDetail && input.personalDetail.LevelOfAccess) {
  var selectedAccess = input.personalDetail.LevelOfAccess.value;
  // Use selectedAccess in business logic
}

This structure enables full client-server communication, allowing you to trigger logic based on the user’s selection.

4. Additional Use Cases

• Multi-Select Dropdown: You can use <select multiple> and adjust your model to support arrays.

  
  

• Concatenating Dropdown Values: Retrieve multiple selections in client script and concatenate them for use in fields like short_description.

  
  

var concatenated = c.data.option1 + ' - ' + c.data.option2;
c.data.shortDescription = concatenated;

• Populating Dropdown from Server: If your dropdown values need to come from a table (e.g., user roles), retrieve them in the server script and assign them to data.users, then use ng-repeat or ng-options in HTML.

  
  

Conclusion

Implementing dropdowns in ServiceNow Service Portal widgets enhances interactivity and user experience. Whether your dropdown is static, dynamic, or populated from the server, ServiceNow provides flexible tools through AngularJS integration to support various use cases.

Key Takeaways:

• Use ng-model to bind dropdowns to data objects.

• Use ng-options with structured arrays for dynamic lists.

• Utilize ng-change with c.server.update() to pass selected values to server scripts.

• Handle data logically on both client and server sides for robust widget functionality.

  
  

Next Steps:

• Start by experimenting with static dropdowns, then migrate to dynamic arrays for flexibility.

• Integrate server-side logic to make your dropdowns context-aware.

• Explore multi-select configurations and real-time filtering for advanced implementations.

  
  

By mastering these techniques, developers can create intuitive and responsive interfaces that align with business needs within ServiceNow’s Service Portal.