React applications in ServiceNow Service Portal
Modern web development gains its momentum on the ServiceNow platform. In recent months I’ve seen several complex and advanced ServiceNow projects went live in production with custom UI built in React. This is a huge step forward for the ServiceNow development community, which brings a whole new level of possibilities for creating fantastic user experience in ServiceNow applications.
Recent articles about building ServiceNow apps with React:
- How to build ServiceNow applications with React
- How to access ServiceNow data from React app
- Modern web development in ServiceNow (K19 session video)
- React apps in ServiceNow — risks and concerns
However, bringing modern web development concepts into ServiceNow might be a tough choice for company management who run ServiceNow practice. Especially when the entire practice was built around Service Portal and its out-of-the-box components and capabilities. In many cases, it is just too expensive (from time and money perspective) to replace or rebuild existing Service Portal applications with React.
The solution may sound skeptical from a technical standpoint, but it works: start React adoption making small steps and blend Service Portal with React components.
Service Portal widgets are kind of isolated containers and can be a right place where to put your React application. This approach allows you to inject React-based UI/UX into Service Portals without significant changes (or no changes at all ) to the existing Service Portal pages/functionality. The approach is less performance efficient comparing to a pure React app, but it works well.
React application as a Service Portal widget
Putting your React app into a Service Portal widget is a simple and straightforward process.
The most important thing to keep in mind: you need to get and store a session token BEFORE the browser parses React javascript bundle.
Let’s assume that our React app includes just two files (JS and CSS), and their code stored in Style Sheets: js-bundle.js (sys_id=’dbe94654db868c900a48b3d0ef961942’) and css-bundle.css (sys_id=’49b90654db868c900a48b3d0ef96193c’).
The widget which serves as a container for our React app will look like this:
1. HTML Template
Here we load CSS file immediately once the widget loaded. Notice that there is no reference to Javascript file, and that is on purpose. We cannot (should not) load Javascript bundle until session token is defined, because React application won’t be able to send REST requests. So we need to wait until the server script identifies a session token.
2. Server Script
Just a few lines of code to grab a session token. It may look redundant (calls for two different APIs to grab a token), but again — that’s on purpose, to make sure the same code works in a global and custom scopes. Once we have a session token — we pass it to a Client Script.
3. Client Script
Client script code is a bit tricky but simple.
Fist, we store a session token as a window object property. So React application can get if from there and use for REST calls. Storing/passing data through the browser window object is a common approach for ServiceNow, e.g. check NOW object in a browser console.
Second, we dynamically create <script> tag and mount it into DOM. The browser automatically loads and executes Javascript bundle, which initializes our React app. By the time we’re doing that, the session token is already available, and React application has access to it through window object.
That’s it. Now you can run your React application as a Service Portal widget.
Building ServiceNow apps with React
One of the key benefits of building ServiceNow applications with React or any other modern web development framework is a development community and a vast number available resources — component libraries, app templates, tools, tutorials/courses/books etc. All of that makes ServiceNow development process more robust, less risky and provides unlimited possibilities for UI/UX improvements.
Building a ServiceNow application with a user interface like this required a lot of time and efforts a few years ago:
Today, it’s a matter of hours with such component libraries like Blueprint or Ant.Design
