good evening and welcome to phil goes deep and tonight's episode is quebec xp quib experience uh what i learned this week episode one so um i'm going to be again looking at ui builder on quebec um and basically running through some of my lessons learned from this week um pointing you hopefully in the direction and i'm very pleased to say that i've got a very special guest with us uh joined by none other than the man like brad tilton so if before i bring him in i'm just going to apologize for any technical issues um i think as well i'm seeing zoom now as a video as an audio source so i try and avoid that duplication of audio i hope it sounds alright let me just check on youtube um we've are we live yes right uh brad let me cut you in hey brad you should be on the screen all right hello how's it going thanks for coming on thanks for bearing with me yeah thanks for having me so yeah apologies to you and everyone that might be watching and see all the technical faults that uh that are about to uh go ahead how long have you got tonight brad because um i normally go for two three sometimes three and a half hours um and i don't want to keep you that long i think i've got about an hour so yeah until it's three my time to about four my time we'll keep it for an hour if you can watch the clock and make sure uh i don't get too carried away because that's that seems to be my problem and and um i don't know if anyone ever watches them back but sometimes some of these streams go on for like i say uh quite late and in the uk it's just gone nine o'clock so um we don't want to keep everyone everyone going on so tonight's episode is about ui builder and one of my main lessons learned hold on a second apologies yeah audio sounds all right so that's good um yeah uh my lessons learned firstly the one thing that i've learned that i am uh recommending to everybody is to um read the manual there are a lot of a lot of documents out there you've written three four blogs now i think yeah four or five actually i think today okay we did another one today so i think that was five yeah i've not seen today's one okay so you're not the only one that's posted one today as well i've seen that ashley ashleysn.com she's just posted something else um yeah hers was awesome today i've not read any of it so i don't know what's in your new blog let's tell let's talk about that briefly oh that's a good question what did i what did i write about mine is uh i think i'm using events client state parameters and client scripts uh all all working together uh to do something okay excellent because that wrote it earlier in the week and then moved on so i can't remember exactly well that's the bit i'm struggling with actually so that's great that you're here so um i'm not sure when i switch the screen whether that screws anything up i'm just looking at the youtube description i added so i've added a link to brad's blogs uh is anyone else going to be contributing to them or is it just you that's responsible for the ui builder stuff now i think we'll have more uh we'll have some more people writing about them uh i don't know you know we'll probably have andrew and chuck uh writing something at some point and then hopefully get some some more expert people uh in to write about it as well more expert than any of the dev advocates so hopefully we get a some of the engineers who actually built it to contribute something that'll be excellent so i'll stop calling them brad's blogs and call them the ui builder blogs on the developer site servicenow docs there is a whole raft of documentation on there um and then i've also linked to a few other blogs that i found from the community so ashley sn about g-modal last week and then something somebody posted somewhere about servicenow ninja um that's quite a nice guided um like step through i'm not sure if there's additional detail so i'm looking for trying to get deeper and go underneath and work out what's going on behind the scenes so that's what i seemed it's like it's great to follow the great to follow it and go right i've built something but trying to understand what's happening behind it that's the bit that i feel like i'm struggling with so my main point today if i say what we're trying to achieve is to just basically build a new page using one of the templates and connecting the parameters and i think for me that's that's like i felt like a massive win the other day when i did that but then when i'm looking at them i'm looking at state client states client script stuff and i really don't know what's going on there so maybe it's prime time to to have you on the show brad so uh let's try and switch over i need to share my zoom screen uh let's switch this back over um one moment let's just try give the audience a good experience it's all about experience in 2021 right let me share my screen on zoom and hide i've now got myself in there i thought i could hide myself there we go excellent and that's active speaker can you just speak yeah uh let's uh let's do it sweet okay and i think i've got you on the screen so um let's just check in on live chat um yeah we've got a few viewers not as many as live code and happier but hopefully if we keep it to the hour people want to watch this back and hopefully we can uh we can achieve something in that hour so i'm just going to switch you over you can see my screen right on zoom i can see it on zoom yeah so everyone on youtube should see my browser i should see me in the bottom of the screen and brad in the top of the screen so i think we're doing okay and hopefully they can hear us so um i haven't had a sound check from from anybody oh james foote's on the line yes james how you doing when are we getting a survey component for uib and james can you just let us know you can hear everything see everything because this is a first time for for me and i just want to check some audience participation and we'll try and answer that question for you as well so i don't have an answer to that question i've i have uh no idea i don't i don't have a lot of road map uh uib info right now uh yeah i've got a um what i'm thinking here thanks james for checking on the sound um what i'm thinking here is the asses when you say survey component you mean the take assessment functionality um you mean like from servicenow grc control attestation um the the survey widget yeah uh that is a custom ui page with loads of logic in there i assume that the pace stuff's going with ui builder that that's where the iframe component is going to come into it and that's what i was playing with last week i think the the ability to actually open a survey page as a component in an iframe that's that's what i'm seeing is kind of round one i mean you if you haven't seen it on a roadmap that's what i'm thinking but then the advanced risk assessment stuff is now in its own page so um that isn't using the survey widget so i'm i'm kind of looking at it going where where's this going to go it's kind of a fork in the road but survey and everything else is is still so cool um but yeah i try not to get distracted either by um deep questions but um james brad doesn't know the answer and i'm guessing how's that so yeah it'll be uh you know it'll be a future release when you know i think one of the one of the bus builds a portal that needs the survey component uh we'll have a survey component but i don't know when that'll be okay i can't say fairer than that so on on scope uh brad so this is one thing that worries me i'm always working in a lot of scopes with grc if i build something in ui builder okay so you can see here this is in a an application custom application scope i built myself pgd1 if i am in the platform in like grc profiles what's going to happen here is does if i go into this because you've got scope at the top right if i just move you a little bit yeah okay so it tells me i mean so i if i switch scope here it's switching scope in my whole session i i believe that is how it should work it should switch your whole session i don't think you can be in multiple scopes okay so you if you switch like if you go back over and refresh i bet it has switched you in the platform yeah let's check that okay i'll just get very nervous with skypes okay excellent well this is a custom map so i don't need to worry too much about update sets right now normally anyone on the instant so this is actually um what is brad in the white place yeah uh this is what i was building actually the other day last week so if i go to controls page and open it and this is i i kept having to go back to like start from scratch and create a new page and start from scratch and then i felt like i was missing out on a load of stuff so i've got control here if i can see that one's in review that suggests it will have an attestation so i open that control there's a bit of a delay there i've got the attestation here if i click this then it's taking me to a ui frame which is embedded that survey component so it's not the best look i feel like it's there's some dependencies in that ui page that aren't pulling through in here but that that's what i've built i think that's what james is referring to but let's um let's create a new page um the other day i was talking to you brad i was trying to create one for update sets for handling update sets and oh yeah in that case it wasn't a task so some of the templates are dependent on tasks yeah and i would say at this point most of the templates are are there how i say this a lot of them are there like specifically for building a workspace against a table extended from tasks so like the csm configurable workspace is a thing they released with quebec and you know a lot of the templates are related to that workspace so i would expect and i don't know for sure i would expect to see more page templates as we uh you know release more uh workspaces and portals uh in in the future is there anything you can share on that for it for anyone is there any details that you've got that are publicly available as far as what's coming in the future like when when we might see more templates um when other applications might be due to release stuff using the new ui builder experience i i don't have any details on that at the moment and i really i i actually don't uh don't know we're kind of in a weird place where i've been cramming uh for ui builder quebec stuff and we're a little early for me to see demos of what's coming in rome so uh we're probably a month away from me knowing knowing more about those kinds of things no problem i thought i'd ask i know i know i was putting you on the spot there so um i'll tell you what i'm going to do with a classic task scenario in grc you know i tend to stick to what i know i don't have any custom apps in here and well in this dev instance of any use and i haven't thought about a use case the first thing that comes to mind is um the issues right issues are tasks in grc so i'm creating a new page called issues i'm going to select a page template here so for me i would be drawn to list or simple list but one of the things i've learned this week for list is that there's a bit more um configuration required and i remembered it from agent workspace as well and i could only solve it by going into the back end so maybe there's there's a front end like ui builder view for this are you aware or is it i am not sure i haven't messed with the list page template too much um okay i mean we could we could try it out and see what's there what's your recommendation here i know you said and i love the expression um in a vacuum right um you know that there's not much difference right between these these two however i know if i click this i felt like i couldn't then do anything i couldn't actually set it up so is it possible for me to set up my own custom page and keep it like keep it out of the box but still pushing my own parameters using this default upgrade safe option yeah so so the big difference is that if you reference a page i believe on the back end you're it's not actually creating you a page that's just pointing you to another page uh and and the way that you would um the way that you'd work with that is you create page parameters to input into that page and you know that would be how you work with it but you can't customize it at all so you wouldn't be able to add anything to the page you can't move anything around uh so you know basically if you need to use a page as is that's a pretty good option if you think you're gonna have to you know customize it at all then you need to use the copy the contents of the template which just creates you a copy and then you're good to go from there i'm going to go with this top one because this is the one i've struggled with the most and you're here to support me so let's see because this is the bit that i i got a bit stuck on it felt like so at this point in time created the page required parameters i don't know what i've required because i haven't looked at the page so i've got to kind of i can close this and come back to it it's fine right i can go from here and then in this section next to pages this section i can edit required parameters so it's not difficult if i go to data sources and shout to gc from last week who was keeping me on track as well but down here if i click this i kind of it was showing me and i felt like it was showing me an error last time when i tried to do this it might have been it wasn't a task page or was it this one something went wrong please check your input properties so yeah so it's telling you there that it doesn't have that context dot app that's not a i think that lists navigation information is the the one that you want okay that other data resource um yeah so that one it's referencing two properties tiny id and list id and so those would be page properties what what it's expecting there the list id i'm not quite sure so i think there are some list stuff for um for ui builder in the background uh maybe it's not related list option i might have to go into um the ui just keep an eye on the chat as well because uh sometimes somebody knows stuff already and they've already done the digging um [Music] i can't remember i don't have i told you this is a different instance or a different profile so i can't log in oh yeah that's fine i'll tell you what this is uh how i find stuff out on the instance anyway if you don't know something and it doesn't tell you in the docs just start digging around so i'm going to just look for something beginning with list or something containing list in the tables and i can kind of remember what it looked like but not confident enough that workspace list okay i think workspace list here sys aw list i want to get to the list show list here i think yeah look at this assigned to me and these belong to workspaces so risk accepted i don't even know what that is let me create a new list just because then it's in my scope and i'll give it a list name and just call it pgd uh category into create category i'm gonna create my own category as well and i always think it's worth doing this if you're doing it in flow designer as well if you don't have the category create it there and then and then you can keep using it don't leave stuff blank you can rearrange it afterwards i mean you can't leave this category blank anyway it's mandatory um so my table is going to be issue right sngrc issue and it's got default columns in there order i can't see behind brad yeah order 100 oops order 100 i always use 100 200. um me too you give yourself a lot more like wiggle room later on yeah maybe 10 20 if you if you know you can't be bothered to type that extra zero but just 100 and fix it fix it up later but don't do one two three you're gonna be boxed in that's my kind of uh approach to it anyway so i'm creating a workspace list i think then that that workspace list should be my id so if i can copy that sys id and servos has just asked what is the dynamic routing list and when should we use it so it's a good question let's put a required parameter in here and it needs to be called so everything you create as a required parameter or any parameters context.props dots i need list id um i'm just going to add that sorry it already added so if i save this and if i put my list id there it feels wrong to be putting that in the required parameter but i should have a list now so let me open this and see if that is the same list so this is what i found the other day i had to keep going back into the platform to deal with the list side of things so the other thing that you can look at is uh that data resource i believe should preview should be able to preview something for you if you like click out of it and click into it again if it's getting data oh okay because i've changed my parameter yeah well maybe not what less navigation information okay so i've passed in i have passed in a list id there maybe i don't have i wish i could access my other instance um i just don't have anything in my history right now um i've got an attribute so i've added a list list name category so it might be this one let's try passing this id in there is there anywhere particular that errors are locked or does everything just go on to the main log for for uib if you start breaking stuff is it i'm not sure where not sure what this would log because it's just it's probably just failing because it's not getting the props both props passed to it maybe trying to see if i can find that data resource record i mean this is the thing when we start getting templates coming out of the box that we can look at and see oh that's how you're using it then we've got something to to kind of go by but right now we're we're i think quite a few people are shooting in the dark but all the docs are really helping just i think we've got to figure it out and then then we'll find out the proper way of doing it when it comes out of the box and we'll learn loads along the way so that's that's my hope um i just no idea what tiny url id would be either um yeah i'm not sure what that is either um i'm gonna just try and check because i did do something on on an instance the other day and now i can't get into it if i can just get the url no i'm guessing and i know there's one one or two characters out of it okay that's a lesson learned next time right if you've done something built something um remember what instance it was on so this list stuff i know it's something to do with that um but let's move forward so what i'll do i'll create a new page and this is what i've been doing i say okay well that didn't quite work um i'll try something else so the non-simple list there's the list page um why is that i'm saying i want to save okay cancel let me save at the top it's saved okay there we go all right create page i'm just going to discard changes i haven't really done anything and i'll call this issues2 very creative i'll start this from simple list and i'm going to keep it at the top because this one and maybe that's what i did the other day i didn't keep it upgrade safe so that meant i could then go in and pass a sys id in see what he was expecting i think that's how i figured out because when you take those props away when it's editable you take those props away and you take the at context whole thing away you can then drop down it's actually a reference field and you can select real records right yeah so a lot of most of those uh i guess most of those component properties are you know you can either hard code something uh whether it's a sys id or a table name or something or you can you know bind that property to either you know a page a page parameter or a client state parameter or something from your data resource so it's all you know pretty dynamic okay some of this stuff you say brad makes it sound very easy and a lot of it is just like you say it and i watch watching you on live coding happy hour and i'm like okay i'm i'm following or watching your videos i'm not i'm following but it's not quite bedding into me yet i'm still getting my head around all the different parts so i think i'm going to need to like hear it a few times it's going to start making sense but i've got a very simple page here a simple list yeah for for this one i would click into where it says list one uh under your content okay right that's my component and then yeah look at the config so you have you it's looking for list title table and query and so those hopefully are a little easier to we can figure that stuff out so and and there's okay this state and state is what you've just written about or just published today if you go down to the bottom left that middle icon uh all the way on the on the blue bar on the left this one yeah what's this bar called that somewhere that is i don't know what the left blue left bar i don't know um but that's the so these are your client state parameters here so these are basically you know this is if you think of your ui builder page like a big component this is you know how you're managing state so this is how you can share data between your different components is through the client state parameters so kind of like a workflow scratch pad where you're just you know writing a value and you can write to the client state from basically any event or event handler so yeah word wrap i guess this is what uh not even i'm not sure what word wrap on the simple list component does actually i'm guessing if you've got a description field it wraps it rather than ellipsis and truncate but let me just play that back the client state paragraph oh it is a boolean yeah oh sorry go ahead sorry the client state parameters is the equivalent effectively a scratch pad in the client within the page for the whole page the whole page yeah so you can you can write to that client state parameter and access it from any component or event or client script on the page excellent and you know there's so much to click in ui builder i've never clicked that that's what it is i've just i don't think i've got that far either so i've not read your new blog i'll share that in the uh description or comments afterwards and make sure in fact it should be in the link if you click the description now to the audience uh the what's currently called brad's blogs will be called ui builder blogs when i refer to it that's just looking for the tag ui builder so actually it should be in there already if somebody clicks that now i've just not read the latest one so we've got going back to this we've got two props three props that we care about it feels to me like list title doesn't belong in the url when i was doing this the other day it doesn't feel like i want to keep that url longer because it's it's quite a lot already if i say so edit required parameters so i've got to keep moving brad around the screen because there's so much to click yeah i think the uh so for that one you know that's just the title that displays on the list and because this is a referenced page that's the only way you can pass data into this page is through the url parameters so it's probably not a required parameter so maybe make that one optional the title okay let's make it my guess is that it's and it has to match and it has to be in camel case right yes like snake case wouldn't work because i know in flow designer it doesn't let you that's okay so yeah it'll give you yeah excellent so we've got our parameters on the page it's still read only uh page it's completely out of the box and if i upgrade to rome in a few months time this will get upgraded with it and i'll get all the benefits of the new page yeah it's completely completely safe if it's yeah if it's touched in rome yeah it'll the page will change with you excellent so table i've called it issues and this is where i thought of something like the form page in portal or some of the list pages in portal you actually pass in the table there you it's effectively the the same thing where you pass in the table you pass an assist id and therefore you can use that form page for anything so me calling this page issues should really just be called list because it's only when i pass issue in here that it's actually an issue i do get a weird error here but it still works test values are restricted to alphanumeric yeah was there a type on the uh on the oh it looks like it worked it works but it doesn't know that it works hold on edit required parameters oh i better save save often right brad that's right even if you uh yeah it looks good i can't save the same spot out okay well yeah you can't change the page so no this is my page i called it issues too okay yeah but it's still uh isn't this still um you're letting servicenow manage it yes yep read only page template yeah so you yeah yeah so you can only change the parameters on it you can't change anything else okay so this message i would just discard changes let's see if this uh see if this works there we go okay so this title is titled value query you said is there a data type it's just a name no i guess not uh the client state parameter has a data type okay and anything going in the url it has to be a string right even if it's not a string yeah that's right it might be an encoded uri but it doesn't need to be that in in ui builder okay let's see if this works if i click open which i can't click because i why can't i click it i've gotta pass those in did that grc issue so really query should be optional because yeah yeah and i still can't click open what does this do then okay so we've set our parameters up it's called issues two very creative yeah why can't you open that i've done something wrong if i change scope or something created it in pg-1 let me just make sure no let me change page how's that let me switch and switch back discard changes okay this is issues and so i can't click open there either we'll save because it's read only but it says the page template it's kind of like you said um i think that it's not creating a page it's creating like a pointer to the page and you can't open that in the url if you want issues to choose to and then let's put the things in maybe it's an error there active equals true oh look at that is it going to work it looks better but i feel like i should make the query optional well will that change the format uh it will change the format but it should be fine so if i get rid of it as optional as required see it saves there it saves required parameters there interesting what's it called query and it's giving you the yeah it doesn't matter about the order here for yeah so required params the order matters optional params the order doesn't matter so if i go in here now if i hit that i assume it will error yeah but if i go query forward slash active equals true so i think you need params before query okay so i think you need to tell it hey this is when my optional params are starting perfect and then you can list those that should work looking it's looking good when it starts responding a bit slower than just a straight red error message when you get a loading feels good yeah a loading so list title was my other parameter so let's put this uh um fill goes deep see what it does about the spaces there we go i mean that's how to use um an out of the box page template keeping it read only but still passing some parameters in that feels like a win i'm i'm only on the water uh tonight but i'll have a i'll have a sip of water to celebrate that now if i click this nothing's gonna happen so we're not finished yet i need to hook in some kind of event so i need to i can't see it here unless i pass in sn grc issue that should give me some stuff to work within the page or at least see me yes okay then i can click things just looks a bit nicer um with brad again this is a good space to to have you haven't got that much content on my page so put brad down here um the events right if i yeah let's see if there's any events row clicked can you add an event handler no so is that locked down in the page so it seems problematic yeah you have to be able to make it go somewhere um there has to be a solution to this so on the non-simple list there's there's a client script and i didn't know where client scripts were so let's just go back let's we'll celebrate this as a win um and go back and create i'm going to discard changes because i've saved my parameters i haven't touched the page so there's nothing to save so we're going to be on issues 3 right now and i'm going to use the list but i'm going to not do it upgrade safe because that allows me to override some of those parameters but i think if you did this we'll come back to you parameters i don't know what i need yet so for example this one in the data resources i can take this out right and if i take that out then it gives me oh yeah it'll does it auto complete or is it a string i thought i thought it did also complete unless i just maybe don't have any maybe i've been looking in the wrong place for that okay but what i was going to show you when you get your list which is here a little bit more content there you're just going to keep moving around the page brad so people have to keep up on this list in events so if this was read only there's a client script here so if i write if i didn't modify it i could hang my event from there and that's going to be down here in client scripts i just didn't know where to look is that yeah but which one list model i don't know list user preference click on the little uh the little horizontal lines with the dots on them on the client scripts bring it up and see if it tells you which one it's uh on your event handler uh this one right yeah they're like little configure configure it's gone it's going um so that is there's there's no client script yeah it's kind of it's there but like it's not well here's there's a blank space in your page scripts try try clicking on that blank space on the left um oh that one the one yeah yeah there it is no title give it a name so so hold on if i just call that feel right now right and then look yeah look there it is oh there it goes yeah so yeah it's a couple of we'll shake these um i don't want to i don't want to break it by giving it a name but it looks like it's just an anonymous function is it no that's called function yeah so all of these client scripts are um you know you get these api helpers event and imports objects so what this one is doing um so it looks like it's building the route and then it is emitting its own event at the end there now item selected sounds like something to do with navigation yeah okay and then did we make a payload yeah so it uh it created a so most of the script is is creating a payload that we're passing with that nav item selected event okay and everything that's moving around in ui builder is is effectively some sort of payload right it's using the term payload it's effectively some sort of object that's got yeah so every event yeah every event has a name and and some sort of payload um so that could be like really simple it could be really complex but every every event you know any anything you're doing is going to trigger some sort of event and then your event has some sort of payload and then you have these event handlers that do something based on your event and so that could be writing to like a client state or it could be you know routing you somewhere okay and actually anna uh in the chat has asked with client scripts is that how we could update components based on changes example being a data set that updates with the filters that are selected yeah so so the client scripts uh themselves they you know i think they really exist to um so from a client script you're either um you're either you know emitting an event you're writing to the client state uh maybe or you are um calling a data resource but but you can do all of those things uh without writing a script usually the reason you're writing a script is because you're you're like building some sort of payload or you need to put you know different values together and write that to a client state parameter uh so it's really you know you're you're doing similar things uh you know as you might do from an event handler right so my event handler i can you know call a client script uh right to the client state um do all sorts of things i just i just can't do anything to the data beforehand when i write to it so the client script is really a way to let you you know massage your data a little bit before you send it somewhere uh so between between components on the page for example or combining multiple components and same right past those two things to another component for example yeah in the so so this week's vlog keep coming back to it i remember what i wrote it about now um but there's a video in it where i i think in the video i've got a simple list and then i have a button that says show me my open to do's and a button that says show me my completed to do's and so clicking on a button changes my client state parameter that's my to-do filter and so clicking those buttons basic basically toggles the value of that and then i have on my list i have the filter on my list bound to that client state parameter um and so i'm i actually am running a client script because um uh because it lets me kind of build my filter a little easier from the client script so that that blog should help kind of uh show you how how you might use a client script and how they all work together it's like a two-line uh client script so it's pretty straightforward um yeah so in terms of you know the uh what i learned this week for myself um and when i say that i mean in the last seven days not since monday i've not learned that much since monday but over the weekend um and from last tuesday uh i one of my first learnings you see in the description is to read the manual right so brad i don't know if it's been frustrating for you but you've been putting out all this content telling people this is how it works and then i'm asking you how does this work you know i'm pretty sure i've written that no i mean yeah part of the reason we do that is so that when when we get a question i mean that's the reason like most of us do things like this or blogs or you know when you get the same question you know more than once it's like all right it's time for me to write this down somewhere publicly so then i can reference it and it's good for your own reference as well right you write something down yeah you you'll refer back to them yourself because you can't remember definitely yeah so yeah i would i'd recommend it to everybody basically like get in there try and use it figure it out struggle because it's going to feel so different if you've been working with servicenow for any length of time but the thing for me that's not different is what's going on underneath with servicenow right you've still got your tables you've still got your relationships you've still got your workflows everything that we've built so far all still makes sense and now ui builder is the thing that the customers have been really waiting for um and we've got a bit of we've got a bit of work to do to get over the hump of the the learning curve but literally i'm this is priority number one for me just because i i want to see it i want to see it working i want to make it happen and when it comes out of the box when those templates start to trickle down from from the mother ship then um i i think we'll all be like like many steps ahead uh but yeah definitely reading reading the manual refer go back to the beginning as well don't just read the latest one read the first one and once you've struggled and then go back to the docs as well i found it super useful to to kind of go oh right that's what that means now i understand that bit and like tonight i learned um there's a client state bit so when i was looking at these components before i was like what's client state over here in the config um yeah i was like what i don't know what elements list is if but there is some stuff that yeah here's state and i didn't know this state was actually a little setting down in the the left hand menu so i just wondering from uh from anna she said is that how we could update components based on changes so something like a list components that's already built in though right it's in the component itself i'm just trying to hide from zoom uh zoom's trying to [Music] take up i'll put you up there okay from up here so in this component so this whole thing is a component and i've got a filter in it here so this all of this is set within the filter in the sorry within the component the components passing itself events around right but when you want to access or pass things into that component that from elsewhere on the page that's when the client script is going to be like give us that extra power yeah so so you don't necessarily have to use a client script uh but that's when the client script does let you you know build build a payload or something like that right like every component has a set of properties so things you can pass into it and then it has events so ways that it can then interact with the rest of the page once you do something and it may be doing something like clicking or it may be you know like data resources have events as well like when they're when they've started loading or when they've finished loading they fire events and you can do things based on that so you know definitely check out the events tab on any of the components or data resources you're using because a lot of them have like a whole lot of events i think the list one has a pretty good amount yeah are these a lot of those things that you're clicking on uh sorry go ahead no sorry i interrupted you um i just got excited so these these events here are defined by the component itself so a different component will have different events right okay okay well it's all starting to make sense you know i'm still trying to get over my failing on the hacktoberfest where we had to get i never got a t-shirt basically because you had to do four four commits i think we got our cli by the end of the end of the friday or something we had our command line set up and like right now now what and yeah we tried to take on a lot of that weekend um so that now that's really good to know upside down andrew's just tuned in as well um i can't i can't twist brad around for for him but um yeah thanks for logging on and anna says the example i've been trying to work through is with the tab filter component and and the data scene but um yeah still stumbling just keep stumbling anna basically sorry brad no i i am planning on writing about uh how to use that tab component but i think um i think there's a new did we talk about there's a new youtube video series that somebody released it's got like 10 videos in it uh and i think it's all ui builder and i think one of them i i haven't been able to watch them all yet but one of them is his tabs i think it may be the same person that did service now ninja but yes i'm having trouble remembering exactly what it is i saw that on linkedin uh just before i was kind of frantically trying to have dinner get the kids to bed post on linkedin that brad was going to be on um set up the technical stuff and i saw this post and to be honest it passed me by but yeah if i can get hold of that link it's not showing in my feed right now i will share that as well and i think we've got to try and just bring all together the uh all the different content that's going on at the moment um yes service now it'll get there i mean yeah when service portal came out it was kind of similar you know where we were we were kind of starving for uh service portal uh enablement and materials and it got there eventually it got there um so uh andrew says is this the service now and interesting yeah so they've got a page um like a a website which is linked in the description but there's a video series now as well so i haven't got through all of that but i'm just looking at at the time and we've got say five minutes on the clock what can we do with with five minutes uh brad is there anything that uh we can do about this custom list component or should we like talk about something else because as you know i don't i didn't have a plan much other than what i've learned this week i think i've shared that i think we have achieved some stuff you've talked about your new blog um what you know what else is kind of is there anything in ui builder that you're still trying to get your head around that like that's your next kind of what have you got a workout or do you feel like you've got the whole thing sussed and you've just got to get the message over to people yeah i think uh i i think this week i'm finally feeling like uh i could you know i i could take on some project where i had to actually build an experience for somebody they're still like i think i understand how you know the the you know you really need to understand how like data resources and client state parameters and client scripts work and then how they tie into events and properties and components and you know that took took some time to get my head wrapped around that um you know we we have some internal enablement uh materials that uh that i've been able to go through and so you know i've got a bit of a head start on everybody um but there's still some some details like you know configuring portal headers and you know what we mentioned the um you know the uh like list filter you know tabs and things like that and modals is something i may write about modals next week i'm not sure um but there's a few there's a lot of you know kind of edge edge things like that that i still need to figure out how they work so on on the modals where it says modal um in in the ui builder and i've just switched i stopped the share and you're now we're together on the screen so um just to try and wrap up but the the modals there it's not like sp mode or where it pops up in the screen or is it can i can i put whatever i want in a model now yeah you can uh so i haven't i've seen some modals that people have created and yeah you can do a lot of customization with you know what shows up in the modal what the buttons look like and what everything does i mean it's all you know you're configuring properties in advance and then yeah what what it is that uh that they do and on the portal stuff where with portal is it that the components that we build um if we built our own custom components all the components that are coming along out of the box over 100 released in quebec are those components for consumption in the portal or is it that i build a new portal using ui builder but it's a different app shell but i have got to rebuild all of my portals now or is it that can i transition over and start using components side by side uh like in service portal yeah service port yeah so when you're saying yeah they so they're not they you cannot use components and service portal or widgets than ui builder so you know if you want to start using components you'll you'll be you know using that in the ui builder and the quebec version of ui builder is really you know there to help you you know work with the csm configurable workspace and then um there's there's uh oh i can't say that uh they're the custom there will be some custom uh portals and workspaces that you can create uh but it like if you need to migrate your itsm service portal to if you want to do that to now experience you know this quebec is probably not the release that that you'll be able to do that um so i think we're we're still waiting on you know things from from the other views but so when we say portal though in ui builder ui builder with a portal rap show is for the end user to consume it it's no longer the agent workspace back end for filler type role it is for somebody to come in and say i want this on my um you know i need a new piece of software whatever yeah yeah so the the two main app shells that we have right now are the workspace and the portal and so they are for you know workspaces for agents basically and and portals are for you know end users or really you know when i think about portals it's you know somebody should be able to come in and use a portal with no training you know so it's a it's a more guided experience than you're going to get from even an agent workspace or just your your standard platform ui excellent well i've got 100 more questions brad but not we don't have the time for that one thing i would say for anyone as well that hasn't already check out catalog builder that's using ui builder that's a great experience for building catalogs so i think that's also something that's going to be very interesting um is it's not quite ui builder building your own experience but it changes the experience of building a catalog and i think that's an excellent um kind of demonstration of what what's going to be possible but um yeah uh i'm just checking out final comments on the chat so uh yeah awesome stuff is coming and brad thank you so much for joining me tonight um and i really appreciate that i'm going to try and end it somehow gracefully if i can just find the right background i think i've got it so um yeah stay tuned thanks for having me yeah thanks for coming and tuning in for live coding happy hour on friday with uh with the uh proper dev team so thank you so much uh and we'll be doing more oh sorry we'll be doing more ui builder on friday more ui builder on friday live coding happy hour and the usual time so stay tuned for that um on the servicenow dev channel so thanks brad thanks everybody you