ServiceNow UI Framework ‘101’ — Getting Ready

This blog is about getting started with development of ServiceNow UI Components , framework is built on React so it requires prior knowledge of JavaScript and React to completely understand code.

It will help you with setting up your machine with necessary tools required to kick start your ServiceNow ‘Awesome’ Framework journey.

Tools Needed:

1. Visual Studio Code (or your favorite editor)
2. Npm (Download and install it from here)
3. Node(Download and install it from here )
4. now-cli

These tools enable you to develop and build components locally and deploy them to your instance. Once you have node and npm installed.

To Install the Now® Experience CLI.

1. Open your system’s command line tool.
2. Execute the following command.

npm install --global @servicenow/cli@orlando

To see a list of CLI commands, run

now-cli --help

After now-cli is installed ,create a new folder in your machine. This directory will store all dependencies and your custom components.

Open it using visual code

Open terminal using Ctrl + ~ in VS Code

3. To connect to your instance, open your system’s command line tool (terminal) and run:

now-cli login --host http://myinstance.servicenow.com --method basic --username username --password password

Once you are connected successfully

4. To create your Now UI Framework project, create a directory on your local filesystem and then run:

now-cli project --name my-component --description "A web component."

This will Download all necessary files in the directory.

5. Run

npm install

This installs all of the dependencies required by your project.

6. Open index.js file and make necessary changes.

We are making “Hello World” Component. So this is how our file look like

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

import snabbdom, { Fragment } from '@servicenow/ui-renderer-snabbdom';

import styles from './styles.scss';

const view = (state, {updateState}) => {

return (

Hello World

);

};

createCustomElement('x-86511-my-component', {

renderer: {type: snabbdom},

view,

styles}

);

7. Now you are ready to see your component within your default browser. Save your changes and run:

now-cli develop --open

This will open your custom component in your default browser. you can also navigate to http://localhost:8081/ to see updates.

8. You are now ready to deploy. From your command line, run:

now-cli deploy

Your component is now deployed to your instance!

To add and view these components on Agent Workspace.

Please follow this link

You can also directly add to existing workspace.(More about this in next blog)

Thanks for Reading

Cheers :)