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:
- Very little or no control over styling
- Only ServiceNow tables supported
- 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.
- Async data load, infinite scrolling, pagination
- Any data source can be used, not just ServiceNow tables
- 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.
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…