Using the Http Effect in a Now Experience Component

#Now Experience , #Components , #User Experience , #Framework

Brad Tilton

6 minute read

If you are building Now Experience UI Framework Components, you will probably need your components to interact with the ServiceNow database. To do that from a component, you’ll need to use the Http Effect API. This post will walk through using the Http effect to consume the REST Table API to display the number and short description from the latest incident in a ServiceNow PDI. It may not be the most practical use case, but the goal is to show an easy way to interact with ServiceNow data from a component. If you follow along in your own PDI, you should end up with a beautiful component similar to this one:

component rendered

Prework

The steps in this post assume that you have already been through setting up now-cli. If you have not, you can start here. If you have already set it up, make sure you’re on the current version 17.0.3 by running now-cli --version from your terminal. If you have any issues with setting up your project, connecting to git, or rendering your component, this Now Experience dev blog should be a good resource for you.

I will be walking through this using VS Code, but you should be able to use whichever code editor and command-line tool you wish.

Setting up the project

  1. Create a local directory for your component and navigate to it using your command-line tool.

  2. [Optional] Connect your directory to a git repo.

  3. Connect to your instance using now-cli login --host https://myinstance.service-now.com --method basic --username admin --password admin.

  4. Create and scaffold your new project using now-cli project --name your-project-name-here. My project is named devblog-latest-incident.

  5. Install dependencies using npm i.

You should now have your project scaffolded with your dependencies created, and your directory from step 1 will look something like this (I opened the folder in VS Code):

scaffolding

Building the component: Setup

  1. Open the directory from step 1 of the previous direction in VS Code or something else, and find and open the src > x-85636-devblog-latest-incident > index.js file.

    NOTE: In my example x-85636 represents the x_85636 scoped application prefix and unique company code associate with my instance, so yours will be different. The rest of the name may be different depending on what you named your project in step 4.

    The index.js file should look like this:

    component

  2. Next, we’ll need to install the http effect for your component, which we’ll use to make an http request. Install the http effect by running npm install @servicenow/ui-effect-http -E from the terminal in your component’s directory.

  3. After you’ve done that we’ll import the http effect module into our component by adding the following to the beginning of your index.js file:

    import { createHttpEffect } from '@servicenow/ui-effect-http';

  4. Now we want to be able to call the http effect when our component is bootstrapped, so we’ll need import the COMPONENT_BOOTSTRAPPED lifecycle action into our component by changing:

    import {createCustomElement} from '@servicenow/ui-core';

    to: import {createCustomElement, actionTypes} from '@servicenow/ui-core';

    and adding const {COMPONENT_BOOTSTRAPPED} = actionTypes;

    so the top of your component looks like this:

    component

    NOTE: Before working with Now Experience Components I had not had much exposure to ES6, so this pattern of const { objectProperty } = object was a bit confusing. It’s called object destructuring and this blog post was helpful to me in understanding how it works. I also found this ES5 vs ES6 post helpful in introducing some of the other features/differences.

Building the component: Action handlers

Now that we’ve imported the createHttpEffect and lifecycle action, we’ll need to use action handlers to make our http call and handle the response.

  1. Start by adding the action handlers key actionHandlers: {}, to the component configuration so that it looks like this:

    action handlers

  2. Now we’re going to add three action handlers the the actionHandlers key.

    1. First, we’ll add the component lifecycle action handler:

      [COMPONENT_BOOTSTRAPPED]: (coeffects) => {
    const { dispatch } = coeffects;

    dispatch('FETCH_LATEST_INCIDENT', {
        sysparm_limit: '1',
        sysparm_query: 'ORDERBYDESCnumber'
    });
},

      Here we are using the dispatch function to emit our FETCH_LATEST_INCIDENT action with our query parameters.

    2. Now we’ll need to add an action handler for the FETCH_LATEST_INCIDENT action from the previous step that will use the Http Effect API to make an HTTP request to the instance:

      'FETCH_LATEST_INCIDENT': createHttpEffect('api/now/table/incident', {
    method: 'GET',
    queryParams: ['sysparm_limit','sysparm_query'],
    successActionType: 'FETCH_LATEST_INCIDENT_SUCCESS'
}),

      For this exercise we’re only dispatching an action when the HTTP request has successfully completed.

    3. Lastly, we’ll add an action handler for the FETCH_LATEST_INCIDENT_SUCCESS action:

      'FETCH_LATEST_INCIDENT_SUCCESS': (coeffects) => {
    const { action, updateState } = coeffects;
    const { result } = action.payload;
    const { number, short_description } = result[0];

    updateState({ number, short_description });
}

      Here we are handling the success action by using the updateState helper function to update the component’s state with the number and short description from the response payload.

    All together, your three actionHandlers should look like this:

    completed action handlers

Building the component: The View

So far we’ve imported resources, executed our HTTP request, and updated our component’s state with the response, but what do we do with the data? We need to update our component’s view to display the data.

  1. We’ll start by retrieving the number and short description from the component state. Add the following inside the view, but before we return the empty dev tags:

    const { number = 'Loading number', short_description = 'Loading short description'} = state;

    Object destructuring allows us set default values if the destructured object doesn’t have the property specified in the destructuring assignment. In our case, the component is displayed initially before the http call take place so we’re setting some default values that will show while we’re waiting for a response.

  2. Now we’re going to build out the html that will display our data:

    return (
    <div>
        <h2>Latest Incident</h2>
        <p>{number} - {short_description}</p>
    </div>
)

    You can see here that we’re using JSX and wrapping our data in curly braces to display it.

Rendering the completed component

At this point, our component code should look like this:

completed component code

Now you can run now-cli develop -o in your terminal to render your component in a new tab in your default browser. It should look something like this with the number and short description of the most recently created incident in your PDI.

component rendered

Other Component Building Resources

Comments