sounds good [Music] [Applause] [Music] [Music] n [Music] Gabby you're muted we couldn't get any more scuffed if we tried thank you for the heads up welcome everybody to another scuffed episode of you and I Builder live uh where sometimes it works and sometimes it doesn't exemplified by uh this right now my name is Maria Gabriella a cha prosector and I'm an outbound product manager on the uh agent productivity team and today with me is uh my name is Brad Tilton I am also on the outbound uh product management team for agent productivity and today I am a circle because my camera just stopped working five minutes before we went live I don't know so today we're going to do something really fun uh which luckily does not require Brad to have his camera on um we are going to be going over Brad's build a killer single single page app uh lab from knowledge and Brad's gonna walk us through that um I think we're good to get started I don't have anything to shill at the start of the episode yeah sounds good uh so yeah we're already uh we started late because I couldn't get my camera working and this was already going to be hard to fit into an hour so awesome uh yeah we did a knowledge lab this past year called building a killer single page app with UI Builder uh I've done some sort of building a killer something app uh for about 10 years at Creator con uh and so this is the newest version here uh and yeah we'll get going uh we've got some links we can put in the chat around where to find this lab you can work work through it on your own uh this is a developer instance that I spun up earlier today uh that we're going to run through the lab on it is a Washington DC instance where I have updated UI Builder to the most recent version uh and we're going to follow this lab guide here uh and if you go to this service now andx experience. github.io it has four of our creator con of knowledge Labs from this year around UI Builder um UI Builder workspace and theming and we're just going to kind of follow through this lab guide uh it'll be a little different because UI Builder uh was updated uh two days after we delivered this lab at knowledge to where the lab was out of date um so that's fun UI builders on the store which means we get lots of good stuff really often often but it also makes enablement a little more challenging so we're going to run through this lab uh what it is is we've got a meeting notes app uh that we have all the backend created for it and we're just going to create a front end on a single uib page uh and hopefully get to the point where we can click on existing notes edit them save them uh and also um uh and then create new ones that's the other thing we can do so uh we're going to go ahead and just run through it uh feel free to ask questions put anything in the chat at uh this will be a little less interactive because uh this is something that is already baked we're not building it on the Fly uh but we will be kind of adjusting on the Fly uh to fit with uh the new version of uib so the first thing we're going to do is kind of bootstrap this app a little bit and what we're going to do is uh maybe steal uh a page structure from an existing page and stick it in a an existing blank page uh so that we get uh you know a bootstrapped page and so we're going to start with that so I'm going to go to the CIS macr ponent table and we've got lots of Records in here this is basically any uh UI Builder page uh that exists as well as uh a lot of our components are also macron um so there's all sorts of things in this table it's a nice table to explore uh but let's go ahead and find the most recently updated macr proponent record which should be no because this is a new uh this is a new one um how did we oh no I have a CIS ID I can look for that's helpful good job past me uh let's find the CIS ID of this new macr ponent uh and this is part of the lab if you have the update set loaded uh you'll find this home default page uh and I'm going to paste in a couple of code blocks here get Zoom oh yeah yeah sorry I was it's okay it wouldn't be an episode somebody said zoom and I was thinking Zoom the software and but yes hopefully this is zoomed in enough uh so this is the layout uh this is kind of the structure of the page uh and then I'm also going to paste in in the compos position field if you're wondering where I'm getting this this is from the lab guide uh and this is mostly taken from an existing page I think I grabbed it from either the admin homepage or one of the other homepages uh but we're going to go ahead and paste that in and I'm scrolling in the lab guide uh yeah we're going to update it and then we'll open uib and it's opening uh and so this is new this will not not be in the lab guide uh this new homepage came out in the uh May the same week store release yes so we call this Washington store release to uh we do two store releases for every uh major release so we have when xanadoo comes out uh next next week we will also have the August store release come out and there there will be a new um a new version of uib with that as well so this is the page that we just created uh it is uh kind of bootstrapped a little bit where we've got this background and then we've got this search box and we have this page here um I don't know why the body container has that icon there but hopefully that doesn't show up eventually all right so that was exercise one that was real easy we're going to move on to exercise two which is building out uh the interface so we're going to start uh by pulling our set of notes uh from the database here so I'm going to add a data resource uh we're going to go look up multiple records and and again all of these steps are available uh in that lab Lab guide so I hit add we've added it twice okay let's delete one of these my modess dialogue is not working that's too good all right maybe a page refresh let's try it let's do a hard refresh here don't worry UI Builder also fought me last week when I was trying to do things so let's try this again or last episode rather I don't think it likes this all right I think this is going to be a problem uh let's try something let's try creating a brand new page and see if that helps us out wonder if there's something in that page that I copied that was not working so call this new homepage looks good we'll create a blank one and hopefully adding a data resource works better here and it does not this could be a real short episode no no uh there's something wrong with uib in that instance and it's too early to talk about what's cool in um sanado do I know I almost brought up a xanadoo instance [Laughter] there we could just pivot and make it a what schol insano episode that was a brand new instance that I hadn't done anything in before um so we uh let's see if I have the app in this instance I guess I could check it out here it's not there all right let's uh load the app into this instance I'm going to do that on a different [Music] screen in the meantime I am going to shill then do it bring up my camera Earl feels like um like I'm uh isma from uh Emperor's New Groove pull the lber crun [Laughter] uh I was probably out of uh you guys probably didn't hear me scream wrong uh wrong lever nice nice Earl so I was gonna say I am trying something kind of ambitious and kind of new next month um hopefully everything goes well I am anticipating uh publishing this site um probably next Thursday on the 1 what I'm going to do is I am going to be doing a build along month on you and I Builder live where we are going to build an application together I am going to publish a set of stories that you can follow along either while we're doing it live or you can follow along at your leisure whenever you want and use the videos that we do live as reference I'm also going to be including um extra stor so if you want to flesh out the app and make it be a full-fledged app with flows uh business rules client scripts UI actions things that we don't do in UI Builder I'm also going to be providing those stories separately um as part of build along month so let's see if it works out uh hopefully this is one of the few things that does work on this show um and keep an eye out on LinkedIn on sv.com on our on our channel on there is where I'll be releasing the um stories and the update set for everybody to get started and hopefully this will be a good resource for people brand new to service now to not only have the ability to build out an application like you would at your job but to also learn a lot about UI Builder um and especially all the new features that we have coming out in sanado do um I am glad to hear that you are looking forward to it I I really hope that it can help out uh brand new people um because it's going to be a bit different from what you're used to with our lab guides our lab guides are step-by-step instructions telling you exactly what to do this is going to be stories like you would get them at work and then it's your job to Google I am going to give you some hints and some links to and some strategies how I would do it but really the stories are vague enough for you to be able to do anything you want it's just going to be a checklist of the things that I would expect you to develop in a real world full-fledged application so look forward to it be sure to tell all your friends about it um I'm going to be posting a whole bunch about it on every nextg channel that I can get um and that's pretty much it I think Brad is doing good on the uh on getting back to where we were before so if you guys have any questions uh feel free to hop on over to ss.com and go to our next experience Channel where you can ask any questions about it um and we can work together to learn some UI Builder all right I think this is going to work let's see uh this may or may not have been an a uib issue cuz my stream deck also just stopped working so I I uh I have a new laptop as of the last couple of weeks and have started that's today yeah let me get this open take your time all right so 20 minutes in all right here's here's the homepage I am in I think I'm in the right scope it is not a private application scope let's refresh oh this is killing me all right uh let's do this all right let's kill the uib cache and do another I've never seen that button in my life that's neat I think that worked yeah we have it now all right this looks a lot more better than the last one looked so I think it's going to work all right so we're going to add a look of multiple records hey there we go all right now we in business um so I will uh I will take a look at what the difference between those instances was and uh see if we've got something that needs to get fixed all right uh so I'm going to rename this data resource to look up notes we're not going to finish this lab just so everyone knows but we'll try to get to a point uh that it it works okay all right so I've got that uh we're going to uh pull from my notes table that's a category table and then we're going to add some conditions where the user is me and this is I think all the notes are under the admin user no it's his Dynamic huh all right and then we're going to add some Fields here and we want title text [Music] created and we want the color field from the category it's also going to give us the category all right so we should have a number of results if we look at it in the Json view all right we've got 40 records in here now we have some data I've got uh the category here um and the display value I may need the actual category now does that change yeah all right so we've got my lookup notes so we have a lot of data being returned to the page now and now we need to put the data somewhere and show all of these notes so we're gonna add a repeater to the body container here or I guess we're going to add a layout first uh column layouts are really helpful uh the nice thing about column layouts is you can um you can add more columns and they're really flexible uh so if you start with a single column and you find out later on you want to add like a left bar or something like that it's really easy to do all right so inside of the column I don't think I'm doing any um styling to it we're going to add a repeater uh repeater is just an iterator that's going to let me Loop through this set of records and return uh a set of Records there so we're going to do some data binding uh this new data binding is new as of Washington and so I'm going to add lookup notes results which is an array of 40ish objects uh and so we've got that here and then inside of my repeater uh oh first we're going to enable styles on my repeater so uh your repeater can just work uh like an iterator or it can work like an iterator that's also a container and so we're going to make it do that uh and we're going to fill out uh our styling as follows we're going to give it five columns one row it'll stack more rows uh after that and then we're going to give it a large gap in between all of the items and then inside of the repeater we're going to add a card base container uh we are not going to use a preset and I think we leave it large and I'm going to make it clickable um so cardbase container uh you can set it to to where there's no interaction with it uh and it's just visual you can make it clickable or you can make it selectable so if you made it selectable you can do like a multiple select with the containers we're going to make it clickable here and then inside we're going to add a heading component and if you are not on Washington store release 2 you're probably seeing something if you've used a repeater uh that is making you wonder a little bit and that's in Washington store release 2 one of the things we added was a new stage so you're also seeing the instance header here so this is a a true wizzywig stage uh this is what you're going to see uh when you uh actually render this page in the runtime uh and so it's going to you know give you a better idea of what you're doing and hopefully you have to do less saving and refreshing uh a save a runtime tab in order to see what's going on so we're going to make this header tertiary make a little smaller and then we're going to change the label instead of we make work work better for people with modern digital workflows that's a mouthful U but it's true uh we're going to go repeater and then we will take a look at the value so this is the specific uh instance of the repeater that I'm in then we will add the title and then show the display value um so these are a lot of meeting notes uh I believe chat GPT generated all of this demo data for me months ago uh and uh that's all of our meeting notes there so we should have product road map first which we do we're going to add another component after uh and that's going to be a highlighted value component we're not going to use a preset for that one uh we're going to set it to show the category so let's go repeater value category and display value a variant we're going to leave as tertiary and then in terms of color we are also going to set the color to whatever the category color is um so on my category table I have a color field uh and it let's go keep going and so we're going to set that here all right so we've got different colors here uh I have some of them that don't have a color because my demo data is not perfect uh but most of them do have a color so we've got that there uh and then we are also going to add a component after that called label value I believe and here we're going to go the label is going to say created and then the value is going to be the created on date all right and because we don't like the way the spacing looks we're going to go in here and give it a little top margin that looks better h I'm going to save this because I was getting kind of nervous uh and then we'll also preview it here to make sure that the preview looks like what we think so yeah we've got uh we've got all these cards now uh with data from the database and it is clickable although nothing's going to happen when I click on it at this point all right now we're going to do kind of a fun thing where we add pagination to this um so there's a pagination component component and uh while it is not the most straightforward thing in the world it is a lot easier than building your pagination from scratch uh for sure uh so we're going to add a couple of client State parameters and those are going to be note limit um so this is the number I'm returning from the database at one time uh I think we're going to set this to 10 uh so that we don't have all 40 and then we've got note page offset and so the note page offset is basically telling uh my it's going to tell my data resource uh where I'm at in terms of the what in terms of the page Nation so which page I'm on so this is going to be zero um so ideally once we get it set up it's just going to show me two rows uh of uh the the the cards there um so one thing that I also need to do is because I'm going to tell my lookup notes to only return 10 records uh I also have to know how many total records there are in order to tell my pagination component um so we're going to add an aggregate data resource and it's just going to give me the total number of uh note records there uh so we're going to rename this to note count and if I'm going too fast all of the steps for this are available in the lab guide all right let's point it at the notes table and let's give it the [Music] same conditions that we gave the other one all right so its output [Music] is 41 that looks right to me and you can't do this with the index number from the repeater oh great um oh I jinxed it whoops yep uh no so the repeater we're going to give it a limit and it's only going to return 10 records at a time uh so we will not oh right um but I'm gonna have to redo some of this because I crashed uh let's do that again 10 then we're going to add the offset well I do well wow wow my accent just came out while he does that uh just a quick reminder that on August 21st we're going to have the next experience Academy covering what's new and agent experiences for Sado do there's a whole bunch of stuff coming in theming so if you're into theming and theme Builder there's some really cool stuff that I'm going to be going over on that day so you totally want to come check that out and we'll be talking about what's new in Sado do for UI Builder on September 18th but I'm sure we'll cover it before that on you and I Builder live um I need to rename this all right we've got our note count uh and then now we are going to add our pagination control component after our repeater man even with um even with how many times it's crashed um on us today I could never dream of having something look this good in service portal in 15 minutes yeah and I've got some something going on with uh with my computer right now that's fighting me obviously as I have half the things not working um so I'm assuming that's what's going on with uib as well uh we're going to choose none for the preset and then for total records uh this is what we're going to bind to that note count data resource uh so it knows there's 41 total records and then viewable items per page uh where is it there it is uh this is going to be that client State parameter that we created uh which is the note limit so the cool thing about doing it this way is that the page ination component lets you set the page size and when we set the page size then that'll ALS update everything um so that will work nicely uh and then what we also need to do in order to set that page size we're going to set an event on here and it's going to be um pagination control selected page set I think we're going to set a couple of these uh we're going to go update client State parameter and then for the name this is going to be not page offset this is not the page size this is the other one and then we're going to do a formula here and we're going to use math math is fun and then here we're going to go um payload Dov value and then on the right side we're going to say client states No Limit um so this is going to tell it uh the the offset that we need to be looking at um for you know which uh which of the sets of notes that are coming back so let's hit apply and add and then we're going to the other one which is Select no no we're going to go selected page size Set uh and this is also going to update a client State parameter and this is going to be note limit and for this it's just going to be the event payload and then did I miss it but where is it controlling the stuff in the repeater or have we not done that yet I think I may have skipped it that was just happening in my head I was like wait a minute did we update the I think the slap guide Maybe missing that step oh no or was it at the very beginning sorry I'm lab guide scrolling right now um this is riveting I know what if I just forgot to copy an entire exercise wouldn't that just be hilarious possible that that happened uh I think I can figure out how to do that though um so we're going to go Max results is the note Limit Oh it's number seven and then the oh that's where you're at pagination offset is the not page offset so let's go ahead and make sure this works so let's see if our pagination works oh all right so we are showing 10 they did change worked and then let's see if I change this to 100 if they all show up they did so our page does work uh need to edit that lab guide all right so that's even though we ran into some issues uh that is a um you know that was a fairly quick way to add pagination to this uh and you know we could be done if when you clicked on one and just opened a record in a new tab or something but we're we're going to do more fun stuff um I'm going to there's a step at the end that I'm just going to skip because uh it's not that important it's a little button that goes down here this is back to Classic I'm actually going to delete it um we don't we don't need to do that all right um so next add the button oh yeah we already did that uh that part of the lab it does have some component visibility stuff in it so uh it is useful uh if if you're if you care about component visibility um but uh we're going to move on and add add a search in here so we want to add another client State parameter uh to hold our search term uh it's going to start out as empty and then we are going to add a search in input component here all right so we're going to call this uh search notes that's not the placeholder you're right I contributed call that search notes uh and then we just want to write what ever somebody searched uh into the client State parameter and then we're going to use that to update uh our data resources so it's going to be our search term and the new value is going to be uh this is one of those there are a few components uh that don't have their payload here and so we have to manually type in the payload um and uh yes I just know that the payload is payload do search term uh but if you log out the payload or you use the next experience Dev tools it's fairly easy to discover the payload this is something we're working on uh there's a technical challenge with showing all of the payload options in UI Builder uh that we're currently kind of working through all right so that's the search and the lab guide does tell you uh what you need to what you need to do there so now we need to update our data resource to say you know hey somebody searched this uh let's go ahead and add more conditions here so we're going to say and uh title contains our search term and then or oh my screenshot is wrong that hurts me uh contains search ter there we go and then we want to do the same thing for the note count data resource and if this wasn't a knowledge lab I would probably uh write a page script uh that kind of calculates that encoded query for me and then write it to a client State parameter and then just bind that parameter to both of them so when I update it once I can update it in both places uh but that's a little more advanced than we were going to do in this knowledge lab whoops so we'll do the same thing here and we have to do it here so that our total number uh is correct all right and then one other thing that we're going to do so uh for the most part in UI Builder if you update a client State parameter uh and it's bound to a property on a data resource or a component uh it will automatically update those data resources and components but uh this conditions property uh Works a little differently to where we've we've kind of bound it within the property so it doesn't know to automatically update so we're going to have to tell those data resources to refresh themselves luckily it's pretty easy so we have that uh so let's go ahead and save and test so if I T if I search training I should get three results yes all right so both of them updated correctly um if I go road map just get the one so uh that one worked so we added we've got some searching we've got pagination and then I think before we drop we can add some sorting uh unfortunately I don't think we're going to be able to edit and create notes today um but this gives us at least part of it so we we are going to we saved already that's good um we're going to add a couple more client State parameters so we want to be able to sort these uh so I want to be able to sort on uh whether updated or created and then I want to be able to sort on ascending or descending so let's go ahead and add two client State parameters and so we'll tell it this is the field we want it to sort on and it's going to start as this updated on and then this is going to be sort order and it's going to start as descending because generally sorting descending on updated is most of the time the way you want to start something like this and so let's go ahead and go to our lookup notes data resource uh it has some sorting options so we're going to say order by sort field and then the sort type is going to be that sort order and so if I save an update or in refresh here we should get a slightly different or it may have already sorted on that actually I imported all of these at the same time so uh it may be hard to to see that all right I got ahead of myself we're going to add um something above the repeater we're going to add a layouts two column layout and uh in the column two which is where we're going to put our sort Fields uh we're going to say make it a row line items in the center and put them on the right all right so let's add a stylized text component uh we're going to call it sort we'll make a little smaller uh and then we are going to add a drop-down component so the drop-down component um list items property is where we want to be so this is all of the uh items that are in that drop down component most of the time you're going to make this Dynamic and put um you know put pull something from the database and populate it here but for this one we're not going to do that because we only want updated and created uh so we can kind of hardcode it so I'm going to remove four of the items from the six this Json editor and we're going to say sis created on and call it created and then on the second one we're going to go sis updated on and say updated all right so we can see the new Json here I do not spell updated correctly always a good idea to look at it especially if you're me and you mistype things all the time all right and then we're going to go to the selected items property and we we are going to uh oh we're going to do something a little different here uh so that selected items property actually expects an array uh because you could have multiple selected items so we're going to make it an array and then we're going to put sort field in there oh first we have to do the S field and then do the array I really with how to how to do this in the lab I think I spent like a full day figuring out where I wanted to make a little more complex uh but we did it with the selected items um then we are going to add some spacing so we're going to add a right margin large and we will add an event which event are we adding add in drop down selected items set and uh we get to write a script here uh get to we're going to go update client State parameter this is going to be sort field uh oh no we want to change this to script and this is our script and this is basically uh because we want uh the payload has an array of things that you've selected and this was just the easiest way to return the first element in an array uh we don't have a formula that does that easily at this point for the most part you want to stay away from scripted event handlers and scripted properties and use formulas instead so a few reasons for that uh it's a lot more discoverable uh but in this case we had to do a script uh the script is fairly straightforward you're just passing it uh the name of the client State parameter and what you want the value to be so we're going to say add I'm going to save at this point sounds like a good idea and then we're just going to duplicate this and make the other one the order um so let's duplicate it and it's going to save all of the settings so we're just going to come in and change a few things here um so this is the second drop drop down um and we're going to come into the selected items and this is just going to be descending it's not lost at on me that this actually takes longer than the pagination um but it does and then we want to update instead of sort field we're going to update that to sort order so I'm just going to click in thanks grammarly for covering that up apply that did update and then we're going to change the event script uh oh this was the first drop down that that doesn't matter um all right grammarly is really helping me out uh by getting in the way so I can't see anything there we go uh all right so was this one correct I don't think I saved to that script all right all right we're almost out of time so we're just going to save that to see if it works it's not going to show up on the right I don't think uh because we needed to add something in the left pane here uh so we do have this so if I change this They do change uh this uh updated is lower case because it's uh using a translation uh so I I found that out like when we were doing the lab live and haven't corrected it yet uh but the reason that it's lowercase is because it's automatically getting translated and for some reason uh update is is being translated into lowercase updated uh for English speakers there uh so let's let's go ahead and do this and just add that and we'll be done with this second one click a note to view and edit it all right now it shows up in the right spot right yeah there we go okay so I think that's a good stopping point for us here um this uh this was the first three exercises of the knowledge lab exercise four is creating and updating notes it's actually pretty straightforward uh we're we use a modess dialogue uh which a modess dialogue is this thing you can drag around you can make it really big um and then oh I was going to say something about xanadoo we'll wait we may do a a xanadoo update to this lab but yeah all right turn it back over to Gabby thank you so much Brad that was super informative don't put only my camera on here um awesome so that was the lab again if you guys want to run through it on your own time take your time with it uh we posted the link in the description in the chat and if Earl is listening he'll pop it back up on the screen uh the short link is SN no wait that that is the link for the next experienced developer tools Chrome extension I need the other link the SN Works no okay um anyways no not Perfection anyways our next episode is going to be on August 8th we are going to be going over day one uh day one of build along along month keep an eye out for when I post the stories There's the link it's going to be on that website actually there's going to be a new menu item that pops up in the top where you can find the stories and uh be able to work through them again they're meant to be um they're not going to walk you through every single step like our lab guides do they're meant for you to do research but we'll give you links and hints along the way um other than that thank you guys so very much uh for hanging out with us and watching and I hope you all have a good rest of your Thursday goodbye thanks y wave goodbye Brad from I'm waving y'all can't see it [Music] no thanks everybody a [Music] [Music]