la [Music] [Applause] [Music] [Music] n [Music] [Music] hello everybody and welcome to an episode of you and I Builder live that I think is going to be specialer than others my name is Maria Gabriella o pz wector and I'm an appon product manager on the agent experiences team and with me today is on mute that's rough um my name is is Brad Tilton I am also on the outbound PM team for our agent experiences Gabby what are we doing today today we are doing something super fun so um I'm sure a lot of us in the chat are familiar with what we're doing today today we're going to start episode one of build aong month so something that I often hear from beginners and people getting started in service now is that they want to learn more and the answer always is go build something in the platform I always say go build something silly like a Dungeons and Dragons character cheat like something fun like that um and uh the hardest part is though when you're getting started is you don't know what all constitutes a full application so the build aong month project is here to hopefully address some of that so today uh Brad's gonna be doing the stories blind basically uh zero prep hopefully if if Brad can survive this and can teach us along the way we'll be able to do this all together are you ready Brad I'm ready let's do this awesome so um oh man I had meant to actually share my screen uh let me do that real quick uh in turn put up my screen please thank you um so this is the web page for build along month quick little intro you've got the introduction and a whole bunch of information that you should totally read then this right here you can you have some instructions on how to set up your instance download the update set and if you're not familiar with how to use update sets here's how to preview and commit an update set we're going to begin our video today uh with just the assumption that we've already got this figured out and then down here are all the stories you've got a whole bunch of different things that you can do but on this show we're going to be highlighting the UI Builder specific ones and those are the ones with this little nuts and bolt emoji you can filter for those and select UI Builder stories and as you go through and complete the stories yourself you can check box them so you can keep track of what is uh what's already been completed so now with that out of the way let's go ahead and go to Brad's screen and get started all right so in today's show I will be playing the role of a developer who has not really looked at the stories yet I looked at them a little bit but not much uh and so we are going to take uh a un Andi conference Notes app uh that I believe we have generated a workspace experience uh for this app from app engine studio uh but we're going to create a custom contact entry page uh for this app so uh when we get into the page I can tell you why we're doing that and not using this out-of-the-box contact record page um well I can tell you no it's because we want the page to be responsive uh which is part of the zanadoo uh uib uh features that we release so let's go ahead and create a new page and we're going to call this contact entry when it loads we're going to create from scratch I'm actually kind of shocked right now that you aren't showcasing like the biggest uh sadoo feature right now um it's kind of disappointing honestly but we'll get there I guess we all know that I'm I'm a light mode guy I can't believe it I thought we'd be in dark mode uh we can I can switch to dark mode at some point um yeah so there's this new screen here uh which is going to allow us to build uh a responsive page and build a responsive page is probably a little strong uh what we're allowing people to do is uh basically do a page where you can set breakpoints um and so not all of our components that we ship out of the box right now are responsive so there is some limitation there we're working with all of our component teams if you don't know we've got uh you know we have kind of some uh centralized teams that own most of the components and then we have uh lots of uh disperate teams that have built components for different purposes and so we're working with all the teams to get all of the components to be responsive um but I believe everything we're doing today will be working with responsive components so let's go ahead and hit create uh one note about uh responsive uh and I'm going to turn off guided tours we have a whole bunch of guided tours that we've shipped in uib in xanadoo so if you're new to uib uh basically every page has some sort of guided tour uh and so you can use those to familiarize yourself with uib um so uh one thing about responsive is that uh responsive Pages uh or responsive can only be applied to net new pages in zanadu for in the xanadoo store release of uib forward uh and they have to be Pages built from scratch so none of our page templates are are um are responsive yet and none of well some of the outof thebox pages are kind of responsive um but uh if you have created a page in the past it may not work with this responsive design so we we can see that we've got a few different um screen widths here um so I can change to different views so mobile the nice thing is is that the unified navigation has had uh Auto Reflow for a while uh and so it sort of shows up or you know this is fairly responsive right here um and then the other thing is you can add oh it doesn't want me to click anymore let's pretend like that didn't happen I'm refreshing um there we go it just took a while so you can actually add three new uh page widths or you can add three new break points so by default we've got desktop tablet and mobile but if you have something else uh that um uh that you have uh that you want to add new breakpoints you can add up to three more breakpoints uh for other types of screens uh this is uh Earl asked a question uh does it actually simulate mobile no so this is all just breakpoints so it's just browser width um so we're not simulating a mobile browser or anything like that um this is just about browser widths for now all right so I knew we needed a new page called Contact entry uh what's what's our next story I think that was a whole story right creating a page yep so technically the next story is to create the page layout for the contract entry page and this is supposed to be the page that a user would pull up on their phone or on their tablet real quick at a conference to enter in people's information okay so let's go ahead and just add a single column layout uh because it can't hurt us to have a single column layout um so we'll stick that in there um so for me this feels like a page layout that's that uh it fulfills the requirements so now on to Story number three we need to add the form component bundle to the contact entry page yeah so Paul asked a good question what's the difference between build responsive and auto Reflow rules responsive lets you do things with the break points um so you get these break points up there and then I believe you can reference the break points and our containers and everything work uh differently so zanadoo is out uh we had a question is there a way to get a xanadoo Dev instance you should be able to request a new PDI or upgrade your PDI or upgrade your company's Dev instance um so all of that uh an a super important reminder UI Builder as of Washington is now a store relased app so you need to go to the plugins um filter Navigator menu aka the application manager uh plug-in area and upgrade it from the store there uh reys has a good question do you have to rebuild the whole page for each breakpoint no so that you don't have a lot of control over the break points so this is just kind of showing you what it's going to look like and basically the break points are saying it's you know it's going to work differently for different screen sizes whereas Auto Reflow is more about Zoom um than uh than page sizes anyway that's that's as far as I I know about it as we go we'll kind of see if there's things we can do uh with the break points um but uh let's let's do this well yeah I think and I forgot to mention the whole point of the app so this app is uh I did that on the web page too when I originally launched it so the whole point of the app is to have an easy intuitive interface to use so that if you're like at knowledge or another conference and you got to write down people's informations you can do it into a database so ideally this page is going to let us quickly enter in people's information and then be able to um save the record then create a new record from it as well yeah so we will uh so breakpoints are handled in the components and we'll kind of talk about some of the other stuff as we go through there um so I think we're adding a form component here right yes all right so we're going to do uh there are a few different form things you can add we're going to add I think is this the form bundle yeah so we're going to add the form bundle which is going to add lots of different uh parts of the form to my page it's multiple components so we're going to add the form bundle uh it's going to add a controller for me uh and it's going to say hey this controller uses a bunch of URL parameters do you want to add those to the page and I'm going to say yeah I I wouldn't mind having those parameters on the page the other thing that it it does is um it adds uh some overlays um so there's a modal Mo uh modal container and then also popover so when you have reference Fields uh and you click on the reference icon and you want to show a little um a little popover uh that uh that is there automatically so let's go ahead and start by adding some values here and let's uh open this in app engine studio and currently the only way that you're going to be able to access these tables is through app engine Studio but one of the later stories has you create a filter navigation menu item so you can access the tables more directly all right look it's our demo data that I didn't tell Brad about so we're g to grab what's my table name I think if you go to preview uh oh this what I want I think we'll get there uh no no it's under okay go back to data tables and forms I'm gonna why can't I right click on the setter this is the old school way to do it ah oh no no I hit undo oh hey that's a Washington feature the ability to undo there we go all right let's save come on why did that all right uh and let's try this again so I'm GNA use my mouse more this has to be ruing all right search for assis ID there should be some records here right yeah yeah there's records I just noticed the Emoji and the number thanks it's my favorite I hope it doesn't break anything you my Builder but I guess we're going to find out oh it's not the display value oh I forgot to set the display value whoops I'll add that to the story so I'm gonna take notes all right so we have a form uh and uh this is you know if you have you know in a workspace you can always create a record page um and uh from the template and it'll do all this for you uh but in our use case uh we want something that's a little paired down from a record page since you're just going to be able to you're just going to be filling out this contact form and then we wanted it to be responsive so we needed a net new page that wasn't a record page uh and so uh this was a good use case for just adding the form component bundle itself um one thing I can do is go ahead and edit this form view directly in uib this was a Washington feature um and so that's helpful I'm assuming Gabby has made this the best form Ever already um and then we've got our Form controller which is basically what is populating and controlling all of these um all of the values in the form uh was that a whole story well we want to use this for entering in new records uh do we don't have any buttons huh why do we not have buttons thought I was supposed to give us but well let's see all right let's uh open the URL path all right well that gives us more stuff to do uh so we've got a form uh but there's other things that we can add to this that have to do with the form so we can add the action bar uh and I'm going to add the action bar before and so one of the nice things is uh in the toolbox right here where we have all my components anything that works with the current controller on the page so this Form controller is highlighted here um so if we scroll down there's all sorts of things that I can add that will automatically configure themselves because it's on a form page so if I add the action bar here uh it's going to tell me hey this components using a preset we went ahead and applied it automatically I'm going to say got it and we we already have a save button it the the Form controller has already populated um these uh properties and I can always you know click on this and set a custom value here instead of using uh what it populated uh but I don't need to do that um so let's save it uh and let's let's test a new one so is this what we would want the page to look like for a new contact or would we want less fields on it I think we want less Fields it's a fun use case do you have a form view that has less fields on it nope all right do you have an idea of which Fields you want yes all right well let's uh let's open up uh form Builder here and take some Fields away so we want name we don't want number since we're not going to be able to enter that in all right let's add we're gonna add new form view I think we're do we want to duplicate or how different is it going to be duplicate is fine let's say new all right you say we do or we don't what number we do not want numbers all right probably we want yeah we don't need reached out we don't need date met because it's going to autop populate ideally do we need any we take the let me see H let me let's go down the list don't remove location met yet but definitely remove Photo um remove uh do we have phone number okay we've got phone number we've got notes followup action um probably we've got email job title company session attended that should be under event information yep event name we're probably autop populating how's this look um let me see I think that looks good to me but maybe we should just make it all into single column since it's going to be accessible through the phone or do we want to test what that looks like in respons I believe it will auto adjust into single column and I think it would do that even before responsive oh so let's save that and then now what we need to do is I think I think we probably want two different variants uh one for new and one for uh one for existing what do we think we could also [Music] change the view based on the CIS ID uh let's do two different variants because I think we're going to want different buttons and stuff too for a new one and an existing one yeah yes so do we think there's anything else that's going to be consistent between these two pages before I duplicate this variant well so this was supposed to be just the entering a new record page okay so the existing form page we're going to use the outof thebox record page yes uh I won't be responsive though correct okay so we'll just change view on the controller here uh where was it there uh so right now it's going to uh automatically use this workspace um conference notes and I believe that's probably because let's go look let's [Music] see if there is uh a page property that has that value I'm guessing there is so app engine Studio probably did this automatically view yeah so uh this is a good note uh to make uh when you're working with workspaces uh one of the common questions that we get is like how do I how do I use a different view uh or something like that and by default uh all of your workspace pages are going to point to whatever view is specified in this ux ux page property and so I can come in and change this um but I think for the most part we do want to use this view it's just on one page we want it to be a different view so in that case instead of using the view that's that's being pulled from the page properties here all right so uh another thing is all of these 17 ux Page properties their values are all available to you uh right here in addition to one more which may be it doesn't matter um but yeah these are all the values that are available to you where you set these is the ux page properties for your experience so what we're going to do is we're going to come in here and change that View using the pencil to new and we think that worked that was the view we specified right yeah yes that looks right to me all right I love that delete everything button that's great do we have more buttons there uh anyway did we finish this one do we test it uh we need a we we do need like a new so when the user navigates to this app or to a p to this page they should be able to see a new form submit ready to go how would we do that like this so another story that we have to do is to create the uh L1 menu um button to lead to this page let's do it let's go ahead and do that that one is uh where's my I'm gonna put the story number in the chat so Earl can put it on the screen in the L1 menu is what we call the menu on the left side there that has the the little buttons and this is where you go to edit it how did you get here uh it changed actually so I I went to view experience settings I think there used to be a pill up here uh there's another thing that I noticed when we get back into the page editor uh that changed that I like a lot um so in here uh we should have access to all of the pages where analytics Center am I just missing it nope it's second one second from the top ah I was just missing it okay contact entry uh the icon let's do like a little person yeah yeah Circle eer that first one's cute the label let's just be boring and call it contact entry and then I think being at the top is fine I do want to move it do I have to save first there we go and then did you put the minus one I did not oh I'm sorry spoiler alert uh how do I do that we might have to go to advanced settings and go to the route you ear can we clip that just just the you're right I just need it for team meetings wonderful um so route info I think is where we want that and contact entry let's see what happens if we don't have it okay because I don't even think it's going to know the table we want let's um I think it's doing this because this was the last thing we did contact so this should still be going to the OG record page yeah did we hardcode it in there or is it just taking I I feel like we need to pass it although we're not going to be able to test that oh well we'll worry about that later that works now true [Laughter] development it's fine until uat says otherwise yeah yeah reys we can add those things it just works without doing it so no I I do think we will need to add this uh but I I don't know the syntax off the top of my head and there's not a great way to test it since it's going to link there anyway so what's our what's our next story uh next story is well can we test creating a record we still can't create a new record I think could do that sorry uh here we go sorry somebody's at my door um I lost my train at that I was going to do something funny but I forgot so then how do we save it uh with the save button it's just off screen right now okay so next story when I hit save I want to display a confirmation message there are a couple of ways we can do that uh we could do that with a business rule um because it should show business rules uh or we could do something with the Form controller let's do it both ways um I guess little will go to business rules or that is the right way to show a message right I thought we could pop open a modal using an event a modal that they have dismiss yes why do we need a modal why do we need a lot of these stories to learn Brad I yeah I yeah no that's a good that's a good point I I think a modal is probably like for a success message you generally don't want to make the user do something unless like they really need to know you know that you want them to acknowledge something so that's a great great point the reason why is um I was thinking they could have like a like an oh an Interceptor or something showing congratulations it's been created do you want to view the record or do you want to create a new one so that way you can Wonder click through is that one of the use cases that was the motal use case ah okay maybe I'll read those before saying it was a bad idea right no you're doing this blind you dropped a great nugget of wisdom you're good so we want a model that says hey you created this thing do you want to go to that record or do you want to create a new record yes all right uh so let's give it some sort of header this is where I get annoyed so uh because we're on the form page it's automatically going to add presets uh actually this one works yeah person so we'll just leave it there we'll pretend like I do that on purpose um um and then I don't think I'm going to put anything in the footer so we just want do we want two buttons maybe in the body we could put a message has been successfully created and then in the footer we can put the two buttons one on the left one on the right so I'm going to get rid of that preset and for those of you who are new Brad is the the single biggest uh user of the stylized text components to the dismay of one of our designers apparently I I think he's coming around to it um yeah so I'm going to use a concat component uh or formula here because I want to show the number that got created and then uh has been created so let's go data resources Form controller form Fields uh we're not returning the number why don't we have the number we're gonna have to change that to return the number but for now I guess we'll just use the name again and we'll say we could say contact four but let's just do that make it a paragraph no that's too little that's the same size there we go and so you want two buttons that says um create new record or go to created record yeah all right so let's let's do that in the footer and we'll do a two column layout and we'll add a button this sorry I may or may not have the Olympics on up in the corner it's not looking great for USA Basketball uh can I Center this from here yeah there we go do I want them centered do I want the left one on the left and the right one on the right left on the left right on the right all right so the button let's go left button we want to do something new the right button will close this out and just leave us on the record so let's say um create new well I want the I want to take them to the record page not just stay on this page oh okay yeah we can do that too thank you oh actually we're gonna do oh I forgot you can't drag and drop inside of modals oh I raised that with the UV team and there was there was a like really complicated technical answer to why that's not possible oh no we may solve it at some point but it was not as straightforward as I had hoped all right and then I'm not renaming any components here because I'm kind of lazy uh but generally I always think it's a good idea especially with buttons to rename them to say what they do uh because as you can imagine like this is a fairly simple page but we have a bunch of stuff on here uh and so I would always rename my modal to say what the modal does and then anything where I have multiple of the same component like styliz text buttons I would rename those so that they're more easily identifiable here and where would you rename those uh let's rename this one uh go to something very important to know is once you rename your component any references to that component aren't really Dynamic you're going to have to go back and rename stuff so you should rename your data resources you should rename your components right as you're creating them so you don't up having to uh fix stuff up later once you go back and rename everything why am I modal go away when in doubt refresh when in doubt when in doubt Clear Cash there we go there it is look at those butt oh they're stacked oh uh why are they oh it's because uh it's because it's responsive um in that mode there we go that's uh real funny that is hilarious because we built a responsive page and the width here is small let's so let's render it and see if it does that in in the browser but uh I wonder if there's a way to set break to do something with the break points in my yeah that's a good point reys I could just use two uh two things here anyway for now we just want it to work and it doesn't have to look that great I'm going to say the story is done and somebody can come back to me and [Laughter] me uh what are we doing the worst uh so go to record yes all right so let's go ahead and um add some actions so create new contact oh there's a let's see let's see if this is going to work so we'll go link to destination um title so we want the contact entry uh it's going to be whatever that table was no then what just happened I do not think it liked your emoji there really uh so what is the name of our table and Society is going to 1 and that looks good but we lost our button title wait why are you doing the minus one on the go to record page because I clicked on the wrong button oh I'm sorry I'm sorry there we go third times a charm [Laughter] here this is all on purpose just to make sure people understand that's right okay so this one is going to take us to the record in service now s IDE of negative one means it is a new form uh so that works in both uis so we'll add that I'm gonna go ahead and save just because and then this is why you rename your buttons everybody yeah so let's delete that one I guess I could have just changed it and this one is going to link to our record page oh and how are we GNA get the CIS ID I think we have it let's grab it from the record data resource we'll go table and then S ID isn't that what's in the URL parameter though we're not going to have that well we are because when we save the record it's going to refresh and then on the refresh we're going to pop this model I think okay so now we we do need to decide how we're going to pop this model um so there's a couple of ways let's try both of them um so one of them is we can use the Form controller uh The Form controller has a ton of events and event handlers right so it's got all sorts of things um and so if we just kind of look through them I think there's a record um and while he looks for that I just want to stress if your UI Builder does not look like what we have right now where the Form controller data resource is a little box that we can maximize and minimize your UI Builder is not the latest version um so you should definitely go ahead and upgrade it uh using the application manager and there's instructions for that on the homepage although technically sadoo has a version of this it already looks like that asterisk I guess this is just for Washington if you're using a Washington PDI how how are they doing looks good for Team USA all right um so this is what I want to do oh I did want to call this out um there's a lot of like little things that um were always improving about uib uh our design team is incredible the product team's really good um but one of the things that they did was give us some more screen real estate uh by uh We've completely gotten rid of this left bar and so everything is on this bar up here so my little options to duplicate variant or no longer on a different row um so we're really really trying to consolidate things make it easier uh to use uh with each version Brad what is that button in the very top right corner of the UI Builder menu we can go dark mode and then I it also changes it for everything right wait really uh maybe not I thought it did oh good oh it's weird that it only does it for uib anyway immediately turns it offy I know like I'm not a real developer because of it but no no no no no I used to be dark mode person too but then if for once it's not me getting delet e it out of the shot yes um that our intern likes to mess with us like that and yes that's live um but no I used to also be dark mode person but then I realized stigmatism is a lot easier it's uh light mode is a lot easier on your eyes if you have a stigmatism all right we're gonna run a quick test here so we're just going to create a new contact uh it's a boring one refh this page I believe it's refreshed okie dokie we can so if I save the URL should change right okay so let's see we're going to have to do a little bit of experimenting with the events that we want but I think we're going to want that form submit completed and so here we want to open or close a modal and we're going to use custom one that I uh renamed and then use the same event handler to close a modal dialogue and you just click on that button so let's go add let's save and then let's see uh when that happens and I can use the uiv pre for something like this but I kind of want to see what the URL does um yep it was just looking at the most recent one we were using we didn't actually make that route work yeah so uh go contact two all right so this did change and we did get our modal nice nice so and it goes away all right so let's make our modal do some stuff how much time do we have left yeah we're good um so we oh we did we did it already that's right um should we fix our little guy let's do that in a minute yeah I'm looking for the right syntax right now all right so let's so if I go create new cont there oh oh I need to close the modal that's right so that one worked and then we'll make the modal close and then we will also um uh see if the record page one works up where was it third from the top isn't it there we go my eyes don't work you should use dark mode why did our button title not yeah your button does not want to stay whoa uh it's some cash issue when I realize you can add multiple actions to be a result of an event firing it blew my mind all right we already do five so we'll save it uh so we did that one so go to the record page nice that's our record page nice let's fix our little guy here um and that was here every time I need to to learn how to I need to remember how to do this I always look up your old um your old um Creator con laab oh yeah I I don't even really remember I think it's fields and then where are we at one two three four and I think we go table oh and is it S ID which this ID is it soci like that okay and then I keep forgetting the table name don't worry same did I close this I don't think so uh yeah there you go does that look right yeah it kind of looks right to me I think that's right here's our test let's do a hard refresh um it is not working go home and then try it from there all right somebody tell me did I do this wrong did I misremember how this works uh so let's troubleshoot this uh the way that I normally would which is looking at one of the outof the-box workspaces and let's I think we can guess that s so did this in a weird way not a weird way but they have more stuff um it's a tab let toolbar route info route info ah viewport info no no all right let's do all right so maybe some of them have something in there how about CSM yep so CSM does it the same way could it be aggressive caching could be I did I have been clearing the cach on refresh here uh um don't really want to clear the instance cache well I think uh we're at a stopping point anyway but let's uh let's go home and clear the cach all right that worked let's [Music] open save go to record page go to the homepage no it didn't work that's all right what this um so so so oh my gosh I forgot to do this at the start good news everybody the tagline of the show is sometimes it works and sometimes it doesn't and this time it didn't so um we'll get it figured out for those of you yeah we'll get it figured out for those of you who are new to the show the number one goal of this is not only to teach you guys how to use UI Builder and increase the adoption of the products because that's what makes my bosses happy um but to also show you guys kind of what real development looks like because I know when I was starting out I looked around at the Brads of the world and I was like he's got this CIS context menu dot walking data resource stuff memorized and I will never get to that level but um thank you so much uh for walking through those St stories today Brad I actually I didn't think we would get to so few of them um so that's good news we still have content for next time be sure to tune back in for part two of this series and the final part of the series it is going to be on August the 22nd at the same time 4M Eastern any closing words uh for you Brad uh I did want to say something Paul had asked about are there any checks to see if the record already exists to avoid creating duplicates and I wanted to address that and say uh in I wouldn't I try to do as little data validation as possible in uib because generally there are different ways to create and update records um so generally if you want to enforce uniqueness I mean there's a check box on the field that will work um but you could have contacts getting created through an integration through class environment and workspace and mobile um and so for data validation uh you really want to lean more heavily on the server side side of things so um you know uib is really just the presentational layer uh and I would not want to do too much of that type of control through uip itself dropping dropping some knowledge thank you very much Brad um and thank you guys so much for hanging out in the chat we had a really nice active chat today be sure to go and try this out on your own this video will be available for viewing immediately after we're done going live and then post your successes or your struggles or your story on LinkedIn and make sure to tag me in it so I can keep track of it um you can provide feedback uh whether that be new stories new ideas or how things should change um in the GitHub repository discussions there's a lot of updates I'm already going to go back in and try to make before this weekend um and thank you so much Brad for going through that with us and thank you guys very much for watching see you guys uh on the 22nd bye [Music] [Music] [Music]