[Music] [Applause] [Music] [Music] [Music] [Music] n [Music] oh my God Hello everybody welcome to another fun episode of you and I Builder live I need to come up with a fun catchphrase for this show so if you have any ideas feel free to let us know in the chat today I am joined by my usual co-host BR is back hello everybody my name is Brad hi Brad it's been it's been like a month and a half since I've been on the show I forget forgot how to how to do things honestly me too uh the show was starting and I was like we never discussed who's gonna talk first um so hi I am Maria Gabriella CH prz wector of the many names we are outbound product managers working on UI Builder and we're here to show you how often awesome it is now this this month is kind of weird I know last month we didn't have Brad and this month we're having our shows on different days so I want to give you guys a heads up that our next show is not going to be next Thursday it's going to be on Tuesday the 28th and um it's going to be a surprise of a show so be sure to tune in it's going to also be at 400 PM uh but it is going to be on Tuesday the 28th we're not going to have a show next week for the holidays enjoy your holidays and Brad uh what are we doing today yeah so today uh we are going to build a data resource based on a script that I have that returns a bunch of data uh we'll look at the script it's not the prettiest thing in the world uh but it does work uh which is basically my entire uh career uh in terms of building things um but but yeah we'll do that script uh we'll turn it into a data resource and then we will uh we'll put it in uib and kind of build out a page based on that data resource that sounds good to me um where are we going to get started did you already write out your script I do have a script written this was kind of last minute I was already building this uh for an internal project that we have for uh doing some quizzing so we're building out a quiz with questions and question choices uh so we're going to start by just running this script and make making sure it still works um so let's open up our background scripts here and it's here oh that's right I I don't have snu TOS on this instance or on this browser which is a fail this is my this is my uh sharing browser uh um I let's go here actually let's do this let's share this let's share this script just for those of you that care I'll put it here and I'll Zoom way in and we can walk through a little bit about what it's doing uh so basically we have a data model where we have a quiz table we've got a quiz question table and then we've got a question Choice table uh and uh what we're doing is I'm doing some nested queries here uh you're welcome this is not the way you should write your scripts probably uh but because uh I we have like a hard limit on the number of questions and and choices uh it's not going to kill us on performance uh so this is basically what the script doing is doing and at the end we're going to get a big Json object uh that's going to show us a quiz and the questions and the choices within the questions so let's go ahead and run it I do have some demo data and we will see what the output is all right and then uh oh I was going to come in and actually set orders for these but no big deal um so yeah so we've got our uh quiz uh table where we have some quizzes or we have this quiz uh and it's not p the right CIS ID why are we getting null well I thought this worked anyway uh so we're going to get questions here and then each question has some question choices and eventually there will be a front end where people can come in and actually take this quiz but right now we're working on the backend building out the quiz um so that's what we're going to do we're going to start with the data resource that pulls all of our data uh and builds out this quiz page and then from there I don't think we're going to get to that on the episode but we're going to make it interactive where I can add new questions and question choices from the same page does this make sense yes all right uh so I did already start a page that we're calling quiz Builder um so we're going to open up this page I don't know if I put anything on this page yet I gotta say that name is really great whoever came up with it is just a Visionary the quiz now name yeah it's fantastic yeah whoever came up with a name and then created the instance yeah uh all right so I have a page we've got a layout with some stuff on the left and and a big thing in the middle and so I think we're going to be building out most of the middle section so uh we're going to create a new data resource what do I do that I hit create somewhere also it's been a long time since I've created a data resource so we're gonna kind of do this together all right my first decision when I created dat oh go ahead don't you have to be in a different scope or is it o okay to be in that application I think I'm already in I'm in the quiz now scope right oh no sorry I meant like in the thing that you have selected on the left or is the new button independent of what's showing under data resources the new button is independent of this this thing here that uh we're we're gonna get rid of soon awesome sorry sa safe harbor um yes we don't want you to have to worry about what application things are in because it's kind of ridiculous so creating a new data resource um I've got different options here ideally everybody uses graphql for most things um that is kind of our recommended way to do things uh if I had had more time I would have built out a graphql uh API uh that we could have then built out a graphql data resource instead of the script and maybe I'll go back and do that later on we're going to use a transform data resource I've got an article that kind of lists some best practices around data resources um the main reason why we want you to use graphql uh is because uh it is um it's it has some built-in garils so a transform data resource you can do anything and there's a lot of like bad practices you can Implement through a transform data resource because it's just running straight code uh and a graphql re data resource we'll have some guard rails and we're also working on optimizing our graphql performance and apis every release and so that will gradually get get faster to where your transform data resource is kind of reliant on however you write it um so that's the main reason we we uh recommend graphql but we're going to do a transform and so I'm going to H I'm going to end up uh looking at some existing data resources because I don't quite remember how I need to structure everything uh but uh well well let's let's start doing that because I don't even know where to start does anybody know if there's a particular reason why they're called graphql for the longest time I actually thought that they would output like a graphical visual something I don't remember exactly I know it's a I think Facebook uh wrote this wrote graphql a way back when as a more performant way to do do things oh if I am remembering correctly Having learned everything about coding that I know from working on service now I don't I often don't know what is and isn't a service now original thing that's fair yeah guys in the chat find is there a data resource that I oh have I built a transform that might be good let's see no that work okay look people in the chat always have answers it's wonderful it's fantastic um oh there's some now assist stuff I'm not going to open this let's go I'm spending too much time trying to find the right one let's just click into some um I think this will work all right so my property these are basically just an array of objects uh I do have an article I wrote that tells you how to build properties that maybe we'll look up because I don't remember um and then okay the function is just the function is just going to be why can I not do that return okay all right so we're going to take in a CIS ID and then we are going to return a big object here so let's call this um let's call this get quiz structure send you the link to Brad's article if you could please put it in the chat and Brad I'll send it your way too thanks which one my uh properties one data resources yeah it's got properties in there oh yeah has a link in there thank you Earl um let's open it up I just love kind of the uh the reality that we live in where you are literally looking up your own [Laughter] article yeah and then I was going to call out this part uh it is very important uh to uh check this check box if you are mutating data which basically means you are creating or updating records or deleting records and then leave it unchecked if you're querying records if you're doing both in the same data resource stop you should not be doing both in the same data resource because whether you check that box or not determines uh how um how eager this data resource is so if you don't check the box it's going to run all the time uh in lots of different scenarios and if you're mutating data you don't you generally don't want that to happen so have separate data resources for those types of things all right so all about data resources do I have a component this is what I want that's your other article yep all right so I think we want a string here uh actually we probably want a reference so I can pick a quiz so reference table empty State behavior all right uh I kind of want to look at one oh this is a reference here I'm just going to copy this and we'll change it um so we we are going to name this um yeah so I saw the comment about Json Fields it's one of the things I love about the SN utils browser uh plugin that I don't have on here but um yeah eventually we want to we want people to be able to do this with anui Builder eventually uh but we are not there yet so transform this is going to be a quiz let's just call it quiz ID and then this is going to be I call this um quiz so while Brad types all of this up and I'm gonna try to buy him some time here so he doesn't have to talk while he types has anybody in the chat made your own data resource or did you just space instead of tab I don't think tabbing will work on a string field like this yeah Oh no you're right okay I'll allow it sorry I do do some weird old man things but that's not one of them uh or maybe it is ay had a great Point half the reason of writing articles is for your own future reference that's true 100% unfortunately for me that would require me to remember which articles I've written which is kind of a Blocker in that instance um but it's it's just been really funny to me learning service now for for the past six years seeing Brad Earl Andrew all on the community all the time seeing Chuck on there um and now when I'm trying to find answers to anything it's like oh this is literally my coworker it's so weird I don't know if this is actually a uh a property that we have but we're going to try it all right and then we're going to go [Music] function andp put and then we do get a script box out of that one it is a property want this n work all right like that did I actually mess something up or there uh let's make that big so I want to do this um what do we call that input. quiz ID we made it mandatory so it should be there we're just going to trust it because that's what you should do When developing um and for those of you who may not have known this like I didn't know this according to Brad uh oh the mechanisms for passing data into components to use the data are called properties which is basically their inputs so that's what Brad's putting up at the top I assume it's what the um data resource is going to use as an input is that what the property is for yep awesome I'm marking this article mebe said do I never use this I don't think I ever I think that was a an idea that I had that didn't work um all right this may work Famous Last Words where's that squiggly I don't care all right uh so let's save this oh I I do care I guess okay ident what's an ident did I did I do the did I did I write this function incorrectly oh identifier oh yeah I gotta go transform I didn't name it see I never write code anymore there we go see this is why we don't ignore red squigglies yellow squigglies we can ignore I mean sometimes the red squigglies are wrong like what it wants a semicolon I'm not going to do that one's yellow um oh you're right that is yellow colors are not my strongest I went to school for colors uh now I need an access control that's why my uh privileges are elevated so when you create a new data resource you have or I think it's a just a new transform data resource you need an ACL and it needs to be a ux data broker ACL to read it and it's just the CIS ID and I think that's all we need should I give it I don't think it needs it wrong let's it submit and see if that works so we'll know very quickly whether it works uh uib should now t tell us that you data resources were updated it did not which is nice so we're going to refresh and now we should be able to add this data resource to the page yay it worked well we'll see well I mean it showed up okay we're winning a ACL failed well let's did it still fail yes uh so I wrote a different article let's go developer blog data resources oh I should put service now on there no there it is uh create an ACL come on on WR better [Laughter] blogs so I did just create one do I need to give it a roll maybe uh well let's see what the other ones look like oh execute oh here you go John wrote an article on this yeah it needs to be executed instead of read oh that kind of makes sense uh I'm going to save this and and we'll refresh yep operation execute there we go we still get null or some things let's look at the script again and see what I did wrong it's because I'm a there we go um order I'm pretty sure I have an order field that looks right control F does not work there have you tried command F that is actually sorry I just called it [Laughter] control uh I don't need the order but it bugs me that it's returning null I'll take a look into that I mean I'm pretty sure I added order to that table but it's possible I didn't or maybe I misspelled it that's also a possibility all right uh so now I want to build out uh what this looks like and then eventually we are going to um we are going to make it interactive but I don't know if we'll get there on today's show all right so let's add a component within column two I like to add a container within the column uh I think there's some stuff that it allows me to do that I can't do otherwise um so I think we want to I don't want want to do this um let's add a stylize let's no we're going to yeah we're going to add a stylize text I should have thought harder about how I want this to look would you want your order um field to just be a string uh I would want it to be an integer integer got it it totally already exists I'm just reminding the system that it exists thank you uh you know what I kind of want the title of the quiz to be above this column layout so we're going to add uh a single column above and then I'm going to move this up there and then can I do that I can't do that sweet and then can I give it a background uh we didn't theme this instance do you know if I can theme an instance is that possible I don't know I think I've heard of this new product called brand manager it's a deep cut all right um so we're GNA say this is just going to be the name of the quiz which we're going to access by data get quiz structure. output do quiz Fields do name I think it's going to work maybe why is it not if I save hey there we go I don't know why that didn't update right away I don't love that it didn't are you making a theme right now um no that would be smart let's do this no I I you don't need to I was just wondering I did get the order field in so hopefully it doesn't show null now all right so we've got the quiz title we're cooking with fire now uh and then what do we want to do from here we have the title what else do we have in the in here we've got the ID we're not going to display that we have the owner we're not going to worry about that right now so let's go straight to the questions now we get to play with repeaters oh my bad I made it on the quiz table but was that the quiz instance table no so there's three tables we're working with now it's quiz quiz question and quiz question choice there's kind of two uh paths that the tables follow so the quiz question table I think is what needed an order field God or it already has one it already has an order yes it does already have one uhhuh all right so let's go ahead and put our repeater together um you may be wondering why the little number doesn't show up anymore um it's kind of a long story but it is not there with repeaters anymore and may not be for a while because of some underlying issues uh so I'm just going to trust that uh it's right and then within the repeater I'm going to add a container I think yeah I think I'm add a container guess I could add a column layout it's the same thing basically uh let's give it a border oh okay the problem wasn't that the field was missing is that you don't have any data in there uh that's fair I was like the field actually exists what's going on here I thought it existed uh no I don't want to oh yeah all right uh oh no the color what was the color originally just wanted to be a nice gray all right and so within here we're going to add some uh of my [Music] question so let's add a stylized text we don't want a preset and I'm in a repeater so I can go at item value dot [Music] question there we go don't think I want to Center that um I'm going to add some padding here and then under the stylized text we're going to do another layout uh I think I want a grid actually it is going to be two rows and two columns yeah and then within the grid we're going to add another repeater and we're going to add the questions item. value do question choices we're going to have the choices I guess we'll keep going styliz text here I will probably change out these components at some point but for now let's do this just to make our data work then we're going to go item. value dot choice I don't know let's see how this looks why can I not preview this oh I didn't pass it a quiz ID that is important uh what's the little idea I had there we go now we get a preview oh and then let's do this just to make everything have a question while we're here uh so we have all this data binding uh this is a feedback question for everybody uh we've got this data binding so I hit at and then we've got some different why is it showing me we've got context we've got app got all sorts of things uh does does everyone uh generally know what these things apply to why so we've got app props session so context. proops I believe gives me I don't know why I've got this weird gives me all these page properties that includes my quiz ID oh so that works see I'm glad that this is a feedback question from the people in the chat because also I'll say if you don't know the answer I don't know what to tell you I mean I mostly know the answer but I'm in UI Builder a lot or I have been in the past and so I I I think it's an area where we could provide more uh feedback and um an explanation on what the like what app refers to what props refers to what item refers to when you're in a repeater um so basically in the chat on a scale from one to 10 how easy is it for you to know what properties are available to you and how to get to them all right oh cool we got our quiz questions it does work it is incredibly ugly looking but it does work so again this is the question part so we're going to have to make all this interactive uh what we're going to end up doing on the left here is some controls and buttons to add new questions and new choices um so maybe we actually want these to show up as inputs instead of answers since they're editable as inputs yeah because this is the page where you're building a quiz oh this is a page where we're building them okay yes why are we oh that's just the prev so let's change that out for inputs here let's see how easy that is to do and then we would make the value that's not going to work this is going to be any so complicated um yeah so this is not taking the quiz this is the page where we're building the quiz because there are so many tables involved I wanted to be able to do it all on one page instead of having to I I I kind of hate uh related lists and having to create a record and then add related list items and then go back and create another record and that really it drives me nuts um so I want to be able to do it all from the same page um but I haven't thought this far ahead in terms of architecting what this page looks like um so maybe we'll start with being able to edit it but then I'm going to need a bunch of client State parameters to hold each of the values oh what if you make each quiz question editable one at a time that way we only have a five sets of client step parameters that is a good idea and then I think I'm going to end up with a Json client say parameter that holds everything um but yeah so we still have a little while so we can do some of this uh let's start let's do this let's start by making the title editable O Let's do let's do it like this here let let's add a little pencil icon and then if you click it it it makes the uh title go away and you get an input box that do uh so we want I think we want an icon button button iconic and [Music] then I want it to be next to it so let's go like that but I still want it to be centered there we go and then my button iconic let's go I'm sure we have a pencil right yes pencil fill I think I want it to be bare I want it to be bigger than that and then how's the spacing look there that doesn't look bad and then so let's have a client State parameter oh we're going to end up with so many of these um but let's go title editable this has got to be the worst uh I'll come back and think about this and it'll be uh I'll have a better name for it but or it'll never change one of the so we'll start that with the false and then we'll come in and we will set the visibility on this one to hide component and this is going to be we're going to hide component um State all right it would be so nice if this was kind of like float designer and I had all those um things available to me as data pills so I wouldn't have to keep ret typing them yes yes if it was like if the data binding was all visual that would be really nice instead of having to type it all out um so let's add an input I think we want that to be lar there's not a large H that's cool and then for this one we'll wait to hide it wait where did it go input um we want the value I think we can just bind the value to the let's do that we're going to bind the value to the data resource except I have to switch dot no uh no I'm not in a we're all over the place today here we go name and then let's just save and preview that uh what does that look like I don't want that there and then that'll go away I think this will be okay uh so how do I get rid of the label ah does it go away if I get rid of it yeah there we go uh I think that's good and then now we need to make uh we need to set the visibility then we need to make the pencil button do something visibility is state do I have to do this all right and wait okay so I didn't need the Bruns and then we want to make the button control that so let's go add event handler on button click and then update client State parameter we only have the one and then if I click it uh I think can we do this yeah I think we can do this I think that'll work oh so you can just toggle it like that well we're gonna see that'll be kind of cool hey it does work wow I legit thought we were about to add two events to that all right so we have some time we could make this actually work um let's let's do that I'm Gonna Save All right so we're going to I'm GNA need like a save button to huh no no no no we'll do it on the toggle let's do that uh all right so let's go update no I can't do it on the top it's all right you guys want to know what's great is that I have been um trying to get the calendar component to work and I have a submit button that I haven't been able to figure out how to fix so Brad is about to laid it out for me real nice so I don't have to do too much Googling oh we'll see we'll see um no pressure Brad yeah so how do we want to do this actually let's just let's just run the update whenever I uh whenever I click out of it yeah definitely that's probably a bad way to do it h it's an awful way of doing it but for demonstration purposes it'll least got me started the other option would be when I click the toggle the button goes away and I get a like a a save button instead like a save and cancel but that seems like a lot of work for right now why don't we just do one solid save button for the entire form and it just submits all the client State parameters well I mean that's ultimately yes that's what we'll want to do I think you're right all right let's put a save button over here you have bullied me into it oh no no no no I'm sorry I thought you meant that on a per on a per individual label level we would have a save and a cancel button my bad well that is kind of what I was talking about and it it's wrong so yeah your way I'm gonna put it here just I don't like putting it on the left but that's where we're going to put it for now see John it would be so funny for like April fools to do what what not to do episode but I am so scared that someone will come in and for some language barrier some neurod Divergence barrier or something not understand that we're being sarcastic and then just run with it uh that probably should be a primary huh save and let's give it a save icon all right um oh now I need now I need a client save parameter hold the value though uh let see I'm scared of saying things that I want now for fear of you laughing at me again um sorry I wouldn't it be cool to have like folders to put your client saate parameters into organizing client save parameters would be nice you are you are right uh so initially this should be data did I not click the thing no no I didn't oh come on auto complete for me I don't remember the name why why are you not autoc completing that bothers me um but I can find the same thing oh all right and so what we want to do is when I uh when I set up value so it's when I what on blur is what this basically is uh I want to update that client State parameter the new value is going to be payload do value do that's it okay all right and then on Save we want to execute so this is not how the entire structure will be we we'll probably need a big Json object that holds the the actual data and then every time time you save it'll send the entire Json object and save it um what the all right I'm about to have some dogs barking I think I apologize oh could you hear that I was right just slightly uh so the table we want is this one it they're no construction that's for sure uh the record we want to update we have it is uh part of the page props and then we are going to update a specific value here this isn't how we will do it eventually um but this is going to be the uh state quiz title and then after that I want to refresh this one just to uh make sure that all of our data is correct all right so let's test that all right so Brad quiz Brads all right so now so I didn't update that yet oh but it kept it save and then do this it should update it there we go so let's try let's change it back and then save and then there it goes that did work this is a really terrible user experience so this is not shippable uh I think I I kind of uh I don't know so it's all gonna change once we build everything else out but is the issue that the the actual component isn't getting updated when the client State parameter gets updated or are we not looking at the same data yeah so this is not so here here's what would fix this we have some time so instead of binding this uh directly to the data what we probably should do is say state. quiz title right yeah oh we were looking at the data before okay yeah we were pulling it from the data resource so have that so now if I say gasp what happened I wonder if we have a cash issue well that's even worse and with that I think it's a great time to end Today's Show something's wrong something's wrong wrong with this I bet so I bet if we do rad squiz no rad great quiz ah whoa the initial value isn't working oh this remember how it didn't an autocomplete something's going on here that one won't work sorry yeah I I knew well here we go why is it all right so we're in data [Music] binding I want you know I it's been a while I wonder if if uh if you shouldn't update a client state if you shouldn't buy directly to a client State parameter on load that could be uh that could be it all right let's we have some time let's uh let's do this a different way so get quiz structure let's see if we can do on succeed can we do it there where we go quiz title I wouldn't want to do this with all of them but yeah oh I can't do that directly from here I think I am stuck on this one so Al says that she did this recently and had to have an event handler on the data resource so that once it was fetched successfully it updated the client State parameter that's what I was going to do but it didn't autocomplete which led me to believe it wasn't going to work but let's let's try it they're still there so I don't have the data object here the data object just doesn't seem to want to show up um and I maybe refresh the UI Builder page itself or you can copy it right there yeah that's oh do this that's I love that copy button uh so we want output quiz Fields name ay says she had to use a script that's what I was thinking I don't know if there's like race conditions or data let's try this first and then it didn't copy great oh and I still don't have the other one all right I'm I'm mad at it I'm not gonna do this uh so I mean ultimately we probably are not going to end up doing it this way anyway um we just I I need to fix think through how how I wanted to end up working in the long run but let's let's go ahead and put this back how it was because it was sort of working before why I don't have access to data anywhere yeah you haven't had access to data this whole time well when I originally did this it worked all right um let's do a refresh I haven't saved in a while maybe we still have stuff yeah I guess I could have used that on button that came in Vancouver but it's too late for that now once once we get this built we will share um the the final app and everything so and you you'll find out how we eventually try to solve this problem and who knows it might show back up on a later episode too yeah see now it's there we go something was going on I knew it sorry can I bind it here wonder if this is a bug or if this is by Design okay so I think that still works but I think we're at a good stopping point built a data resource we did some random stuff and created kind of an ugly page and yeah fantastic thank you so much for walking us through that had I tried we would have still been on the uh label part so everybody thank you guys so much for joining us um don't forget that we're not going to be here next Thursday because it's turkey day for the Americans um we are going to come back on November 28th so be sure to tune in for a special episode uh that we will do I don't know what we're covering yet we'll figure it out um but thank you so much Brad any closing statements uh I don't think so yeah we'll have two more of these this year so we'll have the one at the end of November and then we will do one in December uh the topic TBD uh and then we'll be back in January after that but uh yeah I can't I mean we're already almost at the end of the year which is kind of crazy yeah no it's um it's wild I am about to hit a year and it doesn't feel real but thank you all so much for watching I hope you have a wonderful rest of your Thursday and have a lovely day goodbye thanks [Music] [Music] everybody m