ServiceNow web applications — playing with a reference field

Reference field is a key functionality for many ServiceNow applications. Especially when it comes to custom web apps and Service Portal.

You can add a reference field to your Service Portal widgets with <sn-record-picker> directive, which is explained in details here. But that comes with some limitations:

1. Very little or no control over styling
2. Only ServiceNow tables supported
3. No control over user behavior, no control over the directive implementation

Аs a proof of concepts we decided to implement record picker functionality on React, so you can take full control of the implementation code. Nick Baliesnyi did a great job and found the most appropriate and simple solution design.

You can test the functionality here. And if you want to play with React code or contribute — you can check out GitHub repository.

Key features:

1. Async data load, infinite scrolling, pagination
2. Any data source can be used, not just ServiceNow tables
3. Full control over styling, user behavior, and overall implementation

The most interesting part is that the core logic implementation contains less than 100 lines of code. And there is NO Service Portal or ServiceNow code.

The implementation based on react-select and react-select-async-paginate libraries, so you can imagine what options and features can be available for your ServiceNow applications:

Here is another ServiceNow demo which shows different options, styles and UI controls:

The key idea for this reference field (record picker) implementation was to show how you can utilize React components for ServiceNow applications and create complex functionality with just a few lines of code.

Stay tuned for more React in ServiceNow content…