Building ServiceNow forms with React

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
  1. Clone the repo https://github.com/elinsoftware/sn-fields-example
  2. Run npm install
  3. Update ./webpack/servicenow.config.js with the ServiceNow instance name, user name and password - this is required to run the app locally
  4. Run npm start
  5. 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:

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/)

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:

API:

  • table — ServiceNow where the dropdown defined
  • field — ServiceNow field name
  • placeholder — text to display when nothing selected yet
  • icon — blueprintjs icon name https://blueprintjs.com/
  • onChange — function to be triggered when option selected