[Music] [Applause] [Music] that was my bad I forgot to press Loop [Music] [Music] you can unloop it now oh hi everybody welcome to another wonderful episode of you and I Builder live my name is Maria Gabriella oo prz wector and I'm an outbound product manager here at service now and joining me today is hello I am Sharon Barnes MVP with sir service now and a developer at Novant Health and looking forward to learning a little more about UI Builder with Maria Gabriella awesome I'm glad to have you here Sharon so uh today's episode we're going to be covering what we went over in um our knowledge lab so for those of you who may not be familiar knowledge is the yearly service now conference where we have a whole bunch of presentations and among them are Labs which you're able to go in with your laptop and work through an entire um scenario with a lab guide and it gives you step-by-step directions on what to do in order to learn new skills So today we're hopefully going to be able to get through the uh introductional workspaces lab and then also be able to get through uh maybe the advanced workspaces lab as well I'm not sure um in true fashion I forgot to send a link to Earl and I'm sending it right now through slack um we have this lab guide available for you to also run through yourselves if you want to do it offline if you want to do it what we're doing it now Earl has posted it in the chat and it'll also be in the description in the future but that's basically what we're going to do today um also my uh my camera just likes to do that now for some reason I still haven't figured out why uh it's cutting off like that so feel free to um feel free to say you some random filler stuff if that ever happens Sharon we'll do so Sharon uh have you ever worked in UI Builder before I have done a couple different things with UI Builder um most of the time it is part of a wider app um I think the coolest one we did was a app uh app engine template that included a workspace which we customized with UI building nice nice classic scenario so this is the site where uh that we just linked that has all of the labs that my team presented at knowledge this year we've got a theming lab we've got the killer build a killer experience lab um the advanced workspace config and we're going to go into the crafting workspaces like a pro one we've got a quick introduction in the scenario um we're basically going to be covering real life tasks that you may be asked to accomplish for workspaces as a service now admin or Dev and hopefully you're going to learn how to achieve these goals listed here uh it gives you the prerequisites it doesn't have a um this one doesn't have an update set that you need to download and install and if you're brand new to UI Builder it also gives you a full walkthrough here uh of every single aspect that I could think would be helpful for you to know about UI Builder I think it's thorough I hope it helps so we're gonna start with very comprehensive very and thank you for proofreading it too throw back to uh to May last week before knowledge I was frantically messaging Sharon ask her for help so we're gonna get started um exercise one uh we're going to just do a couple of things on the HR agent workspace because of the resolution that I'm using my screen I wonder if I can make this a tiny bit bigger and it'll show no I'll just keep it the same size was before so the first thing I'm going to do right now is I'm going to go back into Global just to have a fresh start using the instance tools uh menu we're going to start following the instructions and I'm not going to go step by separating them out loud we're just going to generally follow what it's telling us to do so we're going to go in and click on workspaces then go to HR agent workspace and if you guys have any questions as we work through this um feel free to put them in the chat Sharon will read them out loud and exercise one is basically just walking you through what the HR agent workspace offers you take a look at and see what's over here figure out what we're about to change so now it's telling us to go into the all menu and type in UI Builder if I could spell right oh what happened there there we go of course it opened in a new window how dare um okay okay now let me do this perfect okay we're back in business everybody we're back in business um all right so you got your window for UI Builder and inside of it what do we do next do we navigate to that workspace check this out literally on like the second day of knowledge the um the new store release of UI Builder came out so all my screenshot are of the old experiences landing page and this is the new experiences landing page I mean that is the life of all upgrades though you always have things constantly changing and keeping your documentation in sync is a process it's a process that's that's such a nice way of putting it I love how you talk um so we're going to go to the landing page default you can see I've already done this a couple times here so we're going to go to the landing page default variant and first we're going to make sure we're in the correct app scope so here it's telling us to switch to agent workspace for HR case management and I'm going to go here and I'm going to select it and now that we're in the right uh scope it's telling us it's readon so we need to duplicate variance so that's basically how you maintain um your changes in UI Builder you create variants of out ofthe boox copies of pages so that way um when updates come out for the pages that we publish it doesn't affect any of the changes that you've made yourself oh I love that little camoji Ben that's amazing yes so here is our landing page now um we've gone through all the stuff and we're going to go on to the next activity this activity is going to kind of walk you through um how to navigate UI Builder so the main thing I want you guys to know is that there's two ways to kind of navigate through a page now you can either use the brand new Stage Preview uh stage 3.0 I think it's called and you can click on things directly or you can navigate on the um component tree over here and you're able to select the same things um we're GNA assume we're gonna uh navigate mostly through the component three tree will say if you are brand new to UI Builder and just want to get a sense of the framework of how everything connects together and like the first time I came into this interface I was like whoa there's a lot going on this guide is really good at breaking down what all of those different pieces are and going through it um that first time for me it really helped me actually understand what I was clicking on not just you know playing whack-a-mole until something does the effect you want it to do I love that playing waca I like to say I intimidate the system into working sometimes um so we're going to select the header container and we're going to go down to the three dots here and we're going to click this little to remove any property from it and we're going to hit save and then continue on to the next activity and why did you do that what does that affect so I wanted oh you know what thank you I completely forgot to read that part of it so our goals for this activity oh my goodness um number one we're going to move the open item section from the bottom to above the overview section so we're going to move this down here to the top we're going to remove the back back ground image from the header which is what we just did and we're going to add a data visualization to the header to show my cases so I'm going to go back to activity number three and we're going to add the columns layout component so we're going to right click the header container we're going to click add before and then we're going to go to layouts and this shows you the layouts and components if you remember if you've been developing on UI builder for a little bit you might remember that there was a component called container this is what now has replaced it so we're going to go ahead and select the three columns here and it's going to show us the three columns that we've created now something very important to do is always always rename your components the component labels are really useful you can see them right here and trust me in three months once you go back to working on this again and you completely forget everything you did you're going to appreciate yourself for having renamed it so we're going to name it header column layout sometimes on the show we may or may not edit the component names do as we say not as we do it's always best practice to do that so now we're gonna click and drag another aspect of UI Builder that's pretty cool we're going to click and drag sidebar one to our new column one and you can see that's kind of moving over here we're going to click and drag the main into column two and now that the header container is empty we're going to right click and delete and now it's gone we've only got our header column layout here and we're just breezing through these activities uh when you run through this on your own you'll see that the screenshots are a lot bigger and you can see them a lot more clearly clearly than what we can right now um so now we're going to click on the header column layout and we're going to set a background color we're going to select um where's neutral to a blue you want blue okay what blue you know I like blue there we go woof now that's a blue you got something more pastel I'm over here being let's select the nicer blue here we go okay so that's nice uh we're GNA set some spacing here we're going to click on padding and we're going to click on M and this new visual way of seeing the uh the spacing makes it a lot easier here if you're brand new all right and I'm going to pause you right there because you went really quickly to the spacing and spacing is important how did you get from where you just wear were changing colors to spacing it's just a little bit below background so when I click on this here's the colors and then spacing is right here perfect yeah we didn't go anywhere fancy I promise it looked like I was going fast but I really was so now we're going to make a quick change to the user greetings container component so I'm going to find user greetings here and you can see it's currently being populated by a um let me resize this you can see it's currently being populated by a client State parameter here and oh wa that's really confusing right now so I'm going to close out out of here and what I'm going to do is I'm going to click on it and this is the visual data binding I'm going to click on it and remove it and the left side I'm going to on the right side the left side here on the right I'm going to click formulas I'm going to click on popular and I'm going to select concatenate I can select it you can either drag and drop it up there and it'll work or you can click on this little arrow and up here I'm going to click on value one and I want this to say hello and welcome space that way we can make it look a lot more Dynamic and then we're going to scroll down a little bit we're going to go click on value two click on data types and then this is what's really awesome there's a lot of stuff that's available by default for you to use here under page properties and of them is session and this is where you can access some of your user preferences and user information so here's a whole bunch of stuff I probably don't want to be showing on camera who knows but I'm going to grab my first name and I'm going to move it up here by pressing the little up arrow and you see all this stuff that it just added on here and I didn't have to type it just did it for me automatically that's awesome so I'm going to hit apply and I'm going to hit save and now this should be dynamic and if I click preview we should see it here we go hello and welcome me very cool so now we're gonna try to make this look a little bit better so I'm going to close out of here and let me see I think we just went through all of these things yeah so now under the main container I'm going to make this smaller again going to click on date and time we're going to move it below user greetings and then we're going to hit save so now we're going to go down to column three and we're going to right click it I really like how um UI Builder lets you drag and drop and right click and do a whole bunch of things that just kind of come naturally to you so I'm just going to click on ADD component and we're going to look up the data visualization now there's two different data visualization components that you can grab from um you can choose uh just regular data visualization or save data Vis if you do the saved data visualization one it lets you select from visualizations that you've created through the platform outside of UI Builder but what I'm going to do is I'm going to right click I'm going to delete it and I'm just going to go back in and add the regular data this comp component and now we're going to configure it remember the first thing you do well actually here's something funny excuse me that I actually have to fix in this lab guide I'm gonna edit this name right here and I'm gon to hit apply now if I do which is what it told me to do the lab guide H to edit the name I hit apply and I'm going to go in and select semi Donut for my data visualization type and now it replaced my component with a different component and I have to rename it again so that's just something funny that I found through um somebody pointed it out actually at knowledge it was really fun um so we've got our semi donut now and we're going to configure a whole bunch of stuff about it so I'm going to hide this real quick so you guys can see it a bit better as it changes first we're going to go to header and Border we're going to change the chart title to my items then we're going to expand data oh it's already expanded and we're going to go to your data resource to data sources rather and you can see with this new stage 3.0 it's automatically updating here as we go um so we're going to click on add data source and hopefully it works it was giving me some issues on my PDI I'm going to type in HR case awesome and we're going to hit add custom conditions awesome everything's working just nope what did you do Arc it's thinking yeah AR did not like what I did let's see how much progress I just okay no I didn't lose all the progress it just went to the wrong one uh Ben has a question in the chat any of y'all ever work in something like figma or wireframe stuff before porting things over to UI Builder and answering that is kind of difficult on the one hand that sounds like a very responsible very int ENT and well prepared thing to do but I don't think that quite works with how I like to work I'm pretty much the um the type to just go in guns blazing and figure it out on the way there but that sounds like a very responsible and good thing to do what do you think Sharon sounds like right up your alley I think it all depends on your organization and how they workflow if you've got a place that actually does an amazing job to defining what they want things to look like ahead of time and doing the figma to wire frame ahead of time that's amazing I hate to say I have yet to have worked at one of those places yet oh um but I have a very good friend who is a designer first at heart and that is entirely what she works through is they build wire frames they send her her story and then her job as the developer is to make that beautifully work and functionally work so um it is good to have but it's also a lot of overhead to Define ahead of time yeah if you've got like a um if you so for example when I worked at um at my previous employer um I used to be a service portal developer and I would always work on of figmas that designers made so I loved working from predetermined ass um assets predetermined designs it's a lot easier than having to make it up on your own in my current role I don't quite have the time to make really nice designs nor to I have anybody to make them for me um so it's a it's a kind of a wish to have but the number one number one pet peeve that I had working directly from figma and working with service portal developers working off of figma do not copy the CSS off of figma because you're going to be hardcoding your stuff you're going to be hard coding Heights and widths into your divs and that's not going to look good it's not going to be responsive that's not deliverable to the customer so figma's great just don't copy the CSS that determines sizing use actual like bootstrap yeah oh use actual bootstrap classes and use like Flex and other smart design things that I have forgotten in the year and a half that I haven't touched them um but don't copy the height and widths please you can copy the colors the radius go for it make your lives easier do not copy the Heights and with oh that just gets me so fired up um so during my little rants I went in and I filled in the condition editor as follows we added aign to is dynamic me and I'm going to click on add this source and now you can see that my little data visualization is loading and there's no data available because I don't think I have any um anything assigned to me um now we're going to go down to group by and I'm going to click on the little pencil icon next to active we're going to select what field we want to uh group it by we're going to going to select state I want to be able to quickly see what state everything is in now I'm going to hit apply and now this is my favorite part you probably won't be able to get away with doing something like this in your production environment I don't know ask your boss but I'm going to put in here a custom message when there's no data available I'm G to say no more work we go eat ice cream so now you can see no more work we is officially in my prod environment disclaimer don't Devon prod and we're going to hit save and we've got the first part of it down um now we're going to go and um work on um editing the L1 menu over here on the side this is one of the more common questions that we get um so exercise 2 is a great place for you guys to follow through in order to uh figure out how to get that done so first we're going to um well first we're going to create a platform analytics dashboard actually and I'm going to figure out you know what I have an idea I wonder if I can duplicate close out of this oh can I flip them can I flip them fine I can't flip them be that way it it does appear to say no don't don't expose me leaning in as if that's going to make my computer computer work better not the eyes yeah exactly like you know when you're driving and you're lost and you turn down the volume as if that's going to make you less lost excuse me go to the platform analytics Center and we're going to go in and create a new dashboard going to select line editor we're going to name it what it's telling us to name it and we're going to create it and we're going to just quickly add a new element a heading we're going to set the style to header hero we're going to label it and you can see that this is changing live and now kind of make it look a little bit pretty we're going to make it this big and we're going to add another element we're going to add a list this time we're going to find um we're going to keep it as list we're going to hit save real quick just in case save often yes actually there we go okay let me see why won't that's weird okay I'm gonna go in and type in HR task and now I'm going to hit save onto activity two now back in UI Builder we're back in the HR agent workspace and we can get to this homepage Again by clicking on here and we're going to click on the little plus next to pages and variant we're going to create a new page and we're going to use that's not a good sign that's never a good sign what did you do Sharon uh it's not a plant so I didn't kill it it wasn't me true [Music] um invalid table name H 970 of the script include I'm gonna message myself this error just to have it for later um well we're just going to skip that in this case I'm going to have to troubleshoot that offline but what we're basically going to do is we're going to create a t a new page with the dashboard um template and and then select the newly created dashboard template um the newly selected dashboard page that we were going to do um but that's okay we're just going to skip on to Activity three now we're going to actually work on the L1 menu yay so we're going to click on this little dropdown and we're going to click on experience and it's going to take us here and if this was a little bit bigger you would be able to see a little view experience settings button right here so we're going to go to the experience settings and we're going to go to side navigation so you can do this in one of two ways I am going to pause and call out that you had to resize the page to get the button on the page because there yeah when I was testing this lab that took me a very long long time to find that button I'm pretty sure that's the one oh no because it kept scrolling and it kept expanding further off of my screen really yeah just be determined occasionally the interface did a really it's there it really is I'm GNA have to look into that um so we you can edit this L1 menu in one of many different ways you've got the um you can edit this uh side navigation and add up to seven pages through here or you can go into advanced settings um there we go so under advanced settings we're going to go in and we're going to copy this Json from our we're going to go here we're going to select all and we're going to paste and we're going to hit update or right click and save and what will that do so basically I wonder if I explain it right here oh actually uh part of the instructions tell you to scroll all the way to the bottom and you see this route K2 for lab dashboard template page we were supposed to add a button for the page that we couldn't add just now um but this is basically how you would do it um you could add it like this we got the ID and the route is what determines what page it sents us to then we've got the icon that we can select from and this is the message that shows up when you hover over the um the button and now here we've got the K24 lab dashboard button but when we click on it it says not found because we were not able to create the page but that's how you can update the L1 menu um in the future that was exercise 2 Activity three and now we're going to do something else that's commonly asked we want to update let me show you guys what we are going to be updating here under lists you can see how there's all these different lists created for you we're going to go ahead and try updating one of those so let me go back to the correct page this time no this isn't the right one because we're in the it's this one cool so first we're changing to The Incident Management scope Incident Management for service operations workspace all right and it looks like for this exercise we are rearranging those categories of lists based off of what the uh enduser we're helping needs so that's the of this particular step so let's use this view right here I'm just going to scroll through to the activity we're on the right update set I mean uh application scope we just got to refresh and now we're going to go in and I'm trying to see where it it's not just us walking through what it looks like here it is okay we're going to go back into UI Builder we're going to go to this little button takes us to the home and here we can look up the service operations workspace it looks a little bit different here like I said the screen the landing page changed days after this went live and we're going to find the list page once we're on the service operations workspace we're going to go into list snc and I go into further detail and analyze the anatomy of that page in the walkthrough that I do at the beginning of the of the um lab so on the left side of the page we'll see the content panel and we can see the list nav right here and in the config panel on the right we can see there's a configuration link down here at the bottom we're going to go ahead and click on that and it opens a different window we're going to click on default s so right here on their ux list menu configurations and here we can see all of the different uh ux list categories and ux lists that are in s so so let's see what the lab guide wants us to do um let me copy this real quick so I don't have to tab back and forth oops okay so first we're gonna look at the ux list categories and for the incidence record we're going to double click it in order to edit it from here and I'm going to set it to 75 it's always best practice to keep this in big even numberers so that way you can always be more granular about adjusting things as you go on in the future and now we're going to go to ux lists we're going to find the incident table assigned to you and we're going to change this up a little bit um we're GNA right click this we're going to click on um yeah I think it's I can't remember how I did this in the um workspace in the uh lab but we're going to basically click edit here we're going to rename this to the top list we're going to change order 50 Group by column down here we're going to change this to State there it is oh you guys couldn't see the drop down and we're gonna let's see where is it table configuration here's the view we're going to leave it as service operations workspace we're going to remove the filter conditions and then under this huge list of things that you can check off we're going to check off a couple of them so just a few of them we're going to show checkboxes on Hover we're going to do hide column grouping we're going to hide reference links we're going to hide drag and drop we're going to hide pagination so I'm going to go to the top I'm going to right click and I'm going to do where did my insert and stay go how rude so we're just going to update it and now if that all worked and we know what track record this show has for things working we're going to go to the service operations workspace we're going to go to lists and the top list is there and it's grouped by state it worked on the first try and now let me see this is another one that's really popular um in terms of configuring workspaces let me see what page we can go to this one works so we're going to be in exercise four Activity one now the only activity of exercise four and we're GNA go back to the service operations workspace again and our goal for this one is to help tier one help desk technicians create new knowledge-based articles directly from the workspace thank you I keep forgetting to read that part so we're on the service operations workspace again and like Sharon said the button likes to hide apparently we're going to click on view experience settings this is uh uh and we're going to go all the way down right here under the general tab we're going to go to advanced settings and this is going to take us to the um form View and we're going to scroll down to the related lists and this is where a lot of things are controlled from for your workspaces um like for example the Chrome toolbar uh configuration record for the L1 menu is actually you can access it here as well um the one that we're looking for is Chrome tab this is the one that is going to configure our tabs there and I want to quickly show you guys where that's going to affect so when you hit plus here you've got a new interaction ction new incident new change request oh ignore this one um so we're going to go to Chrome tab and we're going to grab from the lab guide we're going to put in the information here and basically what we've added is this last little bit we've added the message which is the text shown to the end user in the option when you click on the plus menu the route info is where clicking that menu is going to send you to so like routes is the page ID we want the record page and Fields contains the fields uh the URL parameters to be fed to the page when it's opened in this case we want to do the KB knowledge page but we want CIS ID minus one and this is a a little thing that took me a while to figure out Sharon do you know what sis ID minus one does no teach me something new oh no um basically it's a shorthand for I want to make a new record um so anytime you do sisid minus one it's new record that's awesome so now we're going to go ahead and hit update this we're going to go back to the service operations workspace where is it there it is and we're going to refresh when we click the plus menu it's gone oh no no it's there I just named it different it's new knowledge article I was looking for new KB article there we go so now we've got um I wonder if it's you can see we've got the KB knowledge page in the minus one sisid and we're able to create a new knowledge article right here let's see and then finally I will read the scenario this time promise finally the exercise five we're going to add a field to the form View and control whether it appears or not using a UI policy so we're going to go to the workspaces menu um I think this is just going to show you um a record and how to filter it let's see yes so let me open up S so again and go to the home we're going to go to the list and we're going to open up a new a incident and here we're going to go to The Details page and we can see our form right here from here you can go to the um I'm I'm sure there's an official name for this I just call it the little um Avatar icon up in the top right corner and we've actually got a couple of new options called configure work page and configure page and from here we can configure the form layout now it's going to redirect us here but it's going to say Hey try using form Builder instead so we're going to hit try form Builder yay form Builder yay form Builder I do really like this new interface or this new Option of editing forms it is much easier to work with and see and uh so it is a good addition most definitely it's better than what we used to have now a lot of people didn't like form designer but I liked form signer enough everybody told me not to use it but I'm I'm going to miss it you like you still can use it but this is better true so what we want to do is make sure we're in the right update set um we oh yeah Claire that is a really cool thing we can see here uh this kind of filled in that's really nice so I also like the yellow marks that tells you if there's something affecting that field as a UI policy definitely that's actually I had no idea what that did I learned something new today uh we're just going to add in the field by clicking on the add button down here and we're going to look up our company field uh there we go I should just be able to click it and as always hit save always hit save and we're G to set up a UI policy and we're going to name it show only if caller is a VIP it's always useful to use very uh descriptive short descriptions so again for months down the line when you come back and you try to figure out what's going on you don't forget everything that you did um we're going to click on advanced settings we're going to hit applies to all views and when these conditions are met so this is where we're going to actually set uh the conditions we're going to go for caller and actually we're going to dot walk so I'm going to go to collar and then press this little triangle this little arrow and I'm not quite sure where dot walking originated from if it's like a general Tech term or if it's like a service now specific one but basically when you uh access fields from a different table um the way you would typically write it in a script is something like caller. vip. name or something like that that basically tells you that you want to know on the collar table even though this is the incident table we want to know whether the the caller is a VIP so we're going to be dot walking over here so we' got caller we're going to check the the field VIP on the caller record which is the users table and we want to see if it is true then we're going to click on ADD UI Pol oh and then down here we're going to make it so uh company is visible true and we're going to hit add UI policy so now we got show only if callers of VIP so we're going to hit save now we're going to go back in here and we're going to refresh and ay Anderson is a VIP MVP of course so we can see the company field but I wonder what's going to happen if I make it a non VIP the company Feld has gone so that is the um that is the introduction of workspaces lab um you can work through this Yourself by going to the link in the description right here and scrolling down we've got some great resources linked here for you um and it's called crafting workspaces like a pro a Hands-On Learning Adventure lab um next time in uh you and I Builder live next week uh we're going to be going through the build a killer single page app with UI Builder lab this one's going to be a little bit more advanced um but it's still going to be uh we're still going to go through it and explain it step by step so you're not going to feel lost or anything like that and we're basically going to be making the notes app that we built uh on this we've uh we've actually built this app like two or three times on this show already uh in two weeks thank you Earl we built this uh lab on this show as a proof of concept for this lab so now we're going to go full circle and we're going to actually go through and build the final version of the application and have a concise run through of it so that's something to look forward to next week this one does have an update set for you to download and go through ahead of time so you're going to want to um if you want to prepare and go through it with us you should download the update set install it into your PDI and make sure the UI Builder Store app is updated to the most recent version um other than that I think that's it for today's episode we did not end up having any time to go through the advanced workpace configuration lab but I definitely suggest you go in and take a look at it uh we go through record Watcher page collections uh declarative actions uh we have two declarative action exercises and then then finally we've got a page collections uh overview tab exercise at the very end um it's a it's a great lab it's definitely a little bit more um indepth uh than the one that we just walked through but it's definitely worth giving a look um did you go through that one Sharon I have not completed that one I got started and then it was time to you know get back yeah I think the only one I've done is exercise three because I built that exercise I don't think I've actually gone through the rest of them um but yeah that's it for today's episode I think we're good to go on the lab let me stop sharing here perfect so any final closing statements you would like to uh go through Sharon um just once again as you are going through these Labs um that exercise one is a great starter for anybody looking for the foundations of how uib works and from there you then get into actually changing and editing and customizing what you want your variant to look like after that so I really appreciated you putting together that lab and giving that intro for somebody new and walking through and that you're not I find a lot of time in Tech there's assumed knowledge there's that assumption that oh you already know where if if it was more physical sense you know where all of the doors and windows are this really tells you where those components are that are your buildering blocks for everything else yeah I 100% agree um so some last notes for everybody um if you're interested in getting into platform analytics and learning more we're going to have the next experience Academy focusing on platform analytics on Wednesday the 17th at 11:00 a.m. eastern and then the next episode of you and I Builder live is going to be on Thursday the 25th at 4M Eastern again um thank you so much for joining me today Sharon I really appreciated your input in witty commentary and uh thank you all so very much for watching goodbye bye thanks for invitation [Music] [Music] [Music] oh