Paris - What's New with Now Experience

#Paris Release , #Now Experience , #Components

Brad Tilton

3 minute read

The Now Experience UI Framework was introduced in the Orlando release as a ServiceNow JavaScript framework built on web components standards. It enables developers to build custom web components and create a modern UI for users. In the Orlando and Paris releases the UI Framework is limited to customizing Workspace.

While Paris wasn’t a huge release for Now Experience, there are a few enhancements that I’d like to call out around new components.

There are a couple of categories of components, those that can be added to a page in UI Builder, and those that are core components you can use in your own custom components to build faster.

UI Builder Components

Data Visualization Configuration - enables you to create visualizations based on aggregated table data or indicator data. You can drag the Data Visualization component configuration icon to the Stage pane and create a new visualization as a timeseries chart, sparkline, and more.

2020-09-23-09-47-43.png

Core Components

You can find the full list of 12 new components and 6 enhanced components here, but I wanted to call some of them out and link to the specific component page for each of these. These components all have an API page where you can get information on how to use them, change their properties and see how the component changes, and copy the code for the component so you can call it in your own component. They also have usage guidelines that show you the anatomy of the component, how it behaves, and how you should be using it.

  • Stepper - A tabular navigation that allows users to progress through a process, know their current location, and switch to another step. Steps can be completed in a specific or any order, can be one of four statuses, and you can add an icon, label, and sublabel.

    2020-09-23-08-23-54.png

  • Popover - Lets you float temporary contextual content over other content, relative to a triggering element.

    2020-09-23-08-44-58.png

  • Accordion & Accordion Item - The accordion gives users the ability to reveal and hide relevant sections of content reducing the need to scroll when presenting multiple sections of content on a single page. The screenshot below shows an accordion with three accordion items.

    2020-09-23-08-54-03.png

Core Form Control Components

There were also a few form control components included in the Paris release. In Orlando you could use html form input elements and create your own components, but the advantage to these new components is that you don’t have to create your own, they already fire events based on user interactions with the components, and they are styled to match the existing workspace form control elements.

  • Checkbox - Input for users to communicate a yes, no, or indeterminate choice. A checkbox can appear standalone or in a set of other options.

  • Radio Buttons - A selectable input that lets the user choose a single option in a predefined set of mutually exclusive options.

    2020-09-23-09-17-28.png

  • Input - The text input allows a user to enter text, vaues, or symbols and has additional types and controls for email, number, and IP address.

    2020-09-23-09-02-59.png

  • Additional inputs: Input Password, Input Phone, and Input Url - These are three more types of input fields with additional validation and controls.

All form input fields have the following anatomy in common:

  • Form label
  • Form input/hint
  • Suggestion/prompt area
  • Input area
  • Icon

2020-09-23-09-19-15.png

All form input types also share consistent messaging capabilities based on user input. You can use links in the text, overflow (show more/less), stacking multiple messages, and the following message types:

  • Error
  • Warning
  • Information
  • System message
  • Suggestion

2020-09-23-09-25-43.png

While the Paris release didn’t contain a lot of new Now Experience functionality, the new core components should help you build custom components easier and faster than before.

Have you built something cool with Now Experience that you’d like to show off? Let us know in the comments, on the community, or through sndevs.

Comments