[Music] hello everybody [Laughter] Earl what's Happ [Music] [Music] hello everybody this time for reals welcome to the show where I forgot to post on LinkedIn that we were going to go live today my name is Maria Gabriella o Cho press vctor a lot of you may know me as mgop W and I am a next experienced product outbound product manager here at service now and joining me today is my awesome co-host my name is Brad Tilton and I also am a product manager at service now in the next experience team I'm switching instances while trying so a little bit of background for those of you who may be joining us for the first time you and I Builder live is really meant to show you what real development look looks like on the platform don't believe any developer in any interview that tells you that they are perfect and they don't need to Google and that they can get things right on the first try because I guarantee you they have a bunch of skeletons in their closet this show is meant to be a more casual way for you to get exposed to UI Builder concepts for you to learn with us and learn through our mistakes and our um failures and successes uh Brad have I bought you enough time to switch instances uh mostly yeah um all right so today uh we are going to uh we're g to kind of do some prep for my knowledge lab and uh I had prepped this a little bit in a different instance uh but uh it's my instance that for some reason is never working correctly and it's continuing not to work correctly for me uh when we do the show um so yeah so like Gabby said we don't practice this stuff part of the value is for you seeing us do it uh if you've got something you'd like to see in a future show please let us know uh in comments or in the slack uh and we will add that to our backlog we do have a lot of things in our backlog currently uh and yeah so we uh we're going to do something real quick before I wanted to start in uib but we don't have enough time so I'm going to try to introduce this as I'm doing things we'll see if that Works uh so this is uh my knowledge lab this year uh we're going to create an interface for a custom app uh that's around uh like taking meeting notes and creating to-dos from the meeting notes um so it's something that I end up doing all the time and I wanted a lab for that um and one of the things I wanted to do I think it's called Uh building a killer single page app or something something like that uh and uh what it'll do is I want it to look like a lot of the service now shipped project products like application manager and plug-in manager um so that'll be part of the lab is you know using the base app shell to create um an app like that so I I need to create a table real quick so we have something to work with um although by creating a table I we may not have time to actually work all right so we had a great question in the chat Aron um they are looking for tutorial on ux form actions declarative actions I agree they are a little difficult to understand but there are some great Community Resources that I will send to Earl to post in the chat for um some explanations on what uh the Clara of actions are there's this amazing Community post that got shared um and I'm sending that to Earl on slack all right admin can do everything user can do everything except delete what I've never seen anything go wrong by giving users delete access and there's the link in the chat now uh so we're going to add a couple of fields to this table and then we're going to get into I data oh I don't need this thing there we go all right um so I we're just going to add a couple of fields to it I'm GNA go the old way so let's give it a note I want a title and a note it'll need things like user and stuff like that but we don't need that for now let's make it 100 let's call this text so if you want to find some more awesome uh Creator concessions you just basically have to type into now learning build a killer and you'll see all of Brads uh sessions I love that everything is just build a killer blank and this one is build a killer single page experience something like that I'm going to have to change it because I'm pretty sure this is going to end up being multiple pages but that's what it's called right now and I feel like false advertising would be just like the icing on the cake all right so we have a couple of fields I think this is enough to get started so what I want to do is I want uh an experience that for me it'll be in my personal instance on my homepage could live in like an uh you know your own Dev instance or PDI or something like that um and I'll probably make it my instance homepage or easy to get to but I want it to kind of look like this this page or the application manager page uh it's just called plugin so that always gets me but the moment they fix it I will never find it again the product is called application manager yeah yeah so like this page where we have we've got this ban and then it's got this tile that is up in the banner a little bit is what I want to do and then maybe we'll have a search box and then notes and whatever below um but I want to try this and hey I think say we're on this page it's a great time to plug that UI Builder is now a store release so great Point actually in this instance yes we have um in Washington now you have to go into the store in order to find updates to UI Builder make sure your UI Builder says up toate so you get all the cool declarative action no all the cool visual data binding features sorry now you can go on ahead Brad um so yeah uh UI Builder when you upgrade to Washington you do have to manually upgrade it and then when we do our store release to in May you'll manually manually upgraded it upgrade it but after that uh there should be there will be some message or it'll be automatically upgraded I think in the xanad do time frame I guess throw the Safe Harbor up there that's what we're trying to do um and there's some great suggestions in the chat for uh things that uh we should cover in a future episode uh so we will we'll make a note of those uh and add them to the backlog thanks for contributing uh if you have a specific question we will uh we can try to cover that uh UI Builder a really good place for you to go to ask these types of questions is the community Forum that's kind of the official place to go to in order to ask uh service staff questions another great place that I like to um promote is SN dev.com which is a community run um slack server where I basically learned everything I know from people like Brad uh five six years ago um check it out invite. sv.com we have our own channel on there it's called next- experience-- workpace and Earl's going to post some information on that in the chat and in the description as well thank you Earl and then somebody ask when sessions are going to be available for knowledge uh they generally will post kind of an a higher level list of things that we're doing and then after that uh you'll be able to like register for labs but that's usually like late March April time frame it'll be a little while all right uh so this is I just randomly looked at the application manager page uh I don't think this is going to help us out much uh because it's not all that visible uh so let's try a different one this is just uh one I think this is a component um so one component that everything's in so that doesn't help us out much but I think at least the admin homepage uh will give us an idea so if I go into the UniFi navigation app UniFi navigation is what we call that uh this thing up here this is the unified navigation uh and so it has its own landing page so let's go ahead and open that landing page and so so on the landing page I kind of want to make my page look like this where I want a title up here and then I want uh something in here maybe a search box or my latest note uh and that'll go up here but it's there's some negative margin somewhere uh and so let's see what what's going on there so oh that's a modal there we go so this is is this top container and then this is the other container but this thing is up in here so let's see if we can tell I think it's going to be in the uh CSS here I do I have to duplicate it to find it maybe edit an original scope yeah I guess I can do that that's a good call so let's see the external layer this looks like all background and Border stuff so internal layer that doesn't look like it has it either so let's look at the container itself it doesn't look like this is what's being affected we can check it out doesn't look like it's it here it is we've got a negative margin here so we have two options at this point uh I could start from scratch and and try to um you know try to build out my page or uh I can go uh into the back end and just grab all of this layout and put it in my own page and so that's what we're going to try to do um so this is uh it's probably not um maybe not a best practice uh but if you're really just trying to kind of play around and figure out how something's going to work uh it is a good way to do that so what we're going to do is kind of just copy uh the composition and styling of the page uh and add it in here uh but we won't have any data or events or anything like that I really just kind of want the layout of the page so we're going to try that so the first thing I'm going to do is create a new experience we'll call it notes I'm going to use the base experience shell and we're going to hit create uh we'll open the experience uh so we need a new page to to paste things into we'll call it home generally if you have a page that's going to be your landing page you should name it home because that's the uh the default homepage and then we're going to call this uh home default it's kind of nice to uh name your variants uh because you may get a whole bunch of them all right so I've got that page so the first thing I'm going to do is try to remember the name of that other page admin next experience landing page all right so every uh UI Builder page variant is a macr ponent there are also other things that are macr ponents I did not write that correctly it's a cisu macron it is the table that holds all of these configurations um if you've ever wondered why um you know two people can't really work on the same page and they overwrite each other on the back end uh the page on the back end is a single record for the most part there's some scripts that live in another record um but uh every page has a macr proponent on the back end here so let's find the admin page how many 63 that's too many was it admin next experience landing page right and then I need to have uh notepad or something or our UBS code actually let's just do this all right uh so that is this page that I'm copying from I'm moving kind of quick is anybody lost not at all I think we're all uh following right along we're not meeting in the chat far can you recap what we've done so far Gabby so we have gone to the admin next experience landing page and looked at the um at the classic environment list and form view to view the uh properties to copy onto our own page sounds good to me I like it fantastic um is this the actual landing page I guess we're going to find out so there's three main Fields uh on the uh on the macro ponent record the layout model um which kind of tells me what my like containers and layouts look like and then the composition and then the data so let's try let's just try copying and pasting and seeing what we get here um yeah and then there's lots of other things that make it to where if you have a complex page this is not a great strategy uh to try to get that page but hopefully for us it gives us some sort of layout to start with uh so I have pasted that in my home default page so let's go back and open it up and see what it looks like hey this looks Prett good actually this is g to give us a good place to start from I didn't expect it to work this well to be honest um uh I don't I really want this modal though can I make it go away can I not delete oh I can't delete the whole Modo section I don't I don't want people to be able to give me feedback on this app so we're killing that um and then I don't need a well I do kind of like this section so maybe we'll leave that and use it for something else landing page cards container all right oh so what's a good we've got 35ish minutes to make something happen what what's a good can we do a to-do list yeah we uh well I don't have I only have the notes table built I don't have table let's build let's do a notes list or do we want to do the let's do a notes list and the ability to create a new note that would be yeah seems like a good stretch goal um so let's do some things here um oh this was they had some data binding in it before so let's call this uh no it's super creative and use this page to manage your notes and todos see this is how you guys know I didn't get to put any input into this app because I would have been like you and I be noy all right uh and then in this top one maybe we can have a couple of these uh sections maybe we can see how to do that in a future show but for this one let's go ahead and um we will say notes actually I want to make this two columns I'd love to have maybe a notes list on the left and then the note itself on the right could use can we use a split view for that let's see do we have split view available no all right is that a new component split button I don't think so oh no I'm thinking of something else all right so let's add and before we want a column layout we'll do a two column layout uh we'll put that up here and then I'm going to kill the admin dashboard keep saying that's so violent I'm I'm going to get rid of the admin dashboard that's what we'll say so let's do let's just add a list a simple list on the left I don't I don't always love the look of the simple list but we can try it or do we do the whole uh bundle and then get rid of all the stuff we don't want let's do that that does seem more fun because this is a new Washington bundle right oh it has its own preview section doesn't it list panel viewport oh it does oh we're going to undo real quick yes we can let's pretend like the plan was to highlight the presentational list yes from the beginning forget what we did all right so add after and now we'll add the list so in today's episode we're going to highlight the new presentational list component uh so we'll have to we'll have to figure out how this list panel viewport thing works I actually am not sure uh but presentational list so first we need to tell it what C what cable what table to look at so I'm going to do that through the list controller uh so this is kind of our second big uh preset enabled preset and controller component group uh that we have added in Washington after form in Tokyo uh and one of the things we've added is a little bit easier way to know that hey this component is being controlled by a controller uh it's not completely configured here so if I go into list controller it's going to actually show me that data resource and from there I can come in and do some of the configuration uh no was it it's notes to do note yeah all right and then let's add some columns I don't think we have a default view yet so I think we want probably want CIS ID no we're g to get that anyway oh we'll add it title text and then let's see oh we don't have any data one thing I almost missed is that uh yeah I was about to go in and create data but I didn't know your table name uh I think I can I do that through here yes I think if you go to preview it'll take you directly there I want to add the records here oh here it is ADD record oh wow so helpful if we read Let's uh get rid of these columns and and add title and text it's my creativity really shining here oh I bet I can't add this is an HTML field so we'll just go not two three seems good all right let's save my uib page and no data still all right so I have actual data I was noticing something weird about the data resources refreshing uh let's do a hard refresh and see if that helps that's cool oh there we go oh that's right I don't actually want the CIS ID in the list there we go so I have my list and and I have this list panel viewport so I do I need to add a page collection if only we knew how that worked um I don't know let's let's just preview the page and see what happens if there's anything that gets wired up when I click on one of these we'll click on you and I Noy live uh all right I don't have a record page and that seems to be probably what it is uh trying to do um wow this is nice that all of these things are already set up for me although sell edit requested column reordered message action clicked I don't think that's it cell what's the cell person oh I think I think you have the ability to show an avatar in one of the cells cell link clicked this is what we want well that's not helpful for us uh so the event mapping you can't be edited or deleted because it comes with the preset you applied so that means that it is probably linked to my controller so let's look at my controller and okay so it's I think it's linked to this reference link clicked uh which is trying to route to a record page that doesn't exist um so I could pretty easily I guess for now uh we can just add a record page am I saved so just to kind of show how this can work uh I guess we need to go back to the experience view let's add a record page we'll go standard record I'm going to call it let's just call it SRP uh these are the things that it comes with that looks good to me all right so that exists so if I switch back to home default and uh let's go ahead and just open it in a new tab so we can see what the URL is doing and click on this it still doesn't work so that's good um so let's figure out what this is actually doing because it doesn't look like uh it's doing what we want or what I described so uh let's let's do some troubleshooting my favorite troubleshooting tool is uh going to be uh logging and we're just going to say um console. log event payload wow yeah and then just because there's a lot of things getting logged I sometimes like to make sure that this is actually getting fired and so I put my name in it um because that's the way that I am uh so let's hit save and we'll go back and test and then probably going to need to zoom way in on my develop oh no it auto zoomed for me okay so let's click on something interesting I think the way that it has configured itself is not right this presentational list so I will be speaking with the list team um selected rows all right how much time do we have so let's uh I'm going to yeah I'm not I'm actually not sure which event is getting fired uh because this component like all of these events are presets and so I'm not quite sure oh you know what I never added added the let's let's make sure I never actually added the logging that's a check box this is not the right one oh well let's go I think sell link clicked is probably the right one but let's add logging and try this again real quick so I've been in the background um I changed the max length of the HTML field I um fixed our form view too so it actually has fields in it yeah it's I it sounds like the way that the uh presentational list is set up is not doesn't actually work with the routing um so I'm I'm going to have to go back and see uh what the how's that how that's supposed to work so for now uh we are going let's go back to the normal idea we're gonna go back to what we were going to do originally so let's pretend that we didn't do this one also we'll cut it in post all right so let's add our this just makes it more challenging um so we'll go back and add simple list [Music] except it's called list simple all right and then let's give it the right table which was notes notes note and and then I don't think we need to see the text I think let's just show the title and then let's see how much of this we can hide uh last refreshed no this isn't bad let's keep that and then on the right the right for now let's just show we want an input in an HTML field all I still have this list controller I'm going to get rid of that as well all right so we need some client State parameters I want one that's going to hold the uh note ID we're going to add one to hold the current note title we're going to add one to hold the note text and then when I click on each of these let's go ahead and update those [Music] so let's go reference link clicked I think I I don't know that I have access to all of those actually um so this is also a good one uh let's uh figure out when I click one of these reference links uh what is actually in the payload of my event so I'm going to hit save I'm going to go back here it's too big all right so we get the table title do we get the title no all right so really just get the CID so we're going to have to look up well what's in Prototype yeah we're going to have to look up um this record so let's add a lookup record data resource which I don't have to search for which makes me really happy um and something else that changed in Washington is the name of it so it's no longer look up uh record and Records it's not look up a single record and I'm going to change this to be lookup note uh because I may be looking up multiple records on this page so we'll look at the notes table and then we are going to use the note ID and then I also only want to call it when it is invoked and then I want I already have the CIS ID so I really just need the title field and the text field got it um I don't think I want anything else that looks right and [Music] then oh I want to do the client State parameters guess we're going to data types I can't bind these to data resource huh um can't we set client State parameter from it being fired in the event yes let me let my let my brain work for a minute um I've done this before I'm having trouble remembering exactly what I what I did there um yeah let's let's try this so let's update this client State parameter I don't actually know that this is going to work but let's try it so I'm going to go data resource I don't have any data yet do I need to give it a test value yeah let's try saving that's so weird uh well we can [Music] do what was the let's see if adding an actual value will help our test and then wait it did give us one by default though it it tried to get one yeah I my fallback is going to be using a script but um I was going to try to do it without using a script first can't it may not you may not be able to use the value of the data was already there the data resource and its own uh yeah it's like not able to use itself which makes sense I think I've been trying to remember how I normally do this and I think it is with a script so let's uh let's go on success well I guess I have to write a script first go away we should have um I'll work with Earl to set this up but we should have some form of like confetti coming in from the sides anytime we have to hard script something time to to script oh thanks I have two of these at the same time huh note title and note text uh I don't think it matters for this one let's go display value I hate autoc completing now that uh I have visual data binding I want to use visual data binding in my client scripts uh text Pro tip you can use the update client State parameter event handler and switch to the script view if you don't want to create a bunch of client scripts nice we should have done that all right so on reference link clicked we're going to update my note ID and the value is going to be event payload CIS ID why does it have a this is interesting could it be because it's not currently populated I I have an idea of why this is um so we may for now have to say uh it's just payload dosis ID uh can I not switch to code why can't I switch to code here what if I do this oh this is janky um all right payload do CIS ID I don't know why it wouldn't let me grab that from event. payload but something uh well it wouldn't let you yeah it has that little uh icon it won't let me so we'll and up oh it's gone and now it's gone so we'll do this through a script as well I I guess this annoys time to script um all right if there's anybody from the uib team watching we should look at that uh set note ID no Brad you can't do double quotes now when you did single quotes earlier please I think there are places where it gets mad at you if you don't use double quotes and I never remember where I'm generally a single quotes person though uh what are we doing it's in the payload that's why I can't use API in the chat are you a type uh do you put your parenthesis on on the no your uh curly brackets on the same line as your if statements or do you put them on the line below oh I'm a say I'm a same line like this me too which is the correct answer I just want to see we have chat all right so let's go we're gonna note ID did I call it note ID wow that's that's fun and then we're going to refresh that data resource good job everybody you passed the test you can continue watching the show oh you know what I think this is what I'm doing uh now that we're away from it I I don't uh I think this is going to why yeah data resource up note results title value apply all right here we go so I believe we have successfully connected our list to a client State parameter that's feeding a data resource that is then feeding uh our input here um so I guess let's preview without saving because sometimes I just like to use that feature because it's there so if I hit this we should get that all right okay so this works we succeeded everybody now we need the confetti hang on I got this oh all right confetti is coming there we go [Laughter] confetti let's do go ahead well number one it seems like every time I do that my camera dies number two Earl I don't know what you're talking about dud task which one was task number two well I used to have it named a better intern but I remember not many people might know that inside jokes so I changed it to better producer and now he's [Music] upset ah this one does oh it's because I didn't save it maybe we should do that it's the problem with all the preview and the undo redo is I don't save as often now and I have a feeling that's going to go poorly for me at some point I do I'm I'm getting kind of annoyed by all active tasks showing up so I'm I'm going to try to get rid of that if I can hi title yeah what about the refresh thing hide option to refresh is the last one I want the option to refresh I just don't want to see it here and now I'm annoyed that doesn't come down by the title but I'll live with it I guess what we can do is this uh where's the title title it was right there we can kill this stylized text I mean get rid of it wow so violent I apologize for being so violent today I don't know what's going on uh so now I get to try to remember which component we're going to use for HTML because I don't think it's called HTML uh type in text it's weird I I'm it's not rich text it says HTML I think all right let's try I think Rich Text will only display you text it doesn't give you the option to edit but that may be wrong oh yeah I think there's one that lets you actually edit the HTML as well it may be I know let's add a few of them and see what what looks good what about uh script so stylized text is going to let us display it but what we want is to be able to edit it like it's um like it's a live note that we're editing like an input field code can I tell the code Editor to be HTML oh I can all right let's see if this works and then initial content B that yes that is what I was looking for and never content would be it now what did we put in value or display value I don't that oh that makes sense I think value guess it doesn't matter oh awesome render this for us come on I guess I guess this is fine I think there's one that's actually I think there's one that it does both um if if y'all if y'all are following I want it I want it to look good until I toggle oh you want it to be whsy wig yes that's like a KB article I this is possible and I can never remember what it is because it's in a weird uh what is the component maybe somebody can uh text area I don't think it's I think that's just an actual text area element all right I'm only gonna I'm only going to scroll back up we're not going to keep looking yeah Rich Tex didn't have a Toler I could also be completely wrong and this doesn't exist and I dreamed it one day but I'm pretty sure I think the email composer does it so it there's like something in the email composer I'd have to go look at it w w all right so let's get rid of Rich text I will delete it and then let's see if this works and so rich text does render the HTML but we want to be able to edit it Like It's A whsy Wig um like we're just editing a Word document next to us I guess I could toggle we could build our own toggle that seems like a lot of work but right like I could have both text and the now code editor and have a button that toggles them that like writes to client State parameters and things maybe that's for next week can I make you not word WAP I don't like that or I do want it to word r i don't like this either all right all right well that's something hey we accomplished something we our original goal was to make a page that looks like the application manager and that's true it looks really good that works yeah probably the most valuable thing you get from this is the ability to go into the macr ponent table and kind of grab the structure of a page uh if there is a page that you like and put it on another one um so we did get that here yeah I had no idea you could even do that it it makes making new pages a lot easier in the future and I'm not even just saying that to have like an educational moment in this episode I'm like actually legit about it um but I think we're at a great stopping point I want some padding to [Laughter] exist here we are let's see um people in the chat how important is for something to look good before it works good because I have a very strong opinion on it but let's see what people in the chat think real quick would you prefer something looks good or it works well I mean jine you and I obviously know the answer Earl that's too logical get out of here David's got it it's really funny because if you look at an episode where Bradley's without this um application macr proponent copying of the look it all be like super sparten like function overlooks and then I'm over here in my episode's like okay first we gotta add the CSS oh we don't have any data binding yet but we need CSS and we need this and where's the margin no this is what I want to do fake it till you make it with the functionality I agree we know who the ux uh designers are in the chat I'm kind of mad I can't it won't let me move the input [Music] component ohd let move the container there we go I can move the container inside the input that's great I'm G have to test this on a different release and see if it's a Washington thing anyway I think we're done awesome everybody so thank you so much for joining us on another fun adventure on you and I Builder live hash yel um it is now our official hashtag yiel um I heard you say that for the first time today and did a double take i' I've typed it I just hadn't actually heard yiel out loud and I still don't know what I feel about too bad it's now a thing so hash yeel everybody on LinkedIn on socials let's make it a thing um be sure to tune back in our next episode is something I should have looked up before I started speaking but remember we are here every second and fourth second and fourth Thursday of the month and actually we have a awesome set of special guests coming in for the second um episode in March is it yeah so we have an episode on the 14th and then another one on the 28th and the 28th we're going to look at um the new Dev tools uh all the new stuff so we're going to have aop and team they were on back in August to introduce the next experience Dev tools we've added you know more functionality to it for the Washington time frame so they're going to come on and kind of talk to us about that and help us play around with it so on the first episode of next month we're going to have a part two to our un and I to uib notely app and then we're going to have our next experience development tools part two um on the 28th and remember as always we also have a next experience Academy on the third Wednesday of the month uh for next month we're going to have it on the 20th of March we're going to be going over what's new in Washington now you guys have had a preview of this since we've gone over it in this episode but we're going to have a more formal kind of PowerPoint driven presentation with a demo for that presentation so if you want to send that over to your co-workers who like presentations you know sit in a cubicle all day I think they may enjoy it um I lost my train of thought Brad do we have any last words before we sign off I don't think so I think we're good we've uh taken down some of the ideas that you all had uh for future episodes and yeah so we've got March planned but we've got some openings after that and uh yeah thanks for joining everybody thank you all so much for joining have a good one [Music] bye-bye [Music] oh [Music] [Music]