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.
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:
On Udemy.com. Course cost around €20 at “normal” price but Udemy run sale prices very often almost every second or third week and then it cost around €12.
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