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:
- Web Components & Stencil.js – Build Custom HTML Elements
- 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.
- HTML5 Web Component Fundamentals
- On Pluralsight.com. Access to all courses on site cost $30 a month or $300 a year.
- Learning Web Components
- On LinkedIn Learning. You might have access depending on the account type you have on LinkedIn. (I have not watched this myself).
What next?
- Developing components for Workspace
- Now Experience guide
- FAQ – YES really do go read the FAQ, there are some information not documented elsewhere
- Blog post about Now Experience
- Go search the community forum, medium and youtube, I have found a couple interesting posts:
- Now Experience UI Framework efforts and my experience with it – by Drew
- Now Experience UI Framework efforts and my experience with it. Part 2 – by Drew
- Article #13 – Action Adventure on Now UI Experience Part #3 – Workshop: Action Handling (Events)
- Using Asynchronous Message Bus (AMB) with Web Components, i.e. record watcher. – by Drew
- NOW Experience: Custom Calendar Component for Agent Workspace – by Cezary Błajszczak
- ServiceNow UI Framework (how to use a component on a standalone page)
- Orlando Component Building – Live Coding Happy Hour for 2020-03-13
- Orlando Component Building P2 – Live Coding Happy Hour for 2020-03-13
- Building an Integration to retrieve Covid-19 data – Live Coding Happy Hour for CreatorCon
- Building an Integration to retrieve Covid-19 data – Live Coding Happy Hour for 15-05-2020
- Polishing the Now Experience Component – Live Coding Happy Hour for 29-05-2020
- Getting started with the Now Experience UI Framework
- PARIS – GRAPHQL API FRAMEWORK
- Leveraging Now Experience UI Components
- The Verbose blog
- Search for ServiceNow related links (by Jace Benson)
- Now Experience UI Framework: landscape of the future
- Going further with Now Experience Components (Part 1)
- Overview of the Web components in 2021
Undocumented stuff
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
ServiceNow Resources 