How to Build Workspaces from Scratch

Finally, I was able to debunk the mystery of building workspaces from scratch! For those who are new to ServiceNow, workspaces are an essential tool for fulfilling tasks. However, it's important to note that simply setting up a workspace within AES is just a template and not a custom workspace that caters to your specific needs. 

If you're looking to build a workspace from scratch, the UI Builder is the way to go. In this short article, I provide an introduction on how to build workspaces from scratch with the help of the UI Builder. 

STEPS

• Navigate to UI Builder
• Click on Create

• Fill in the required fields & click Create

• For a basic Workspace, create a record, list & landing page
• Experience View (of Service Operations Workspace)

• In the Experience Settings, you can configure other options if you need to:

• Best practice: is to build a workspace through AES first and then configure it in the UI Builder. This way you’ll already have all the OOTB pages installed in the workspace.

• In the UI Builder Editor, you can customize a list page for instance:

• Click on the List nav component to configure/customize it:

• On the right, you can see all the component’s properties. This is where you can tell the component how it needs to behave and what data it needs.

• Click on Configuration link

• This will redirect you to the UX List Menu Configurations

• For every workspace, there should be one UX list Menu Config

• Clicking on one of them will give you all of the UX List Categories & UX Lists

• This is where you can build, configure, reorder, etc. the list categories and lists for the workspace which will be displayed on the workspace lists tab:

• The same applies to the UX lists

• In the Side navigation section, you can set up the navigation pages you want to have in your workspace:

• This is the result of the Side nav on the Workspace:

• Best practice: if you want to change the landing page of a workspace, then first you need to create a variant of that page by clicking on Duplicate variant:

• For instance, if you want to customize the Overview Viewport component of the Service Operations Workspace, then select the Duplicate variant first, and then you can clone the component.
• This will redirect you to a different page where you can clone this component and do your thing:

• UX Page Properties
• Now Experience Framework > Experiences > Selected Workspace
• These are specific properties that the app shell and UIB can read from and configure things. These properties are workspace-specific settings. They are built with JSON.

• Example of a tabbing property:

• newTabMenu - creates a new tab (when clicking on the + sign)
• maxMainTabLimit - how many tabs can you have on the main tab
• maxTotalSubTabLimit - how many tabs are limited for the sub-tabs

• UX Application Category M2Ms
• This will make your workspace show up in the Workspaces list:

• Note: logout & login to see your workspace in the Workspace list

• Best practice: to migrate a workspace from DEV to PROD, create the workspace within a scoped app, and then move the scoped update set to PROD

If you want to dive deeper into the magic of UI Builder, this is a great resource to go through:

https://www.youtube.com/playlist?list=PL3rNcyAiDYK2Bgzj4mRdtfxMpGkI5KXBJ

That’s a wrap!

References:

• https://www.youtube.com/watch?v=rYC-uvFaa_8&ab_channel=ServiceNowCommunity
• https://www.youtube.com/watch?v=UIpIx6n_uyg&ab_channel=ServiceNowCommunity