Alisa Tipisova
ServiceNow Employee
ServiceNow Employee

Recently I was working on a POC for one of my customers and we wanted to use Workspace as a main UI for a custom app we were building. It seemed pretty straightforward at the beginning, you can select "Workspace" as your UI in App Engine Studio and ServiceNow will create a new workspace for you. And magically it worked! We had our workspace and everything looked so easy, up until the point when we wanted to add a few basic things to it, like a UI action on the related list.

I was new to UI Builder and I had to google my way through, but what I found out was that there is no clear instruction how to configure things that are commonly used in old UI: UI actions, modals, m2m related lists etc. Or maybe I just didn't find it?

Either way, this is my attempt to describe the things I needed to configure (and probably many people need too) in new workspace to make it usable.

 

My first take away is: if you're not on Tokyo Patch 4 (but I'd prefer Utah), don't build the workspace.

The reason for it is on Tokyo Patch 4 release new functionality called Workspace Builder was added and it dramatically changed things. Before Workspace Builder all configurations, even basic ones like adding lists, had to be done via UI Builder, which might not be a big deal for developer, but it will be an issue for an admin of this app. With Workspace Builder on the other hand you can configure things like lists, contextual sidebar etc. with a click of a button. But the tricky thing is: you can't configure workspace using Workspace Builder if you built it before Workspace Builder was installed on your instance!

So, before you start building a workspace:

  1. Make sure you're on Tokyo Patch 4 at least
  2. Make sure you have App Engine Studio installed (we're talking about a custom app here)
  3. Make sure Workspace App Shell plugin is upgraded to latest version
  4. Make sure Workspace Builder for App Engine plugin is installed and upgraded
  5. You're good to go!

 

So you've built an app, now what?

I'm not going to go through the steps of building new app, because this is not the purpose of this post. But if you've never done it, there are some learning materials on Developer portal.

To create a workspace for your app go to Experience, click Add and select Workspace. ServiceNow will ask you about your primary and secondary tables and will create a workspace for you. Attention! ServiceNow will create a separate record page for every table you selected when you were creating a workspace. Now you can start playing around with it.

Click on your new workspace in App Engine Studio and you'll be redirected to Workspace Builder. Here you can configure your homepage, lists and dashboards. We'll talk about homepages later, for now let's start with lists and records.

 

Let's configure lists.

Let's start with lists. Lists are pretty straightforward, you can create new categories, lists, configure columns, conditions etc.

Screenshot 2023-06-26 at 16.05.46.png

 

Record pages.

Next thing we want to do is to configure record pages. To do that, select Record pages on top of the screen and select the record page you want to work on. As I said before ServiceNow will create a separate record page for every table you selected in the creation wizard, but in my opinion you don't need it. The only thing it adds is additional maintenance. So, before configuring anything else we're going to go to UI Builder and deactivate all page variants we don't need.

Click on Record pages on top of the screen and select any page there. When page loads click on Open in UI Builder.

Screenshot 2023-06-26 at 16.19.25.png

 In UI Builder click on dropdown at the top of the screen and you'll see all pages created for your experience. Under Record section you'll see all record pages that were created automatically, in my app it's 3 pages: 2 pages for my custom tables and one general record page. If you look at the screenshot above you'll notice that Workspace Builder shows only 2 pages, meaning you cannot configure Default Record page in the Workspace Builder. So, here is my second take away: if you want to configure record's look in Workspace Builder, create a separate record page for this table, otherwise use default one.

Screenshot 2023-06-26 at 16.23.53.png

 

Workspace Builder or UI Builder?

Before we decide for which tables we need custom record pages let's see what we can configure in Workspace Builder. On Record details tab you can see link to configure the form view using Form Designer, you can activate or deactivate Activity Stream and Playbook. On Contextual side panel you can configure which elements will be visible on the right-side panel of your record. If you are using any of these elements in your UI and want to be able to easily configure them, it may be worth creating a record page for this table. For other tables just use default record page.

Screenshot 2023-06-26 at 16.58.54.png

Screenshot 2023-06-26 at 16.59.13.png

 

Using "+" button to create new record.

Last thing we need to configure in Workspace Builder before we can focus on something more fun is to configure "+" button. This button allows users to quickly create new records and can be configured from Workspace Builder under Workspace settings. Just click this button, go to Record navigation and select which records you want to create.

Screenshot 2023-06-26 at 17.15.02.png

 

Now you have a basic working workspace for your app. What's next? Buttons and modals, of course! Read about it in my next post.