[Music] welcome to code creative i'm travis tolson oh it feels over it feels so good to say that after so long how's it going andrew uh so today we're going to be well we're going to be taking uh well it's my first look at ui builder i cheated yeah you cheated i had to i was like how are we going to make us look good so uh i've been tied up on you i built or sorry i've been tied up on salary survey for the last ever ever which is why i'm so glad it's over i am a bit quiet i'll turn you up let's see how are we sounding now trying to make sure we get things right here we've got a new set up here in north carolina so we we moved over the winter similar okay um let's see let's see that's headset so let's try that how's that setting so we'll we'll keep messing with the game and see if we can get the audio right but yeah so today uh i'm finally getting a chance to actually sit down and take a look at ui builder which i've been dying let's try and ratchet that up a little bit more what are you doing you know i bet they could hear you better if you had a snazzy intro like all the other youtubers live from johnston county okay let's see we'll we'll keep tweaking with the uh audio settings till we get things right um all right but so yeah this is my first look at ui builder you've not looked at any blog articles well i have looked at some blog articles basically all my information on quebec has pretty much been coming from ashley sn ashleysn.com she's been blogging through all of her escapades okay good andrew says it's much better um so ashley's been blogging through all of her escapades with quebec and i have just uh been able to kind of glean from her and enjoy uh enjoy quebec through the lens of her work so far and then there was the little bit that you showed me uh while you were playing with it sarah yeah i was playing with it but there was more cursing than actual progress so there's that because it's very different from service portal and i was like what is this normal development stuff so here we go yeah so i actually just upgraded my personal dev instance to quebec today uh so this is actually my first look and already i'm loving the ui changes uh on the welcome page uh so i am largely making a lot of this up as i go along and we'll see how this goes uh so open ui builder gosh i'm really liking this this new look servicenow has going on this stuff's really cool i'm gonna rotate my mic over here since i'm going to be working on uh this guy on this monitor um me uh andrew says make sure that i check out flow designer's new ui i have actually started digging into flow designer a lot lately i've used it on a recent project and i am looking at using it in some top secret projects that i'm working on at the moment uh well i guess they're not totally top secret um i'm helping sarah out with fast gov and taking a look at some of the stuff we've been building for glidefast and i'm looking at using flow designer for that extensively and oh my gosh it's so cool it's gonna be hard um all right so let's see we've got a few experiences already those are not very informative expand the fla advocate army um i need to make a t-shirt for you uh flow designer people the fla advocates yes i am rapidly becoming one so i'm gonna click on that ux page registry okay i do remember a bit about the ux page registries from uh my digging into the ux framework before all this came out um let's just try clicking new and see what we got app shell ui oh portal app shell let's try the portal shell and um that seemed to be like your header and stuff i'm not sure but that's kind of the idea i got well we do have some basics start ui builder create a page andrea you got a link to your uh stuff on redbubble i'd love to see it we don't have enough ridiculous servicenow t-shirts so i want to make more of them um not sure on that one using ui builder building with components staying up to date creating custom components all right so i don't see anything terribly helpful there so let's just make it up as we go along um something new and different for you let's start with workspace core i don't know what that's actually going to do but and i am currently working in an application scope i was using earlier to mess around with flow designer so i'm just going to keep that app scope it's a dummy scope i plan on throwing away anyway so test portal shell and we'll see what happens had more but the mother ship took them down on me oh no womp womp what do they frown on you using the word service now or anything that references json data for authentication authorization public routes so you're doing the important stuff but we're having a legit conversation about swag and that's important too that is important that's that's fine it makes things interesting while i try to pull my head out of my rear end here uh let's see did that give me anything over here not really uh they have a tutorial would you like to go through it oh a tutorial yeah it's in the product it's like the little product documentation they have right now let's see let's go over to the always favorite developer site guides reference okay so if we're talking with andrew in the chat he says if you're gonna make servicenow swag you can't say servicenow or use any of their copyrighted things we'll have to find interesting ways around that got to be careful with that that's how stuff like service later happens now i want to make that um let's see let's check out learning plans see if we got anything in here so a service later like the knockoff version you know what i'm gonna go back let's go to ashley's ashley hello because i think she might have let's see workspace experience yeah i know she had a lot on the workspace stuff did she have anything on she had one that kind of got you started that one right there my builder let's see if we can piggyback off of her hour in ui builder uh sites are nice and clean experiences versus workspaces see how she uses those headings to create visual hierarchy be sure to go through the quick start documentation here's a link to the service now ui builder quick start see i don't want to create a page i want the whole the whole the whole shebang no i have no there's servicenow ninja stuff i have not seen that okay so i wanted two columns and a container i had a heading component a container component gosh it has been so long since i have actually done any of this any of this with ui builder the knowledge has caught up with you finally the knowledge like all your knowledge has like they've caught up to everything you know so you have to learn new things again for the first time like a decade i am really far behind at this point i mean i've been operating off of uh orlando instances mostly i am so far out of date on everything ooh ui builder and portals andrew do you have a link to that because i'd really love it my builder home displays your available experiences once you select a portal experience uh you can start editing pages see portal experience settings um so some just some initial initial commentary here so far if you have to go to the docs to figure it out your user experience is missing something so it was really jarring to click on create experience in platform and not really be able to readily figure out what i'm missing so there's definitely some missing pieces here in terms of the user experience but i love i love the ui i love the ui this is a great example of the difference between a good ui and a good ux yeah it really is it really is i mean the the ui of of the ui builder here is just really beautiful i really like the look of it it's really clean um but the user the user experience i mean you got to remember just a few short months ago i ripped apart the ux framework and was looking at all the tables and underpinnings and everything else and i'm still looking at this like where do i go whereas with service portal when service portal launched it was so intuitive from almost day one that i just picked it up and just started using it so i'm really looking forward to the evolution of the user experience here uh it's a guy from a partner and a guy from the ux team in service now we're talking about servicenow oh you guys are talking about service now ninja oh you guys are still talking about swag okay dude swag is life no but this this being a good example of a portal can be beautiful and this is something i preach uh because i'm very design heavy uh portal can be beautiful but if it doesn't work and it doesn't get your users to what they need it doesn't matter how pretty it is you failed let's see if there's anything now it just launches to the same ui builder that's stubborn did you type in now experience framework because there's a lot more under that i want to say now experience there's like all the things there experiences app shell uis ui builder dashboard builder a bunch of building blocks okay some of the some of the stuff i do remember from taking apart the underpinnings um gosh even if i could just get a basic start i feel like i would get somewhere but this is tough all right i am going to go with we can do the tutorial ashley says to check out the live coding happy hour now i got no audio on my current machine but andrew i'm gonna be red i'm gonna make lego men that look like them to match my chuck to mossy one it's going to be epic let's see all right so let's see this is where we get it the open ui builder okay they create okay so i was on the right track and then this is so exciting you you're joining to watch a video of a video did you see what andrew said it's also a big create app button on your home page there create app but this guy up here declaratively with code yeah so build apps with studio so i mean do i do do i do i need to go down this road yes but this is for app creation so do i need i mean i'm already in an app i'm going to keep watching watching what's going on over here because i feel like i was on the right path just do it i am just doing it i don't know you're watching the video you got to know more see they select they selected portal app shell robert says must go deeper ux app configuration record wow okay admin panel okay so i need to go to admin panel and then they select like they're going to go with a new one all right i can do that all right so let's give that a shot this is uh so test portal shell was the one i created before and it looks like what i was missing was the admin panel so ux app configuration we come in here we create a new one how did you even know to do that [Applause] because you went to ashley's blog which led you figured which led you to life coding happy hour [Laughter] so it seems like we as a community are just slowly kind of piecing this together a little bit at a time and uh the guys over at uh the live code happy hour they're like giving us little tidbits to push us along the big shots they're teasing they're they're feeding us i just want to know where to put css to make it okay so let's go not the service now looks bad portal app shell or now sorry test test portal we'll just go to test portal for now uh let's see do they fill out anything else you don't know how to do that it's really average am portal home you know i'd already have this done if we were doing it in service portal just saying uh robert says does someone have the instructions to the instructional video and i okay all right update and then it should show in ui builder hey there we go test portal shell okay so you have to not only create you got to set up some basic configuration first you've got to come in uh so so basically if i go back can i go back does the browser back button okay there we go i was a little worried that the browse back button didn't work you can never go back so you can never go back all right so what we did was we created an experience in the platform we clicked new uh which this is the record we created we gave it a name we picked our app shell ui which apparently locks after you've selected it so keep that in mind that's terrible we selected the portal app shell and then you had to choose an admin panel um do we know what the admin panel does we created a new one uh let's see ux app configuration um i'm not sure on that one that one may have been one of the if if that table existed the last time i was digging into these tables it was one of the ones i was having trouble figuring out but what i can say is that um adding that admin panel is what added it to this my experiences and once it was in the my experiences now i can open it up and actually start doing something with it create a page so we're little images are so cute we're getting there so let's just start with a home page and we can choose a template and we've got a url preview which mirrors the urls uh that i was looking at when i was tearing apart the ux framework it's generating those urls shouldn't be test home because all your other stuff is test something no this one's not a test this one's for real for real real i mean it's in a scoped app that i'm gonna delete anyway so so we've got a few different templates here which i wonder if what are page templates page templates are predefined pages that can be customized to fit your needs you can choose to reference or copy a page template but can i choose to create a template we'll get there this blog has a step-by-step for setting up a public-facing portal replacement oh i find that very interesting because i am in the mid which which blog is that andrew he's getting ready to post the link i think all right so i'm not i i'm not going to do a template right now i want to do it from scratch to start i just why can't you just take the easy way because the hard way is how i learn you and i are just like the exact opposite i'm like give me the out of box one and let me poke at stuff till something moves the more times my face hits a brick wall the more i learn that's very true i can testify that uh let's see hey your pa okay i'm gonna slow down and i'm actually gonna read the text in front of me success your page has been created we also created your first page variant for you page variant variants are cool in the future you can create multiple variants for a page to target content to a specific audience such as agents or managers so i guess this is similar to the role controls and portal maybe oh servicenow ninjas okay servicenow ninjas has a step by step that's cool all right i'm gonna go be nosy and look for this okay all right so for variant i can add visibility i can set conditions that's cool we'll use those at some point required parameters uh add required parameters order pieces of data that are required by your page to work commonly used required parameters are okay so this is my url parameters that i can add to the page uh i guess i can use that in various actions optional parameters these are optional all right i hope i can get back to that because i'm going to create click done let's see okay so again this is my first real big dig into ui builder at all or anything quebec so i noticed that i've got my application picker up here that's cool and in a familiar spot let's menu create page create variant duplicate variant edit page settings edit variant settings edit experience settings so page settings delete sweet big red button love it uh i can change my path and name i found the service now ninjas dot blog they've got a pretty good series it looks like on oh cool we'll have to uh dig into that one a little bit more is it just servicenow ninjas dot blog dot blog okay so servicenow ninjas dot blog thank you andrew uh page i can change the page template that's cool what are experience settings branding and theming you can select themes create themes i like it create a theme right there it's not the same we'll get there that's kind of that's lulling you into a false insecurity that's okay that's okay so so far i i gotta say once you get past that initial configuration stuff i'm feeling a lot better about the user experience once you're in the ui builder it feels like a lot of love and attention was paid to this yeah this this i got to play around in this a little bit and it's fun it is a lot of drag and drop and you could just like play out yes you can just pick the layout and you're done okay all right so that's for the container layout mm-hmm okay and then you can like nest containers kind of like how you can see your component i guess i have to add a component to configure it so this is my body tag get him a body bag what is that from um that's uh karate kid oh it's been a very long time i've seen karate kid i'm sorry i've been watching uh i've been watching cobra kai so all the old memories come back all right so out of components we've got good lord oh there's lots of components you can um all right i'm gonna sit down why do you get to sit down because i got a special chair you got a stand-up desk i can't sit down pump your hydraulics up it don't oh my goodness well seems like my 20 dollar chair is better than yours because i didn't want to stand up desk well you don't want to stand up now um i think you can like you can uh resizeable panel pains panels pains pains pains you can uh search i don't know if you can narrow it down with a star rating you probably want to start with like the containers up there up here yeah hit the little plus open up that bad boy i don't know what i did i think we added a container that's not what i thought it was gonna do but now you have a container can i move it out of there or is it stuck [Music] let's delete that component and then we're back to here okay i feel okay with that let's add an action bar okay so that adds it to that container and column reverse row row reverse okay so flexbox basic flexbox xbox um whoa what was that what is this button well click it i think it's selecting the parent yeah that's what it looks like it's doing it looks like it's moving up one level nice okay so we've got body main action bar configure component add before add after delete component and we'll delete that one we'll get there okay so then from here i can so now i'm in maine that brings me to body so it allows you to more easily go up and down the ladder so to speak depends on how you look at it i guess i'm s okay so over here is my okay i got it so over here is my tree so you can actually navigate the tree over here more than likely so let's add a component here let's add that action bar back yeah see i can now oh that's cool that is nice all right and body doesn't get any peers so that's why you can't add before or after i'm guessing i don't know let's find out add component let's see if we can add okay so depe so this the add button is going to change depending on what you select over here so on the body i can add some really high level components confirm confirm modals something custom modal viewport okay what can i do for main component or modal and then once i'm inside of main i can add components before after or modal fancy all right so add component activity stream agent assist agent chat alert qa attachments button iconic button stateful canvas placeholder checkbox collapsible color picker comparator confirm message contact card container how about just they have a card on there too i want to say list menu heading those are like header but not the header i'm looking for i think all that's in the actual is part of the shell yeah i don't think that's part of this this is like just the page content you know in service portal the header and the footer yeah yeah all right well before i get digging too far into that let's take a little bit further of a look at what we have here within this ui so we've got our variants which is different pages different variations of the page for different users so i guess instead it looks like uh whereas in service portal you would control the uh control a widget's view by role like you could go into a widget instance and change the role that applied to it yeah it looks like in ui builder what we're going to use is page variance you replace the entire page based on role um so then we've got our content panel which is our tree of components so that's like your html tree and then over here you can see oh display flex and display grid oh my gosh that's cool oh display grid or display flex that's that's going to be golden and i can change the css of it directly in here yeah but it's i was having trouble with this because i i couldn't put like just the class in in like nest the css so i'm not real sure how that works yet okay that's where i left off a couple months ago css styles all right well here let's try some things go would you bet sell let's add a container all right so i got can i rename container one i would love if i could fine be that wait configure component standard search layout events config no config options container one simple container component id container one edit component visibility hide component okay so this looks like a data property so it looks like we can use a data property to control whether or not it's hidden what's a data property okay so in in the ux framework world everything is driven through action so like your ng clicks type stuff is replaced with actions um there's a central state model that is controlled in a store you know how i showed you in some of the yeah in some of the store-based components that i've built on service portal so there's a central store that handles the data you dispatch actions to the store and then depending on what you dispatch the state is updated based on the action so the state contains properties and those properties get pushed back down the component tray and so the data flows in one direction actions push it up to the store store processes the actions store pushes the state back down the component tree and that is how it always works that flow is how everything happens the props coming back down is how you can hide so uh you know how you would usually use ng-click to change c dot data dot show component show show something yeah properties are the c dot data dot show something oh okay uh and actions are your ng click loose correlation here because they're two they're so different they're two completely different models of state management uh service portal and angularjs being what can best be described as uh no sound state model every component has its own state and they all talk to each other and it's a bunch of shouting um you did you did a thing on this that widgets are temperamental and they don't play nice you know yes yes they're temperamental and they don't they don't play well with others um but the ux framework is more react redux based which pushes data in a big circle it's terrible the data flows in that circle at all times well it might be terrifying but for more complex uis it's really really stable and very predictable uh because all you have to do is read the flow of actions and you know what state should come out of it yeah so it's more predictable and it's easier to troubleshoot on really complex uis uh and then we've got a test value where we can test true false none okay so that's for component visibility uh then we've got ha yes we can change the label my new container priorities man and we can change the id i'm going to leave the id alone for now because i don't care uh actually no i do care naming is important web is on this call and he will was our variable name burn me alive if i do not name it properly make it a long variable name because he won't like that well i'm eating them halfway all right so so then we can change the layout and then there's events has no configurable events so events i'm assuming is tied to the uh is going to be similar to the react notion of events which is what ng-click actually is so ng-click is something where you bind to the event that's happening the function that gets executed is somewhere in between uh and and uh an action handler i guess it's kind of like an action handler um but so i'm guessing that these these events are related to react events which is basically you can specify that a component emits certain events you know a button you can click a button yeah so that allows you to bind actions to the component event so events is what happens when either users or the system itself interacts okay so let's go with layout because we're dealing with a container two rows by two columns let's just start with something like this element selector specificity it's interesting to me that it starts with the star uh let me check something real quick shadow dom asterisk because i have if it's some weird not like actual css i'm gonna be mad well i don't think it's i i don't think it's it is css but i suspect that we're dealing with shadow dom components um shadow dom css asterisk [Music] styling the host i just want a simple answer asterisk i mentioned light dumb don't bleed into shadow dom no way of being stylized i don't know that one's interesting i'm gonna have to find out why why that why is that an asterisk that is such a weird one to have there let's just manipulate it and see what happens oh it's it just kicks right away that's cool but yeah that's cool and there are certain parameters you can control in there but like if you put a what i was having trouble with i put a component in there and then try to manipulate the css of that component and how it looks it doesn't seem like you can do it from there let's investigate the dom structure and let's see if we can figure out what's going on i can't hear you say dawn without laughing about it i'm 13. all right so already i'm seeing a bunch of shadow roots here so we're definitely using shadow dom which shadow dom for the for the un uh uninitiated is basically a special um spec that has been created in uh in in the new web that sections off your web components so basically if a div is within a shadow component uh what's called the light dom or everything that's outside of the shadow can't push styles down into it technically i think there's ways around it and i think there's ways of manipulating it but basically it's a way so that if you specify a css style outside the shadow root it's not going to contaminate the shadow root which makes web components possible because you can create your css within that web component and trust that it's going to work and not be overridden by some stubborn uh higher level with an important flag on it yeah like we see in service portal in any place yes i've thrown many a notebook over that so let's see so we're dealing with shadow root here and what on earth is that asterisk so simple container simple container we added a container component slotted star [Music] that's display block where's my width hundred percent that's what i want to now probably not that probably not that um is this pertaining to that no because i should be working on the container oh with hundred percent okay so let's see if i change this hold on let me dock my i hate docking it oh well it's good for it's good for tv you're doing it for your public really uh let's just start with some stupid background oh gosh that's going to be a habit that's going to be hard to break did you click i i did i did control i did ctrl s from from from the service portal widget editor i did control s to try and save and uh it tries to save the web page so keep that in mind it actually happens on change it seems so like if i change this to blue it changes automatically and you can see it up here changing color and you can see this element style right here okay now uxf page simple container that's the component that's the web component okay so when i am changing the asterisk what i am changing is the element style of that component so it is being changed in the style of the html tag right there see it yep okay so that is what that is changing which is why if you add for example let's say let's say i wanted to try and grab that sn layout i don't think it's going to work and we get a little oh selector specificity do not use empty rule sets that's fine we can live with that um this is interesting uh sn layout background color purple red it's shorter so i don't honestly know what happened there i don't know if it's filtering it out let's try this let's try giving it the now id well now because that's now id component id those aren't real ids so they're fake ids huh gosh yes they're fake id's you dad joked me all day oh wait down here look only global star css block will be considered okay so basically what's happening is the system is ignoring anything else i put in here it is only acknowledging this star and that star only applies to the element css so this is like i don't even think this is creating a style sheet this is being internally processed somehow by the framework to generate something that's not a style sheet but instead is a style tag within the component so does it oh it only does it for the thing and you can't access stuff within if you're on the container or whatever let's let's take it from let's take it from a service portal first mindset um basically what's happening is uh in html they're creating something that's like component name style is equal to c dot data dot css oh i see okay and it's just put basically it's like an inline style tag exactly so basically what we are entering in this css styles block is not a css style sheet it is data it is data that is being processed by the system and then it is being translated into the style tag here i mean which realistically would be pretty trivial code wise because you would just strip out the asterisk bracket strip out the close bracket and anything after the close bracket and then you could basically take that remove the new lines jam it into a style tag and you're there yeah i don't know if that's what they're actually doing they might be doing something more sophisticated in fact i have to have to have to have to what do you have to let's see if there's any aha i thought so the little red bars over there all right so if you look here at rule or selector expected semicolon expected and one more what i did was i tried scss nesting that's not working it's not uh it so let's try one more thing yeah i tried that that didn't work i got mad dollar sign [Music] we'll just give it a random name okay so this is not accepting scss at all so if you're thinking those kinds of variables we might need to throw those mindsets out um let's see if it takes doesn't take at so it looks like it's taking pure css in here there may be something that we discover later on but as of right now it looks like it's solely taking css css so and it only affects that particular tag which isn't useless i mean it's very useful there's there's definitely plenty we can do with it but it's it's very focused it's very focused on what it's supposed to that's a really kind way of putting it well i don't have a problem with it because it's just it's it's learning a new system i don't i don't view it as a problem i view it as different um one of the things i really like about web components and the direction that the new web is going is that it is isolating a lot of behaviors it's creating more reusable components by protecting them from everything else so instead of doing like one widget 10 times that does the same thing you can more easily configure right because you can snap together the different little pieces and parts right and realistically what you would want to do is create components that accept some theme level properties that accept some kind of configurable properties that you can control from a high level so if you have six different components that all share border color for example um you would want to accept those as properties on the component and that allows your components to manage themselves but take still take input from the outside world so in that sense you end up with less spaghetti garbage which was a huge problem with that technical term yes it was a huge problem with service portal was because you could do anything anywhere any way you wanted you ended up with people creating these widgets that were massive monoliths with really poor code structures that were extremely difficult to maintain um and you know ux framework we'll talk about that too didn't you i did i did i did well i mean i created a lot of monsters and monoliths myself uh that you know future travis went back and was like you stupid why did you do this um you know any better look look at the created by and it's you know pass.travis um so uh you know been there done that one too many times and you again you know i learned things the hard way by beating my head against a brick wall so um i really like the direction that ui builder seems to be taking so far which is a much more controlled approach as long as it offers the options for properties and pushing those properties down and configuring from the outside this could be really cool uh so let's continue here we can add different components here like we were talking about let's create some action bars let's actually go in this direction so you can see all the action i yeah i want us so we talked about events okay so refresh requested action bar refresh requested link to destination so we've got different event handlers remove alert clear alert set loading state update client state parameter refresh refresh refresh okay user preference updated open modal close modal add parameters to url so that would add parameters to url would be like your dollar sign location which is nice because that gives you a really handy place to put that so you can grab it from your component and utilize that information it does uh form header updated screen status changed well that's annoying i'm doing stuff leave me alone um okay so um that one i'm not gonna lie that one threw me off a little bit because with the action bar i was assuming there would be like click or something i don't know let's delete that element let's see if we've got just uh let's do button let's keep it dead simple to start button we've got different variants primary secondary tertiary positive primary positive secondary negative primary oh look at there that's cool i dig that i i like the different variants they provide there but what if you don't like that shade of green come on come on dynamic data binding then you can change it by data binding it looks like passing properties through the system that's what it looks like anyway uh or a scripted property value evaluate property api params.api so i've got access to some kind of api for this learn more format code all right now code editor is rich text interface it supports css html xml javascript json debugging blah blahs okay let's see so i can change the variant through that i can change the size to small medium large and change the label out of a box i can change an icon that's cool okay can you do hover effects that's that that's really a really slow response time on clicking that that's going to be annoying um disabled okay cool i can make it disabled which can also be controlled by data binding so we're definitely going to have to learn about this data binding stuff [Music] from from the looks of things though it looks like they are taking a very codeless approach to the ui building yes you can do data binding but instead of doing data binding through extensive scripting and making typos and everything else you select the data you want to bind to you select event handlers that manipulate the data binding but you still have to understand what those data bindings are right it's it's it's a very proprietary system where you have to learn how they do things in order to make it work that's what it's looking like but there's a lot it's looking like there's a lot of power for uh manipulating um aria properties so this is your uh is it pronounced araya or arya honestly i don't know because i've only ever seen a label and everything i've only ever seen it in writing i've never heard it spoken so i don't know i'll look this up because this is important okay not much info on how that's used we'll figure that out though once again we've got csu let's see all right so first of all let's go to the button component uh no i want the button where's the button button or are you button now button now button okay so let's manipulate weird where did that put that where is my background color red sitting hey everyone what's up gary simon so today we're going to be checking out arya arya is he is he legit official i don't know or is he like me just making it up as he goes along probably making it up as he goes along um but this video's got oh let's see um let's see i say we go with arya because that's how i pronounce it fine we'll go with arya this sounds better too where did that put the red that's what i want to know oh it wait what so are you in the sky so the button the button is in the component the button is not the component component section well see i'm editing the styles for the button over here and i changed the background color to red yeah and that made this whole block red as opposed to just the button because still the styles for the container are not necessarily well if you look at the html now button that's what we're changing the color on that component contains an actual button html element which is not being modified um and because this only accepts what's within the asterisk i don't think that we can actually uh walk into the shadow route even if it were possible i want to say i've seen stuff that indicates that you can jump into the shadow root but uh don't quote me on that there we go button clicked so when i click the button i can close a modal add parameters to url it's basically the same events so let's look at modal closed modal instance id add parameters to url and basically everything can be bound to a data property it's extensive there's a lot to learn here there is a lot to learn i like that i can name everything not that i'm doing it right now but it's like naming your photoshop layers you gotta do it so you can keep things straight that is all right so basically everything comes down to that everything comes down to to to a lot of editing over here um like i said i really like this ui i really like the user experience of it as well this has been really cool let's see okay we're gonna hope not yet not yet that opened up a whole new can of worms i was not ready for all right so here let's do this i'm gonna select a container i'm gonna add another component after container so containers are components everything's a component everything's a component in this and i really like that i really like that approach um that means you can build any of it right in theory hopefully let's say let's just check a list oh my goodness oh my goodness oh my goodness all right so let's see that probably has a whole bunch of different menu selection select menu to connect table i didn't yeah and there's definitely a delay there is a bad delay wondering what's got the okay so i can change the title list id what do you mean the id of the list thank you that's uh gosh that's that's priceless yeah they're still working on this uh helpful help text um list id i think this is going to be the the identifier that it's so like if i wanted to refresh the list in some form of form of data binding in here when it remember when it asked which modal do you want to open yeah and it asks for the modal id i think that list id is what is used in that data binding for events related to lists yeah working then you know like if you click the button it knows to open that particular list right edit filter let's just keep it simple with active is true some of the ui is really slow and jittery and other pieces of it are buttery smooth and i don't know what to do with that that's jarring view will go let's go with ess view ah sweet okay so view is your internal view when you create new form and list views yeah there's an internal name to specify ess is the common one for the the end users yeah external what is it end user self self-support or employee employee self-service ess employee self-service i knew what you're talking about it's the portal one right it's commonly used for the portal line so columns so what i can override the view what takes precedence what do i do i control click no do i drag and drop no double click no not click and drag you just click one and then hit ok yup i can only add one at a time well like do the the shift and hold down it doesn't work it doesn't like you that's odd it doesn't seem you could connect data binding like you can everything else and that's cool i don't know that doesn't seem it doesn't jive now that seems like a bug not a feature i have a feeling that will be changed i have a feeling that will improve i have a feeling we'll get slush buckety in the future dude you can change the label on the button that's a step up like you know the what was it we were messing around with the other service catalog button but for some reason the columns have now overridden and it won't go back i'm going to take a risk you did not save your page i did not and the control s does not work like it does in the service portal editor i have to click the save button up at the top you have to click the save button at the top or it does not save your work travis yeah you have to click the save button yeah did we learn something today we learned something very valuable save your work save early save often do button toss that back no i like the list i want the list back i and there's a simple list too let's see let's go back to incident all active ta all acted let's change that to incidents list id let's see if i just start typing no that's annoying [Music] my active incidents yeah that'll work edit filter active apply save okay view pss save i'm not gonna mess with the columns again because that that didn't end very well it didn't it didn't i don't i don't know what happened there um max rose 20 action config i wonder if this is related to the declarative actions that uh that ashley was talking about i don't know hard to say configurable workspace action config we'll have to look at action configs highlighted values config so highlighted values config is something we'll have to learn about header size that's cool we can manipulate that heading level change it to an h3 did it i don't know it's kind of what i was assuming it would do there's a little circle by uh heading level what does that say what does that give you um go down go down highlight about heading level what does that say configures heading level are you freaking serious there's some captain obviously um hold on let's do this where's my little that guy no that's unhelpful what was it set to before you put the three in there one um last refresh two minutes ago okay i love this i love this oh that's neat i didn't even notice that so um the last refreshed indicator is really really it the reason i'm so excited about this is because uh there is a a whole line of research and investigation into cqrs event sourcing systems and how to put together uis based on this essentially you issue a command to the system um and the command does something but not right away uh there's a job processor behind the scenes so more like a bureaucracy than a command well the advantage is you can get higher volume transactions because you're cueing up the commands instead of wasting time running cycles and a well-behaved client can take into consideration what changes are being made and behave accordingly so when you have a last refreshed indicator this is one of those things that a lot of the cqrs event sourcing folks talk about from when they start talking about uis is that uh by indicating when something was last updated you can defer executing actions immediately you can queue up the action server side and then let something like flow designer perform an asynchronous action the net result is a much more efficient system because instead of having and this is really important in your csm spheres where you have really high volume traffic and especially government sphere where so many systems were taken down by high volume traffic one of the problems is when you try to execute all the actions when the user clicks a button it starts taking a long time it starts locking up the database it starts locking up the system and everybody's closed down because of it including something that's perfectly cacheable like a page read when you move to something that is more cqrs oriented and more event sourcing oriented um cqrs is command query responsibility separation you're separating the responsibility of issuing commands and pulling queries what happens is is you can queue up a lot of commands really quickly it's a simple insert and then nothing else happens the database doesn't lock up as fast and you can have workers behind the scenes which is exactly what flow designer is processing and handling those accordingly if two people issue commands at the same time that conflict with one another then you have to have something where uh you know first command wins or something along those lines but at that point you can issue a notification on the user side that hey you asked us to do this but we weren't able to because something else happened in the meantime that allows the user to replay that command they can just click and say okay we'll tr try it again or okay well let me edit the command and then retry it and that provides a system that is more responsive to users and lets them interact with the system and interact with the rule sets of the system a little bit a little bit easier while also providing better performance overall and this is a major major point of consideration for uh like i said csm style systems government oriented citizen manage uh citizen request systems where you have large volumes of of potential customers hitting the system all at once there's only so much you can index a database before performance comes to a crawl and the question is do you want your system to be completely unresponsive or do you want to have the ability to continue to manage some of those requests but just do it at a slower pace and obviously the the the answer is you want to be able to continue to tell the user what's going on with the system oh yeah and having these sorts of last refresh type systems is kind of a ui step in that direction if you pair it with uh something like flow designer which enables asynchronous flows or asynchronous business rules that's the second step then the only thing you're missing is a command queue where you log all of your commands into the system into and now you have a full loop system which is basically a server-side uh seismic uh framework so sorry huge huge diversion down a completely different path um that's really relevant though to what we've been talking about and working on here lately yup especially with those high level systems and last year with a pandemic seeing so many unemployment systems and everything else just completely tank yep exactly exactly and that's that's what's got gotten me reading up on a lot of that stuff is the uh is dealing with a lot of those government customers and helping them through their issues and having to deal with wild questions like how many nodes do we stand up to handle this and the fact that you know performance is a tough problem to solve even when you're dealing with a high performance system like servicenow even when you're dealing with high availability systems with mult multiple nodes you still have performance issues that uh that come into question and the architecture you use when dealing with the database has a huge impact on that um now modal so there's my record list i still can't figure out for the life of me what this h what what this heading thing has impacted a component even inside the components this makes me feel so good about this now heading aria level three let's change that to where'd it go down here heading level one yep there it goes it changed up a little bit right there h1 let's see if it changes the h3 as well it does that's cool okay so you can change the heading level of that title it didn't seem to do anything about the styling of it um but from a semantic standpoint that that is still important um especially with the uh aria level being changed as well i love the care and concern that servicenow has put uh into the accessibility features um for screen readers and stuff like that that's a great step for that go can you click on the h1 no no over there where you were in the code over here yep i want to see oh well i can't read that uh well let me see if i can let's see if let's see if ui builder works on mobile um man this is still sucking up a storm really come on editor work with me oh well that's the best you get now heading dash header dash primary has no margin if you look up there on the right where it says uh that that top that set of classes right there that gives you an idea of how the uh colors in the theme are yeah you can see the vars you can see the css variables in use uh so in theory somewhere we should be able to manipulate some of these variables so in some sort of theme or something or other yep um and this is this is something that for since day one of service portal i have been asking for and submitting requests to get the components to add more configurable capabilities uh and it just service portal never quite got to that point where you could go in and easily manipulate the styles all of these variables in here is a really promising look that maybe we will if not today we may eventually have the power to manipulate some of these that would be really phenomenal especially if you can build them in in reusable themes that would be phenomenal that would be really nice if we can figure out how to do that i'll be a very happy girl hide title hide records so you can hide a bunch of stuff i mean already you're seeing the instance options mindset of service portal taken to a new level a whole new level and this this sort of stuff is going to be game changing because i mean yes for you know for people like us we do want the ability to create custom components yes we want to be able to uh you know really razzle dazzle in the system uh we want to be able to do heavy customization but even for people like us not having to like go in and cody cody like sometimes like that eight million times like absolutely nice absolutely not having to worry about going into uh the css and manipulating some arbitrary property that might change i still remember when the heading i think it was the the it was like the heading widget it was the search yeah it was the search welcome the home page and i had all these style sheets designed around the h1 i think it was and then one version later it was changed to an h3 and it totally made sense from a semantic but i just completely table flipped uh over over how such a simple change broke the style sheets that i had and i had to go back and fix and i had to go back and talk to other customers and say look this is going to happen when you upgrade this is what you have to change i'm so sorry yeah that's the trade-off i deal with my clients because a number of them you know they want service portal and they want to look great they want it custom but they'll give me like a week to do it i'm like all right i'm gonna give this to you but this is what you get you we don't have time to customize a lot of widgets and make sure that those styles are gonna be future proof so right you can call me when you upgrade and i'll do any adjustments i need to do right so i'll trade off your face but so i'm really glad to see all of these different options here in these components baked in uh because it gives you a lot of power with really low effort um you know and and from a delivery standpoint it also allows you to to uh you know customers will be able to leverage folks at uh you know admin and lower level developer uh you know if if they're not managing a huge monolithic system they can get away with just having lower level admins and then you know calling up for help on really complex stuff yeah and the amount that your lower level admins will be capable of in this system is far above what what they could do within service portal and we experienced that at glidefast with our marketing team using the service portal as our public site for a while one of the reasons we moved off of it was because we just our marketing folks needed a system that already had a lot of the options built in where they could drag and drop and control and manipulate and just we were going to have to go in and build all those options in because they didn't exist in service portal as instance options initially i feel like this style ui builder is something that that our marketing team would be much more readily able to use oh yeah and you know from from a decision-making standpoint at a customer that's that's huge that's that is a huge game changer to be able to have your admin level folks basically gain super powers overnight to change these portals and manipulate things and you know not have to call up the the big guns for every little change that needs to be made yeah especially if you're keeping with this out of box styling and what have you um i would guess that a lot of the heavy lifting the big guns as you will will will come when it comes to uh not just placing these components where they need to go but making them look different and uh customizing like the shell the headers and different things like that especially uh as we've already seen just like knowing your way around all the different things outside of just dragging and dropping right you know what all the the ux page registry and all those different things are yeah and and i'll be interested to see how this affects us from a consulting and partner standpoint because you know as you enable as you enable the customers and clients to be able to do more with their portals i mean obviously with service portal if you weren't a service portal developer there was only but so much you could do with configuring a portal it was one of those really strong theories really strong foundation but i don't feel like it ever delivered the promise uh in terms of exposing those capabilities to the customer um but i tell you what i have a lot of fun being told keep it out of box hit okay this this i feel like hits closer to that and i'm curious to see how that starts to impact us oh yeah from the partner standpoint you know do we end up getting less portal work or does the portal work begin to change do we begin to move into more of a consultative role in terms of user experience and in terms of uh what is actually going to drive customers you know does this free us up to move from building lots of custom components to building uh you know analytics and building uh you know conducting a b testing and conducting the different types of experience analysis yeah things that are actually going to drive how well the portal performance or the experience whatever performs you know right and i guess that and i think that was one of my biggest complaints about service portal was i felt like we as a team spent so much time rebuilding a lot of the same stuff over and over again in terms of just basic ui fodder um that we never really evolved to the point where we were having the really hard discussions about what is actually going to impact your self-service performance these portals are not there just to look pretty these portals are not there just because ah well i guess we need one everyone does one these portals are supposed to save you money these portals are your tier zero these portals are the way that you deflect those incoming service requests and being able to move into figuring out what actually is going to impact that um because with a lot of my clients you know service portal ends up being a uh a tag on there and i'm told to go in and you know just make it pretty or whatever and i'm like but this is the most important part of your implementation this is where the rubber meets the road this is where you get that return on investment and this is why i educate the design it's not just throwing a coat of paint on it this is design is not just about making it pretty design is about how it works how it behaves what they see how they feel about what they see because at the end of the day if they don't if they're not comfortable with if they don't like how your portal looks they're not going to use it and if nobody is using those self-service tools you have lost so much for you know the investment that you put in with servicenow for with servicenow right um but i i think that with this as a partner you know with a lot of the components already built out and more options and we're having to spend less time actually building you know the same types of widgets and we can only build components for uh like special cases and all that maybe we can spend more time focusing on analytics and uh really getting into what makes these portal portals tick and because there's not a ton of good because i've looked there's not a ton of good information of ux studies on specifically on help desk sites yeah there's not a lot of the ux studies you see are on like sales size conversion conversion sales conversion right so for you want to keep them there as long as possible i'm like no my job is to get becky over in the clerk's office in requesting a reset to her password and out and on her way right right what you what you that that's a really good point i never really thought about that before but the purpose of a help desk site is the polar opposite difference of where traditional ux studies are done on sales conversion on sales conversion you want them there as long as possible you want them to keep coming back to your site and you want to lock them into your site and you know basically make them psychologically dependent on your site but from a help desk perspective you want them to get their answer and get back to the job that you're paying them to do the more time they spend on your help desk site the worse off you are i that that's a really good point i never really thought about it from that perspective before but that does uh call into question even some of the uh ux nuggets i've tucked in my back pocket because i got to go back and look at some of those research now because it probably is pertaining to sales sites and getting them to stay on your site and browse and find more that they want you know i'm very susceptible to the ux of hey buy stuff on the internet so case in point i'm not gonna lie it it irritates me just a little bit not like for real real but just a little bit it irritates me just a little bit that i help train you like two years ago and i feel like you're like you've already completely surpassed me in terms of building portals well i also had like eight years of experience design um before this so that helped i have been replaced you have not been released it's okay that's all right i look at some of the others on our team um and they just they still could script circles around me i'm just you know i specialize in color theory and you're still in my service now google it's okay i still have a place you do have a place um so let's see moving on here we got tangented again well you know like you do uh so a generated id that represents a shared list and its applied conditions this is a master this is why i say service portal is not going away anytime soon this right here wow that just here's your new tool we're not going to tell you how to use it but here it is it'll get there it'll it it'll it always does it but that's just it's gonna take time but that's just pure joy when yeah in like the worst possible way i don't think joy is the word you're looking for it might not be stockholm syndrome there you go stockholm syndrome i love you i love you please may i have another information to display when an error occurs so we can change what an error says can write and be like yo if we know what the object format was presumably selected records controls the ability to highlight one or one to many rows on the page do i dare yeah it is a master list fantastic good to know um i gotta say though i love the yes the links here have no information behind them whatsoever right now but i love that the links are right there in the ui once again once this documentation is built out the fact that all the help text is right there in the tool is just incredible that's nice this is just this is from a ux standpoint this is leaps and bounds above anything servicenow has done before this is this is really promising in a couple of years this is going to be so easy for somebody to jump in and figure out oh yeah configure declarative action event mappings does not have any handled events now i wonder why that's down there action config all right well let's take a look at the action configs right now edit create new yep declarative actions so i think this is some of the declarative action stuff that ashley has been uh writing about on her blog so we'll have to take a look at some of her content uh to see if we can't get up to speed on this without me beating my face against the wall that sounds like you're giving me homework uh i'm giving myself homework okay uh highlighted value so i'm assuming this is i don't know what that is nope i i i i mean just back away back away slowly just back away slowly somewhere there's information on this and if there's not i will dig up something in the system to figure it out um styles back to css and we'll go back to css styles and then we've got a whole bunch of different events is this tied to the same yeah it's tied to all the same event handlers so i've got a lot of questions at this point in terms of can we create new event handlers can we what are all the capabilities that we can do behind the scenes there's a lot in here i still have to figure out how to put headers and footers on this thing which i remember being somewhere over here yeah header settings navigation settings we'll dig into all that stuff eventually um at this point i think i'm going to start wrapping it up for the evening i i've managed to get an experience created which thank you to the life coding happy hour team would not have would never have figured that out without you guys um where did my no x there we go uh we've managed to mess around with some of the components mess around with some of the component specific css we've done some adding of different things real quick can i drag and drop i can we'll have to mess around with some of that because it looks like once you set your containers it looks kind of hard to mess with those i don't know we'll have to mess around with the drag and drop at some point we'll mess around with uh some of these action and declarative date data bindings um but so far there's a lot of promise here there's a lot i still have to learn we haven't touched anything down here and that looks really cool uh this stuff down here so i don't think you and i have the same idea about what cool is okay but uh so next time we circle up we'll continue down the road of breaking apart ui builder um and continue to see what we can learn so thanks everybody for joining us and i hope to see you next time have a good night