hello everyone thank you so much for joining today um this is our second next experience academy um go ahead and introduce ourselves before we get started with everything um so i'm ashley snyder i'm an outbound product manager on the platform web ux team i work with next experience ui and questions regarding workspaces i'm really excited to have you guys all here today i'll go ahead and hand it over to brad to introduce himself hey everybody brad tilton i am also on the outbound pm team for next experience i do a lot of ui builder and components and all sorts of things so we're excited for this month's academy session and i will go ahead and share my screen and we can kick things off all right well we're going to go ahead and get going so i will attempt to advance the slides here uh so today we are going to focus on a ui builder and some new tokyo features so uh tokyo ea came out a couple of weeks ago i think that's right yeah yeah on the third i think it was a couple weeks ago uh so uh you may have had time to play around with the tokyo features already but we're going to run through a lot of them and then do a bit of a demo at the end on some of the features that we think are notable but before we get into that we may mention something that is in the future uh if it's utah related or something like that uh so don't make any purchasing decisions uh we're product managers so uh we are always looking into the future but uh we don't really know what's actually gonna make it and what may not make it in a future release so just be aware of that so we're going to go into kind of an intro to ui builder and resources and then we'll get into what's uh what's new in tokyo and then do a demo and we should have some time for q a at the end um so if you've got questions you can go ahead and put them in the q a uh and you know we'd rather you put it in the q a panel than the chat because even if we don't get to your question live today we will try to make sure they all get answered when we post this on the community this is being recorded it will be posted on the community so if you want to send it to somebody that wasn't able to make it you will be able to do that i think generally we do that by the end of the week but it could be it could be next week depending on how long it takes all right so we'll go ahead and get started so what is ui builder so ui builder this version of ui builder has been around for about a year and a half we introduced it in the quebec release and it is a wysiwyg editor that lets you build user interfaces basically so specifically ui builders for building or configuring or customizing existing pages for workspace and portal experiences and you can do that with components that we provide or you can build your own components and we'll get into a little bit what that means uh so uh what is ui builder um so ui builder allows you to create modify uh pages uh for experiences uh for the most part uh we are uh you know we're saying you should really start by modifying our existing workspace experiences we'll get into you know what you should use for portal and things like that you can see a screenshot of ui builder here we'll get into it as well but you can see it's kind of this three panel where you have page info you get a preview and then you've got some configuration options on the right ui builder lets you use variants to control which versions of which pages people see when they access the page and you can do that using roles or you can do that using the contents of the page we've got more than 150 components that we ship by default that you can really use to customize and build pages without having to build any of your own custom components we have data resources which lets you fetch data and write data to the server we've got client state parameters which help you manage your page's state and then we've got events and event handlers which allow you to take action on uh some something that somebody does on the page we uh we allow both flexbox and grid layouts and you can mix and match those on the page and then you can also extend our next experience themes into your ui builder page uh so we also have our component library i mentioned we have a lot of components available uh by default uh these components can be uh found on the developer site if you go to the developer site then go to reference and components you'll get a list of all of the components available they'll have a lot of information on how to configure them so you'll be able to look at their properties see what events they fire and in some cases you'll be able to see all of the theme variables that can affect that component so you can see we have a lot of components available here and so yes so i just saw a question come in are there plans to support reference fields with the tree picker attribute within workspace view i can't remember whether i put it on the slide but that is a tokyo feature so great question all right uh so here are a few of the workspaces that we ship uh by default uh as of tokyo i think all of these are actually as of san diego but most of our bu products so itsm csm hr they all have configurable workspaces now i think the number of configurable workspaces is more than 10 to 15 at this point so when we say you know you should start with an existing workspace you should be able to find an existing workspace for your product before you go create one um i did since we're on workspaces brad i just want to answer a question that we had um from robbie regarding converting existing agent workspace landing pages into configurable workspace landing pages um there isn't a way to do this uh currently i do want to mention even if there's some back end hack way of doing it it's not really suggested just because we did release a new layout system which we'll discuss a little bit later in san diego and agent workspace pages don't take advantage of that new layout system just because the legacy ui builder in agent workspace doesn't support it so we don't suggest it um just go ahead and recreate those landing pages in the configurable workspace and ui builder if you need to convert them all right thanks ashley all right and we actually had this slide in the last academy but i wanted to reiterate it because it is important um so you know we've mentioned workspaces so far one of the other types of experiences you can create or you can both create and edit with ui builder as a portal experience but i think when people hear that they think all right we're ready to replace service portal with ui builder and that is not the case as of the san diego san diego tokyo time frame um so you can see here that uh when you're thinking about what tool to use for what uh we're really kind of persona focused here uh so if you are you know editing or creating an experience for a fulfiller persona that's a good case for ui builder because our workspaces are really targeted at this fulfiller persona you know you get this tabbed interface there's a lot of lists set up already for you so if you are looking at how to create an experience or modify and extend an experience for your fulfillers ui builder probably is is a good tool for that and just some added context around uib uh it is built on a javascript framework uh that uses web components so web components is a fairly standard uh technology similar to react uh our specific web component technology uh is a proprietary framework that we've built but that's going to allow us to kind of have full control over it and upgrade it whenever we want and you know make the underlying technology better if we feel like we need to and then we also think that you should try to start from one of our existing workspaces i think that's the third time i've said it but i'm going to keep saying it because it is a really good place to start especially if you are learning ui builder try to work from and configure and customize one of our out-of-the-box workspaces if you are an app engine customer app engine studio also allows you to create workspace and portal experiences pretty easily and you get a lot of pages and things by default so there's a lot of value in creating experiences from app engine studio as well so then we move over to service portal service portal has been around for a little while i think about six or seven years at this point it is our requester focused technology so it's built on angular 1 and our our most current version of a service portal that you can start from is employee service center and service portal really has a lot of functionality around catalog and requesters and knowledge and all of those things that you know your employees or customers that are accessing a portal might need to do and to get a little bit more specific we've got kind of a capability breakdown here in terms of what the two different tools can do so ui builder again we're really focused on fulfillers uh and workspaces but if you need to build out some sort of small departmental portal uh this is mostly applicable to you know if you've created an app with app engine studio and it needs some sort of informational portal that might be a good candidate for ui builder and then if you need an enterprise portal anything that has catalog in it you're really better off with using service portal these are both supported technologies and they will be supported for a while um so you you know if you use service portal and build out a portal right now you're not going to have to turn around in a year and deprecate your portal or anything it's it will be supported for quite a while you can see here that service portal is responsive by default the ui builder pages are not currently although that is something we're looking at service portal supports kind of a pixel perfect design uh ui builder that's pretty difficult mostly because in ui builder we're really encouraging you to use a lot of our default components and you have you know kind of limited capability for styling those components depending on how they're built and what their theming hooks are service catalog there's pretty limited support in ui builder and most most people that i have talked to that are doing trying to do some sort of service catalog they end up iframing in a service portal if they're going to do that with the ui builder so that's just something to be aware of currently we are not supporting atf in uib and public pages can be kind of difficult to set up in uip so you know this slide is just kind of here to demonstrate you know why if you're building a requester based portal service portal is probably the way to go uh unless you are you know you just really want to use ui builder to do it and it will be kind of an uphill battle but ui builder is really focused on that fulfiller experience uh and uh you know you can create a very rich tab based experience in ui builder all right so getting started with ui builder this is a pretty common question it is you know it's a it's a really powerful tool that has some complexity to it and so it's a good idea if you want to get started with it to run through some of our training luckily we do have a few different levels of training for you uh and so the way that we would recommend getting started is through our now learning ui builder fundamentals course i kind of i call these level 100 200 300 that's not any sort of official thing but it's kind of my recommendation for how you would get started we've got a short link up here if you want to access our ui builder resource hub and at the top of that resource sub article there are links to all three of these courses um after that we have another ui builder course on the developer site i think it's got five or six modules now and you go a little bit deeper into each of the areas of ui builder and that and then third we have a creatorcon lab that we ran at this past knowledge called building a killer experience with ui builder it gives you kind of a kind of a beginner portal experience that you built out that's really more of an informational portal and then once you get past all of all three of these so i would start with all three of these first then we have our uib resource hub which is the link up there and we've got lots of videos and articles deep diving and all sorts of uib topics in fact i think i added four articles to this uib hub this week so we are you know producing lots of content um most of the content is ashley's that she's been furiously writing all sorts of articles over the last few months um but uh but yeah so we have a lot of content on there i would bookmark it check back because we're adding you know content to the resource hub all the time all right so now that we're past this kind of overview of ui builder we're going to jump into some of the tokyo features so if you've never used ui builder at all some of this may be a little bit over your head so you may want to go take the training course and then come back and rewatch this part but we'll go through and i'll try to give enough context for each of these then after we get through these slides we're going to jump into a demo and demo some of the things on the slides some of the uib tokyo features um but let's get started um so one of the big things that we did in tokyo that is actually something you're not going to see a lot of in tokyo it's more of an under the hood uh you know new technology that we built but we built out this uh this these features called presets and controllers and so what this allows us to do is have a component authors and right now that's all of our internal component authors so our you know the teams that manage all of our internal components that we ship but these components can be enabled with presets and controllers so presets allow you to basically pre-configure a component and i'll we'll show kind of how this works a little bit and then controllers is kind of an automatically configured data resource that is automatically applied to that component and what we did in the tokyo release is we applied this to all of our record page component so basically all of the form components and then the record page template as well so when you pull a form component out of the page pre-tokyo some of those components were pretty complex to configure you had to get a g-form data resource and a form component and then map everything correctly and so it generally took a while especially the first time to figure out what you're doing but you know you're basically always mapping the same property or the same output from the data resource to the same property uh on the form component so what we've done is we've preset all of that so you can just drag a component onto the page and then give it a record and it just automatically configures itself and we'll kind of show what that looks like a little bit so in the tokyo release we've done this for the record page and the associated components and then in future releases you'll see more of our components and more of our page templates picking up this new technology uh and really uh in in our tokyo and utah time frame uh we're really focused on making ui builder more usable easier to use flattening that that learning curve and so this is one of the ways that we're doing that all right so some other form improvements so we have added the ability to add a user presence to your form uh which was a big ask we've also got form personalization which you can see on here so an agent looking at a form can you know check and uncheck different fields that they might want to see on the form uh answering one of the questions from the chat we have added the ability to use the tree picker on reference fields and workspace previously it only worked like a traditional reference field we have enhanced the tiny mce i believe the enhancement is you can resize it uh better now and then we have added the ability for field decorators and then we're trying to add more right-click functionality to different places and experiences so right now we've added some right-click to forms you can see that in the screenshot on the right how you can click on the header and do some things like you can do in our core ui uh and so you know we're trying to bring the workspace ui uh up to full parity with with the core ui with some of the right clicking and doing things from the context where you are one of the next features is we have a new page creation screen and you can see in the screenshot we'll also demo this but it's a more visual experience for creating pages so we've found that most people when they're creating pages they really want to start from a template which makes sense you don't want to reinvent the wheel when you're creating the page so you can see on here that we've got our our new versions of our page templates up the top uh we've got three of them uh the standard record 404 blank record these are all preset and controller enabled uh they automatically have their um their url prop parameters added to it both the required and optional parameters and then we also have all of our older legacy templates down at the bottom and every release you'll see some of those from the bottom move up to the top as we rebuild some of those templates one of the things one of the other things with this is we're giving a little bit more information about the template if you've used templates before tokyo it was basically just a drop down list and there wasn't really a lot of information around you know what the template does and why you might want to use it so now we've got some screenshots and you can see under the standard record screenshot on the right we have a little bit of a blurb telling you you know this is how it works and why you might want to use it we also have enhanced the tab component so if you have used tabs in the past one of the things that that was restrictive about tabs was that all of your tabs had to be the same type you couldn't really mix and match types of tabs but we have we've changed that to where you can have you know a custom tab and then a collector and then a a viewport you can also use a repeater with a tab which will demo a little bit so if you've got a set of data and you want to build a tab for each element in your set of data you can do that pretty easily with a repeater with your tab component then we've also added the ability to do vertical tabs which you can see in the screenshot on the bottom um so all of this is based on you know feedback from our customers on what they wanted to see as well as feedback from our our different uh business units within servicenow so you know i guess just stepping back from this slide uh you know we're we're on the platform uh team and so you know the platform customers are both you know our servicenow's customers uh and our internal business units they're using similar tooling that our customers and partners are using to build things so you know all of this feedback comes from all over the place one of the next ones is a viewport extensibility and so viewports can be reused across multiple or you can create a viewport collection and reuse that across multiple viewports i don't think we'll get into much of a demo uh with this but i think we're going to do a deep dive on this in a separate video because it is a little more in depth to create a viewport page collection uh then we've got uh some miscellaneous enhancements here we've got a condition builder uh condition builder component so before the condition builder was tied into the list component and what we've done as we've added you know we already had this component but we've made it available within ui builder we've also made a declarative actions easier to use for specific experiences so before it was kind of hard to you know apply declarative action to only one experience so now you're able to to have more flexibility there there's a drag and drop in the content tree which we'll demo this is probably my favorite feature i ran a lab at creatorcon and you know lots of people in the lab i watched them try to drag and drop on the content tree on the left and they were always like why can't i do this and so we have added that in the tokyo release we've changed the event mapping so if you look on the right here the events used to all be listed uh and then you would have to find the right one and add an event handler some of them got really confusing if you've looked at the list component i think it fired like 20 25 events and so now there's a menu where you can add an event mapping and so it's a little more obvious what events you have actually mapped to an event handler on your component we also enhanced the json editor uh where it's a little easier to work with some of these more complex json structures and we'll do a little bit of this in the demo but you know you can do both arrays and objects and add children's and children into them so you can kind of see that in the middle screenshot on the bottom here right before we get too far away um from viewports um travis asked in the q a if we could export a viewport um i'm thinking this is to reuse it i'm not sure if you want to clarify that travis and the q a are in chat but i think you mentioned you can use viewports across multiple pages and experiences now correct yeah so so the way that this works is you can create a page collection and then you can say i want these pages available within any of my viewports so that's the tokyo functionality so you can create a page and then use it across multiple viewports is basically that functionality we are absolutely looking at how to make things more reusable within ui builder right everybody wants to have like a copy page or copy component copy container and get all the components within it and so those are all things that we're looking at for future releases uh but this is specifically using pages within uh other um yeah within other uh or using pages within other viewports um so reusing it in another instance uh so uh like you could copy your you know you can move your whole experience to another instance but i don't think we're really supporting moving parts of an experience across instances at this point i will turn it over to you ashley for this slide yeah so we do have some layout and styling enhancements that we've made in san diego we did switch over to a new layout system that just offered better performance and supported css flexbox and grid layouts prior to that we had an older layout system in which if you wanted to do that you actually had to go in and edit code yourself so we are building on top of that new layout system and i'll demo some of this functionality um in a little bit um so we do have kind of a color coding system now for your variants you'll notice in the screenshot and the bottom left that there's some red dots on your different variants and the color coding is really just telling you which layout system that you're using so if you're on a page or a variant that's using the old layout system you're going to see that red dot you're going to see that pill to top right telling you that you can update your layout if you don't see a dot you're actually using the new layout so you're good to go and if you see an orange dot that means that you've kind of gone through the process and using the wizard of comparing the layouts but you haven't made a decision on whether you want to use the new layout or the old layout yet or not so it's just kind of telling you this one it's kind of hanging out waiting for that decision and it will be in read only until you make that decision and i'll demo that um container styling so this one is really for some you know different use cases more advanced use cases this may not be something you run across all the time but basically a container has two different layers it has an internal and external layer the internal layer basically defines how you interact with components or inside the container and then the external layer defines how you um react with complete different components on the page so outside of the container itself um and previously in san diego when you entered in css there really wasn't a way to split that up when you entered in css for the component or the container um it basically did it for both it you couldn't determine if this was only for the external layer or only for the internal layer it just overwrote both with that one css attribute that you put in um so we have split this up and made it easier and i'll kind of go through a use case uh in the demo of how this would work um and then our css grid area um that is a pre-release feature uh you can see it in the developer um tools within ui builder if you want to start using it um you know like i said it's pre-released so i you know i would probably use this on test pages and sub production things and things that don't necessarily need to go to production right away um and what you can do is really kind of define the different components in your grid areas it just makes that a little bit easier for you to lay out your page when using the css grid you can kind of see in the screenshot you can see that area better you can see where your component is in the um grid area a little bit better and we'll have more on this as it gets closer to actually a full featured release but we did want to mention it because you will be seeing it in the developer tools and ui builder so i'll go ahead and hand it back over to you brad i know you have some things you want to demo and i can hop into my stuff all right sounds good well let's go ahead and flip into my instance and see if it has logged me out it has not logged me out yet so that's nice all right so we're going to do a bit of a demo here and then we should have a good amount of time for a q a at the end so what i'm going to demo first is our page creation process and some of our presets and controllers so let me get my uh my little demo notes here so i don't forget anything all right so we're going to start by creating a new page and i think this is probably good but we're going to zoom in once so i'm going to create a page here and when i create a page i get this new dialogue that comes up um of course it's a demo so it's going to take a little while but you can see that i get some different page templates here uh and we've got you know a 404 page it kind of tells me what's what's going on here blank record and then i also have all of these uh legacy templates as well so different things where you know it's going to also tell me about these templates but we're going to start by creating a record page template so i'm going to use the standard record page or srp as we've been calling it i'm going to click the use template button we're going to call this terrible at naming things so we're going to call this brad srp and hit create so it's going to create us this standard record page one of the nice things about this page is it's going to um there we go so it says hey we set some test values for you so this is one of my favorite features that we shipped so we can we can see that okay we got some values uh so in the old uh templates uh we actually made you create your own url parameters and then set the values so what this is doing is it's defaulting to the incident table and then grabbing i think it's probably the first cis id that it finds you can change this so if i click on this i can change the test parameters so again these are going to be passed in the url so this is really only for testing here so we've got table and sys id and then we've also got some optional parameters there i love this feature the most i think just because i was in an older layout yesterday and i had to go find a cis id and i was like i wish i was in the new layout right now [Music] all right so i'm gonna i'm going to uh move on to another one where we're going to create a different page and this one i'm just going to create a a blank page here uh and we're just going to call this uh red blank because i remain great at naming things all right so they've created the page for me and what we're going to do on this page is we're going to add i always add a container first it just is more flexible and then within that container i'm going to add a form component and you can see over on the right here it's giving me an option so this form component is one of the uh components uh where we have the presets and controllers configured on it and so what it's doing is it's asking me do you want to go ahead and use the controller that comes with this or do you want to configure it all manually so i think most people are going to want to use a preset but if you know exactly what you're doing and you don't want to mess around with that you can still configure it the old way and have full control over that but i'm going to say record form and then it's saying hey in order to do this you need to give me uh you need to give me a table name and sis id and i should have grabbed a sys id but let's do it now and i don't have snutils installed on this on this browser that's a good enhancement we can put in just suggest one for me there we go so we grabbed a i'm going to sysid that in there and then we're going to hit use uh and then it says hey you applied a preset uh so this takes care of some of the configuration events and then it tells you more about how to do that so i'm going to say got it and one of the things that you'll see in here is that it has automatically mapped all of these different data resource outputs into my different properties so if you can imagine before we had the presets and controllers you had to do all of this manually it was kind of a pain so again our tokyo and utah time frame we're really trying to make things easier easier for everybody so save time make it easier to use if we're always going to map the same thing into this then we might as well pre-configure it for you i can also come down and look at this preset and uh or look at the controller uh so the controller is just a data resource that's automatically configured for me uh so this is actually the g-form data resource if you've worked with it before and uh it's uh you know it's got i think it's slightly different uh on the uh on the properties here uh but you can see it's using that uh the properties that i specified i can add some more properties here uh and then we've got uh all of the uh results here which i'm not sure why it's not showing up uh we are in the early access time frame so uh that uh that could be part of it um so here let's do this sometimes in uib you need to save and refresh save early and often try again oh siri siri didn't know what i was doing all right so let's take a look at that again and it still doesn't like it oh well anyway we can see all of my presets here uh we also did change this data resource panel a little bit uh so uh all of the tabs across the top especially if you have a whole lot of tabs that makes make things a little more difficult um you can also see that one of our you know one of our tab improvements and the tokyo release was vertical tabs so this kind of shows you we are using the same components in our builders as the builders use so you can see the vertical tabs here and and then you will see some data over here so one of the things we wanted to do was make this data panel a little bigger and then one of the things that i really like is that i can copy this and let me just show what it does here and then it's going to show me uh the uh basically the path to get to uh what i am seeing here right now uh so just a it's like a little usability improvement uh that i really enjoyed i just like i just found out about this yesterday i didn't even know it was in this release but it just makes things easier as you're mapping your data output to your properties all right so that is presets and controllers so now we're going to move on uh to a couple of miscellaneous things so demo a simple list is what i think i call this page i don't know why things are not showing up here ea live demos anything can happen i know it worked earlier let's do this uh incident pages i'm going to change it and save and refresh hey there we go that's my little trick um all right so if you run into that what i did was i changed something on the page i saved and refreshed hopefully you don't run into that very much uh but this is uh this is just a quick little page i created uh with a stylized text box and a simple list and for our use case i want to let's say i want to add we're going to add a container and then in that container i'm going to add our new uh condition builder component so it's just a way to show off the condition builder a little bit so again this is a standalone condition builder there are a ton of use cases where you might want to use something like this where you give somebody a condition and then it fires one event i think and the event that it fires is query updated so basically if i change this then it's going to fire an event and then based on that event i can do something so in the payload of this event i probably have an encoded query that represents what's been chosen here and then i can take that in coded query i could apply it to a list i could apply it to a data resource i could do all sorts of things with it one of the things that i wanted to show is if a component only has one event then it automatically shows up here right so if i have a component with multiple events like my simple list then i don't have any event mappings because it's got you know what uh six events here so it doesn't want to clutter the page um so i could add an event and then add an event handler as any of that yeah and then it shows me my event handler here yeah if i only have one event then that's the only thing that uh that shows up here so it's a lot more obvious now what event handlers you have mapped to events which is nice yeah and then my single favorite feature in this release uh is that i can take something in the content tree and move it around so i probably want my filter above my list that was really easy to move uh things get a little harder to move when you move them like this uh it's kind of difficult to get them in the right spot or they disappear great um so don't move things in the middle pane uh drag and drop on the left and i can't believe that it disappeared but it did uh okay uh so the last thing that we're going to look at here are tabs so we're going to just do this on the same page and i'm going to add a container and we are going to add a tabs component all right so when i add my tabbed component it automatically comes with one tab uh and so if you remember in the slide one of the big uh improvements is that our tab functionality allows you to mix and match different tab types and also use a repeater so what we're going to do is we're going to demo both of those things so i'm going to hit add and i get this new modal so i can start with an empty container i can say look i'm going to add a tab and i'm just going to kind of put whatever i want in it i can use a repeater i can use a related list which is this is really specific to a record uh so if if my if i'm using a record page or i've got form components on a page this related list will automatically look for url parameters for a table and assist id and then it will display whatever related list you want so this is an easy way to kind of customize some of your form pages and then page collections so again this is kind of our viewport our new viewport functionality where you can create some globally available pages and then you can reference any of those pages in a tab for this little demo we are going to use a repeater uh repeaters let's just call it repeater tabs and then i have to give it a data array so ultimately if you're using a repeater you're probably going to feed this some data but i don't have data set up to feed this so we're just going to do this manually for right now uh so what we have here is uh we've we're using this json editor and so the json editor is really good for you know if you're initially setting something up and you're not ready to actually map your data into it and maybe you just want to see what the format your data needs to be in you can do that here so for the label for we're going to call this tab 1 and then i'm going to add a property within it we're going to call that name and then we will just say this is yeah we'll say uh tab tab one name because i'm very creative and then we're gonna add another tab we'll call this wait for it tab two and then the name of this one is gonna be tab two name all right and so i think that's good we're going to have two tabs and then we'll have this name property that we can reference within the tab so i'm going to hit apply and then it built the json for me um so this is a thing that i really like uh in that i can then take this json and then i know if i'm grabbing data from the server i know what format it needs to be in and so if i want to format that data i can do it with a page script i could do it with a transform data resource or i could use a scripted property but for now we're just going to use this hard-coded data so i'm going to hit create and then we have our tab here and then we're going to have two repeater tabs and if you're not familiar with a repeater the way that they work in ui builder is that it only shows you the first tab on the repeater or the first element in a repeater just in case you know you have 100 elements in your repeater you don't want to render all of that data within ui builder because it's really going to slow things down so what i'm going to do is we're just going to add some data within these tabs real quick so we can see how they look stylized text is my favorite test component so we're going to configure it manually we're going to say this is the custom tab and then in my repeater tab i'm also going to add a stylized text and then for this one i'm actually going to bind some data to it and i'm going to cheat and paste in something all right and so we should have i think i can click into that yeah so we've got tab one name and then we should end up with another tab here and tap two names so i'm gonna save this and we're gonna test it and maybe it's gonna work we'll see maybe it is going to work we save in time oh the joys of troubleshooting live all right uh so that looks right let's go uh let's take a look at what data is on our repeater i'm this isn't live coding happy hour so i'm not going to spend a ton of time uh troubleshooting this uh so label and then fields dot name is that one name that all looks correct i think we'll have to do a live coding happy hour on this all right so what if we hard code the text will that be uh will that be better my tabs just don't want to show up uh what if we move this up to the top all right this is my last troubleshooting step and we're gonna do q a hey there we go i don't i don't know why i didn't want to be at the bottom uh so we've got tab one tab two uh and then we can we can uh switch that back so that we see the uh all right i just did a whole bunch of things real quick uh so we've got tab one name tab two name so tabs and uib are are really nice uh if you've ever had to create a tabbed experience and other technologies it's not that easy like if you're doing service portal and creating tabs um so this was you know we i don't think we did any coding or anything but we got kind of a custom tab here and then these are programmatically built tabs here and so they're all going to have data so you can kind of imagine how you could create a tabbed layout that is really dynamic and allows you to do a lot of different things with it all right so on that note i'm going to stop sharing or or ashley were you going to demo something well we actually have a question that i was going to demo so i do want to hit our questions and we're getting low we have a few more slides but let me actually share this demo to answer this question is it okay if i kick you out here brad absolutely all right um let's see i do to share my desktop because of chrome and zoom and stuff um but the question was from rick regarding the up down um the update layout functionality um so i just want to cover that real quick um as i mentioned if your variant is on the old layout system you will see these dots they're red and you do have this pill up here if you're on the new layout you're good to go you won't see any dots um i did kind of just want to walk through this real quick and show everyone kind of how painless it was so i did make a copy of this default page that was on the old layout system this is just a workspace that i generated from aes you can try this out on your pdi or in sub production instance i'm just going to click update layout here and we have lots of documentation on what this wizard is doing um in the background basically it's just creating like a variant in the background so it's kind of like when you're reviewing skipped records right you can see the differences you got your old um you know your old xml and your new xml and you get to choose which one you want to keep we're kind of using that same kind of methodology so it's just creating a variant in the background and it's telling you that basically it's kind of updated that a little bit so i'm just going to click out of here and now i can see that this variant's now orange i can't do anything with it yet i need to really choose so i want to keep the old layout system or go to the new one um and so i mean you can see here you can kind of go through and review it i think travis mentioned that he just had to edit a little bit of cfs on his looks like that's probably the case for mine as well um but this really gives you the chance to go through and review it um you're in no rush and this isn't going to kick you out of doing anything so there really isn't any harm to going through and reviewing it you can choose to keep the old one or make your edits and keep the new one i'm just going to use the old one for now i don't like making those edits but i did kind of want to go through what those dots were you know when you would see them and why and what that that kind of looks like when you go through and compare the new layout versus the old layout so i've reverted and now i just have my red dot again it's just telling me i'm still in the old layout so i did want to answer that question with the demo um i know we have a few more questions as well i'll take a couple of the questions that are in there um so one of them the new features are not are yes so all of the uib features are available within the family release they're not store features many of our workspaces are shipped through the store um so for example service operations workspace is the itsm configurable workspace if they have made improvements to that workspace that will come through the store so uh you know anything ui builder our our framework itself is all family release and then store uh is the actual workspaces that we ship not all of them but many of them are shipped to the store uh another question uib and portals this is a really common question that we get uh and so we are currently kind of exploring uh what it would look like and what it would take uh to re-platform all of our portal technology onto next experience and what that migration path might look like so we don't currently have a target for when that's going to happen so you know you have a lot of time to keep using service portal for your enterprise portals that involve catalog and pixel pixel perfect design and ui builder for fulfiller experiences but i think the goal is to eventually re-platform re-platform everything onto one technology uh which is next experience uh we're just kind of it's a it's a it's a long journey that we're kind of in the middle of right now so yeah i did i want to answer robert's question regarding theming and instance with ux styles um and having in those styles applied to ui builder created app shells so um i did want to kind of clarify how theming works especially with next experience on so if you have next experience turned on the theme that you're using for next experience is going to extend into your configurable workspaces because your workspaces are wrapped within the next experience app shell itself um so you're going to see the same theme for next experience versus your configurable workspace we are aware customers do want to theme their workspaces differently even if they are using next experience so it is on our roadmap and our teams aren't aware of it i'm just as with san diego in tokyo you'll have that one theme um aside from workspaces you can theme your portal experiences that you create in app engine studio if you create a blank kind of experience like on the developer site they have a walkthrough the course will walk you through creating a blank app shell and doing that and theming it um you can do that as well so you can use themes um independently in portal app shells and other experiences just keep in mind works configurable workspace experiences will share the same theme as next experience um we do have a lot of documentation on that on on our coe site which we'll discuss in just a moment but that does it is kind of a point of confusion right now that we're working to clear up as we you know do these webinars and speak to customers um i do want to just share a few more slides and then we're getting to the end of time here and it seems like we kind of need some more sessions to go a little bit deeper with ui builder i know we have some some things on in our in our mind that we want to do brad seems like we always run out of time there's like so much you can do with it um but so our site we have a qr code here um so like brad mentioned we're constantly adding articles here um we're really trying to kind of aggregate um you know articles so where they they make sense as far as topics i know brad and i are trying to make this easier going forward first you know to find information um but really if you have any like questions about next experience workspaces portal we've got a lot of portal questions this session those are all there and the frequently asked questions so that's really be your first kind of resource for any kind of like getting started questions or portal questions check out the next experience center of excellence that is on our next experience forum which is on the community so we do have a whole forum where you can go and ask your next experience ui builder workspace questions and have those answered by us or other community members as well and you can search through those questions so just like any other community out there you can subscribe to it as well i would just add that uh that next experience uh link here is our coe and it's on our next experience forum and if you have additional questions that forum is a really good a really good place to ask those questions ashley and i monitor it a lot of people are on it it should be one of the forums where most of the questions get answered i try to make sure everything gets addressed uh so if you have questions that's a great place to reach you know our product team think we answered um most of the questions here i know i didn't get around to container styling and i promised you i will do that on a future session maybe a live coding happy hour or an article um but i know i do owe that to you guys but we will get it out there shortly um we do have another academy coming up i do believe um we have a date for september 21st we may be pushing that um just due to some on-sites but right now that is the date but if we do push it i'm definitely let everyone know and communicate that better the next session we are planning on highlighting sidebar which is a new feature um that's being released in tokyo and kind of walking you through how the sidebar works um within workspaces and what you can kind of expect when you choose to implement sidebar so we're really excited about that so stay tuned for future topics as well thank you everyone for attending thank you brad for that great walkthrough of ui builder yeah thanks everybody and hopefully this helps everybody jump into ui builder a little bit again if you've never done anything with it take that fundamentals course on now learning all right bye everyone thanks everybody