[Music] do [Music] hello and welcome to creator toolbox uh this morning on uh february 15th tuesday we are excited to be here today and uh we will go ahead and get started with some introductions uh i'll we'll start with a man who needs no introduction but he's gonna do it anyway chuck why do people always say that because it's true no i'm sure there's somebody watching these videos for the first time who doesn't know me my name is chuck tomasi i am a senior developer advocate at service now i've been with the company since 2010 back when there were just under 200 employees and was a customer for a couple of years before that i think i started when there were about 35 employees my development and programming history goes way back into the early 1980s so lots of stories to share but we're not here to share my stories we're here to hear from earl hi everyone i am earl jk a developer advocate here at servicenow i am just coming up on my six months being here with servicenow but before that i was with a bunch of universities before that been in the platform for about four years and still learning a lot new things every time ashley hi everyone um i'm ashley snyder i am an outbound product manager here at servicenow um i've been with servicenow for about a month um but i've been working on the platform for customers and partners for about six years and i'm on the team that deals with ui builder and next experience so all the really fun stuff that we'll be talking about today and my name is brad tilton and i'm a senior developer advocate here with the developer program at servicenow i've been building on the platform for 13 and a half years my kids like to do half birthdays so i think we're around a half years there and i've been with servicenow for a little over five i'm excited about today's show um again creator toolbox is our show where we give you the tools you need to build things on our platform and today i am excited to get into what's new with ui builder a little bit more before we get into that we are in the second week of our san diego season here at the dev program we are going to be releasing video and blog content every week a couple of live shows blog content and then uh the breakpoint podcast every other week and so all of that can be found at devlink.sn san diego you can see what we're going to be doing for the next two weeks in terms of live shows and you can access all of the content that has to do with the san diego release also you may notice the little san diego we'll call it the little data pill up at the top right we're going to put those on all the shows that we're doing so that you know this is a san diego themed episode and so that's our san diego content and we're going to get into on this show what is new with ui builder in san diego there's a bunch of cool stuff we have ashley here who's going to kind of walk us through some of that and do some demoing on what we have so i'm going to go ahead and turn it over to ashley ashley thanks for being here and let's see what we have awesome thank you brad um so before i get started on kind of jumping into ui builder um i did want to go ahead and just do some housekeeping on terminology because i know we have some terminology changes coming out in san diego um so the first term i want to go ahead and discuss is the next experience ui framework that's just our renaming for the now experience ui framework so you know you may see some videos or some documentation out there that still says now experience just know that's the same thing as next experience when you hear that we have the next experience ui which we did a creator toolbox on last week and i believe this up and viewable and this is the new ui that we released in san diego to tie the platform and core ui together with workspace experiences and just make that easier for users to navigate both and the final thing is ui builder which we're looking at right now some folks may have experience of ui builder they may not but the ui builder is just a web interface that we use to create pages and configure pages within workspace and portal and custom experiences so today i'll go ahead and start with the layout enhancements that we made in san diego so we do have a new layout system what it does is provides better performance and it simplifies page customization i'll jump over to kind of what the old layout looks like in just a moment um but as you can see already on the page itself i have some new options so the new layout system uses flexbox and grid layouts and you can really kind of configure both of those layouts without having to use a lot of code in the previous layout system you'd actually have to go in and code within one of those two options it was just a lot more involved a lot more difficult to kind of get a complex layout for your landing pages or whatever pages that you needed to configure um just a quick note on the layout systems so flexbox is really great if you're you have kind of like a simple five layout let's say that you have like a single row or a single column flexbox works really well for that let's say that you have a layout that needs to use a mixture of like columns and rows and just a little bit more complex grid's going to be your method for doing that and if you see over here we actually have links to both of those if you want to learn flexbox or you want to learn grid all you have to do is click on this and it takes you over to the product documentation and gives you some more information on what those layouts are and some information on when you would want to use them so we've built that right into ui builder we also have a simplified content tree and a styling panel for layout configuration so over here in our content tree you can see that in my page i'm using a grid layout but within some containers itself i have a mixture of flex and grid layouts and it tells me right here which one i'm using which i think it's pretty handy um kind of take some of the guesswork out of you know knowing which one i'm using for what we also have a built-in upgrade wizard to convert old layouts to new layouts for existing and custom pages but do be aware anything that you've created any newly created page variants will use the new layout system if you're on san diego um let me just go ahead and walk through a quick demo of the layout um features that we have here and then i'll show you guys the the older layout so i am in ui builder here i just have a simple page that i created for this i created a grid layout you can see here i went ahead and just set it to one column and two rows and i put some containers in there as well so for my first container i just used a simple flex layout i just have one row i put a header in there for the next row i went ahead and used a grid layout and i have four columns in one row and all i had to do was just type this in like i said in the past you would have had to go into code configure this it was just a lot more difficult to get those complex layouts this took me just a couple of minutes to really get set up which is really nice as far as kind of working with layouts in the styles tab here i mentioned we can learn about flex and grid i can set my spacing my columns my rows i can even go in here and align items align content and justify all of it right here and set things such as width and height within the layout system itself let me pop over to i have my pdi here and i've created some things in rome before i upgraded it to san diego um and as you can see i am using the older layout system which is still supported in san diego we're not making folks you know convert their old layouts right away we're not forcing them to convert as soon as they upgrade to san diego you can still use the old layout system we just recommend that you use flexbox or grid when you're doing that to make it more easily convertible in the future i can tell i'm on the older layout system because i have an update layout button right here and when i click it i can actually see there's the upgrade wizard that's kind of telling me about the new layout system what it's going to give me and let me know that i can go ahead and upgrade this when i'm ready not going to do it right now but all i have to do is click update when doing this i suggest you know just like any any other kind of update and upgrade validation go through your pages make sure everything kind of transferred over the way you want it make any adjustments as needed i definitely wouldn't do this like in production right away um so it just goes through your normal development um and you know promotion process i've done this what's happening behind the scenes when they do an update layout that's a good question um you know to my knowledge as far as the upgrade wizard it's probably looking at all the slots um right here so we have the thoughts it's collapsing though and just converting them over into the new layout is it in introspecting the css at all and trying to make sense of that or leaving that alone um so the css i believe it's leaving that alone it's just take looking taking a look at the containers and the layout itself we'll get into the css enhancements that we made in just a moment yeah i've done this with a few pages so far and haven't really noticed any big differences the cool thing about once you do the update layout is you have the chance to look at the new version of your page and the old version of your page before you tell it whether you want to keep the layout so that's that's a nice thing you hit update and then it's like why don't you compare the versions make sure everything looks okay and if so you can keep the new version or you can revert back yeah genius to answer you chuck it's probably going through this edit layout code right here it's probably going through this code and taking a look to see what you have and kind of like filling in the gaps from there i don't know 100 technically i know i can find out but that's kind of my my guess there um so you can see there is some differences in the old layout system over here in my styles panel i don't have all the options to set you know rows or you know set different kind of heights and adjustments i do have some standard options here but i just don't have that full set of options that i have with the new layout system i and one thing that i'll go ahead and get to is i don't have a lot of the styling options that i would have the new layout system that i'm going to get to you know the old system in roman quebec you really had to set your css styling um you know manually by code for a lot of things regarding containers so that's the biggest thing that you're going to notice is this the usability over here on your configuration panel i'm so getting into the styling enhancements that's another thing that came with the layout system like i mentioned you have to be on the new layout system to see these sections here and the styling enhancements so what we've done is we've exposed a lot of the css code that you'd have to write manually and we've exposed that in the configuration panel and just created sections for developers just to do this without having to enter in that code so we do have you know styling sections for alignment you have your margin your padding background border and shadow those are all exposed and a lot of them use like default values and most of them will accept theme variables so if you have a theme applied to your experience you can actually go in and use those same theme variables without having to hard code them in so one i really like so i'll go up to my my heading container here let's just say i wanted to set the background i can actually go in and i see what theme i'm using so i have next experience ui turned on and i'm just using the default theme that comes shipped with that let's say that my theme was using a lot of blues and stuff this would actually change over and show all those blues and everything that i was using i can go in right from here and just choose uh which theme variable i want to use for coloring on that i think that's really nice as far as like not having to put in css and do that i could just go in and just do everything just with a couple of clicks yeah this is so cool because then you can just come in and change the theme and your colors automatically change in your page and so i think we had we we had the ability to use theme variables the in rome i think right but yeah we didn't have this picker so you just had to know what the name of the theme variable was which is not very practical so this picker is really cool yeah it makes it a lot easier and so you can see here too i will say i don't want to use themed colors i have an easy palette i can go over here and throw in a hex code or use a different color if i wanted to all without having to really go through and write out that css like that color palette yeah let's say that you like writing css let's say that you have some and you just prefer to use it rather than um you know the sections here you can actually click this view and edit css toggle it will bring up the css behind the scenes so you can see it is showing that color that i chose you know anything that i add here will add to the sections anything i add in the sections we'll add here so you can kind of go through that css real quickly and see what you have configured um one thing i do want to mention i think we touched base on this um in live coding happy hour last week a little bit with the sections um if you hit the plus symbol here it is going to add that property um it is i say it's a little confusing because you think this is like a show and collapse kind of thing but it is really meant for adding the property itself and if you click the minus um you know it's not really meant for collapsing the section it's going to remove that property so that's just one thing i wanted to point out that might not be really apparent to developers right away i've kind of done that a few times where i'm like where's where's my stuff i just collapsed the section and now everything's kind of reverted so nice gotcha yeah that's definitely something to point out the nice thing is that it does you know change the preview in the middle of the screen so at least you kind of know hey something changed here yeah exactly you don't have to go through save your page off which i will and then open it to see those changes you can see it automatically here on the stage san diego's the season of us pressing the save button a lot more often always press your save button i'm a consistent saver anyway all right awesome so yeah i mean there's more extensive information on the new layout system and then our styling on our product docs we'll have more information coming out on our center of excellence um you know i encourage developers just to go into pdi's or sandbox instances and take a look and start playing around a really good um like complex uh example let me pop over there real quick but i'd like to take a look at when i'm kind of like designing a page or just wondering how it works is the csm landing page um so you can see we have like a pretty complex layout here you can kind of click through and see how these things were designed so definitely take a look at that i've made a copy just to play around with that's a really good template or kind of learning template to take a look at i think that's kind of been a theme i mean brad you and i when we were trained back in old sysadmin school in 2008 that was that was a common theme look at the out of the box examples for guidance for best practices usually and and make a copy of them and play around with them see what happens and if it doesn't work you still have the you know the stock one to fall back on yeah and i think that the csm landing page i think is an especially good one um to look at if just even there are other uib experiences especially if you enable you know if you build an app from a template a lot of those template apps have some experiences but i think probably that csm uh configurable workspace is maybe the best experience to copy from because it's still being updated and you know i think if you're going to go with one look at that one first yeah i agree all right so the next thing we'll get into is json editor i'm really excited about this one i think a lot of developers are going to be excited about this one um so what the json editor does in san diego it basically provides a user friendly interface to set like component properties that use json so prior to the san diego release you know developers had to go in there may be some like dummy json that we put in for examples but they really had to kind of go in and know what the schema was and what properties they could use um you know and if working with a really complex rare object it you know really wasn't that straightforward um and most of the time you had to go in and reference like product documentation to see what properties were even available so the low code json editor it does support like simple object simple array properties complex arrays arrays of objects and partially supports complex objects for complex arrays you can add delete or even move the position of array items and the json editor displays all the available properties that um a component your property will use even if they're not in the demo data which i'll show you guys in just a second so you can really kind of see what you have to configure and play around with even if you didn't see it in the demo json that we shipped that component with you can also update properties and add your own custom properties within the json editor itself so i have two kind of simple um examples here the first thing i'll be working with is this alert um let's take a look at this link label so you can see that demo json that i was talking about and like i mentioned in the past this is really all you got to work with this is really all we gave you but if i click on edit now i'm going to see this is the json editor that you're working with and we have three different kind of tabs and options to choose from so here are the user friendly properties so i can see that i can set a label here and i can set an href let's say that i'm used to working with raw json i don't mind working with it i'd rather use that instead i do have the option to go in and edit take here and also a really nice thing is i can see the schema that the json is using so i can see it's an object i can see i have two different properties what they're expecting here as far as string and i can see that all within the json editor itself um um uh on the edit json tab can i paste pretty json and single line json that's a good question i haven't tried that i'd say you guys should try that out online coding happy hour next week and or this friday and see i was gonna say try it now you're right that feels like a live comment i will mention if you if you change something here so if i change the select test it will show up here in the raw json and vice versa so you can work with either one and it'll show up um the next one i want to show it's kind of more of a complex um you know json schema so i'm working with a simple drop-down component and here i have the items json and if i click edit in here you can see now we're working with a bigger kind of schema here i have an array of items um and i can actually go in here and set the items within the properties again in the past you'd have to go into the raw json into it but what you can see is that in the dimi.json raw json i only see id and label yet here in the properties i see i actually have a few more properties that i can set so like i mentioned we have exposed those for you even if they're not in the demo json that we ship and in the past you'd have to go into like the uh you go into the developer site you'd go into the component reference you'd have to find the component you'd have to go through all the setup and here are all the properties i can see that i have access to all these but those are a couple of steps just to find that out whereas now i can see them right here and i can set them right here which i think is really nice um if i'm working with like a larger right i'd say this is you know kind of a big array and um i can actually hide unset items and show unset items so i can collapse that down and just make it a little easier to work with and another cool thing um which i was playing around with i didn't even know with the drop down component is that there's actually two different schemas that was um available to me so this first schema is just like a list of items within the drop down like item one two three and four but if i click this schema right here and change it over to schema one i can actually see i can have parent items and children items um which i just had no idea about with this particular component that that was even an option uh and now i can kind of go through and see the schema on that too so i thought that was really cool how you can toggle back and forth right within the json editor itself yeah i think it's gonna be really helpful especially if you know even if you've been using json for a while it's just gonna cut down on time expose some things that you may have had to go hunting for but if you're new to json um you know you're trying to get through the ui builder and configure these components i think it's going to be super helpful for folks who are learning json or are new to it all right so the last thing i'll show and i know we touched base on this in the live coding happy hour a little bit last week and i know you guys might play around with it some of this week too is the component formula editor i think we were trying to show and hide different um components based upon what was in that formula so the component formula editor in ui builder is used to bind or modify formulas within the configuration panel for a component it does replace the binding type ahead found in previous versions and you can use text data bindings or formulas within the editor and it supports logical arithmetic comparison negation and functional transform types i will go ahead and say this right off the bat before you can get into it there is a document talking about the different supported functions that it uses so definitely bookmark this and take a look at it um when you're working with that or trying to learn it or just even for reference when you're using it we have a lot of different formulas that you can use so what i've done is i've just created a simple stylized text component here and how i want to set it up basically i have a client state parameter that i created called table name i left it blank and if there's nothing in that client state parameter i want to say no table listed so i have an if formula right here so if at state.table name my client state parameter if there's nothing in that if it's null then go ahead and say no table listed in my text if there is something say table listed like i said this is a pretty simple use case but just so you can kind of see how that works and what i've done is create this button um and what it's going to do is trigger an event called update table name and i created a script here that's just going to set the table name to incident so once i click that button let me go ahead and just save this off and open it it should put incident in that client state parameter and per the formula editor it should update that text from me i'll give that just a moment to load cool so no table listing let's click update and now i can see there's a table listed um you know in the past to me i would have to trigger some event or do something there or bind the client state parameter to that stylized text itself and i just think this is a really easy way to you know update this text or update something within the formula and i'm sure we're going to have way more complex use cases and you guys probably are going to have use cases on live coding happy hour that are way beyond this example but i just wanted to show that i could see a simple use case for that being if if no records were found you could put up a message that says hey there's no records found rather than a blank list yeah um and i put this stylized text here just so you guys can see when you go in to work with it if you click on data binding now you're going to see all these different values here so all these little kind of purple cubes are the formulas that you can use and like i said we have all on our documentation and then we should have if you're working with data i don't know why it's not showing right now but your data will show here too like at state at contacts at data they'll be in blue as well um so it's all i'm all mixed in just so you kind of know when you start to go in and do these data bindings what you're looking at so i've covered some of the new features in ui builder at a really high level we're definitely going to have product documentation on these probably some more webinars on these and more information on our next center of excellence on the community my opinion i really like the new layout and styling i think it's going to be super helpful i know in the past when i was trying to create pages that took me a little extra time just to get past that hump before i even started doing data and events i don't think it's just going to make things a lot more efficient and user-friendly um so i'll open up for any final thoughts from you guys in any q a that we might have thank you yeah there's some great stuff in there yeah it's nice to see this maturing to the point where i can actually use it now the hour went by really quickly too i know high five let's see do we have questions coming up raleigh said i think it shows up if you type at i was going to say i think the the the data shows up once you get your if in there but don't count on me yeah it's just i was playing around with that i've kind of been setting this up but it should show up right here so right the context data stays there if you say you type at i guess this is a rectangle and some brackets i don't know just so you know kind of know what those um different like icons are it looks like a brick someone's been playing too many games page had a question earlier but i think brad answered it in chat if we want to go back yeah i think it was while we were looking at the json editor it was if you know what does it look like if you're pulling in data from a data source and i think at that point you wouldn't be using the json editor it would just be you just have your data from the data source into the component so i think that's a good a good question around you know if you're binding data directly to like a json property then your json that you're binding from your data resource has to be the right format already you can't like do any formatting between you know the the data resource and the property yeah that's a good question um i know i haven't tried that out i think we kind of got into that a little bit online coding happy hour with the component formula editor as far as like giving those conditional statements and wanting to have known the json um i don't know i'll leave that for you guys for live coding happy hour to explore that any other questions anything you know you might know actually that might be coming up well as far as like new features or what yeah road map stuff this is what i'm on right now i'm i'm living in san diego world okay we got a good question in the chat put that up there earl is there any feature to show google map in ui builder show google maps and ui builder that sounds like a custom component at that point i think that is a custom component at this point i don't so so basically that's a good question i mean the question is basically like how do you do something in ui builder and the answer is usually we have a component that does that or you need to build your own component to do that yeah um so i don't think we have a map component yeah i knew we were not submitted i would hope there'd be something because you think facilities would get on board with the workspace soon coming out but i don't remember exactly which ones i have to go through fine i don't remember seeing it on there that's the fun part of the the same sentiment as service portal though right the we provide a bunch of widgets that should help you with a bunch of things but if you can't then make it yourself and that's the power of the tool there is there's a google map widget yeah our component is there yeah field service google map i think fuel service there you go chuck oh so it's in the field service i believe so okay yeah so that if it's in field service to me you'd have to actually have that plug-in on um because i know that field service management kind of ties into the customer service management workspace um a little bit um as far as like the new components we have platform-wide that are you know available to anyone depe you know independent of having a plug-in on or you know a license or subscription we do have some new ones here that were released in the san diego release and if you want to find a component you can go to developer.servicenow.com click on reference and click on components and it will show you all of the components that are available and what we call the component playground and ever growing there is a field service google map component in there eventually one of our hacktoberfests will be nothing but building components i'd like to do that that'll be a really good one the playground's super useful too like i was kind of exploring creating components um and let's say you want to embed components in your component let's say you want to embed a button or something um and you can actually use the playground to set some basic configuration and properties and just copy that code over into your editor so that makes it super easy it's a really good use case for the playground good stuff any announcements today um for me you know san diego ea is live on your pdis um you know we're gonna have more documentation up by the ga release i am working on it in the background um i can't wait to just kind of put all this and make it all live um in the ga release but definitely go in upgrade to san diego play around with ui builder and the new features in your pdi and take a look at next experience ui as well and see how that kind of interfaces between what you're doing in ui builder and the platform ui we've got another live coding happy hour coming up on friday more ui builder stuff and then next week we're going to turn to flow designer so we've got a creator toolbox on tuesday and a live coding happy hour on friday tuesday we're going to be showing off the flow diagrammer and saving flows as a template and then friday will be about error handling the new tribe logic that we've got so looking forward to that hope you can join us for that it's all published the schedule and links to the upcoming events are on the link at the bottom of the screen devlin.sn san diego thank you earl we had a point last wednesday on the released on the ninth breakpoint podcast for developers talking to andrew barnes about kind of an overview of get his thoughts on the new san diego features and then next wednesday would that be the 23rd i can't remember anymore i think it's the 23rd we're going to be talking to brian bim schleger about flow designer so yeah we're here you're just going to get all kinds of blog and podcasts and videos about flow designer next week all right well don't miss anything any other announcements coming up i don't think so all right thanks chuck thanks ashley for being here and showing us around ui builder and uh yeah we will see everybody on friday for live coding happy hour uh and uh yeah thanks everybody take care bye roll the music [Music]