Stumbling around in the IDE - ReactJS running in ServiceNow - Part 4 – Wrap up

[ChrisF323949498]

I was going to finish coding the ‘Dashboard’ we created in the part 3 of this series but I think its more useful to share some general findings and thoughts than to just add code which you can no doubt write yourself.

So a few wrap up take aways

1. Our reactJS app is rendered in a UI Page, so we’re essentially ‘client side’ so things like accessing the window URL will work, but you can’t access things like gs.addInfoMessage() etc.

console.log('URL:' + window.location.toString());​

• As above, since we’re ‘client side’ data calls will use a form of ‘fetch’.
  1. To authenticate this API Call, we do get access to the users Token, so you can pass that in to authenticate the user. E.g:

declare global {
  interface Window {
    g_ck: string;
  }
}

const response = await fetch(`/api/now/stats/${tableName}?${searchParams.toString()}`, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'X-UserToken': window.g_ck,
      },
    });

1. Most of your typical ReactJS code works as you’d expect.
   1. Import your react library code:
      1.  

  import React, { useState, useEffect} from 'react';

• Async/Await functions -  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
  
  
• Conditional rendering in React:

  {error && (
<div className=”myError”>{error} </div>
)}​

• Console.log – always handy to log something quickly!
  
  
• It’s Javascript, so your typical array map() methods, typeof, etc are of course avail.

const array = [1, 4, 9, 16];

// Pass a function to map
const mapped = array.map((x) => x * 2);

• CSS
  •  You can collocate your .css files next to your .tsx files, then import that CSS into it.
    E.g.

import './IncidentList.css'

• from one of your files in the same folder – Then within that CSS file, your standard css: 

.active {
display: flex;
background-color: #2196f3;
gap: 8px;
}​

Unfortunately no CSS Modules yet.

For learning react, check out https://react.dev/learn/thinking-in-react - I'd pay special attention to State, I found this confusing at first (e.g. 'Why didn't it immediately update in my UI?') 

In general, ReactJS isn't embedded into ServiceNow like AngularJS is (with your server script boxes, etc) but I suspect we'll see more around this in the future, or at least I hope so! 😉

Other Useful links:

1. Specifically about React and SN IDE. https://www.servicenow.com/docs/bundle/yokohama-application-development/page/build/servicenow-sdk/co...
   
   
2. Fluent API: https://www.servicenow.com/docs/bundle/yokohama-application-development/page/build/servicenow-sdk/re...

Happy coding!