welcome everyone to episode 11 of the next experience academy uh we are happy to have uh so many people here interested in next experience topics and let's go ahead and get going and do some introductions there we go I'll go ahead and start my name is Brad Tilton I am a senior principal at outbound product manager on the platform web ux team and I cover UI Builder workspaces and all sorts of things like that and yeah I John or Ashley so I'm John Lind and I am a principal product success manager so I'm kind of Brad's counterpart for engaging with our customers and making sure that they're successful with the next experience in in the UI Builder hey everyone I'm Ashley Snyder I'm a principal outbound product manager I am on Brad's team I support areas such as Knowledge Management in admin Center I'm really excited to be here with you guys today all right makes you also a little bit of housekeeping before we move on um so the there's both a chat and a q a uh if you have a question that you want us to answer uh whether live on the air uh through the Q a feature or afterwards uh use the Q a feature and not the chat feature there's enough people on this webinar that keeping up with the chat is going to be pretty difficult for us so please do use the Q a feature if you ask a question in the chat it may not get answered so the chat you can use for comments and things like that it will get saved but for questions we want you to primarily use the Q a feature we are recording this session uh it will be once it gets uh you know once Zoom generates the recording we'll take it we'll edit it and then we'll post the session and the slides out on the community on our next experience account Academy page all right what should we expect these sessions are for you please ask questions uh I you know if we get too many questions to answer live that'll be great uh we you know track all these questions and it helps us know uh where people are struggling or or where all of the questions are so we know what type of enablement material to create and then any comments any feedback that you have on you know products or the academy let us know and um you know we are going to be in the product quite a bit we've got a few slides to get to but we'll be doing some demos of some different tips and tricks and that sort of thing as we go through and then we will be back soon uh this is on me I didn't update the slide apparently but we'll be back uh the third Wednesday of August whatever that is uh so ignore this July 19th thing because that's today all right and you thought we were going to skip it but Safe Harbor we may say something that's forward-looking Vancouver is about to come out in early availability in a couple of weeks so if we do uh just know that we're product managers things can always change don't make any financial decisions based on what we share here all right so today's agenda we have some intros we did those already next experience UI framework intro we'll do just kind of some quick level setting on terminology and uh you know what what the UI framework consists of what workspaces and UI Builder are when you should use workspaces and service portal that sort of thing if you are a regular on these sorts of things you may have seen most of these slides already so we'll try to keep it pretty brief and then we're going to get into it tips and tricks demo this demo is really like common questions that we hear from people or things that we we think would be helpful for people to know so most of if I don't think any of these things are the things that we have enablement material out there for currently and then we'll do some q a at the end and that q a could involve us doing more demoing it kind of depends on how much time we have and what kind of questions we get so without further ado Let's uh let's get into this intro uh what what even is this next experience UI framework so some terminology I clipped out of the PowerPoint and now it's not letting me use the keyboard there we go uh so the next experience UI framework uh is uh our I guess new is kind of in quotes at this point it's it's been around for a little bit at this point uh but the UI framework is our newer JavaScript framework built on web component standards so um you know our previous front-end framework which is still you know something that we're using and customers are building portals with with service portal it was an angularjs based framework this new one is a framework that we built and we own so that we can kind of have more control over it um and but it is just all standard JavaScript web components so that's the UI framework itself uh there is something else called the next experience UI and this is a new uh version of our UI built on the new framework that we released in the San Diego release you might hear terms like Polaris as well some of the properties are named Polaris the theme is named Polaris but that is the same thing as this next experience UI so that so was released in San Diego in Vancouver it'll be turned on by default if you want to know more about that you can watch last month's next experience Academy where Ashley and Maria Gabriella went through and talked a lot about the new UI and what it means in Vancouver I did see something in the chat where somebody said seismic if you ever hear the term seismic or see it that is the same thing as this next as the next experience UI framework that's our internal name for it so externally it's next experience UI framework uh we've got workspaces uh configurable and agent workspace agent workspace uh was kind of our Legacy workspace we introduced it in Madrid and it was this tabbed tabbed based interaction for agents people really liked it but it wasn't very configurable so we took that feedback and kind of completely rebuilt workspaces so that they are extremely configurable now and so that's where configurable workspaces come in so with configurable workspaces all of our different application teams and product teams that servicenow are building their own workspaces some of the most popular ones are service operations workspace cmdb workspace HR agent workspace CSM configurable workspace all of those are configurable workspaces that are built out by our different application teams and then the last couple of terms here are just kind of things to keep in mind core UI is basic quickly if you have an instance and you have not enabled the next experience UI you're working in core UI you may also call it UI 16 and then classic environment is basically the way that you've kind of always worked in servicenow and forms and lists but not workspaces so whenever you hear us referring to any of those things this is this is kind of what we're talking about here and again these slides will be available afterwards so that you can refer back to this so I'll talk a little bit more about the tech stack that the new framework is built on so again this is a pretty modern JavaScript framework built on open source web standards it's really similar to react but it's not react so we have found that if you take a react developer and kind of throw them at this new framework building custom web components they're up and running pretty quickly there are some slight differences so this framework with the framework you can build these web components and then what do you do with the components well you can build your own components with our framework we also have a number of components available for you by default I think we're at around 250 at this point so you know most common use cases are covered by the components that we're shipping by default the page that you're seeing scrolling right now is on our developer site if you go to reference and then components you'll get to this page from developer.servicenow.com and it shows you all of the components we have available and what their properties and events are and how to use them but yeah so you have custom components you've got these components that we Ship by default and all of those can be used in UI Builder so UI Builder is the tool we're going to spend all of our most of our time in today when it comes to the tips and tricks but UI Builder is basically our page editor and configuration tool where you can come in and drag components onto a canvas you can wire them up and hook them together configure them they fire events and from there you can make really rich interactive experiences using UI Builder right now most of what we're doing is configuring out of the box workspaces or default workspaces that we're shipping with UI Builder but it is possible to create your own workspaces preferably with app engine studio and configure those as well so a common question that we get so just to head this off in the Q a is UI Builder and service portal is UI Builder has it replaced service portal and you know how do those work together you know right now UI Builder is primarily used for configuring and customizing the out of the box workspace experiences that we're shipping and service portal is used to configure or create portal experiences and so what's the difference between a workspace and a portal experience where from our perspective it's really the Persona that's using the experience so workspace experience is targeted at a fulfiller Persona and so you know one of the big differences between those personas is that for a fulfiller this is typically a service desk agent or a customer service agent this is somebody you're going to kind of train to use something and they're going to be handling multiple things at the same time productivity is really important you want them to be able to do everything as quickly as possible and you know see lots of information at a glance and so workspaces are really aimed at that Persona so we've got you know multiple tabs tabs and record pages and all sorts of things for that Persona you know service portal portals are generally something you want somebody to be able to use without any training they should be able to use it probably on desktop or a tablet or a mobile they might want to interact with chat or a virtual agent and so that's really the the end user portal Persona so what does that look like practically if you're having to make a decision on which one to use so maybe you have a Persona that's not really a fulfiller it's not quite a requester an end user for service portal um you know how do you make that decision so as of uh we'll say Utah and Vancouver this is accurate where a UI Builder there are some things that experience is created in UI Builder cannot do and are limited in and so if any of those things are important important to you it's you're still better off using service portal the next uh the next question here is always well are you going to deprecate service portal uh there is no current roadmap on a timeline for deprecating service portal if you need a new portal today we would recommend that you build it in service portal it's going to have quite a long life you know moving forward so if if you've been around servicenow for a while you know that we generally don't replicate things all that quickly so a couple of things to call out from this slide responsive Pages you can technically create sort of responsive pages in the UI Builder but it's not native like it is in service portal you're a little bit limited on The Styling you can do with UI Builder Pages the catalog support is extremely limited and so that's probably the most important thing in the slide now when you're thinking about what a what a request or uses and then you know we're not supporting ATF yet and public pages are difficult to set up oh and we have more terminology now before we get into the demo so a few more things we're actually going to get into most of these uh today but the first one is app shells uh for us and app shell is just an experience type every experience has an app shell associated with it our primary app shell that we're shipping at this point is workspace we're shipping more than 40 workspaces as of the Utah Vancouver time frame and so what we're talking about has really just an experience type there is a portal app shell that you can use to build out portals but again those should be kind of small departmental portals that don't need to be responsive public or have lots of catalog in them components we've talked about already UI Builder we've mentioned already macro opponents we're going to get in into in the demo but a macro opponent is basically just the representation of the page on the back end so you work with a page in UI Builder you save it and then it updates the macro opponent which is really the metadata layer that then our framework reads and serves up the page to you when you're navigating to it the variants are basically different versions of pages that you can show to People based on conditions like roles or URL parameters you're passing to the page a page can have basically unlimited variants that you can serve up you know based on all sorts of conditions so you know if you have 10 variants you're navigating to one URL and based on the person's role or what you're passing to the URL you're going to serve up a different variant and then lastly ux page properties I don't think we're going to get into these much today but ux page properties are basically just properties that are specific to your experience so you know you define an app shell so the workspace app shell does the same thing you know with all of your workspaces but then you might want your menus to be different in different workspaces and so that would happen through ux Page Properties or could happen through ux Page properties with that it is demo time so I think John is first and John if you want to go ahead and grab the screen share and go ahead and we can start the first one very good which one is the first one of the three demos I'm doing is it the Playbook tabs we're starting with I believe it's Playbook tabs yeah cool here here we go and uh we've got all kinds of Windows here on the screen excellent so yeah so so basically a fairly common situation request is to basically add custom tabs to a record page um the um excuse me to a record page so in the old days if you look for like adding a Playbook record page tab to a workspace record you'll find this article by Arnold and uh basically you have to be as smart as our new to figure out how to do it because it's a lot of work or jumping around all these like ux screen records and all this stuff and modifying Json and it's terrible and it's a lot of work and uh in addition in the new Utah standard record page even after you do this it actually doesn't it won't work for you and the reason is that this macro opponent that we're using that was rendering the tabs is now based on a different uh a different technology the good news though is it is a whole lot easier so I am going to do this I got some notes over here I'm gonna do this pretty much cool we'll see how it works um I may have to I may have to look at my notes here but we're gonna see if I do it without the notes but what I'm looking at here is I have a standard record page in Utah it's an incident record variant and what I want to add is I've got the details Tab in a related list Tab and I want to add a tab for playbooks like I said the old days you go jumping into the courses CX tables and Fiddle with it it wouldn't work you wouldn't know why it was a lot of work but now you can do that you can do most of the configuration right here within the tools um so to start with I'm going to go here to the main tab and I want to add a tab for playbooks so in this case I'm going to start from an empty container click next and this is the label you'll see on the screen and no icon that's good I'll create it and uh cool Playbook so I'll move that up to the top your first tab oops there we go get a website of a details cool and then what I want to do is I want to add the um The Playbook component here so I like to do it over here from the the tree here on the left I'm going to look for Playbook Playbook cool and it's added nice um got it so it's using a preset and the preset isn't going to work it takes a work right now but when you actually run it once in fact let's go ahead and save it so we bring up uh bring up the preset so basically a preset is binding to values that actually aren't there in runtime so we'll change that but I'm just going to verify that um when that Playbook component basically with the presets is running in the context of a tab um you see you get a configuration so let's close that let's go back here so what we need to do is we need to change the way the um The Binding is happening to get the table and the sys ID so I click here right there cool and we're going to go back kind of anyone is familiar with like uh a lot of like uib development you're familiar with contacts perhaps table and then we'll do the same with the sysid so this one here it's just ID cancel we're switching over to a data binding your contacts the process arily and I'm going to save it and there it so it's that easy nice much much better uh as we used to say back in Texas to for poor RNA bless his heart that he had to go through that to just to get the get the tabs working in the old system but as you can see it's much easier to do now that's it Brad all right so I get to go next so I'm hoping this would be a little smoother ah of course I got logged out all right let's log back in here that should have been logged in while John was going uh so this next one we're going to talk a little bit about user experience analytics um so if you don't know anything about user experience analytics uh it's basically a client-side what do we call it uh you know like interaction tracking uh so it was I think we acquired a company a couple years back and have re-platformed uh that onto servicenow and so uh with that with user experience analytics you can track all sorts of uh different user interactions in service now so it works on mobile service portal next experience Pages all sorts of things and there's quite a bit that you get by default and user experience analytics we actually did a next experience Academy I think it was either March or April I think it was number nine where uh the user experience analytics team came on and shared in a lot of detail all the different things uh you can do with this tooling uh and so if you're interested in it I would recommend you go back and watch that we're not going to spend a lot of time on uh you know user experience analytics them itself here but what we are going to do is show you how to add a hook into user experience analytics from within UI Builder it is super easy but may not be all that obvious to start with so this is the uh let's say UAE because I'm tired of saying user experience analytics home page and you can see that there are a few different types of there's a few different channels in here so a lot of next experience primarily workspaces portals mobile and then uh virtual agent conversational interfaces down here and you know what it's doing it's going to track all sorts of things by default so fleet vehicle management is kind of my my pet workspace that I like to play around with but you can see in here we've got all sorts of things on this dashboard including you know total active users this is my personal instance so there aren't going to be a lot of active users sessions and Page views and how long people typically spend in there and then some different things you can set up funnels and then the thing that we're going to look at are events so by default there are a whole lot of events that automatically get tracked through here and I'm not going to dive I'm not going to click into it yet but we will click into it in a minute but I'm basically going to show you how to add more events the nice thing is there are a ton of events that it already tracks like loading navigations if you're going to load collab chat if you click through a list this is a custom one uh you know there's all sorts of things that automatically get tracked so if you are already using workspaces or uib experience experiences it's probably a good idea to come in here watch our previous Academy kind of see what you're already getting what you're already tracking through user experience analytics and then kind of see where else you might want to add things so let's go ahead and hop into UI Builder so I'm going to open uib and then we're going to open my fleet vehicle management experience and so this is this is going to be a little bit of an odd demo because user experience analytics doesn't track things real time I think it collects data maybe once or twice a day so I actually did this yesterday so it would show up in today's demo and of course we're still loading there we go so I'm going to find my fleet vehicle management app and then we're going to click into this dispatcher homepage we also had a question that I answered in the Q a but I'll I'll answer here as well about what are variants are they kind of like views to a table uh and you you could kind of think of them like that I think they're a little different than that but basically I have all of these pages that have a URL path and then I can have multiple variants to my pages where I can order them and then I can set audiences which is basically roles and then I can set conditions which I'm basically saying you know hey if I pass the table incident I may want to show this other variant instead of the default one so what we're going to do now is we're going to click into this dispatcher home variant and this is a variant if you're interested in this app there is a knowledge23 lab called uh building a killer workspace experience you can find it on now learning and it'll actually walk you through building this page if you are interested but this is this home page it's basically a heading a big search bar and then a couple of list components here so for this uh for for this thing what I want to do is I basically want to track anytime somebody searches something I want to know what their search term was and that they searched so I'm going to click into that component uh anytime I click into a component I can configure the component I can style it and I can add events so for this component one of it's its main event is search executed so when I type something in and hit enter or hit the little magnifying glass icon and all it does basically is fire an event and then it tells me what the search term was and then from there I can do all sorts of things with it I could use it to filter these lists I could use it to filter a different list but we will look at that so this is what was already here what I added yesterday was this add event tracking so if I go add an event handler I get all of these default event handlers one of them is add event tracking and so this is really specific to the user experience analytics so what I'm saying is anytime this event gets executed I want to track it through user experience analytics and so let's look at what I did here uh so there's a couple of ways to do this and I will tell you why I scripted it which you know it's like sort of scripted I just put in some text basically but the form itself you provided an event name uh this is an arbitrary name you can name it whatever you want and then you provided some data and so there are some the data is just a Json field and so there are some things in here by default there's some properties you can use you can add your own custom property uh the drawback of this is that I can't pass anything Dynamic here so this is all just static values that I would provide so if I want to pass something Dynamic I use the script option which I'm doing the same thing I'm giving it a name which is vehicle search term and then I and the basically in the payload for this event if you will I'm giving it a property so my property is going to be search term this is again and kind of an arbitrary name that I created and then I'm passing this search term from the event payload right so I execute my search event it has a payload that comes with it and one of the things in there is search term so that is uh that's about as easy as it gets to set something like that up and so if we test this I can search something like so these are all vehicles so if I search forward and hit enter you know I get some more vehicles in here this is not the prettiest page in the world but now I am tracking anytime somebody searches and I'm tracking what they search for so if we go back to my user experience analytics which is hidden by my zoom bar let's get there I did it all right I can click into the top events here and we see that vehicle search term I have three occurrences of this and there's a couple of things I can do from there but what I want to do first is just open that up and we can see hey this is when this was executed I just built it yesterday so on the 18th I searched three things and then one of the nice things about it is it just takes whatever properties I pass it and tries to make sense of it for me um so yesterday I searched Ford Honda and Subaru I searched three times and so I get I get a little data visualization obviously you could get you know much more complex with this and do lots of things but it really is this easy where you go in add the event handler and then you get the user experience analytics here so you know this is just something to kind of keep in mind as you're building out experiences or you know customizing our experiences uh is you know what are some of the things you want to track and once you figure that out it's fairly straightforward to go in there and track those all right so John I think you are up with event payload tracking America console.log statement Brad's got a pretty good uh pretty good what he just showed his pretty good experience where you're like hey there's this new feature this like ux event or whatever and you know I need to figure out what my payload values are so I can call it right so the really common problem and I it's just something that I you know when I first especially when I first started working with uh working with service portal was like knowing all these events were firing everywhere and you need to pass things around like what is the payload right so and what I'm about to show you might seem like a like duh pretty obvious but it's like one of those like one weird tricks so uh it's pretty easy to to do like a console log right in script and so I'd go edit my scripts and like hey here I got a script maybe that's doing this thing you know the script it's got some other logic and whatever and I'd go at console logs to it but then it occur to me that uh basically these events can take as many you can attach uh you can attach these scripts to any kind of event and there's one thing they all have in common is that isn't that they've got an event right an event object so this is a script I have I just recreated in every single project I work in um but uh I call it um [Music] foreign and now the nice thing is I can attach it to pretty much anything so a common one might be I'm trying to figure out what the uh what data is coming back in a certain event so I want to you know when the record is is a uh with you know in the form loading State changes I want to do something like what are the values available to me right or if the record is updated what are the values available right so for example let me see I've never done this before let's see what it what it gives us so we can debug event cool and cool and maybe I go to and go to the body level and see what's going on here sometimes I'm interested in onloading events kind of curious which one gets which one lands first um close this and event mapping and on page ready [Music] and then of course you can take other activities that have their own events um and you can just append it so uh you see there's this open record and then I can add an event handler after it right um uh of course we're going to probably want to go back and pull these out once you get that once you get deployed to prod but um what this will do is give us this and this and then you'll see these uh you'll see the events and so that I edit the event name and then the cool thing is I can then start drilling into the payload to figure out what the payload's about so it's an example this example is the record form loading State change there's an actually it just floating is false that's the only valuable that that way um you can kind of dig in and see what's available to you in those payloads it's loading is true and again so similar same same kind of schema that's good to know the macro comments ready it's got a little bit more stuff here options and then the element ID okay cool cool so anyway yep that's uh that's a script that I use on pretty much every project that I'm working on to help me kind of figure out what's going on with events yeah thanks John and I I want to just uh reiterate that you know that console.log and a script this is a workaround right this is uh you you probably should be able to know what is in an events payload without having to log into the console uh that is something that is feedback that we've gotten that's something when we know we're trying to solve for um but for now uh that is probably the best workaround for you know you have an event that fires and you're not really sure what kind of data you're getting in the event payload you know that's that's the best way to get it at the moment all right so uh number four on our list we're going to talk about macro opponents uh and so uh what what is a macroponent so uh in this new framework that we've built out uh we've got UI Builder which is really this you know page that we're looking at at now uh this is kind of a graphical representation of a page that is going to be served up to whoever navigates uh to the URL uh and so you know there's all sorts of complicated things happening on the back end and uh in order to you know store what's in this page we have this metadata layer which is the macro opponent table and so when you save a page in UI Builder it takes a lot of the data from UI Builder and writes it to this macroponent table uh in uh it's mostly Json and then the you know engine that actually serves up these Pages looks at that Json and then serves you a page and so we're going to take a look at that metadata layer here and you know show you a couple of things around you know how how you can use that to find things for the most part but just kind of see like what's going on with your pages um so we're going to start with this page that we already looked at the dispatcher landing page and you know one of the things that I want to see is you know there's kind of a couple of things I might want to do with macro component table and um that that would be maybe I want to look at versions um so maybe you know this page has been saved a few times and I want to go back to a previous version uh which you know is is a little risky to do but maybe I just want to go look at what the differences are or maybe I have a component that it's not really obvious uh how to use it and I want to go look for other pages that are using that component and I can do that through the Mac component table and so for this example we're going to try to find other instances of the search input component being used so first we're going to go back into the classic environment and I'm going to find the macroponent table by going sysux macrophone and list this is just a little filter trick that's been around for a long time I can type in the name of a table.list and it will take me to that table so CIS ux macroponin uh and this is actually going to list uh the macro opponent table contains all of my pages uh it contains uh sub pages and Page Collections and also components themselves are macro components um so in uib world everything is a macro opponent you have different categories and things like that but what I do is I go to this table enough to where I have kind of customized what I see here and then I am sorting descending on updated which I do pretty much on any metadata table in servicenow but we can see that dispatcher home page that I just looked at is the first one in the list so let's take a look at what's actually in this macroponent table so one thing I'll say real quickly is um you if you can avoid it you should not try to update these records like this um so they have three main fields that have a lot of Json in them and it'd be pretty easy to kind of corrupt a page just by you know mistyping or something into Json so this Json is all generated by UI Builder but it can be helpful to look through when you're looking for things so again don't try to update this table unless you really know what you're doing and you really have to so there's a few main fields on here the first one is the layout field so the layout field is going to hold um you know kind of the structure of your page and um or some of the structure of your page and some styling and things like that you can see that there's not a lot in here for a fairly complex page the main field that we're looking at is the composition field so the composition field is going to hold uh really the entire structure of your page including your containers and your components it's going to show you the properties for your components events they're firing all of the mapping between the two and so this is really what I generally am searching if I'm looking for something I'm searching this composition field uh so you can see in here we've got um you know sys IDs for different components and things like that and this is quite a long page uh or quite a long field so there's a lot in there but this is again the composition and then data are all your data resources so any data resources your page is using are represented in this data section and there's a few more things down here um the the state um you know dispatched events things like that and then one thing is any ux client scripts on your page so if I switch back to UI Builder I don't think this page actually has client scripts but if I added a page script here and saved it I'd have the client the page script and a related record that's really the only thing that gets stored outside of this page uh so everything else you do in UI Builder and save uh gets stored on this one record uh one of the implications of that is that if you have multiple people working on the same page and UI builder at the same time they are almost definitely going to step on each other's toes so you don't want them working on the same page at the same time there are some things you can do around page collections which we call extension points internally to mitigate that a little bit we're not going to get into that in this call because it's a little more complex but I just want to reiterate that you also see there's a versions related list so this is helpful for me sometimes if I've done something to a page and I want to just revert back to the previous version I can come back and revert back just like you can do on any metadata record and service now so let's go ahead and look for what was the the search input component we want to find other pages that are using that same component so I'm going to go back to the root of my macroponet table and first we're going to find the sysid of the search input component I think it's just called it is this one I think all right so we've got the search input component I'm going to right click and copy the sysid and then I'm going to come in and we're going to remove that and then I'm going to search that composition for that sys ID all right so it shows up on my dispatcher homepage that's a good thing so we are searching for the right thing I believe and then I see all of these other Pages where it shows up and you know I I could this is a good way if you're especially if you want to use one of the more complex components like calendar or kanban this is a good way to find other pages in The instance that are using those and then go in and kind of take a look at how they're configured and those sorts of things so I'm going to stop here and then I think John's going to talk about handled events and then we may have a little bit of time left to do a q a excellent so I almost feel my screen um so my next topic actually is good uh it actually is a good transition someone just asked a question about using scripts to uh emit events which you can do there's API dot emit um but what I'm about to show you is a way that you can avoid that um so we're familiar with uh you know obviously again it's just it's just such a fundamental part of the application pretty much every every component you go to you know seems to admit some sort of event right um and then you know you add an event handler you get your nice list here you see the scripts you created you see these kind of page level events um and then there's a couple like core base level ones that come with the system it's all great right um so the question though is well what can I do as a developer can I do something similar and then why would I want to do that um so what you can do is we can actually add our own events that will then appear in that list and so again we're familiar with adding scripts um and so you might create a script that we did several things kind of wraps everything up um but I prefer to have okay I want to handle event that I might want to reuse drop it in a few places a good a great example would be um Brad's ex Brad's demo of the uh of the activity tracking right for ux events well maybe I want a certain type of activity that I want to reuse that I want to do a couple things I want to track the activity and maybe I want to update a table uh I want to do a a query I want to do something and there might be a group of things you might want to do as a package um and you might want to reuse that and so you don't want to have to go around necessary to add that you know two or three events over and over again to different um components of your page so what you do is you can create your own handled event and I apologize I wish I had a more real world example um but I'll say uh you know update uh state and uh us something like that and then I can apply my own payload fields and I would be like uh you know I mean it's like first it's ID not sure last to study at that then you get a handle of in here so then where you where you define like what to do when this event happens is up here in the page events so what I can do is I can say okay uh when um the update State ux event is called I want to actually have a state variable first um my state and the last to City cool and so then what I want to do is whenever whenever this event is called on a page I want to update the state and uh add an event tracking record so I can do update uh where is a update client State parameter and say last added assist ID and now I've got access to the payload uh let's just ID right because that was defined in the handled event handled event record so click out here click and then add and then the other thing I want to do is I want to also like I said I want to add a event tracking record so and for that I can use that you're going to use my payload to uh specify the event name and you know obviously I'll do some more work here and then I've got this group of uh this group of events that I that are going to be responding whenever this event's dispatched and so uh and so yeah and so basically you can then attach it to any other event like you might it might be used to for example open record I've had my event handler here uh update State ux event in this particular case I probably need to you know bind into something might be the name is then maybe the last this would be edited again for example oops favorite context processes for example so yep and what this will avoid you having to do is build basically build these big bundled scripts that have a whole bunch of different logic in there maybe call different events um and instead of doing that you can high pressure personally prefer to use the uh to use this interface to to interact with with events all right that's the end of our little tips and tricks demo uh we've got about seven minutes left so I've got a few more slides to go through uh feel free to add any questions into the uh into the Q a panel and we'll try to get to as many of them as we can live here in the next uh seven minutes uh and then anything we don't get to uh we will try to answer when we post this session to the community um so we've got a few different resources here uh the next experience community on the community site is under uh products now platform next experience if you have any sort of UI Builder questions workspace questions next experience UI components custom components that's the place to go to ask them there are a number of us that uh I get alert I get an alert anytime anybody asks a question on that community and try to make sure that we at least address things even if I don't know the answer so that's a really good place to go to ask questions we also on that Community have a next experience Center of Excellence where we've got I think more than 60 articles across all the different next experience topics you will see you can kind of see in the screenshot so we've got you know what's you and new in Utah Tokyo San Diego that'll be updated with Vancouver pretty soon here and then on now learning we do have a UI Builder fundamentals course it's actually updated for Utah now so if you want to you if you want to learn more about UI Builder workspaces and are kind of starting from the beginning that is absolutely the one I would start with it's free and self-paced uh and a really good place to start we are looking at a an advanced course as well that would go along with a fundamentals course so stay tuned for that and then these academies I think there was already a link put in the Q a to past academies but they are all also on the servicenow community YouTube channel on the next experience Academy sessions playlist so you know I mentioned the user experience analytics session which was number nine where you can go back and kind of take a look at that one um so lots of resources for you if you haven't looked at these in the last couple of months it might be a good idea to revisit some of this because it's the community's been pretty active we've been posting things uh one other thing that I'll plug in here uh was we did I think four or five different Labs at knowledge and Creator con this past year uh related to next experience so there was a few there was a custom components lab a couple of UI Builder and workspace Labs there was a service operations workspace lab and a theme Builder lab so if you want Hands-On any of these products most of those are on now learning I think the service operations workspace one is actually on the community but I believe we're linking to them from our next experience Center of Excellence there uh we also have uh what do we have here uh so live on servicenow uh the all of the academies are a part of this live on servicenow event series uh that uh that uh goes across all of our products uh there's a QR code here if you want to subscribe to them and take a look at everything that's going there and then if you want platform specific Academy sessions we do have a number of different platform academies uh that the next experience is a part of um so you know General platform which would include things like flow designer and integration Hub and things like that and then analytics mobile next experience AI which nobody's interested in right now right and then conversational interfaces are all there so I'll leave this slide up and then any uh questions that anyone has please put credit questions I think it's a good one to reference excuse me um and so basically what he's observing I believe is that he started a a CSM portal in San Diego he's upgraded Utah but the the the record page still looks the same right so maybe you can talk a little bit about you know the state of record page versus The Bu record pages oh that's a great uh that's a great question uh so in uh Tokyo uh we came out with kind of a new uh I don't know technology Paradigm uh for components uh that that we call presets and controllers and so presets and controllers uh lets our internal Dev teams uh build in presets for their components so some of our components uh are pretty complex and they require like you know crazy Json and some of their properties and so presets makes make it easy to where when I add a preset enabled component to a page it comes with a controller which is just a type of data resource where I can just configure the data resource and then it automatically maps all its outputs to the components and so the first preset enabled components are all of the record page components so if I add you know form fields or a form header it will automatically configure itself also once I tell it the table it's this ID then I want it to come from and so as a part of that we shipped a new record page template that uses all of those preset enabled components that we call the standard record page template so that came out in Tokyo the way that if you want to see behind the curtains a little bit the way that we work from the platform side of things is you know our platform team we build out all of these tools and then our uh you know different application teams and our different vus like itsm and customer service and and HR employee workflows they all use the same tooling that our customers and partners do and then they build out their experiences and so one of the things that all of our different workspaces are doing is they're kind of looking at if they haven't already when they're going to take that new version of the record page using the standard record page template and incorporate it into their workspace so it depends on all sorts of things but that may be one reason why you may not see the newest version of the record page in some workspaces is because that team hasn't up taken it yet and so we expect that they you know most most will eventually but if if you're using a workspace you really want to see that new page use the idea portal to go in and let them know that you want to see the new standard record page represented in that workspace I think we are at the uh the bottom of the hour yeah that's what we call it when it's zero zero right so we're through here and again we will uh we will be taking this session editing a little bit you know cutting off the the beginning and then posting it to the community along with the Q a and then I think probably most of the links that we've talked about including the knowledge sessions uh will be in that Community post but again thanks everybody if you have any additional questions go to the next experience community and ask your questions and we'll try to try to get to them but thanks for joining everybody I really appreciate everybody joining and sticking around