Next Experience

What is Now Framework?

At the time of writing (14-02-2022) this article is really about my first attempts with Now Experience Framework. However as soon as San Diego is GA and the CLI tools have been updated I will resume my exploration of the new Next Experience and update this article as I go along. So for now the rest of this article is something I wrote in 2020.

Now Framework is the new UX Framework for ServiceNow introduced with Agent Workspace.

With the release of Orlando ServiceNow has released the tools for us to develop custom components that can be added to a landing page or as a context sidepanel. It is even possible to build a standalone (undocumented) portal based on components.

How to get started?

Now Experience is based on standard web components directly supported by most browsers. So not longer AngularJS or Angular and definately no longer Jelly.

I think it is essential to understand how web components work in order to be successful in building components for Now Experience.

I highly recommend starting with some online courses about Web components. For example following:

What next?

Undocumented stuff

How to open a new tab

 dispatch(REFERENCE_INFO_CLICK, {
    "referenceInfoClick": {
        // Table of record you want to open
        "referencetable": "sys_user", 

        // Record you want to open sys_id
        "sys_id": "6816f79cc0a8016401c5a33be04be441" 
    }
});

Tips

When re-deploying a component you MUST clear the browser cache as well as use CTRL-F5 when reloading the Agent Workspace page otherwise the new version of the component is NOT loaded by the browser. Very annoying, hopefully this will be fixed.

now-ui.json

When using any OOB NOW components it is necessary to update the property “inner components” in the file now-ui.json with all components including any sub components that these components use.

For example if using “now-template-card” then inner components should look something like this

	"components": {
		"x-80603-test-comaround": {
			"innerComponents": [
				"now-button",
				"now-heading",
				"now-loader",
				"now-card",
				"now-template-card",
				"now-template-card-attachment",
				"now-template-card-omnichannel"
			],
			"uiBuilder": {
				"associatedTypes": [
					"global.core"
				],
				"label": "ComAround Context Sidepanel",
				"icon": "calendar-clock-fill",
				"description": "Searches for knowledge articles in ComAround based on short description field of displayed record."
			}
		}
	},
	"scopeName": "x_80603_test_com_2"
}

Powershell

If you work with components and deploy on multiple instances you will very quickly get tired og the now-cli login command. So I have setup a number of powershellscripts so I can quickly switch between components and at the same time login to the instance the component belongs to.

I created a git repository here. You can download it and customize it. It has lots of examples like for docker. I got this repo originally when I attended a Angular Developer Certification course last year. (so it is very much course related)

What I did in my copy local I created a new folder “servicenow” and in there I created these functions to quickly switch.

First a change dir function

function goto-snc-git {
  cd "d:\GitReposServiceNow"
  pwd
}

Then a login function, yes contains cleartext userid and pasword so do not commit to repo

function snc-login-pdi {
  now-cli login --host https://xxxx.service-now.com/ --username xxx --password xxxxx
}

And then the last one

function pdi {
  goto-snc-git
  snc-login-pdi
}

Future

Build small and specific, because we have not yet seen the full extent of ServiceNow’s strategy with Now Experience. Quebec will be a game-changer.

So what are you waiting for, get going and build components.

Here is a small demo of my first poc component

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s