San Diego – Unified navigation

So San Diego has been out for a while and I have some thoughts about the unified navigation in the new Next Experience.

Generally I like the unified navigation but there are also a few things I do not like.

Like

  • More space on the screen
  • Updated styling

Do not like

  • The pinning. Only one of the items “All”, “Favorites”, “History” and “Workspaces” can be pinned at a time. I would like the option to pin them all in a tabbed view like in UI16.
  • Searching. In UI16 when typing in the navigator both favorites and the entire menu is searched. Now only one list is searched at a time.
  • Searching. Even worse is that it requires 2 clicks before you can search if the tab is not pinned. First one click to open the list and then a click in the search box. It should be so that the search box automatically gets focus when opening the list so we can start typing immediately.
  • Searching. And when you have a filter applied the clear filter button only appears after you click in the filter box. The clear button should be visible next to the filter so it can be cleared without having to activate the filter box.
  • Transparency of the opened navigator when not pinned. I think it should be less transparent, the text and different background colors visible under it is distracting as it is now.

Thats it for now. I am currently working on a script to duplicate any configurable workspace. Contact me if you are interested in this.

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