Blog

Whereas with AngularJS, ServiceNow provided an online IDE for widget development, at the moment the only way to build a ReactJS application for ServiceNow is to work offline. Once built, your ReactJS file can be deployed to ServiceNow as a packaged application.

There are pros and cons to this approach. On the positive side, ReactJS applications can be deployed with little to no overhead from ServiceNow, making them astonishingly fast and scalable. The only con is you need your own Node JS environment and ReactJS development platform.

Why Use ReactJS?

Why would anyone develop a ServiceNow application with ReactJS?

The answer is:

• ReactJS is an industry standard and so there is a vast pool of experienced web developers to draw upon
• ServiceNow provides a highly-scalable platform for ReactJS
• ServiceNow has built-in granular data security and APIs to manage data access
• ServiceNow is extremely efficient at workflow management and integration supporting ReactJS

Rather than building and managing a full-stack service platform for a ReactJS app, your app can be deployed quickly and easily through ServiceNow. Given the amount of effort and due-diligence required to operate a full-stack service at an enterprise level, ServiceNow provides a convenient shortcut.

When it comes to ReactJS, ServiceNow is effectively operating as PaaS (Platform as a Service). Think of your ReactJS app as a beautifully designed architectural home. ServiceNow allows you to position it as a penthouse suite without the need to worry about the rest of the building beneath it.

Creating A ReactJS Application

We’re going to create a nice simple ReactJS application listing contact details.

I recommend using the Code Sandbox for ReactJS applications as it is easy to use and provides an instant preview of your work.

To keep things simple, I’m going to use the ServiceNow REST API for Tables as my data access point.

Once you’ve signed into the Code Sandbox you’ll be assigned to one of their temporary virtual servers. The first time you run the code below it will fail because of cross-origin resource sharing restrictions (CORS).

If you look at the console log, you’ll find your temporary virtual server name. From there, you can set up a CORS exception that will allow access to your instance. Once that is in place, the application will work properly.

Without getting into too much detail, about how ReactJS works, we’re going to set up two files, our core Apps.js and contacts.js. We’re going to create a new folder called components to hold our contacts.js template.

Notice how when I hover over the line src folder in the Code Sandbox I get options for a new directory and a new file. This is how I added /components/contacts.js

Let’s look at the code used to retrieve contacts from ServiceNow and display them using ReactJS.

App.js

import React, { Component } from "react";
import Contacts from "./components/contacts";

class App extends Component {
  render() {
    return <Contacts contacts={this.state.contacts} />;
  }

  state = {
    contacts: []
  };

  componentDidMount() {   
    //this is a sample web service you can test with
    //fetch('https://jsonplaceholder.typicode.com/users',{
    fetch(
      "https://{your-instance}.service-now.com/api/now/table/sys_user?sysparm_query=emailENDSWITH{your-email-suffix}",
      {
        withCredentials: true,
        credentials: "include"
      }
    )
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.setState({ contacts: data.result });
      })
      .catch(console.log);
  }
}

export default App;

As you can see, our Apps.js file refers to /components/contacts to get an HTML/ReactJS template. It also includes a simple REST call (fetch) that uses the ServiceNow Table API to retrieve information from ServiceNow.

To get this example to work, you’ll have to replace…

• {your-instance} with your ServiceNow instance name
• {your-email-suffix} with your organisation’s email suffix (ie, gmail.com, etc)

contact.js is our HTML/ReactJS template. It takes the data retrieved from the fetch and formats it for display. It’s pretty straight-forward and intuitive to read.

contact.js

import React from "react";

const Contacts = ({ contacts }) => {
  return (
    <div>
      <center>
        <h1>Contact List</h1>
      </center>
      {contacts.map((contact) => (
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">{contact.name}</h4>
            <h5 class="card-subtitle mb-2 text-muted">
              Email: {contact.email}
            </h5>
            <h6 class="card-text">UserID: {contact.user_name}</h6>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Contacts;

That’s it.

That’s a ReactJS application.

At this point, your ReactJS application should work. If it doesn’t, look carefully at the console log in your browser and check you’ve completed the steps listed above.

Deploying A ReactJS Application

ReactJS applications need to be packaged and deployed.

Code Sandbox integrates with Netlify to provide online packaging and deployment.

The deployment may take a few minutes.

Make sure you have a Netlify account (I use my GitHub account for all of these services so everything is centralized)

Once you’ve signed into Netlify, Click on the little download arrow to get your package ready for deployment to ServiceNow.

Deploying on ServiceNow is simple enough, but it is a little bit of a hack.

This advice may change over time as ServiceNow develops its offering further, but the sanctioned approach at the moment is to deploy ReactJS as stylesheets.

The reason for this is style sheets are resources that can be accessed without authentication. In essence, you separate your JS and CSS into different stylesheets and then reference them from an HTML page (such as a UI page or a portal widget). So long as ReactJS is listed as a dependency for that page, it’ll load in the background, recognize your React JS in the stylesheet and run accordingly.

For more detail on ReactJS deployment in ServiceNow, please refer to:

• ReactJS Applications in ServiceNow
• ReactJS in ServiceNow

Have fun and happy coding!