so okay good evening and welcome to phil goes deep and i'm phil uh right now we are just getting set up for tonight's show and it is all about ui builder okay how hard can it ui be so seen a lot of uh a lot of discussion about ui builder in quebec one of the most exciting features um to come out of the quebec release although there seems to be quite a bit of i think discussion is the best word about how easy it's going to be to to utilize this feature so watch the live code in happy hour a few weeks ago i watched the guys on there setting up a new experience i followed that briefly so i have i have tested some of this out but what i want to do is try and work on um the ability to open a ui page from a record so within grc you've got controls and controls have attestations which are using the survey widget um or the survey functionality assessments and surveys so attestations all use a ui page so if i can bring that into um ui builder and make that experience quite seamless then um i think that i will have learned something and hopefully we'll see how difficult that can be so i just want to check uh to t y ty ty roach um yeah the audio level thanks i was just about to check on the audio level i just wasn't sure on this clip whether um because last time i played it it was too loud so i just want to see um if i switch it is that audio is that playing i don't know if that plays or not so i turn the monitoring off of it um and i turn the volume down because last time apparently it was way too loud so anyway i was just messing around with uh some after effects trying to jazz up the stream a little bit shout to wiz excellent well uh thanks for tuning in so let's switch it over some of my some of my setups changed a little bit so i've got a new green screen and that seems to be working okay let's not talk about the hair let's not talk about the eyebrows excellent so here's my here's my browser and i've shared in the chat i'll just share it again i'm not sure if you can had the intricate volume was even i forgot to stop talking while it was playing sorry that's my bad uh yeah thanks wasn't too much like a late night club night yeah i think last time i hadn't mastered the audio down so yeah this this post i just shared it in the chat from andrew p check that out very useful got some nice diagrams in there and i love a diagram uh so basic concepts of ui builder and the now experience application shell and the config etc so i had a quick read of this earlier uh really interesting i'll just just create a new diagram here about um how hard so use case is less there's a couple of uh kind of actors involved here so you've got control owner um and you've also got something like a compliance manager okay so these people want to take stations and review attestations and access my controls access all control something like this okay i don't know if anyone uses uh let me just maximize my browser hopefully the size is still right yeah if anyone uses drawing but uh it's basically a free cloud version of vizio not quite as good but does the job take attestation and review at the stations yeah so this is pretty much the use cases that we're seeing here from a compliance manager now i'm probably just going to focus on one of these personas here i always struggle trying to get looks a little bit nicer so that's my kind of basic use case uh that i'm dealing with and then the kind of flow that we want to see is going to be like um it's a list of controls uh into a control record and from the control record a list of attestations so these relationships are pretty well defined already within grc so i just really want to leverage that the list of attestations then i want to view responses this is an out of the box ui action that's going to pop up a um a ui page in the platform so i want to move this journey this experience into the now experience ui builder so i'm not building any new any new relationships um that's pretty much my journey let me just save that so uh whether i should create a brand new scope or not um i don't know whether i'm going to get any scope restrictions grc if you look grc uh has got lots of lots of scopes um grc profiles is the main one but we're going to be playing in kind of policy and compliance so i'm curious whether we can build this self-contained in a brand new brand new scope so let's have a go let's create an application and i'll just call this pgd one something like that that'll do for now and i'll just continue in studio i've already got a pgd i'm not sure what that was okay so i've got a scope and i'm in that scope and ui builder and i know there's one thing it trips me up and i think it's tripped a few people up i don't know if james is on yet uh wow i just have just gone back to the chat uh it's firing in here okay so wasn't going to say anything about the pink mullet yes raf shelter upside down andrew jace uh we'll have to try drawing oh yeah so it's draw dot io but for some reason once we got it all connected into one drive and everything at work they then changed themselves to diagrams.net but i'm sorry that doesn't that doesn't roll a draw io file is basically an xml file and you can connect it into one drive you can work collaboratively on there you can you can build some really cool stuff there might even be the ability to uh to integrate it with some stuff but uh let's not go into that um but yeah dual rail sounds a bit like vizio and it does the trick that's for sure um cool so that's the use case that's the uh that's the use case this is what we're trying to build and i've got a scope and i'm in ui builder so yeah the one thing so you can see here i've had a couple of goes just building out an experience and admin panel this is the main thing to remember if you create an experience from the ui builder kind of pop out here if you if you create a new experience here and don't set the admin panel then it won't show up in my experiences you've got to navigate yourself back to the platform set the admin panel up and then it will be available here and i think from what i can tell it's this admin panel that discerns these experiences from any legacy workspaces but you know we're all still figuring this stuff out um so yeah you can see under here ux page registries there's a lot of legacy workspaces um url path i don't know how specific we've got to be i don't know whether page matters but app shell ui admin panel these are the two things that if we look at andrew p's post maybe zoom in a little bit in here he's got you know app shelves config experience so we create a new ux page registry which is another name i believe for an experience so we're going to call this i'm going to call it pgd1 app shell ui is where you've got the choice of do you want the workspace app shell portal app shell and this this is what you use to figure out if it if it's uh within something like a portal it does tell you here yeah so look and feel this has got your header footer main content etc i'm not creating a brand new one of those i'm just going to use the workspace one agent workspace app shell that will do for me i'll give this a url path pgd1 try and keep it unique and admin panel so in here i can either select one but i'm going to create a new one for this use case and i think this is the bit that seems to be missing it i think that's a document field and that's probably why it kind of looks populated yes document id that's why it looks populated so landing path home set an icon description i don't know anything about these settings so now i've got an admin panel all through lots of configuration that's available in here now i've created my registry if i reload this is it visible yes okay so that's hurdle number one past uh we'll take a drink so on the red stripe this evening i was gonna have a cup of tea but um all right let's go into pgd1 and the first thing we need to do is create a page so basically on here this is each of these is going to be a page um here's a page here's a page and actually this is this is a page here because i want to view that in that way these what these will be are components and this and the ability to move from one page to the other is gonna be handled by events and the ability to pop up this is going to be handled by events but what i think i might need to do is create a modal page here now if that's a modal page and there's an iframe component i need to be able to receive the parameters that come in so when you click view responses in the platform you're passing in um kind of two parameters in here you're passing in whoops you're passing in the instance id which is the assessment instance and you're passing in metric type i just realized uh upside down andrew it's like 6 30 or something 10 to 7 in the morning now so uh i appreciate appreciate you tuning in hope you've got a coffee uh so instance id metric type these are the the two main parameters that we're going to need to get from our list of attestations and when we click on that row we're going to grab those values and somehow pass them into the model that's where we're going to get stuck i know that's going to be the year that's going to be the challenge for today the rest of it should be pretty straightforward so let's call this name of page is controls and i think that this means that the namespace is kind of isolated so if i've got controls within my see this kind of custom scope application page i could create another controls page in another application scope and that should be okay i think that's what it is so i'm just going to call that controls uh page template well it's a list reference the page template how would you like to add content to this page you reference the page template and its data sounds pretty straightforward should i choose the reference or copy a page template you choose to reference the page will automatically update when you upgrade to a new release well that sounds nice automatic upgrades um yeah i guess it's in if i was thinking of a comparison within service portal you can clone the out-of-the-box widgets and it still maintains that relationship let's see if this works um so variant is where we can pass in um i believe this is where you can maybe it's not where you pass the image where you catch the parameters that we're passing into it or require parameters here variant is yeah perfect so if i'm trying to jumping around all over the place here but where you can see developers create pages variants so a variant is like an instance of the page so i think that's perfect for me in my use case right now just scrolling through how to read this earlier but under here if you look list of controls well access my controls so that would be a variant and that's access all control so for me that's the same page it's a list of controls and the variant here will be um you know the the persona that's coming in and the filter that we expect to give so i'm not going to get into that now but i can see there where a variant would would matter and i don't need any parameters because i'm just going to get all controls for now i'm not going to deal with if we focus on this compliance manager basically this bit down here if we focus on these and then we could create that as a variant this uh it's not quite off more than we can chew so i've got a page so page template has protection policy so there's already a limitation of um of reference in it so my lists i don't think i've ever done it this way test value is that the actual list component there no list nav i've never done it through this route creating creating from a template so i might back out on that we've got this nav list right content there so this should be here we go title is it because it's read only that i can't change it elements this nav table title well i'm going to bend that off because i want to get something moving so controls that's a variant okay so it looks to me because this is read only that the template just is going to receive some options and whatever we pass to it would just be completely dynamic so this is probably a much more reusable way of building things might even be a better way of doing it i'm just going to call this controls2 it's a beautiful name and no template is that displaying a protection policy from the ui page well i haven't even got to a ui page yet so this is just the ui builder page it's the kind of the core component i believe um it looks like i have to select the page template and i haven't given it a name all right okay that's why that's all okay so i'm not going to use a page template now i can come back to that controls later let's just try and get something on the screen um and now i've got a body the first thing and one of one of the main things i noticed here is if we use containers okay so if i put a container in here i can then modify the layout okay i can split it um i'm not sure what css stuff it uses but it's grid or flex one of those it's certainly a modern um kind of web design approach but i'm not an expert on that but you can split it into two columns if i split it into two columns that's great then within this container i could sorry add another container and that container in there could then be split into you know four so the ability here is very um flexible to start building out your layouts so that one's inside column two i'm just going to delete that and look at this content tree as well if you get lost so you're not sure what you're clicking on you can just go in here um i'm not sure if i can rename the figure component can i give that a name yes so i could call that kind of main right for example so if i was that's called main that's called main probably that's not the right thing to do then i've got two mains i actually want my layout to be just wide there and then where we get to the main uh functionality is components so if you look in quebec if you've gone over any of your other workspaces in the past you'll see that there's about three components and then maybe some custom stuff here's one of my three of my custom components actually and yeah look at that hello world 2020 fail so that was my achievement along with rafa i think it's on on the chat as well um configuration column is out oh okay right um thanks thanks wizzy uh let's see what's going on here all right this is in the light screen yes let me tweak this how much do we need i'll tell you what happened change my resolution is on my mac i lost like the title bar to teams or something and i couldn't do anything with it so i had to change my resolution to bring everything back into view and i think that's messed around with um my stream so let's try fade in i'll cut it is that better we should have config panel on the left on the right side okay thanks for shouting that out yeah this component this was for hacktoberfest and and if you're going to go down the road of you know custom components this is behind the advanced heavy code route configuring command line interface nodes local ids probably you want to be connected to to github and branch and your actual development team is going to work more um i guess more locally themselves and then push push in to get and then from there into an instance um but that hacktoberfest uh was a learning curve and probably unsuccessful but that's what's left over i managed to create a component and it was going so well that i called it 2020 fail and i think 2020 was just generally a fail anyway um that's a custom component the rest of these things so other than those three jigsaw pieces this is all now out of the box components so i want a list and i guess the the thing is that template that i used before if i had a bit more time i'd go into that page and look at what they were doing and look at an existing workspace and and see but if i type in here list there's quite a few options it's a list related i want that um next time i want that within oops within this flow here so list related will be control record list of attestations this will be a related list within this page that's what i think right now we just want either a list or a list simple so when i go with list i don't know what the difference is off the top of my head but there is a vast amount of documentation available on developer.servicenow.com as well as docs.servicenow.com but obviously some of this stuff ui builder is so new that it's not all documented yet this list now has defaulted itself to all active tasks i'm just going to call this controls list id um what is that the id of the list says select i'm just going to call that controls filter i'm going to make sure this is and i need to select my table first table up here it's got parenthesis now not square brackets is that going to make a difference to me if i go compliance control no actual it doesn't like brackets for filtering okay that could causes some pain now i can edit a filter within my filter i'm just going to put active true for now active is true okay if i save this then i've got well 1377. and let's open my experience excellent so i've got a list of controls that's my first it's my first page here so i'm working on this i'm going to call it blue because i'm still working on it i haven't got the ability to go from here to my control record but i'm going to have a drink andrew have a sip of your coffee celebrate so i need another page because otherwise i've got nowhere to go to but yeah let's just notice that in here i can click anything that's looks nice and clickable that's nice that you've still got your show matching and you've still got your column kind of core functionality but clicking on this stuff it's not doing anything and that's where events come in so i am kind of repeating everything i've learned from live code in happy hour i should probably share the link to that let me see if i uh i'll have a stream marker i'll try and remember to come back and put that pop up in if anyone's watching this back i've been going for half an hour and i haven't got quite as far as i was hoping so what i need to do yeah go back to not home then click the home pages here i've got models i've never seen our viewport okay use event violin to pass content in interesting that does look like it's coming from controls default okay so that's already got some stuff linked in there and i can't tell my pages apart right now let me see if i can just rename edit page settings yeah controls temp call that controls attempt just so i can tell them apart the goal was one user experience yes j so what i want to do um i'm just i've kind of drawn out my use cases but i am focusing on compliance manager so compliance manager wants to access all controls and from all controls review attestations what that means is they'll come into a list of controls from that list select a single control record and in that control record so in this page we want a related list of the attestations and from that list of attestations i'm going to i think use a modal window to embed an iframe of a ui page and try and pass the parameters in there so not a lot to ask but might be i might be disappointed or i'll just be going for three hours so um yeah let's see what happens yeah a single experience and hopefully something i can build on from from here so i need a new page i need to create a page and a lot of this is just i've got my muscle memory in ui builder so i don't know where to click i'm constantly trying to remember where i need to go to do each thing so control i'm going to go to record and i'm going to copy the content it's not upgrade safe but it's got to be a bit quicker than creating one from scratch cheers for the vote of confidence okay so oh cheers so here's my page require parameters now i do need a parameter in here i need a sys id invalid parameter name must use alphanumeric suggestion cis id that's interesting i don't want to use camera case that would that would look i don't know about anyone else that would look weird for sys id maybe just because control id the l in the uppercase i looks slightly a little bit too similar i'm going to roll with it so i can't open a single control form without having a control id no data to display so what have we got in here that's a header and i even struggled to read like this stuff contents props and props is property which i think is an object table um so sys okay so i've already got props.cis id already coming in there see if if i've got a page template straight away if i go back to [Music] controls what we want to do now is from here go to events bro click so when a row is clicked we add an event handler and that is going to link to a destination select destination which is going to be my app root control which is my page now i've made that a a required parameter so from here i can then access content dot props my payload dot that so why is payload.cis id allowed in underscore okay so payload system is going to go over that should be good save that let's just see what happens there incremental changes um did that refresh no it's waiting click this okay excellent so it has passed in sys id to the page control but i just haven't configured anything to kind of receive those parameters so that's why i'm a bit curious here what this is called header is that just header section and that component config function evaluate valid record api need to see a working version to know how to deal with this stuff table i'm just going to see if i can hard code for now oops listen to us so it looks like you know you'd have a reusable template that you can just pass in that form that template uh that table sys id etc i just don't know how to pass this stuff to that right now um this should be called if i go to this little dynamic data binding contents dot props should have should have control id there we go primary value i'm sure my options are here subheading i'm just going to save that and see if that catches my my control now i see my control somewhere so passed in control plus and sysid to display all right well this is what i actually did this one down here resizable panel i'd expect this or this to be action bar this is where i really want to have ribbon collapsed is i think primary secondary are what it will display where's that okay where's it getting that from string for title that will be displayed on the first row okay um number subheading description name let's try that so looking for a field we're all guessing jace but i appreciate that so look number name we're seeing something um is that oops is that coming from is it looking up those values no it's just text all right well we're seeing something here let's put in here see if we can bind that to [Music] so we've passed an assist id so we need something to receive it i'm gonna get rid of this component right if i just delete or add a component afterwards ribbon component is tricky the first thing you need a glide from data broker that sounds difficult let's just put a form in here why can't i just put a form in here and is that not what that is no that's an action bar but when i said add after i thought it was going to put me underneath so that's ribbon change layout on here column reverse requires ux header definition green clouds wow you've done some research on this so i i haven't looked into any of it um skip it yeah that's exactly what i'm thinking so this is what um this looks useful if we've got time to to explore it um i'm just going to discard those changes don't know what it did i'm going to put i'm going to call this control control form how's that control for creative without a template it still requires glide form data broker but it is simpler okay i would expect that i could just receive i've got to add a control id again in here does it already have sys id we can come back and add that so if i add a container and then within my container i add component form andrew p is here oh hey andrew thanks for tuning in so i mean you guys have done all the research i've literally watched live coding happy hour got involved in the conversation because i'm really hyped about ui builder and i think it's going to be excellent even though i've not really explored it i i've messed around with now components a little bit it should be simple i really really want it to to be easy that doesn't mean i shouldn't have to do some investigation and learning i know that i know i need to let's see that i've got no cis id available there so that must be what you were referring to about the kind of data broker that it needs somehow to yeah process the information that's coming into it so i think if there's an if there's an example workspace that you can pick up and look at and see right okay that's how it's doing it there that's pretty much how everyone's learnt servicenow along the way right we've all just looked what someone else has done to solve that problem and then applied it at the moment workspace is a little bit lacking some examples so in my page i need that's default uh okay so variant is a default it's almost i could be used so let's add a parameter in here save and continue there's an icon to add the data broker okay so do i not need i thought i needed to do this control id right bottom left corner dbi let me just add that in there as a parameter down here db icon excellent okay data resource instances inherited data source instances dynamic routine local data sort of sentences i'd never guessed it was there i mean this is what i mean about muscle memory the first time you're looking at this there's so much going on and i clicked home by by accident i'm still happy with this kind of tree here but we've got all sorts also what's going on here select scope but that scares me that you can change scope i guess it might be necessary if i've somehow ended up in a different space but um click add and find glide form okay wow find let's see four something form in here now record form connected oh glide form there thanks okay so that's why we've got table sis id so if i add that in when to evaluate immediately eager only when invoked i guess only went in votes so will my table name down here i'm really missing those square brackets uh sn compliance no okay i've got a scroll through we need square brackets in ui builder so how do i get my sys id here this is coming from so i've passed yeah so that's what i think that needs to go into just put a table name plus this id for testing well forced view name view default let's just save this right because if i go back to my other page that's called control form controls i'll just handle my event quickly in here so i'm back in the original one got an event already set up some of these icons are little they look like they're not clickable but they are there's a lot squeezed in here link to destination so this is where is it going to lose it cancel that link to destination edit destination right i don't want to go to there anymore advanced mode nope i'm not advanced yet so i want to go to control form and pass in here my payload system okay so if i do that and save that should mean that in my page on my control form page i just want to see i know what you're saying gc but i'm stubborn i've got a prop i've passed it in my event and i'm saying here i'm catching it so i really just want to see that that works and i'll lift your regret it so what is it called controls2 i'll click on here nothing okay but i have got a sys id up there so i've got a glide form there is this bound this form here shouldn't this be coming from oops shouldn't that be coming from data glide for one it will work everything is correct just while developing at this point hard code asus id okay i'm going to take the advice let's not look have we got a string yet next step connect the data broker to the form where have you learned this stuff is this all in the docs because if it is then i you know i apologize because really we should be we should be reading the docs first but this is why i'm testing it you know shouldn't be that difficult and probably it isn't if i've read the docs or got someone to just tell me how it how it works so connect the data broker in here sounds simple next just looking at the events available put into fields this is under config fields now record form blog fields okay so that's where so if i went back to my template now some of this is making sense so data glide form one is that id there so we've got data which is coming in as an object very similar to service portal i guess we've got data object glide form 1 is referring to my local data resource instances remove the commas on the sys id and we've got commas this idea there is a fields field on component put that into the field yeah so that's there dot fields yes okay got is that right there sis id is this where you said hard code it should i hard code here and here and i also i put i put um quotes in there okay i thought he wasn't taking it without the quotes sections okay this is just change fields to sections boom what did you see that let's have a drink oh sorry raph yeah took them out thanks uh and that's 2006. so that is my that is my control so should i then it's funny that you can't walk that now record form blog dot why can't i access that but surely that should be dot sys id or system is it okay all right then let's let's just go back to uh controls let me just see this i'm gonna grab two 20615 copy that's this id and if i change that here does that change was that not accessing yes wow table what's this idea on form component do not work you don't need them oh they don't work okay i'm literally learning everything now just the data broker is important and the fields and sections because i tell you what i did do this before and the form just looked completely screwed up and i had no idea what was going on so when i said at the start i've been through this before basically i've got to this point i passed the sys id over um and then this just looked messed up but that's probably because i didn't have this glide form um data broker and i didn't have anything in my sections and fields if i looked at those is there how can you kind of scrutinize what's in there and debug that is that a an array or a comma separated string of field names is that coming from this ui list is it the same for sections does it they are they dependent on each other you know there's quite a lot to kind of unpack here but i've got a control form now i want to connect this that's what i want to do i want that to be the one i clicked on and that really explains well when i was clicking it in the issue one it was just loaded up at random it's probably worth saying i've got no experience with kind of web components outside of trying to do a hackathon with command line instruction command line interface on on paris so let's click on four no data to display did i not save it i did save it you can explore it on the data broker tabs more form oh my god oh my goodness so okay so i've just passed whoops i'm clicking around if i'll go back here controls2 let's refresh that if i click here 20610 oh it did load okay so is there a difference that was quite latent there is there a difference between only when invoked if i say immediately does that give a slightly better experience still slightly delayed but i'm taking it so there's a lot of a lot of things i don't want here but i'm not dealing with that right now now i want a related list so let's look at my my layout here and not that one this container one here let's just change this layout this way yeah and then that didn't make me happy i don't know what happened control discard changes right now that i know that that data object is that oh okay so that one no data to display this is why he said for testing purposes it's nice just to have a sys id in there and then go back so we know it works that's a good point we open up our data at the bottom let's just pick on one that we know has got some attestation so for example this one's compliant but it's in draft so just filter out those in draft this one's in review typically if it's in review that's suggesting that it's especially if it's not applicable it's gone through an attestation cycle the only thing is it's possible that it's demo data and there's no attestation in there so let's just look at going back to our drawing board our use case compliance manager accesses all controls and from there um review attestations i probably should have put a little block in here that's like review control right and from there review all attestations because that's really what's going on here so list of controls to control record that's actually looking quite nice this is this nevada station so let's focus on a specific record that we know has got attestations in here and you see this view responses that's what i'm trying to do i want that ui page opening the mode or inexperience so let's pick on this control because we know it's a good one and hardcode that's this id in there and that is the right one yeah 1023. i just cut zeros out by the way if you hear me say one one two three or whatever that's what's going on uh so what's this id now i was changing the component layout before and it didn't mess with me so let me just see i'll get back to that container and change the layout this way around the sidebar sidebar one add component what component can i add related list list related excellent so this is going to be called attestations my table is going to be asmt assessment instance parent table is sn grc item item and related list name that means related change task singular parent record sys id uh is that bound from here y dot should see about five atta stations it's really good i feel like the right hand side related list is probably not the correct one unless it's just gonna kind of list itself as view responses or some kind of oh here we go here we go right glide one dot now record form blob dot cis id nice this is what i was looking for earlier that um dot walking i guess to kind of save it first well i'm hoping raph that this setup so i've set table and the parent table which should be this table so on the assessment instance there's a relationship from assessment instance back to the originating control which is the table i don't know what this means um parent records this id which is this it's the parent record that should be that should be enough tomorrowland how are you filtering out the instance records okay assessment instance table has got a reference to its parent which is the control risk table smgrc item and i'm saying that that parent table the parent record id is the glide form sysid okay that should be enough i'm hard coding the sysid in no it's that's the relationship parent table not parent field parent table so the parent is a one to many relationships a parent table someone told me if i'm missing the point here it's about the relationship yeah the parent table makes a relationship it's a parent-child relationship one control has got one or more a station so we look at this control look at attestations okay here's a scripted relationship because it's only showing the ones that are completed not the ones that are cancelled not the ones in progress now so that's why it's a scripted relationship here plus it's a scripted relationship because before it used to be um there didn't used to be a parent table on there you used to have to go through an m2m table it didn't used to be that field on the assessment instance until i think kingston related list params might be confusing just make sure you have a table to query from and then add a filter so i've got a table okay let's just get something working then i'm loving green clouds gc uh literally my saving grace here edit filters we've done an hour that's good i mean we've got somewhere so can i pass parameters in here sn grc item no it doesn't look like that control risk okay control risk sysid is let me just paste that in for now hardcoding one let's get something working excellent so related list it shouldn't be confusing it should be pretty straightforward from what i'm thinking here put any filter for test purposes to make sure it works those are the five records so six five six two ah in fact they're in order here but we've got one two three four five we're looking here we've got one two three four five they are the correct assessment instances as well ah columns there are no selected fields well i probably don't want half of those fields to be honest with you i want don't need the control risk probably want the assigned to i probably want the don't need the etsy it belongs on the control um metric type might be interesting oh is that not is that not me adding them okay sorry assigned to okay we're adding one at a time right okay uh metric type i thought it was a slush bucket uh number and updated date let's uh let's do that state in fact and update it to save that assigned to let's move them around refresh lovely okay assigned to just put state there number state though they're all complete what if we saw some in progress and i do like you know in terms of how configurable a lot of this stuff is i can't see it here but we used to be able to specify yeah that hide action config i'm thinking of the main list layout you had the ability here to kind of adjust these i don't want to be able to create a new button for example um can you drag them to reorder state percentage that'll do i've got a few fields in there let's just save that let's so i'd like to be able to configure this a bit more because i want to turn the new button off um why you know where's that setup was there a break there it's funny max rows max columns action config hide list actions there we go does that do it yes hide highlighted values what does that mean rap rap rap rap lovely rap rap let's make that dynamic now no raf i'm not i'm not going down that roads yet because i want to make i want to make the journey okay i'm learning that if i just hardcode things and keep moving then go back that should work that belongs to that i'm happy with it um i've hard coded right let's just remember what i need to fix i've hard coded the sys id here and i've hard coded the sys id into my glide form hide list actions to hide new button yeah i think i've done that now um that's looking good i need so when i look at my page my original controls temp that actually had modals versus body so modals is like a different thing different type of content so if i look at my control form add modal viewport this is interesting confirm destroy alert so i've not looked at any of this before i don't want to add an iframe yet because don't i want to add the iframe as a component within my modal content of this viewport model are dynamic excellent so configure modal modal content maybe it's not a viewport it's a viewport but i'll not put components in there use event binding to pass content in so what i was hoping is that my modal allowed me to embed a ui page in here so if we look at what happens kind of today in the platform here's a control and a click view responses i'm still in the control i haven't navigated away and then i'll just close that and i'm still in the control and i can look okay what did they say on this occasion boom through each one that's the kind of experience that i want in here so i'm in the control let's just check actually i haven't checked that related list uh i haven't checked that related this yeah this is looking good well i won't say it's looking good but i've got a controller i've got this relatedness here um when i click that basically i want to click that and see the response in here and it has to be in the ui page okay so therefore it's got to be in an iframe is that going to come through a modal i've got a model there but i can't do anything with it modal should be data according to mvc i want to pass data so i i feel like it's not let's create a page what i was it's only when i saw that modal viewport on the template and that's when i thought that it was going to be so a glide model in the platform you embed a ui page um within it like there's a few different types of guide model what it used to be called before mode or glide something that pops up okay and then you embed the ui page within that here i'm going to pop up or i want it to pop up a model embed an iframe which then contains the ui page and somehow pass parameters to that i think i need to uh raph it won't work you can't no it won't work it's those back end ui actions um i've tried it those back end ui actions don't work in the in the ui builder okay so just create a page create a page this is gonna be called attestation let me call it assessment it's a little bit more generic is there anything in here kpi details no no no so i'm going to create that no template yes i need parameters in here i need instance id and metric type yeah instance id metric type done so [Music] then i need to add a component so i'm going to add a container anyway it feels like it's a good practice to wrap things in containers uh i don't know if that's anyone's got a comment on that but if i then want to move the layouts later it feels like i've got a bit more it's like a div basically that's how i'm seeing it apologies if on using the wrong terminology okay so look i've got wikipedia that's excellent i want this to be an attestation by source okay let's see if we can hard code it so if we look at what's going on in here that take that view responses that's passing a view responses metric here it's passing a url with these parameters in here and if anyone's looking at this and dealing with grc the thing that's missing there is cis palm no stack equals true because if you access i'll show you in a second if you access that from and this actually happens with me customer with me earlier so if i look at a control here click view responses boom see that and then click here oh my god maybe i'm missing the point that was screwing up basically when you click the view responses there and there's something's changed that's entering onto the stack and then there i fixed it or have they fixed it ui actions go forward it's not in there is it cis palms deck it's interesting though maybe it's a version i don't know if anyone knows anything about that but basically i don't want to put it on my stack i don't think that matters in this case um let's have a look then what can i pull in here so i said i'm gonna hard code it will it handle relative i feel like i need more space to work does the script give me more space assessment take to accessible cis id that's the right that's the control i'm not passing that in at the moment that'll be my control id which in is accessible record syspalm accessible type which is this control that's this id there which is the metric type id it's just palm reader equals true that's fine that makes it read only if i sorry so it's accessible id that's actually passing different parameters um so accessible sys id that must be the assessment instance id let me just copy that ssid there how to pronounce uh some of the names i'm seeing but yeah thanks for tuning in man let's see if that works boom boom boom return this so i'm not using the script right now i feel like cancel that paste in here and put forward slash there yes look at that entity save that okay it doesn't look like it's rendered quite right let's see if we can get there from from our page so control form events on here bro clicked so i was hoping that look at glide form now that that's now that that's been databand i've got a load more uh event handlers add in phone message add warning message all things that we're kind of pretty comfortable with in the platform canvas user refresh so if i link to destination that open or close mode dialogue so it's not a modal in the sense of what i'm used to in the back end so maybe opening it in a pop-up screen is not possible link to destination select destination assessment instance id will be what's it going to be payload cis id yeah metric type will be payload so i can't access dot walk to the records it doesn't really matter what i'll put in here right now i'm just gonna hard code that as well i'm hard coding everything here just to get it working title my station i know this will be like view response multi instance field then what that is so if i add that event handler i said mode four does that have another option there is that mode not script type fair enough i was thinking mode form mode model just apply that and save there just go back to my list okay i've got a list of controls um i don't think it matters which one i click on because i've hard coded it so let me just click on here 20610 now i've hard coded 1023 i've got an attestation here if i click on it nothing happens okay nothing happens control form config related list row clicked navigate to destination now you've got loading background now i wonder if that helps with the the timing that we saw before ah so why display flex attestations row clicked that should be taking me to my assessment page it's not it's not working can we do add notification add info message okay now i've seen this yeah i feel like i've got a little bit more tool in my tools and my belt because i can handle some of the things that might be otherwise i'm a little bit blind so control id [Music] okay so that doesn't have access it's got access to context props context session payload notifications why is that not got access to event handler on on add oh okay that's not what i want then i'm saying when a notification is added on right click so i still need to add a row clicked but from here can i add an info message that's what i'm trying to do that way around within here list table what does it look like is this this table how can i do that why i'm shooting the dark a little bit here well i've got a payload this table it seems to like that format let's save this doesn't matter which controller click on it's still hard coded click on here why did that work now when i added the info message we'll take the info message away it's definitely not loading the ui page correctly though is it doesn't look nice ah okay i've got a bit more space in here it must be leveraging some of the styling then from the platform but that form layout so if i go to my page why is it shrunk is there a setting what's wrap saying you have the weight fixed oh whip fixed i'll go back to 100 100 no i don't know 600. i'm sure that's not right someone who knows a bit more about front end development tell me what i'm doing wrong hey look that looks okay not clickable it's funny that ah did i just look at this this is true i wonder if it's pulling down some of the it's not accessing some of the libraries from the back end that may be in the ui page are being used to lock that down because really don't want to be able to change that i can't change explain i can't it doesn't look like i can but you know this is this is a small success now let's see if if so if i'm in this if i'm in a script here let me grab that don't lose it if i grab that and let's just see return exactly the same thing but scripted apply that save that i scripted the whip scripted the whip the source i mean it's nice that you can script the width that's that's another powerful feature source yes okay so if i've got source there scripted what i've got available to me prams dot params dot okay it's api dot data what have we got in here dot data here toggle check syntax format code toggle comments that's great but how do i learn more but today i'll make sure i don't lose that so okay so if i can't what does that look like so if i want to access why can't i access context was that was called context api context dot props dot instance id beautiful right now we're firing okay instance id equals boom that's my own variable that should be called metric type id and can i have full screen lovely so now i'm cooking with well i want to get ahead of myself now there that should be then instance id and that should be metric type id local variable that's nice as well it's actually telling you a little bit more it's there so that was metric topic it's telling me local variable type string that one it's not giving me any detail about i'm happy that it's dealing with that as a local variable giving me a little bit more confidence what i'm plugging in here a little bit since palm reader equals true so if i can get that to apply accessible record is invalid that's promising let's see back in my journey i'm not sure if i've got the clips there we go 106.2 assessment what are those two different cis ids so that's not applicable test let's look here 106.2 yeah it's not quite the right one is it so go to our page we're doing on time i've done an hour and a half where should we knock it off i'd like it to be connected if i can do that um it's getting here's 10 p.m in the uk uh that's control temp no i want control form yes my control page no not too many control form what have i got clicking so on my events here when i go to events taking the payload sysid we can't access the metric type id so that's passing in so let's just look at this one so 1962 i'll click there copy sys id all right let's just put one need somewhere to put it so that's 106.2 1.062 and this one 39f okay and i guess one two c is my hard-coded electric type yeah one two c three nine four it's my hard-coded ventricle 394 so if i go back here let's have a look responding clicking to this one doesn't matter it's going into one two three so 106.2 oh it's a different browser window 106 two three and nine f let's click on 106 one that's different ah there's the control implemented no it's different to not applicable just take a look here yes so let's also take a look if i change that cis id changes the response yes okay so that looks a little bit more promising back to my control form 106.4 yes 106.4 yes i've got evidence there okay 106.1 no test 561 no test and that looks like it's working i'm not entirely convinced i'd really like that to have popped up in a window or something i mean maybe maybe you could have you know down here the ui form down here and you click here and it doesn't i don't want it to navigate away it's just i'm changing the requirements now uh this is what this is what happens to me kind of our needs evolve ah we've got half an hour but i tell you what hasn't happened i'm not passing in that control am i that's because i wanted to focus on the controller had some attestations but i think i can fix that now so [Music] i think the event is handling it correctly i've hard coded it in the g4 of my page control form just got changes i didn't change anything da data so we're binding our data down here glide form one sys id there and that should be able to get it from my props like setting that's what we would like is the ability to yeah test values lovely that's what i'm looking for i don't know how to happen literally don't know how that happened did i yes that worked that's my 1024 this is not connected because of my edit filter but just notice when i hover that i can pass in sn grc item equals api dot props no api dot dot hmm reckon gc's dropped as well so [Music] can't access any programs import api dot look context session user preferences use of roles no context did anyone come up before api dot data is in there that you don't know how to filter context.props so how can i can access context there if i go to script doesn't make sense to me if i paste that in there api.com i wonder if that works sn grc item equals api okay let's just save that let's get a different control it's got one attestation in here copy this cis id within my ui builder yes okay so i clicked it that's what happened press enter we'll just click off of it ah look there's one but i'll tell you what my filter hasn't so that's 105 for 105 4. let's just script my filter now i want to say state equals complete and save that okay let's try and test out my experience now code editor what is this now experience builder okay docs are getting better because i haven't seen that before and it's been a little while since i checked so just pick on what i haven't picked on before 205.94 boom oh no attestations okay let's look for in my controls so i want uh number this is a bit jarring number name entity entity state and status same status okay so the active controls i don't just want active controls i want ones that are giving me a clue so i'm going to filter out draft because they probably yeah this filter in review which we've got a state um non-compliant this filter those that don't have a state group group status i haven't done any of this messing around with list but that was pretty responsive so this one 1.023 i know i've tested that one already status compliant 2030 give me that 2030 and 1027 let's just replicate that in the platform [Music] controls number 2030 at the stations10827 10027 and this view response is yes with an attachment look at my screenshot yes with an attachment look at my screenshot boom so i haven't got the model but i've got a pretty tight flow there from control list control form related list assessment type have a drink um yeah looking good i definitely wouldn't have got this far if it wasn't for uh gc green cloud so um let me just make sure that that right in think screen clouds save the day raph you've been very encouraging as well thank you um i just feel like what well first of all i haven't got my home page this isn't edit page sends do we make that default how do we make this page default um that's one thing how do that should be simple how do i deal with that i don't really want it to go to another page i want within the control form i've got this space down here if i look at this component this that sidebar if i look at that layout um container yeah so within that list if i added a container put that component in there and that container i changed the layout to be that and then this component should be the ui form in here i've yeah iframe in here can i make this pass something to this i mean that's what events are for so i did see one of the events in this one would be um let's have a look events so row you can update the url add parameters to the url um let's see if that i don't know what it means what can i put in there's a cisco instance id oh okay that's the browser instance that doesn't look click here okay i'll click edit so okay that's this idea there's no way of knowing what that is hmm is there another way i need to look at how how we pass the data from one part of the page to another part of the page because ideally i'd have it opening in a model that's what i was expecting to happen so i've got a model here but that's just called a modal viewport and use event binding to pass content in that's not the modal that you see here where it's okay glide overlay it's not that sort of model so embedding a you um you know betting a ui page into an iframe as a model within an experience i'm guessing it's not recommended or i just don't know how to do it i feel like i asked the question how hard can it be and um it's definitely not easy but it got easier okay there was a lot going on down here that i just haven't explored yet you know full disclosure i haven't done any reading of the documentation since i think paris now components and just having a quick browse of like if we go to [Music] developer.servicenow.com let me just yeah so under this site under guides um no under reference now experience ui framework there's lots of stuff in here api reference um main concepts action handlers event handlers i've not read all this stuff reference components this is where this is where i have had a look at things but that's a modal so his modal component and why look at that come on if i look at components is there a modal component no so i think that's when you're building your own because you see that overview install you can put a model within your own component there's a lot of stuff to read here but yeah how hard can it be um on a scale of 1 to 10 i'm going with right now somewhere around a seven or eight um and that's because i had um gc on board i'm just trying to find my d intro hold on a minute yes so how hard can it be i would say seven out of ten maybe eight out of ten nine out of ten if um if i didn't have um a little bit of if i haven't watched live code and happier i haven't played around with it all together um it's certainly up there if i'm trying to mess around with now components and create my own custom components that's somewhere in the in the nine nine and nine to ten in difficulty creating a ui builder flow like i've done today where i'm moving from one record to another record trying to pass data around getting my head around it i'd say somewhere like a seven um but that's with support from someone who clearly knows much better than i do so shout out to green clouds thanks to everyone who's tuned in tonight i appreciate your time um thanks for how hard was it yeah exactly i'm i'm going with seven out of ten if you've got someone who knows what they're doing um and you can ask questions um eight out of ten probably if i was just on my own but i think you'd figure it out it's just right now it's muscle memory it's knowing where to click it's brand new stuff and you just you know overwhelmed with all the different options that are there and knowing which ones you need to care about to get what you need done done once you've then got something working i think a little takeaway there is you know just hardcode things in to make sure it's kind of rendering the data and then go back and make it a little bit more dynamic yeah difficulty uh much harder than it should be but i feel like it will get easier we need a bit of practice we probably need to share a bit more knowledge as a community um with all the um you know documentation is surely going to come if you look at the developer site look at the reference material already available i'm very confident and i'm looking forward to seeing what the specific product lines are going to release this year um and you know in quebec in rome now based on that kind of baseline functionality so ui builder you haven't defeated me i will be back and thanks to everyone for for watching and um yeah good evening good morning to you in australia and those who are the one-way rounds and yeah take care stay safe thank you very much you