Next Experience Academy #13: What's new in Vancouver: UI Builder Edition
welcome everybody to the next experience academy uh today being hosted on Vancouver release day welcome everybody um we are going to be talking today about UI Builder and workspaces in Vancouver what's new and what you can get your hands on starting today um next slide my name is Maria Gabriella prz wector a lot of you may know me as mgw I'm a senior appon product manager on the platform web ux team and with me today is my name is Brad Tilton and I am also a product manager on the web ux team awesome so today's Academy before we get started let's go over some quick housekeeping uh we highly recommend that you use the Q&A feature for questions because it helps us gather the questions afterwards to post in our events for each of these uhms if you ever want to see a historical listing of the the emies you can find it on the community and you'll be able to see a single event for every Academy and you'll have the YouTube video for that Academy in the event listed use the chat for comments Q&A for questions and the session is being recorded and the slides and video will be made available at a later time these sessions are for you so please ask questions and interact we're not just going to be doing a presentation we'll be in the product configuring live Brad will be giving us an awesome demo of what's new in Vancouver and we will be back soon our next session is going to be October 18th at 1100 a.m Eastern another thing that we also do is called you and I Builder live it's on the second and fourth Thursday of every month at 4 pm Eastern that's on the service now developer Advocates YouTube channel and it's a much more indepth technical take and uh sort of introduction into UI Builder and workspaces so if you're interested in that kind of content like we're going over over today I highly recommend you also take a look at those so we are product managers which means that we might often State forward looking statements today uh since we're talking about Vancouver we may not have very many but it's important to note that you should not make any purchasing decisions on any forward-looking statements that we might make uh we'll often refer back to Safe Harbor and that's what this is for now it's off to Brad all right thank you Gabby all right so we're going to start with the next experience road map that's what we're talking about today we're going to get into UI Builder uh workspaces uh custom components and the CLI sorry somebody just knocked on my door um and yeah so we're going to get into all of those things what's new in Vancouver we'll go through some slides here and then we'll get into an instance and kind of take a look around um but we're going to start with uh you know why why are we on this journey to rep platform uh the user experience what does it look like um so our goal is uh to become the world's most modern and intuitive platform to revolutionize work a lot of words there uh but uh we're basically trying to rep platform the whole user experience onto this new Tex deack uh and uh you know we'll kind of share some of the stuff that we're doing in Vancouver to make that happen today that is the wrong one way uh so you can see here uh you know we started uh you know we started this way back in New York when we came out with agent workspace um and then over time uh we have rolled out configurable workspaces uh we're really focused on uh both fulfiller productivity right now as well as um making the Builder and developer experience uh better and easier to pick up so a lot of ease of a lot of usability improvements in Vancouver and UI buer and then a lot of functionality improvements in workspaces and we'll kind of get through that uh here in a bit uh a couple of quick things um we'll talk about components uh in the presentation if you uh want to go look at the list of all of the components there's some new ones uh in the Vancouver release all the components are on the developer site again components are really the building blocks of the experiences I keep hitting the wrong button and we keep going backwards I should move my keyboard I just moved it an inch to the left which should help that's this is riveting yeah uh so we've got we've also have a number of workspaces that we're shipping as a Vancouver I think we're at 51 workspaces that we're shipping out of the box here uh and we don't have a Consolidated list of those anywhere uh but if you you know are looking for a workspace it's generally a good idea uh to go to the product documentation for whatever product you're looking at uh in seeing if they have a workspace in there at this point most of our products do have some sort of workspace all right with that let's get into some of the actual couver features this is why everyone's here um and so let's get into it so we're going to start with agent productivity features so this is really um you know what's happening uh in the workspace and what are your agents and fulfillers really going to see uh so we'll start with the first one I'm I think we went over this last month as well uh but it's a big one guided tours are now available uh for workspaces um so this was a big blocker for adopting workspace it's it's also uh kind of nice when you roll out a new UI you probably want to show people how to use it um so guided tours for workspaces uh is pretty helpful here um so you can continue to run your existing guided tours uh and you can also create new guided tours with workspace the next one is in workspace and we'll show this in the demo uh We've not we've got a new uh email tab uh in the activity stream component uh so we've always had comments and work notes and now there's an email tab uh that's new in Vancouver uh that lets you compose email directly from the activity Stream So before uh you'd have to open up the email client in a new tab or do it in the contextual sidebar depending on how you were doing things uh now you can do it directly in the activity stream and the email goes into the activity stream uh we also did some some little kind of uh ease ofuse improvements to the email client where you can drag and drop addresses around uh and add attachments when forwarding emails which uh was not possible before uh you will continue to see more email improvements we're we're you know I think at one point everyone wanted to get away from email but uh it's it's here to stay uh so we are going to be making even more improvements uh in the email component are uh in workspaces in the future uh we had a question I just saw come in is it connected with email client templates I believe you can apply templates uh through the uh email uh composer there I I think that's true right U more workspace enhancements uh one of the things that we added is the ability to resize models um so we know that sometimes a model would pop up and if it was real small on the page uh and had a lot of text you had to do a lot of scrolling so now you can uh resize both horizontally and vertically uh you can uh create custom activity stream filters and we'll kind of look at that a little bit as well uh so in the activity stream uh you know if you've got a ticket that's been open for a really long time and lots of people have commented on it and you want to go find a comment or find an email that was sent or when a field changed uh you can uh create those filters and then save them uh and I believe you can even share filters now is that right you can at least save them um and then uh user preferences are consistent across uh the workspace so you know if I've done something as a user of a workspace and then I leave and come back you know if I've resized something or made a change uh those things should be persistent previous to Vancouver some of that was not consistent uh and then uh some some gen generative AI uh one of the things that from a work workspace perspective uh we are shipping uh is generative as now assist summarization uh so I think now assist for itsm HR and CSM all have a summarization feature whether that's an incident or a case uh you can hit a button and it will summarize that case for you so this is another really helpful thing if you have a case or an incident uh that's been open for a long time and has a lot going on with it you can summarize it I have messed around with this it actually works pretty well um and uh it does a pretty good job uh and so the other uh generative AI thing uh is I believe for the now assist for itsm uh you can uh automatically generate resolution notes um using our generative AI controller uh there will be lots more information about all of the generative AI features uh coming out uh in the future I think a lot of them come out next week or are more generally available uh but if you kind of pay attention we will have lots of lots of things like that coming out pretty often all right so a couple of questions here do you know why rightclick spell check is no longer accessible I do not know uh what the deal is there we can we can look at it at some point uh response templates uh depending on the workspace uh so are response templates available in workspaces uh I think they can be uh I think some of our workspaces ship with response templates um and some don't so I think they can be and then we had another one is there a plan to make more UI Builder components available in npm uh we it's something we've talked about I don't think we have any hard plans to add some of the more complex components uh in npm so the components that are in npm are really kind of our Atomic level components they're these Bas level components uh that you would uh use to build out you know bigger components so some of our bigger components like the form component or you know calendar some of those would not be available in mpm all right so let's take a look at uh so we just kind of looked at agent productivity uh we're going to take take a look at UI Builder and custom components uh and uh Chrome extension uh here in the next set of slides and thank you so much to our lovely audience we I just confirmed that in order to access uh spell check now you have to control rightclick onto the word and then it'll pop up it seems like it's something with the newest release of the text editor sherro Dominic and michaelh another question around u i Builder uh we are working on another now learning course called UI Builder Advanced it's in process uh I I I'm hoping it'll be out this year but uh we'll we'll see when it actually comes out U but that is something that we're working on as an advanced uib course uh in terms of micro certifications I don't think we have any plans for that uh at this point but uh you never know all right so this is the this is the fun this is the more fun stuff for me anyway uh is the UI builder stuff so uh one of the big ones probably the biggest uh UI Builder related uh Vancouver release feature is our new column layout um functionality uh so I can uh instead of having to add lots of containers and Nest them and you know make sure that they're a certain amount of space wide um there is a new column layout feature where I can drag a set of columns onto the page or add a set of columns onto the page uh and then I can add new columns I can change percentages I can Nest columns within columns uh so it it lets you set up a fairly complex uh layout really quickly for a new page um so one thing to note is that existing Pages don't get get converted automatically uh and if you if you have an existing page that's already laid out you don't really need the column layouts um it's really more useful for brand new pages where you have some sort of um you know UI that you want to that you want to mimic or some layout that you want to mimic um so you know think about something like a you know like a big dashboard with lot lots of things on it you might need lots of columns um and so we'll take a look at this when we get into the demo uh we also added a new type of um overlay called a popover so we had modals before uh we're adding popover uh they work pretty similarly to modals where you create a popover and then you would trigger it from somewhere uh the big difference between a modal and a popover is a modal you generally you're trying to take somebody's attention and focus it on a model so the rest of the screen goes gray they can't do anything else until they address whatever is in the model whether it's informational or something they're filling out uh and a popover is really more informational you don't necessarily need to take all of their attention uh it's just a way for them to maybe get more um you know to to have more information or maybe take a quick action somewhere um so we'll we'll kind of take a look at how that works it's fairly straightforward uh the next two are are probably my favorite couple of features uh in Vancouver uh so in UI Builder uh there is a new preview option uh so the preview option allows you to preview your current variant without having to save it uh and also without having to meet the conditions or the audience uh in order to see it so pre Vancouver if I had 10 variants of a page and I wanted to test one of them I'd have to make sure that when I hit that URL the that's the variant that I would get in order to test it so generally you're having to kind of reorder them and remove conditions just to test the page uh so now I can just preview the page I see the preview uh in a big modal that comes up uh and uh I also can do that without saving the page which is pretty helpful uh the other big one uh my my other favorite feature is undo redo uh so this was a great one uh you can uh undo and redo across page saves um so you can go back it's about 20 steps right now uh across a save uh we are you know working on improving that if you close your browser you know you lose context if you exit out of the page um so as long as you're on the same page it works across saves so that's pretty helpful you know I don't know how many times I've done um I've done something where you know I I make it I save a little too quickly and maybe I've made a mistake and I can't remember what I just did so undo read is pretty helpful there uh it also the it works with standard keyboard shortcuts um Soh command a command Z yeah I I totally blanked or control Z or control Z that's right um we also uh improve the styling a little bit this is one of those kind of little quality of life improvements um so for the styling here uh we're just doing more things visually like padding and margins if you're not a CSS Wizard or you don't use it a lot uh you know sometimes you it's hard to remember which one the margin does and which one the padding does um so you can see on the slide here uh it's just a little bit more visual way to do it you can click on any of those zeros or M or or margin or padding to set those um so it's a little easier just to set like a right margin or something like that uh you've also got in terms of like thicknesses of things uh we're kind of showing what that actually is instead of just making you pick large and you know maybe it's big enough maybe it's not and you have to pick extra large so now you can kind of see that a little better uh and so we're kind of doing this gradually with lots of styling uh this won't be the you know last styling Improvement you see uh in a release uh the other thing we're doing is Progressive disclosure um so that you're not overwhelmed by all possible Styles when you first open it uh when you click into that Styles tab you're only going to get kind of the ones you use the most uh and then you can click uh show Advanced configurations and get the rest of your styling um so really trying to make it a little more usable and approachable for a new user um all right we'll get through one more and then I'll answer a couple of questions uh the other one is the what's new uh button uh nuui builder in Vancouver uh so there's a little button at the top you click on it and it just tells you basically the four things that we just went through um so it's a little bit easier way uh to know you know here's the here's the new stuff in uib and you know we'll keep expanding that in future releases uh so a couple of questions uh do we have a process or implementation guide for changing the standard content on the S so homepage uh service operations workspace actually has a pretty good amount of documentation on how to change uh things that work a little differently than other workspaces uh and that includes I think all of the different parts of their standard landing page uh and so it does tell you how to go in and um and kind of change up like data visualizations right the service operations workspace uh uses a repeater with a data visualization and you're actually feeding at some Json uh and so uh they kind of tell you how to update that in the docs um so if you go to the service operations docs um that uh that will be there uh the next one does preview work with articles I'm not quite sure what that is referring to uh but preview is specific to UI Builder pages so if you have a UI Builder page uh you can uh use preview with it uh and then uh is the what's new being added to other platform functions as well uh I hope so I'm I'm uh my team is pretty specific on our next experience products uh so I I don't quite know what's uh what's new with some of the other products um but I would hope that we are doing that for more products I know it's at Le some theme Builder as well there we go all right so let's get into the CLI and components uh so we have some new uh new components so we'll start there um so this is just us kind of closing the functionality Gap there's still a couple of components uh that um that we probably need like a reference component and some things like that but the date and date range uh were pretty a you know pretty heavily asked for components so if I have a form I can work with dates but there are times where you want to allow somebody to pick a date or a date range that's not in the context uh of a table form uh and so in that case we do have we do now have the individual components available and so that is the date component and the date range picker which is pretty nice so that that's actually an area where uh workspace has kind of leaped the classic environment uh leap leaped I don't know I think it's leap uh the classic environment uh so that you can actually choose a range of dates um like you can see in the screenshot here all right and then we've also made some CLI improvements um so we released the CLI I think in Orlando and haven't really touched it too much since then um so this is really the biggest uh Improvement to the CLI since Orlando if you're not familiar uh with the CLI that we're talking about here this is the um the command line interface that will let you create custom components um so if you want to create a custom component deploy it to an instance and then use it in UI Builder you can do that through uh a local uh environment uh with the CLI so we've added some new functionality to it uh where when you deploy a component to an instance it doesn't upsert uh so previously uh if there was an existing component and you just wanted to update it when you deploy it uh it would actually delete the old version you'd have to do a force would delete the old version and create a new version uh which had some uh some kind of weird problematic uh stuff with it uh and so now uh it doesn't upsert uh so you don't have to worry about it getting deleted uh events now get correctly deployed uh when you deploy it to an instance and then the other part is um you can generate an update set instead of deploying a component directly to an instance um so you can generate an update set and then load that update set into your instance and it'll load the component in there there's a couple of ways that's really helpful um it's going to help help people collaborate a little better on components uh because you can deploy a a component to your instance using an update set and it doesn't need to match the scope name of your instance um so a couple of nice things with the update sets uh we now support up to node 16 this is not a if you've not used the CLI this is probably a why do I care about this but previously I think it was node 12 uh which is a fairly old version of node and there's lots of reasons you might have a newer version uh so you had to get NVM and make sure that you had the right version and it was kind of a pain um so we are uh we're supporting up to node 16 uh and that will get more current uh in future releases as well so we're we're not done at node 16 we we're going to try to get as current as we can and then the last one we're removing the release requirement it wasn't really necessary um so you know we we would sometimes have this odd time between uh when EA comes out and the CLI hadn't been updated yet you couldn't use like you know the CLI against Vancouver during the Early Access period or early availability uh and so we've kind of removed that because there's not a huge reason that we would need that release requirement um if you download the new CLI version are there also dependent libraries I don't believe you have to update anything else if you'd update the CLI it should be ready to use I believe um you know uh so the next question is there's a barrier in the organization uh that uh s so has too much white space uh and uh they want to better utilize the wh space uh that is actually a part of um Vancouver I I don't have it on the slides here because it was a small update and I didn't think people would care that much but I should have put it I should have left it in uh but yeah we are we did do some work around uh compacting uh the inter interface and making better use uh so there's less white space so we had a few um pieces of customer feedback around that uh and so that is an improvement in Vancouver all right and the last thing here uh is this is not necessarily tied to Vancouver uh but it is pretty recent um so there is a new uh Chrome extension that we released uh I think we're it's still called Dex development developer tools but we're changing the name of it because of course we're going to change the name of something uh it is in beta uh but it is really helpful uh and so we'll show a little a little short demo of it here in a minute U but it's got two main functions uh it has a next UI inspector uh so that uh you can uh kind of take a look at um uh you can kind of take a look at uh the components and look at their properties and events and things like that um you can kind of catch events that are happening on the page you can track transactions uh and then it has a second tab uh called the next UI profiler uh that allows you to do some performance troubleshooting um so if you have seen um if you've you know if you've seen a normal service now page in the classic environment uh you know you've got the little response time indicator down at the bottom right uh it's really helpful a lot of people use that uh to Baseline uh their uh to Baseline their performance uh and now you can also do that in um in uh next experence experience pages but it's it has a ton more functionality than the response time indicator uh you can establish a baseline you can download that Baseline so in the future you can compare it uh against uh you know against other page loads so if somebody's complaining that something's happening really slowly uh you can go in and kind of do some comparison there um so we'll show a little demo of that uh in the demo section coming up here uh and a couple of questions about the extension right now it is Chrome only we are exploring other options we're also exploring ways to build some of that functionality into the platform so you don't need an extension but for right now uh it is Chrome only uh so that you know it's it's better than no extension but we know we have some work to do in order to improve troubleshooting for everyone all right I'm GNA hop into the demo here thank y'all so much for typing your questions in the Q&A it has been great um I've been answering people in the chat and I've been chatting to hosts and panelists this whole time so nobody's been seeing any of my messages it's been a lot of fun that's great love it all right uh so this should be uh big enough for everyone uh somebody has their hand raised I don't think we're enabling audio on this so if you have a question please ask it in the Q&A all right uh so where's my little list of things that I'm going to go through there we go all right uh so we're going to start uh with the uh some of the improvements uh to the uh record page so I'm going kill that uh and it's loading of course at least it didn't log me out all right so this is was this what I wanted no I'm in the wrong workspace what a way to start my demo there we go another awesome feature that we didn't hit on because it's uh next expans related is the instance tools bar that Brad has up right now where it shows the update set and the scope and uh the old system property message from uh core UI ui6 is back as well but Brad do you want to hide it so we get some real estate back sure I can do that the other thing that I really like is this little recent selection thing oh yes that's awesome all right let's get some space back uh and we're going to go ahead and open if you want more information on how to turn that on you should check out last month's Academy it's up on the community nice all right uh so here we go um here I'm gonna zoom out just a little bit this may be harder to see there we go I wanted all my tabs here all right so the first thing uh that I showed uh was that we've added an email client in the activity stream uh so uh that lets you compose an email directly from the activity stream uh which is nice because I have access to everything that's happening in the ticket um I can drag and drop email addresses uh I can forward attachments uh which is nice uh so all of these in the activi stream here um we also are making improvements to the email composer here uh so I don't know that the these are actually improvements uh in Vancouver um but our long-term goal and I me I mentioned this uh is to uh is to make this email client like a real email client that works similar to whatever your favorite email client is um uh now is now is this summarization available for pdis it is not available for pdis currently I have heard that people want to make it available but it is not currently available for pdis uh can you add quick access quick messages I think you can access quick messages but we'll hunt down a real answer to that all right uh so that is the email client uh we also have added a few other things uh like filter sets uh so how do I there we go um so filter sets I can create a new filter Set uh I can I think I can share that so uh right so I can create a new filter set where I do some filtering uh of the uh activity stream uh I think we all have seen that with the activity stream uh it can get uh pretty crazy if a ticket's been open long enough I think that's especially true if you're looking at um like a request and you're writing all of your SE task and request item information to the request those can can get pretty lit pretty crazy um so that uh that's helpful uh filtering the activity stream and saving those filter sets and then one other thing uh is that for attachments uh We've added the ability to create declarative actions for attachments so if I wanted to add another action here uh I could do that now uh with the attachment so this was something that a lot of customers had been asking for um is uh is to be able to add some actions to attachments here all right um so that's basically it for the form itself uh so one of the things I want to do now is let's take a look at the Chrome extension so if you have installed the Chrome extension uh when you bring up uh the console here uh you can see that there's a couple of new uh options and that may be small for you there we go so a couple of new options here around next UI inspector uh and next UI profiler uh so nexi inspector allows you uh to take a look at uh the structure of the page uh and see things that are getting passed into components uh so I can click on this little guy and come in and look at that and so I can see that that header is um where are we yeah so that's part of the form uh component uh and so when I click on it I can see some details the component uh so I can see what properties it has and what the values of those properties are uh which can get really helpful especially for some of our more complex components uh like the form component you can see some of the complexity here uh I can see what the component's internal state is uh I can take a look at all of the action handlers associated with the component and then also look if if any uh actions have been taken so far with the component uh I can also look at events on the page um so I could say there and then I just moused over this uh we can see that tool tip action fired if I click on more actions uh I got the uh the drop down here um and so a lot of a lot of options for kind of inspecting Pages troubleshooting things uh we've got transactions here so if I'm doing something I kind of track uh some of that uh and then all of these things also have filtering enabled uh one thing that I can also do is I can kind of redispatch an action so if we did be a good one here um I can't find a good one but anyway I could refire an action if I wanted to kind of see what what happens based on that action I can just create create a new one and then we have some logs here so some logs that may not show up in the console could show up in the logs tab here uh the other thing is the next UI profiler uh so one of the things I can do here is reload and record what is happening uh so the page is loading and it's all rendered so we'll stop it uh and I get this uh cool flame chart was that the name of this chart uh but yeah I get this cool we're gonna call it a flame chart because I'm like 70% sure that's what this is called uh you can flame graph okay yeah you can click into uh into these uh and kind of see what's associated with it you can see the number of different types of events that were fired um and that sort of thing uh you can download this and then uh compare it use it as a Baseline and compare it to something else there is a little comparison tool here where I could run this again I could import from another instance so if you have one instance that's slow like maybe your test instance is running super slow but your Dev instance is not uh you can compare those uh those load times here and you'll get lots of details uh if you want to learn more about uh the Chrome um Dev Dev tools extension uh we went into depth for about an hour uh last Thursday with uh the product manager and some of the engineers uh and so that is on our un Andi Builder live playlist on the developer YouTube channel uh and I'm sure uh Gabby can post a link for us uh at some point oh she did it nice I was already on it um so yeah that that is the uh Chrome extension uh so lastly we're going to hop into uh uib but I'm going to answer some questions first uh so I think we answered quick messages uh is it possible to reply to an email update in activities via email not totally sure I understand that question um so you should be able to reply to email from the activity stream component there will the drop zone for attachments be increased to be the same as agent workspace uh it's restricted to the sidebar where it was the entire page before that's a great question I don't know uh I think probably not uh because uh the attachments are actually in um a little window here in configurable workspaces uh and so I think you probably have to drag drag it into that uh that page but it may be I don't I don't know what the specific road map is for that uh we a vtb question uh there is um I almost don't even want to say it but there is a conon component uh that you can add uh to a workspace so you could kind of approximate the vtb functionality uh right now uh that would be a pretty heavy lift from a configuration and development perspective uh because you're basically going have to wire all of the data up to uh that con Bond component uh yourself and all of the actions kind of wire everything together um so right now it is technically possible uh but uh it's uh it's not super easy at the moment uh when is the next un Andi Builder uh I believe it's a week from tomorrow is that right yeah that's right correct the second and fourth uh Thursday of every month at 4M Eastern uh and then m a question is the Chrome extension only for Vancouver uh no actually I believe it's Utah plus I don't know that it'll work on a pre Utah uh instance but you could try it um you know the worst that can happen is it doesn't work all right oh and apparently it can be installed on Opera running on Linux not not a thing that uh I have tried all right so now let's uh look at look at some of these things in uib uh and then uh we will be done uh keep the questions coming if you got more questions we will have time uh for more questions but I am going to open a workspace here um so we've got my uh fleet vehicle management workspace uh I've got that what's new uh tab or button uh and it's going to show me hey there's undo redo you can use column layouts uh there is the new preview button and popovers are a thing now uh so that is nice uh so one of the things that I think I want to do here and since we've gotten so many questions about it uh what we're doing in the next episode of you and I Builder live is we're actually going to go over our hober Fest repos and we're going to show you how to contribute so if you're interested in getting into CLI or or working with a a workspace and having like specific things that you got to do and contribute to and have fun with an awesome open source thing uh we will have example Uh custom components up on it and we'll be showing you how to contribute to the project it's a great great um it's a great time to join if you're it's it's your very first time trying out any of this stuff thank you you do not have to sign up to join you and I Builder it is a live stream uh on YouTube so all you have to do is be able to access YouTube all right so we're going to look at popovers real quick uh so popover show up in that same section as modal as models what I have to do is basically create a popover and then trigger it so we're going to create a very simple pop over here where I'm going to add some content to it uh let's go is this my instance where the search doesn't work it is uh that is that's not a Vancouver feature I just need to ZB booot this instance uh it's it's too old all right uh so we've got more presets I'm going to remove the preset and we're just going to say I'm a popover it's an excited popover uh I'm not going to save um we are going to go and now we will TR trigger that popover uh so why aren't you going away I have to click on something else uh I'm going to put a button after this button so let's duplicate that into another button now we don't want to use a preset and we're going to call this popover and we're gonna get rid of that event handler and add a popover event handler so we've got an open popover event handler and the reason that popover event handler was there was because we duplicated the button yes I duplicated the button and it was the other one was popping a modal um so custom pop over I'm going to hit add and then I haven't saved anything and we're going to run a quick pre um so this is the preview functionality uh I can uh you know use the widths here uh I could say fill the whole page um and then I can actually open that page if maybe for some reason I don't think um it's being rendered correctly or maybe I want to test how the URL parameters actually look um I can actually open that page so I'm going to click pop over and now we can see we have this I'm a popover now what's the difference between previewing it using this Pane and opening the URL path yeah the big difference is that when you preview you're getting the most current version or that you're getting whatever is in UI Builder so it this is we haven't saved anything yet so that popover doesn't exist and then the other thing uh that we get is I get to preview the variant that I'm looking at even if I wouldn't normally get that variant if I go to the UR um so are sorry because of audiences and stuff like that yeah because of audiences so if I didn't have the role or maybe my page is like the sixth page that somebody would see um so just one of those kind of nice quality of life improvements we can see I've also got uh undo redo here uh so I can uh if I save uh I still have access to undo uh back before the save uh until I change Pages or clo close out of UI here my favorite usability like quality of life upgrade is if you hover over the elements on the page it's a lot more granular what you're selecting versus containers are purple now and the actual components are blue it makes it a lot easier to view for me yep that's a great point and we also added kind of the ad after ad before uh to the stage here um so we made some stage improvements we're not done uh we are working on performance improvements to the stage in future releases um but for now uh these are the improvements uh I mentioned we kind of redid the Styles paint a little bit just a lot more Graphics uh to make it easier to know what you're doing uh you know I can click into ping and see that this is using uh a theming hook uh but I can get in a margin we could make the margin a lot bigger um so a lot more just a lot more graphic focused um I think the Border was another one where we added some graphics here um but just making it a little easier for people to use especially if you're not a CSS expert um so one last thing that I want to show is let's go create a new page so I'm going to create a new page here scratch and let's take a look at the new column based layouts um so one of the things in Vancouver it doesn't uh put well I guess previous uh releases also do this but it does not put you directly into into the page that is a thing that I think we are going to fix at some point um but I do have to click back into the page after I created it all right so you can see uh as as we mentioned we've got this pink purple looks pink to me uh border on anything that is a container uh and so when I hit add component uh one of the things you'll notice is when I did this before inside of a popover it took me straight to components uh so we're trying to be a little bit more textually or contextually aware of where you're at and and suggest some things based on that uh so the uh the layouts here instead of having to add um you know containers and try to Nest them and make them work right which which I was always pretty bad at uh there are some preconfigured layouts uh column layouts you can choose so if we do side panels uh I have this here and then you can also reconfigure these or add your own uh so we can see that right right here we're using percentages you know I could I could change these I think um I can add uh containers within that so I could within this column I could add another column layout like maybe we wanted columns within there for some reason uh but uh you know you've got some different options there and this is another example of where the stage is a little easier to work with um if I flip back handles right sorry you can also use the handles to change the column widths when you click on them yes yeah I think uh I think you can drag I don't know why it's not doing it here uh but one other thing that I wanted to show oh I think this will work let's see is on a page that's fairly complex like this one uh you can also click into these and uh walk up and down uh these layers so if I click I'm on container one don't know why that's not there we go then I can keep going up the tree um so just another way if you have a really complex page and you're not sure like if you were uh you know a bad developer and didn't rename all of these components that are the same it could be confusing when they show up in the content tree um but uh yeah all right uh we've got about five minutes left uh I'm going to stop sharing and we can do some Q&A oh actually I think we have more slides to go through but we can do Q&A while we are doing that so if you have any questions go ahead and ask we've got about five minutes left so uh resources that we have available um so we have uh the next experience Community uh so there are a number of us that are subscribed to the next experience Community if you go to product hubs products now platform next experience it's somewhere something like that um you can get to that Community if you ask a question there's a lot of people subscribe to it um so that's the best place to get answers uh for uib workspace uh related um content uh we have our Coe uh that we have a link to in the chat uh there is a UI Builder fundamentals course uh which has been updated for Utah uh and then uh we've got a YouTube playlist that has all of our Academy set sessions um so if you have more questions about guided tours and theming and other things that we released in Vancouver uh we did a next experience UI and theming session last month uh and uh it will show you what is in uh Vancouver for those topics what else do we have here uh this is part of the live on service now series uh so uh we've got uh you know we've got a number of differentes in that series that we've got on the next slide uh and you can register for all of them or some of them uh from the same page um and here are all of our platforms uh so uh we've got the platform Academy which is where you'll find things like process automation designer flow designer things like that uh we've got analytics mobile you're watching next experience uh and then our AI academy uh is something uh that it's a little bit newer uh and exciting uh so I'm sure that will be a pretty active academy uh over the next few months uh and then conversational interfaces so VA chat things like that all right I think that's it that that's it any uh anybody want to ask a question in the next minute or three minutes however long we have thanks for handling the outro don't forget everybody our next session is going to be October 18th uh at 11 a Eastern like today we also have the you and I Builder live series if you're looking for a little bit more in-depth technical knowledge on UI Builder and workspaces our next session is going to be next Thursday at 4 p.m. Eastern if you have any questions you need anything else like Brad said find us on the service now Community thank you all very much thanks everybody goodbye
https://www.youtube.com/watch?v=PdfKkQXckoU