- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
Workspace Essentials Part 1
Overview
Quick Tip
If at any point something isn't working, try clearing the UI Builder cache.
Within your page variant editor in UI builder, click the hamburger menu icon at the top-left, go to Developer > Clear UI Builder Cache. You can also try clearing your local browser cache.
Step 1: Creating a Scoped Application
Using ServiceNow Studio
Using Legacy Studio
Step 2: Building a Workspace in UI Builder
Step 3: Create Pages for the Workspace
Create a Record Page
table, sysId
.query, extraParams, views, selectedTab
.
Quick Tip
Save your work frequently using the Save button in the top right corner.
Create a List Page
listId
parameter.Create the Landing Page
Configure the Landing Page
Stylized Text
component and click to add it.
'Landing Page
'.
Quick Tip
When configuring components, make sure to change the Name and ID of the component in the top left of the Component Configuration panel so future collaborators on your app can know what things are at a glance.
Step 4: Adding Side Navigation (L1 Menu)
Now that we have added pages, it's time for us to start configuring the rest of our workspace's features. Let’s start by adding a side navigation menu.
- Under URL Path, select the ‘Home’ page from the dropdown menu.
- Click the dropdown under Icon, search for ‘home outline’, and select it.
- In the Label box, type ‘Home’.
- The Group drop down will determine whether the icon is aligned to the top or the bottom of the menu. Leave the Group dropdown menu as its default value.
- Click the + Add button to add another side navigation item.
- Under URL Path, select the ‘Customer Support List’ page from the dropdown menu.
- Next to URL Path, click the dropdown under Icon, search for ‘List outline’, and select it.
- In the Label box, type ‘List’.
- Leave the Group dropdown menu as its default value.
Step 5. Configuring the Workspace Experience record
Add the Workspace to the Workspaces menu
Configuring the Plus menu
chrome_tab
UX page property. Fill in the record as follows:- Name: chrome_tab
- Type: JSON
- Suffix: chrome_tab
- Description: Tab Configuration
- Value:
{
"contextual": [
"record"
],
"newTabMenu": [
{
"label": {
"translatable": true,
"message": "New Incident"
},
"routeInfo":{
"route": "record",
"fields": {
"table": "incident",
"sysId": "-1"
},
"multiInstField": "sysId"
}
}
],
"maxMainTabLimit": 10,
"maxTotalSubTabLimit": 30
}
Quick Tip
message
: This is the text shown to the end user in the option when you click the plus menu.routeInfo
: This is what tells the button what to do.route
is the page ID.fields
contain the URL parameters to be fed to the page when it's opened.
Adding final page property
{
"maxCachedPageCount": 5,
"maxActivePageCount": 3,
"timeLeftWarning": 15
}
Step 6. Configuring Lists for Workspace
sys_ux_list_menu_config_list.do
and hit enter.tablename.list
in the All Menu search to open the list view directly! If you want to open just the list view in a different tab, you can change that to .LIST
(all caps) and boom!)
Quick Tip
The Order field helps you set the order that your lists and categories render on the list page, lower numbers will be at the top, with larger numbers being listed below them. It's always a good idea when first building out lists or menus using the Order field with large increments between them, to allow yourself room for growth in the future without having to re-number the entire list each time.
- Name: listConfigId
- Type: String
- Value: Paste the sys_id of the list configuration record we just grabbed on step 11 of the previous section.
Verifying List Configuration
1. Select the workspace directly from the Workspaces menu in the Unified Navigator.
Conclusion
Congratulations! 🎉 You’ve successfully created a workspace from scratch, configured it to display the side navigation menu (L1 menu), configured the Plus menu and the Tabs at the top, and finally configured the List page to display a list of Incidents. Don't forget to share this article with your colleagues and friends who might benefit from mastering UI Builder.
Stay tuned for more tutorials and tips to help you create dynamic and engaging user interfaces!
Check out the Next Experience Center of Excellence for more resources
- 8,043 Views
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.