This blog post was originally published on www.ashleysn.com.
In this series, I'll spend roughly an hour in a Quebec PDI discussing some features in the release notes that were interesting to me. This is not an extensive rundown of the UI Builder or an end-to-end demo, just some first impressions I came across when looking through the documentation. and watching the Live Coding Happy Hour session about this.
There is now a Legacy UI Builder and the Now Experience UI Builder in Quebec
This was something I found out via the documentation site. If you've been working on Workspaces you're used to the Legacy UI Builder, i.e. launching it from your Workspace. When you navigate to the ServiceNow Documentation: UI Builder landing page tutorial, you'll see some documentation about how this UI Builder only pertains to landing pages within a workspace and to create a Configurable Workspace you should use the new UI Builder. To be fair, when I first navigated using the old way to All Workspaces > My Workspace > UI Builder, I noticed the UI but not much difference in components, etc. so was wondering what I didn't install when upgrading Quebec.
Legacy Workspaces cannot be configured in Now Experience UI Builder
I'm not the authority on this, this is a question that was posed in the LCHH session. To my understanding, if you have previous workspaces you will not be able to use the Now Experience UI Builder to configure/use new features as they are considered Legacy Workspaces. This is something to keep in mind when working with existing workspaces, thinking about creating new workspaces, or communicating workspaces to your customer(s). The above article I posted on Legacy UI Builder alludes to this, but doesn't state this flat out, so maybe we'll get more documentation in the future.
Experiences vs Workspaces
It's important to understand the differences between Experiences and Workspaces. Per the documentation: Now® Experience UI Builder is a web user interface builder that lets you see what the final interface would look like as you build new pages or customize existing pages for web-based workspace and portal experiences. You'll want to start with this documentation first, before jumping into anything related to UI Builder. ServiceNow Product Documentation: Now Experience UI Builder to understand what an experience is. Next you can move on to ServiceNow Product Documentation: Create an experience for UI Builder.
Note : An experience can be a portal experience or a workspace experience.
Go ahead and watch the Live Coding Happy Hour series on this
The LCHH series focuses on creating a portal experience, and is a really great walkthrough on navigating the UI Builder and creating experiences. Before jumping into anymore of the product docs, I recommend watching this. One thing to note early on is Brad Tilton's explanation of the App Shell UI and what you get with each app shell.
One weird thing I noticed, is when I was playing around in a PDI I had upgraded from Paris to Quebec, I was missing the choices for the tables for the Admin Panel, so I had to spin up a new Quebec PDI to move forward.
Note: You may want to have a fresh Quebec PDI on hand in the early days to go through the documentation and videos.
The first session will take you through setup, and starting configuration in the UI Builder, so it definitely should be your first visual resource at the moment when learning.
Be sure to go through the Quick Start Documentation
I thought I was just going to jump straight into this thing with my previous knowledge of Workspaces and UI Builder and go to town, but now with the new lingo and such I knew this wasn't the case. I was back at square one with my knowledge of UI Builder. Make sure you understand the new terminology when using the UI Builder. Here's a link to the ServiceNow Documentation: UI Builder quick start.
Tip: Go ahead and favorite UI Builder under Now Experience Framework, it's not under Workspace Experience or anywhere else you're used to.
Here's what I get when launching, keep in mind i do have the CSM Workspace plugin installed on my PDI:
The fun part: Creating a Page in UI Builder
Here's where you get into all of the goodies. When you first pull this up, you're going to see different sections of the page. Familiarize yourself with these sections and what they do first. One takeaway from this is Variants. The Variant tab allows you to show different versions of the page by audience (roles or user criteria) in my mind I'm going to correlate this to views without having to use views. I'm really excited to see the power of variants being applied to Portal Experiences, it seems like it's going to be way easier.
Honestly, and I'm going to be 100% honest here, when I started creating webpages back in the day I loved using a WYSIWYG builder. Keep in mind I was in middle school, so point A to point B was very important for me. If anyone remembers Homestead.com you can probably guess my age, so I really enjoy the shift to more of a WYSIWYG experience in ServiceNow when building pages that should focus on UI/UX. The Service Portal was almost there, but not really in my opinion. I can see spinning up proof of concepts and mockups really fast in a Sandbox/Dev environment, and getting fast feedback with the new UI Builder.\
So many components!
Takeaways
The Now Experience Framework is going to take some time to learn. Make sure you give yourself the time on a PDI to explore. Personally, I wouldn't commit to any projects using it right away, without at least a few hours under my belt in my PDI. Spend the time going through the LCHH sessions and the Docs to ensure you have an understanding of Legacy Workspaces versus new Workspaces, how to work your way through the UI Builder and creating Experiences, and finally just a general understanding of how to read the product docs for what type of experience you're wanting to create.
Resources
Building a Portal with UI Builder in Quebec - Live Coding Happy Hour for 2021-01-22
ServiceNow Product Documentation: UI Builder landing page tutorial
ServiceNow Product Documentation: Now Experience UI Builder
ServiceNow Product Documentation: Create a page in UI Builder
That's pretty much it for the hour or so I spent looking at UI Builder in Quebec. I hope this post served as a good foundational start to exploring UI Builder in your PDI. I'm sure I'll have more in depth posts about UI Builder the more I use it, and be on the lookout for content in the Community as this is a hot new feature that a lot of folks will be looking at.
For more in Quebec, visit AshleySN Blog: A blog about anything and everything ServiceNow.
Interested in working with the experts like Ashley on the GlideFast Consulting team? Reach out to our team. We would love to learn more about your ServiceNow challenges and how we can help your organization build better solutions.
