Ok let's give this a go! I have read very little on Fluent honestly, this is very much a 'clueless leading the clueless' to some extent, although I do have a fairly good idea of TypeScript, ReactJS (building web apps).
That said, I've yet to try to dive into the IDE and get anything fully working.... but the below steps should get you started.
- Get yourself the latest PDI - Lets go with Xanadu! We know that supports ReactJS.
- Install the IDE. Navigate to the Application Manager > Search ServiceNow IDE -> Install.
(Yes, PDI's permit the use of the IDE - Install that, it's NOT installed by default) - Open the IDE, create a workspace, then create your application (It'll ask if you wish to use TypeScript or JavaScript - Choose whatever you're most comfortable with, I chose typescript).
Note: TypeScript is worth learning, but IMO the learning curve is a little frustrating. Stick with it, it'll pay off. - Your application will be setup, the IDE will run some automated magic!
- If you're not used to coding in VS Code, and do more 'administrative' tasks, this may be a little steep. It may be wise to take a step back and install VS Code (software locally) and try to build just a simple HTML web page, maybe add AngularJS or ReactJS to the code and get it working then get familiar with VS Code there. Once you've done that, this will make a lot more sense.
- Our codebase needs react installed - Honestly, I couldn't figure out how to run Npm install like I would in a VsCode terminal - So I just copied this into the package.json file (You should see it at the bottom of all the code artifacts).
"@types/react": "19.x",
"@types/react-dom": "19.x",
"react": "19.x",
"react-dom": "19.x"
- Then CTRL + SHIFT + P -> Then choose package manager: install dependencies.
This will install them. It's a bit backward perhaps, typically id run npm install <package name> and it'd show up in this file, but all is well that ends well 😄
I had to refresh the IDE webpage after, for this to take effect. (Again, probably my bad, but it did the job). - Create your files
- In the /src/ folder I created a /client folder.
- Inside this I created 3 files
- In the /src/ folder I created a /client folder.
//App.tsx
import React, { useState } from 'react'
export default function App() {
const [setMyState, myState] = useState('Hey im state!');
//Main reactJS application - We return 'JSX' which is fancy ReactJS code, it'll work its magic and give us Js/HTML that works.
let test = 'helloo';
return (<h1>You got ReactJS Working in ServiceNow, Wooo! {test} </h1>)
}
//index.html:
<html>
<head>
<title>Incident Response Manager</title>
<!-- Initialize globals and Include ServiceNow's required scripts -->
<sdk:now-ux-globals></sdk:now-ux-globals>
<!-- Include your React entry point -->
<script src="./main.tsx" type="module"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
//main.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App'
console.log('Main tsx is running');
const rootElement = document.getElementById('root')
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
}
Then, inside the fluent folder, I added to the already existing 'Index.now.ts' file as we needed a UI page to 'host' the above HTML.
I added this code to the top of that:
import '@servicenow/sdk/global' //Already present, required for compilation I believe.
import { BusinessRule, ClientScript, UiPage } from '@servicenow/sdk/core' //was already present
import { showStateUpdate } from '../server/script.js' //Was already present for other code
import incidentPage from '../../src/client/index.html' //My own addition
//Then added this code further down.
UiPage({
$id: Now.ID['ReactJsTest-page-whateverIwant'],
endpoint: 'x_1457687_myreactj_reactjstest.do',
description: 'Testing ReactJS',
category: 'general',
html: incidentPage,
direct: true,
})
Note:
- The text inside Now.ID[''] can just be a unique string. https://www.servicenow.com/docs/bundle/zurich-application-development/page/build/servicenow-sdk/refe...
- Endpoint has to be prefixed by your scope name
- html: This is pointing to the index.html above, so it's effectively saying 'This UI page, will contain this HTML'.
- NOTE: You wont see the html, if you save/build and navigate to the UI page this creates, there seems to be a 1 way sync for now.
Once compiled, I navigated to the UI page and magic! it worked!
I don't offer this post as a guide, more of a 'random stumble into SDK land', but this should get some of you up and running.
You can then venture into more advanced code (Fetch calls to get data, etc).
There's still plenty of unknowns and I haven't yet formed a full 'mental model' of what is going on behind the scenes, I'll try figure them out and explain them in future blog posts.
Thanks for reading, if you get any issues post in the comments with full code + screen shots please.
We'll try and help 🙂
Cheers
