Creating a Configurable Workspace in App Engine Studio



Recently I've been exploring Configurable Workspaces in Quebec, mainly the CSM/FSM Configurable Workspace that was shipped with the release but still had questions on how to create my own. Previously, you could launch a Workspace in Paris/Orlando pretty easily with either Studio or Guided App Creator, and in my Quebec PDI it seemed like this was not the case. ServiceNow did make the distinction between Agent and Configurable workspaces in this TechNow episode, and I found that distinction when I looked at CSM/FSM Configurable Workspace. I thought, does ServiceNow really expect us to create workspace experiences from the ground up? Then Quebec Patch 1 dropped and had the answers to all of my questions with App Engine Studio.


App Engine Studio goes far beyond Workspace experiences, it's really the heart of modern development on the ServiceNow platform. In my opinion, this low-code feature is going to allow developers to open up their time for more meaningful development. Studio has been around since Geneva and provided an IDE for those working in scoped applications, and Guided App Creator launched with the New York release or perhaps Madrid, around that time. Guided App Creator bridged more gaps and allowed developers, builders, etc. to create Workspace (Agent), Mobile, or Classic (Platform) UI experiences with a low code interface.


This post is going to focus on creating a Configurable Workspace experience in App Engine Studio. Configurable Workspaces are not to be confused with Agent Workspace which shipped prior to Quebec. Here's how I view it, anything that shipped before Quebec and even custom workspaces are considered Agent Workspace, meaning they can be configured and use a more scaled down UI Builder and anything post Quebec created with App Engine Studio and Now Experience UI Builder are considered Configurable Workspaces. I think Agent Workspace(s) or Workspace Experiences in the Application Navigator aren't going away for some time because customers have started to adopt them, and I can see a place for them if you want a simple configurable workspace option to get your fulfillers and agents working in Workspaces right away, but for anything further than the basic Agent Workspace layout you're going to have to create a Configurable Workspace.


Create an Application


After upgrading to Quebec Patch 1, and installing the App Engine Studio plugin (or at least I had to as of this post) you'll see the landing page in your PDI has changed and basically has the easiest route possible to create an app.



Why yes, don't mind if I do. If I click Create App right from this page I get a prompt asking me if I want a No-code/Low Code option or want to jump straight into code with Studio.



Choosing the AES option I'm dropped right in (you can also access this page from the Application Navigator by searching for App Engine Studio) I feel really special because AES already knows my name, and it will know your's too.



From what I've deduced working in my own PDI is that you have to create an Application in AES in order to add an experience to it, this could change, and I could be missing something, but I don't think you can add experiences to existing application scopes, which isn't of concern because you can just create a new app for your experience and use it with the data that exists in your other app. This is what ServiceNow did for the CSM/FSM Configurable Workspace, the Customer Service Management and Field Service Management apps and tables are separate. I think this is going to be great as a practice going forward because developers can make interface changes within an app scope created for an experience(s) and ship them in different release cycles, without having to worry about when functional changes that don't impact the interface will ship, unlike having everything in the same app.


So I'm going to go ahead and create an app and for fun name it Great Customer Experience App. After naming my app I need to set up some more things for it.



I'm going to create a table extended from Case called Scoped Case, but I could upload one from a spreadsheet or create it from scratch.



Create an Experience


I still have some set up to do, but the next step is to create my Experience for my app. I have four options to choose from: Portal, Workspace, Mobile, and Catalog Item. Notice Classic (Platform) is gone, but this can always been configured via Form Designer/Form Layout if needed.



I selected Workspace and am dropped into the next page where I need to setup some information about my Workspace. By default the URL pops into whatever is in the Name field, but I shortened mine to gcea. One thing I've noticed is that a Portal and Workspace Experience cannot share the same URL, so keep that in mind when naming.



Next I tell the experience which tables I want to use, I'm going to use Scoped Case and Incident as a secondary table.



Once I hit continue my experience will do it's magic and I get a success screen.



Since this is an experience app, I didn't set up any automation and wanted to note this isn't a requirement to do so in your application if just working with front-end experiences. Also, I can't submit my application due to being on a PDI and not having a pipeline, so you may run into this on your PDI as well. Check out the Live Coding Happy Hour on Pipelines in AES fore more information. Finally, I literally did not look at product documentation before doing this post on App Engine Studio, so you can see how easy it is not only to create an application with tables, but launch a workspace experience as well.


Set up a Landing Page


Now I'll head over to UI Builder and start working on my experience, but also show you the app shell it launched with. My Great Customer Experience App is now available in UI Builder, and shipped with the Agent Workspace App Shell.



Before I go into pages, etc. let's look at what it launched with out-of-the-box. It looks like ServiceNow includes a basic landing page that can be configured (or you can create your own page and I'll show you how) as well as the list panels, and record views we're used to seeing in Agent Workspace. The path to my workspace is myinstanceurl/x/422452/gcea/home.




So to take this one step further, I'm going to create my own variant of a home page and set it as the default.



I'm going to go ahead and deactivate the Home default page created by ServiceNow. This isn't a hard and fast rule, as variants can be limited to certain audiences, etc. but for my purposes I don't need the page ServiceNow created and would rather just use my own variant.



I just put a header on my page and re-used an image ServiceNow already had for proof of concept but as you can see home now redirects to my variant instead of the deactivated one. To sum up I was able to create an application, create a configurable workspace, and my own homepage with just a few clicks.



Takeaways


I was very excited when App Engine Studio was announced and will continue to explore it more throughout the year. Being able to launch the Configurable Workspace shell is a game changer for me, because I'll be able to lay down the base line experiences that user's have come to know with Agent Workspace, and focus on creating truly customized experiences for fulfillers/agents without having to worry about the out-of-the-box setup with list and record views within the workspace. I know I have some real world usage of this coming up soon, and will learn a lot about UI Builder and Components along the way, so i'll keep dropping posts with what I find out.


Resources


TechNow Episode 84: Workspace Configuration


ServiceNow Product Documentation: App Engine Studio

895 views0 comments