About a year ago I posted an article about building a ServiceNow reference field with React. That is a good proof of concept how to use React components to implement the most complex ServiceNow field type.

Today, I have a new version of that component available, which is a bit simpler, more efficient and robust:

Effectively works with thousands of records

Interactive real-time filtering, infinite scrolling

Can be easily modified to address custom requirements and styles

~130 lines of code

How to install and run examples locally

Clone the repo https://github.com/elinsoftware/sn-fields-example Run npm install Update ./webpack/servicenow.config.js with the ServiceNow instance name, user name and password - this is required to run the app locally Run npm start The application will be available at http://localhost:9000/

You can find a component implementation in reference-field.js . It is based on react-window and react-window-infinite-loader and can be easily modified to address required styles, additional functionality etc.

Example of how to use the component:

<ReferenceField

table="sys_user"

primaryField="name"

secondaryField="email"

placeholder="Select a user..."

onChange={handleUser}

icon="diagram-tree"/>

API:

table — ServiceNow table to pull records from

primary field — primary field to be used for filtering

secondary field — secondary field to display in the list

placeholder — text to display when nothing selected yet

onChange — function to be triggered when a record selected

icon — blueprintjs icon name (https://blueprintjs.com/)

ServiceNow Dropdown field component

In addition to a reference field component, the repo contains a simple ServiceNow dropdown component:

Based on ServiceNow Table API

Can be easily modified to address custom requirements and styles

~30 lines of code

Dropdown component implemented in dropdown-field.js . It is a simple implementation with no particular dependencies, except of axios (http calls) and blueprintjs (styling).

Example of how to use the component:

<DropDownField

table="task"

field="state"

placeholder="State"

icon="diagram-tree"

onChange={handleChoice}/>

API: