If you read my previous posts by now you should be able to create a workspace, configure forms, lists, buttons and have a working solution. So in this post let's talk about small things you can do to make your UI look nicer.
Record's header.
Header allows you to show most important information on top of the record improving user experience. It consists of 4 parameters: primary field, subheading, additional fields and image. For my example I'd like to show short description, 3 additional fields and an image.
To configure the header:
- Go to Now Experience Framework -> Configuration Settings -> UX Header Configurations and create a new configuration for your workspace.
Note: you can reuse existing header configuration, but I recommend creating separate configurations for each workspace to improve manageability.
- In the related list create Header Configurations for the your tables.
- Same as I described in my previous posts add configuration created in step 1 to the headerConfigId UX Page Property of your UX Application (read about how to do it here).
Note: this is not mandatory, if you don't associate header configuration with your workspace ServiceNow will still show the header configuration for the table if it exists. But if you have more than one header configuration for the same table, you need to specify which one you want to use in your workspace.
As a result your record's header should look something like this:
Highlighted values
Next thing I'd like to add is to highlight the state value if it's accepted of rejected. Highlighted values configuration is similar to header configuration.
First, you create a Highlighted Value Configuration.
- Go to Now Experience Framework -> Configuration Settings -> UXHighlighted Value Configurations and create a new configuration for your workspace.
Note: you can reuse existing highlighted value configuration, but I recommend creating separate configurations for each workspace to improve manageability.
- In the related list create Highlighted Values for the your table and field you want to highlight.
- Then in the related list configure conditions and colors you want to use. You can also show an icon near the value.
- Same as I described in my previous posts add configuration created in step 1 to the highlightedValueConfigId UX Page Property of your UX Application (read about how to do it here).
Note: this is not mandatory, if you don't associate highlighted value configuration with your workspace ServiceNow will still highlight configured values. But if you have more than one highlighted value configuration for the same table and field, you need to specify which one you want to use in your workspace.
Now state field will be highlighted in the header, on the form and in the lists.
Sidebar
Last thing I'd like to discuss in this post is sidebar. Sidebar or in ServiceNow terms contextual side panel is a panel on the right side of the screen that contains easily-accessible information and functionalities. OOTB it contains attachments, templates, agent assist and ribbon.
Attachments
To show attachments in the sidebar you need to simply activate them. It can be done via Workspace Builder. If you're not aware of what Workspace Builder is, read my post here.
- In App Engine Studio open your workspace and select Record page on which you want to show (or hide) attachments.
- Go to Contextual Side Panel, on the right side you'll see available components, toggle Attachment component.
Templates
Same logic applies to Templates and Agent assist, just activate it in the Workspace Builder.
Ribbon
Ribbon allows you to show additional information in a nice way, like showing email address and phone number of incident caller. OOTB there are 3 components you can use in custom workspace: Customer 360, Active SLA and CMDB Timeline. You can create your own components, but for now let's talk about these.
To configure these components we're going to use Workspace Builder. If you're not aware of it, read my post here.
- In App Engine Studio open your workspace and select Record page on which you want to configure ribbon.
- Go to Contextual Side Panel, on the right side you'll see available components. Let's configure Customer 360.
- Activate Customer 360 component. Then click on settings icon and select which field you'd like show data from. Select which columns you'd like to show, for example, email and business phone.
Now you should see this information in the ribbon:
Same way you can configure other ribbon components.
Playbook Experience
One feature that is not available OOTB, but can be added to sidebar is Playbook Experience. To add it we'll have to configure a few things in UI Builder. First, make sure you have all required plugins activated and updated to the latest version: Playbook Experience and Playbook Experience Components, then go to UI Builder.
- In UI Builder scroll down to Sidebar tabs, you should see 4 tabs there (some of them might be inactive).
- Create new empty tab and call it Playbook.
- Let's add playbook component to this new tab.
- Now we need to create a Playbook experience for our workspace. You can always use a global playbook experience, but I'll create a new one for my app. At the bottom of component configuration click on Configure Playbook Experience link, you'll be redirected to Global Playbook Experience where you'll see a notification message offering you to create a new custom experience.
- Create new experience (optional), configure your playbook the way you want. Here is documentation for Utah release.
- Go back to UI Builder and configure playbook component according to the screenshot below.
- Now you should be able to see playbooks in your Workspace!
This is the last post about basic features that can be configured for custom Workspace without heavy usage of UI Builder (well, some usage is required anyway). Next time I'll tell you about more complex things that can be added to your custom workspace.
Read my previous posts here:
Workspace for a custom app: where to start?
