[Music] welcome to code creative i'm travis tolson and uh once again with me today is sarah tolson i'm starting to feel like we need to change that intro if you're going to keep coming back well yeah maybe let's see i still don't have a mic i just kind of fall off here so how's it going andrew glad to have you back again all right so this is part two of investigating the new ui builder with the uh specifically the portal experiences uh so last time if you joined us it was a hot mess yeah yeah that's it a hot mess uh can i just stop and acknowledge how cute these icons are i love them oh gosh yeah they make me so happy so who whatever designer is out there creating icons for service now i salute you but anyway sorry important things ui builder um so i've leveled up a little bit in part thanks to uh the information that andrew shared last time uh with pointing us towards servicenow ninjas yeah that was really helpful at least for him anyway he's dug into this a lot more than i have so um they're they're and i'll be honest i've only gone through like a couple of theirs and then i dove off on my own but i am going to use theirs as a resource again tonight uh but they really helped get me off the ground in terms of getting an actual experience set up uh so tonight i'm actually going to reboot the process i'm going to go from square one uh because i haven't actually shown sarah this yet and this was one of the big reasons that i actually started down this road was sarah asked me to so yeah that's that's pretty true honey do the thing honey do the thing honey honey are you doing the salary survey i need you to do the thing that's about how it's gone right it has it has um all right so let's go ahead and get started with a brand new one um now first of all i'm going to create a new application oh or no my company's applications i guess i could technically just go with the new hotness and do the big green button so let's do it that way uh so i'm gonna do create app and i'm gonna do with code uh because that takes you to studio i this one takes me to studio this one takes me to what i know and love and this one i haven't done yet and i'm not ready to go down the rabbit hole on that one are you scared a little bit so we'll kick that off studio opens up we're going to create an application what are we going to call it um we'll call it the code creative experience that sounds like legit doesn't it you're gonna have to make that a thing the the experience branding that servicenow has put around that has just been it doesn't matter what you call it it kind of elevates it it does it does the creative experience the bathroom experience i don't know that last one might have been a little too far um i'm still laughing about that but anyway all right so now i've got the code creative experience app created i'm going to close out a studio now because i don't actually need it you'll see i've already gotten that selected automatically so then we're going to open up the ui builder and what we want is this stream safe for kids andrew asks it can be if you want it to be questionable even if oh stop it um i'll make him behave oh i'll smack you if you say a bad word so they'll the kids will know there are consequences for your actions all right so you can see here i've already got the glide fast experience in there but we're doing the code creative experience this time so in order to get uh an experience to show up first we have to create a platform so you go to the pretty page to go back to the platform it's okay i'm pretty sure that button is gonna do better in the future so we're gonna create a new one code creative experience andrew asked me if i was one with the experiences yes you're talking to a ui person i am all about the experience so then you can see i've selected the portal app shell uh and that's just setting up your basic what's an app shell the app shell is kind of the the chrome around it so it's your overall page template the app shell is going to load on initial load and then every that's your single page application basically okay so that's the initial html that loads everything after that is loaded dynamically does that include any parts that are normally elsewhere from services basic uh so for the portal app shell it's your header footer for workspace app shell it's that sidebar thingy it's a little more than that for for the workspace one because the workspace one i think includes the sidebar the tabs the top bar i mean uh that workspace is nice so your your app shell is a pre-configured um layout with different regions defined where you can drop other components in so it's kind of like the frame around your picture it is it is um because i've created a page on its own it'll look really lonely without a header and a footer but i couldn't figure that part out so then this part here the the auth routes and i also gave it a url path that's the url that that's the the that's like the that's the backslash right right um so this part here is what i one of the parts i picked up from the now ninjas guys um the guys did not say anything about this json so basically the off routes is some special magic incantation that specifies that your login goes to the login page and your logout goes to the login page i think so when you log out it redirects to the login page i think that's what it does i haven't really tested that aspect yet um but so now i'm going to save so that's json voodoo got it json voodoo there's a lot of json voodoo so next uh we have to create an admin panel this is this is what's actually going to expose it in the ui builder experiences so without that you're never going to see it in the list even if you have everything right hooked up right so uh what we need is the ux app config so code creative app config landing path is the the landing page what is your your first home page for it call it landing page because you can define what it is so right now i've defined it as the home as slash home so it'll be slash cce home or something to that effect so now we're gonna save save your record okay i'm gonna keep this open for now i'm gonna switch over to reload and that'll show you that now it's in the experiences so now i can open this up and i have no pages yet so i'm going to create the initial page and i'm not going to use a page template yet uh page templates are really cool though so they do okay so first of all a page template can be used in the traditional sense of a page template where uh you know it's just predefined layouts a bunch of data on it and then you can edit it after the fact kind of like the rows and columns and all that in the page designer for sure yeah sorry i'm trying to compare to what i know and i know there's a lot of other people out there coming from service portals so but but but no i don't like but it has a superpower oh so in service portal you know how you have to do page route maps because every page applies to every portal yes it makes it doesn't work that way in ui builder what um each page is specific to its experience but you can create page or there are page templates i haven't figured out if you can create page templates i imagine you can uh that would make sense if not i'm sure it's coming but basically you can select one of these page templates select the 404 page template and that pulls the template into or it creates a page using that template in your experience and you can choose if i can show it here you can choose to reference the data that reference the template and its data if you reference it then basically it's essentially like a page route map where it links to the other page in a manner of speaking basically when you go through the upgrade process uh andrew hey andrew we have the andrews we have andrew oh we have two anders yeah we have two andrews now um so basically these uh if you link to the page template your page will get the upgrades when servicenow upgrades them nice so all of that basically what it means is that all of the oops somebody accidentally configured the home page in my uh vendor instance and now everything's jacked up and i have to restore that page all of that's gone why you gotta trigger me like that huh why you gotta trigger me like that oh my gosh we are just missing andrew p then we would have all the answers there's like uh what happens when their powers combined is there like a captain andrew well now we have two anders in the same place at the same time and i feel like that should like open portals yeah break the space time continuum or something like putting a bag a portable hole in a bag of holding um but so that's what page templates are okay at this point you're not doing that though you're not doing that you got to be creative you don't want a template i'm a free spirit oh that's the truth the council of andrews i so did that it's like uh or the brother out of the flash the the council of i forget his name the professor dude i don't know i haven't watched flash in a while got robert green in here now this is where all the cool he's not a game he's gay oh well he's been doing portal stuff with me he's cool oh nice i do not know who john doll and we're getting everybody in here yeah i don't devin that demo whipper dude you got to identify yourself or dude or female representing dude dude is a gender neutral term for me um 24 7 android coverage yes so so at this point i can now kick open this page and you'll see that it's just it's nothing but it's got it it's got an icon it does have a cute eye kind of tell you nothing um all right so now what i want to do is i want to enable the header footer logos i want to get the basics covered really quick here i'm glad you figured this out because i was cussing up the storm before right so i'm back on the ux page registry okay okay which i can also get to from the ui builder in fact let's do that if i go to menu edit experience settings then i can pull open my advanced settings and that'll bring me to the ux page that got some major page whiplash from going back and forth here but okay so from here i need to create page properties now there's some magic voodoo it deals with data bindings and all kinds of stuff that we don't really want to cover just yet let's get the basics down then we'll go into magic voodoo now is that because you haven't like gotten that far yet or is that because we're just not there yet it's a little bit of both i know i understand some of the bindings and how to manipulate some of the bindings um it's it seems like there's a lot of html in json so like the the html elements and structure is there but it's all done through json that bothers me um that seems wrong well it lets you easily load it dynamically so it's i don't know it it it works andrew says barnes says i'm calling you out i've just got to keep them honest so um chrome header is one of these bindings in the portal experience the portal experience defines a i think it's a slot where uh it's called chrome header and if you create a page property called chrome header and fill it with magic json then it will work so i'm going to grab this from the nail ninjas because they've provided some json um you realize i'm gonna have to make you like a little picture for the code creative website that's like magic json json um so like if we come in here you can see uh where is it so you can see that there's some uh searches enabled on the header user preferences are enabled you can see where the logo route goes you can change the logo route from a type to an href okay so uh you can see there's a lot of stuff in here that is defined primary items user menu and you can see what's on the user menu okay navigation external opens window href so you can see kind of how some of this structure works and you can start to manipulate it for now we're just going to submit and call it done i'm also going to pull up the footer and the menu ones because those are done via property as well so there's also chrome footer and that's not chrome chrome browser that's like chrome as in the website chrome the frame oh i'm glad you say that because andrew said that chrome header makes him sad there are other browsers oh i didn't even see that he mentioned that [Laughter] that was just that that was just by accident that i addressed that yeah i'm glad you did because i'm sitting here just as lost as anything um see when you when you say chrome when you say like the outside or whatever i'm thinking like chrome on a car like a chrome bumper or something that's the image it's a long nose line so um then copying the chrome footer and it's json and then i am going to create the navigation menu which once again you can see that there are routes defined that are going to different pages so like that sys id is a or sorry the route is catalog so i believe that's the catalog page with uh sys id equal to that as one of the parameters i think that's how that one works um i feel victimized by this i just it's really not that bad and this one is chrome menu all right so i'm going to save that actually i didn't want to save it i wanted to update all right so now we've got footer header and menu all defined he asked that this is specifically portal types of experience yes yes andrew this is on the portal experience so in fact let's let's take a step back versus like a work workspace experience or what have you yes so let's go to app shells real quick and i'll show you where this this chrome stuff falls into play so i am currently using the portal app shell and if i open this portal app shell if i can get it to open you kind of click it there you go good job so you will see that there is a chrome header data binding output that's connected here so it's exposing data output bindings now if i understand this correctly i think there's like some order in this i i think this is an order of precedence so it'll look here and if it doesn't find it it'll look there and if it doesn't find it it'll look there i think is how it works but i'm i haven't tested that yet um likewise you'll find chrome menu defined as a data output binding and you will find [Music] some others in there oh i just missed it chrome footer so basically the the oh let me use my mouse everybody can see so this composition i just realized let me just point at random things for sarah that nobody else can see that's fantastic okay that worked for me um so this this composition is basically defining the how the app shell itself is composed and when we look at the actual html and i'm going to bring this over here what you'll see is that there's a uh there's a canvas header a canvas menu and a canvas footer so is that header one that is already in a component that's already in service now that you're just pretty much calling to put there so if we look here you'll see s the element id sn canvas main and you'll see in here that there is an sn canvas main right here and its definition is this uh the macro opponent or the ux component that is at that cis id so essentially this json is describing the composition of components in the ux framework um servicenow has created components we can create components and so in theory and i've actually already tested this by copying the portal app shell and mucking up the composition but you can change these societies to point to other components like ones of your own creation okay and so you can create your own shells but that sounds kind of sketch it it probably is that's like cloning the out of box widgets and you know yes yes i don't i don't think that that's supported um but in theory you can do it uh now going back to does that mean we would have to clone and all that to call in a different type of header like if we didn't want that header so essentially uh and you know you notice that the header is now in place there's the header menu there's the footer you can see some broken links that i'm going to fix in a minute you can see the search so essentially with the portal app shell you appear to be stuck with this this is another andrew we have another andrew yes so many andrews oh my goodness we have all the andrews the andrew trifecta the andry the and dry oh my gosh i don't think that's how it works um so is the search bar being up there part of the header yeah so in our header definition that's different from uh the service portal out of box header so if i go to the chrome header uh you'll see a setting in here somewhere search enabled so if i change search enabled to false and you can think of and it's gone oh snap you can think of these almost as instance options yeah it's just like the instance options json only much more complicated that's a good comparison because yeah oh that's cool so when we create our own header because we're going to do it or if you create your own header you have to use a custom app shell right now the portal app shell does not support when you look at the composition it does not support any properties for injecting your own header now i have seen something called overrides and i haven't figured out what you can and can't do with the overrides yet but so it it may be possible to override those specific sections i just i haven't figured out how to manipulate it yet what you don't know is they're just like an important tag it might be there's you could create your own but but say you create your own header you could use those json options to have like one component with like a bunch of different things that you know yeah yeah basically everything's a component okay so if we look over here sn canvas root is a component sn layout is a component canvas error component it's sorry i'm laughing at the andrew chat i called meeting of the andrews to order we stand in judgment of travis is he good enough servicenow developer to deserve sarah i'm just i'm just going to go out and go ahead and say no well i mean i don't think he deserves to have me because of his service now chops i mean you know you deserve me because you're awesome oh thanks be nice to you but the fact that you uh were like so i know you're doing wordpress and all that but you could do this on service portal and it's and you were right but uh but yeah so i mean it's basically components all the way down it's all components which you have to you can't macro you can't build in-service now you have to build in like the other in yeah traditional dev environment yeah yeah the cli tool um and i forget what the name of the cli tool is but yes you you create your components in the cli tool uh but servicenow has also created a whole bunch of components themselves oh yeah it's a lot but the gist of the ux framework is that it's components all the way down i'm gonna call it until the day i die it's not ever going to change oh they're components you have to change but uh but so i have seen a lot of override support in a lot of different areas and so it may be possible to change things without changing them so to speak and we'll see how that plays out uh as we get more information and figure out different parts of this framework but as we get more information by that you mean i chain you to your desk until you give me answers right oh well i'm hardly the only person working on this i mean that's true you're a lot of ground ninjas you've got ashley you've got uh andrew p you've got countless people out there that are just digging into this and just tearing it apart so um you know we're we're all in this digging out what we can which is good because i'm sitting here in the background like faster i need to know how to change fonts well in in in fact let's move to that can we change we can it's very easy so i'm going to once again i'm on the ux page registry i'm going to pull up the app configuration and we can create a theme but this is not because i looked at this this is not this is not service port this is not like service portal because i made the mistake of trying to put some css in that thing and no there are things about this that i love and things about this that frustrate me so um the first thing i'll tell you is that theming is and apparently brad's next big blog is about theme um so i hope i'm not stealing any thunder going into it um okay i'll read both but um and i'm married to you so i'm not gonna pay attention but themes are what i really love about themes is that there is more control given to the component developer in service portal you create your widget and people can go in and rip it apart uh and you go back into the instance and it's not the way you left it your component is now changed it's broken and taken down a horrible dark path that you never intended where people tab instead of double spacing [Laughter] um pay no attention to that comment i am not here you'll turn you'll turn around and you'll put a bunch of different properties in there and you'll have a plan for that widget and you'll leave notes on that and people will come in and they'll change it and it just it goes down a path you didn't intend and now you have to work around the fact that the architecture you designed was not followed uh because the you know and i run into this stuff a lot when i'm working with uh teams that are across uh cross company you know you're you've got three or four different consultancies yeah with the same customer uh and sometimes you get paired up with really phenomenal folks and sometimes you get paired up with junior devs but you're not you don't have direct contact with the junior dev so it's hard to mentor them or work with them and they go in they rip stuff apart and it doesn't work the way you want they jank up they jank up your widgets it hurts in this in the ux framework you compile your widgets so it's really tough for them to go in and muck up what you've built they're components not widgets components it's really tough for them to to muck up your components um and but it really encourages the properties aspect and your theming is primarily done through css custom properties so theming is done through json so real quick if i pull up the experience i can inspect element and let me double check real quick css custom properties right okay got the term right so css custom properties use this little dash dash syntax so wait time out like how does this relate to normal css or sas or whatever so sas is a pre-compiler sas sas does not get sent to the browser generally um usually you take a bunch of sas files you compile them into css and then you pitch them yeah pitch them over to the browser uh the variables there are dollar sign names um css custom properties are native natively supported in the browser so it's variable it's css variables just like sas variables but without needing a pre-compiler to do it the browser handles it natively is this a new css feature has this been around a while little of both um it has been around for a little bit but it is still at least fairly new okay um i put it this way it has been around a while but full browser support across the board for most major browsers is a more recent development within like the last two versions i think so when you say and this is me rabbit trailing when you say most modern browsers are you including internet explorer in that internet explorer is not a modern browser it is dead or like edge or whatever edge yes edge supports it okay like old edge or new edge you know i don't know if i don't know if it was i don't know if it's distinguished i'm pretty sure it works on old edge um it definitely works on new edge because new edge is just chrome with new chrome that's true okay well anyway i'm sorry i'm chrome anyway you're gonna show me how to change fonts and stuff or we're talking about css variables yes so um basically what we're going to do here page so um where was i oh css variables css custom properties is the official term i think if you search for css variables i think you'll still stumble across the same thing um but so you'll see right down here this dash dash now dash color dash dash primary zero being used for the background color okay and you'll see a bunch of rgb var these are a bunch of css functions that are doing fancy calculations okay so i believe the var1 what var is saying is use this property if this property doesn't exist then use this so basically what we have here is use this property if it doesn't exist use this property if that doesn't exist use the base value nice okay so what i'm going to do is i'm going to change this guy and to do that we have to copy the custom property put it in json put it in json and then i need my code creative colors because i don't even remember what those things are green now hex will not work here it expects rgb if you go to compute it any hex goes straight to rgb or you can get a plug-in for it which i also have and that looks like this and then you get your rgb oh that's flipping fancy it is it is called color pick eyedropper and it's phenomenal if you're on mac you already have one as an app how lazy am i that i focus primarily on design and ui and i don't have a color picker on my browser yet well i'm pretty sure you can just like eyeball it and yes that's 230 125 4. 5. no but i do have my favorite the hex for my favorite uh page background color memorized is that bad like do people not do that that's i don't know i think that's a design thing i don't think it's bad i think it's just a design thing maybe all right so you can see i changed the nav bar and i'm also going to change the color so i can come in here and i've already pulled it up and it's this guy so i'm going to change this one to 255 255 255 which is about the only one that i remember one of the andrew says that he's memorized hex colors too man dang it see well i just got outgunned then i do it more when i'm like picking apart like an external website for a client so i can put together their theme because they don't give me branding assets so what i'm going to do now let's say one thing i can do as well is i can create my own custom properties and inject those and this is really cool because what i can do oh you can chain it i can chain it the same way you can satisfy it with sass very yeah you got it so what i do is i change that rgb value to this and it will still work and now it's green and now what we can do is if i come across other things as i'm going along i can just set them to that same color and now you have a real solid sense of theme by uh because you can basically come up here change one color and it changes everything across kind of like the service portal that that one service portal thing that you built with all the svgs that did the magic changing color oh yeah that was fun that was awesome well this is how you would do it in but question like those now colors that primary zero is probably used in multiple spaces throughout the site and one thing i've noticed if you like dollar sign brand primary it may look good in some places but look horrible in others so yes how do we deal with like the few edge cases where maybe that color doesn't look good there so if you look down here you'll see that uh like i pointed out before that there's it there's a functions right there's defaults so there's fallbacks and it moves it moves from left to right in terms of most specific to least specific so this one here most likely pertains to this specific bar whereas this one is the more general variable where you can change it at a slightly higher level okay and then of course it falls back to the default coloring if you haven't specified either so if it depends on on how general you want to change that color the more specific you want to change the color the further left you go in the css functions so that's how that's how that gets set um but so that's basically all the theming is is just finding your css uh custom properties and setting those values and you can daisy chain them if you want to uh you'll also notice that i did extend from the default theme i did see the default theme it's got a whole bunch of these set up and a lot of them are like good enough that in 90 of your uh use cases you're not going to want to change any way and this is one of those examples that i was talking about of some of the extension overwriting because uh basically i think if we look in here you'll see so i could create a glidefast theme and then i could extend it for any changes that we'd need to make right oh right um so yeah there there's a lot of power in terms of being able to uh override different things without changing the original uh paige says this feels like a lot how she messes with css in the portal yeah it yeah yeah that's the feeling i get as well i keep having uh travis put it into portal terminology so i can kind of get a comparator but all right so next up what we're going to do wait did you figure out what that override does yet right there this override yeah that override um because you talked a lot about overrides i didn't know if you've explored this i have not explored that override uh but it does have to do with the the the whole overriding themes uh and i'm not i'm not a hundred percent sure i'm not a hundred percent sure so i'm still trying to figure some of that stuff out maybe brad can fill us in uh when he when he jumps in on it on his next blog so i'm going to drop my logo off over here so i can use it because now what i want to do is i want to jam oh that's a shame i need my other one your other one yeah my other one you know what you know what no we're gonna we're gonna do it this way i'm going to find the css of that bar and we're going to change it that's fun family uh background color nope is it on here ah background color here we go barn says we should drop in the show i need to put that on my calendar because i always see it and get excited and they get distracted so like here's we should what now see look drop in the show next week yeah oh cool we'll have to do that then we can harass them oh see here here's an example right here of where i'm going to go with one that's more specific so you can see here that the now color background primary um i'm a little antsy about changing that to green because i suspect that that's being used elsewhere by like uh cards or panels or something um that that specific terminology makes me a little uncomfortable changing it so i'm gonna change it at the lower level oh barnes wants to know if we want to join directly i think you should join directly yes back like as in come on live coding happy hour i'm not worthy so there you can see i've used the my custom variable twice that looks reminiscent of the the one that's all the gobbledygook letters that looks like really specific the way you get that cis id clasp on a widget yeah it's very arbitrary id oriented i haven't identified why they are what they are yet um the naming definitely leaves something to be desired um webb would not approve nope nope we have a co-worker that uh he he he was teasing us mercilessly about two long variable names and it was warranted but so every time somebody does a variable name that's a little longer now we're like oh no all right so a lot of this stuff i'm not thrilled with theming wise and i can do a lot better but for argument's sake right now this will do yeah you're hurting me that doesn't i know i know i know but i want to cover other things too yeah so it's so bad i'm questioning your love for me all right so now we can add assets to the theme oh robert says he would not yes you wouldn't we well it's here so i like that i sit there and i say something about long variable names and here he comes as if someone he appears yes andrew exactly uh all right so what else are we doing all right so ux theme assets we can add assets to the themes assets are your images assets are your fonts uh they'll be like otfs and stuff like that yes so i'm gonna rabbit trail for a second does this support adding a link to a file the same way you can new new but i will show you i will show you okay so first we need to create a new asset so i pop that up click new and we're going to do an image we're going to do the image first we're going to give it a name didn't know you could unlock dev tools like this one like the the free floater out here oh page it'll change your life it's awesome i never docked this guy right here doc dockside uh you can choose to left it bottom it write it or disconnect it yeah all but that first option are awful so i always like shove it off somewhere all right now forget where i put it i'm gonna go back to the service now ninjas because i don't remember the magic incantation although technically i should just be looking in my notebook because i wrote all this stuff down in your handy dandy notebook in my handy-dandy notebook having children is scardest for life okay so let me go back to that real quick what show is that from blue's clues oh yeah sorry i could still sing the entire theme song to dora the explorer and her kid is now 11 so so this is going to put this asset in that position in the position of the header logo header logo is another one of those data bindings okay okay so like do you need to use whatever data bindings are in the app shell yes you have to use the data bindings that are in the in the app shell um and i imagine other components can expose bindings as well i haven't gotten too far into that but um but yes you have to use the specific terminology so then i attach my file to that asset to that asset record that's what i forgot to do before i also forgot to make forgot to spell it properly dude how long you been doing this brand clearly not long enough how long have you been doing this i don't know all right so there's my little logo brand up there oh and i'm gonna throw it down at the bottom as well just to reinforce the brand continuity no because i want that broken link to go i'm being too loud and wake up the baby and then we're all gonna cry position footer logo submit and so you can see that i used the oops i did not want the glidefast logo there well you know i selected the wrong one but you can see that i can use reuse the same assets in other places and then you can plug them in now does the if you have something like it stored on the images table can you access those through this or do you have to load the same thing to two different places um or did you mess with that i haven't messed with that yet it it might be possible to link them elsewhere i know that there is an image uh component that allows you to drag and drop in the editor and you can connect that i believe to the db table i haven't tried connecting these to the db table yet um all right so at this point that broken link in the footer goes away and we're starting to get a really trashy looking website out of it um i don't know trashy because of my styling not because of the ux team's work their work is phenomenal um so let's see oh fonts fonts was what you wanted so you just uploaded like an otf file or a waff file in the same way right pretty much so if i come in here fonts but i'm lazy and i like how you can just put a link to a google font in there and just be done julius let's see i think that did it actually no that wouldn't have done it because that was the css sorry i need to go to google fonts and actually download who can i pick actually i might have already do i have it do i have it do i have it downloads i do i thought you're gonna let me pick all right so basically what i have here is a ttf file that i ganked from uh google fonts and what we're gonna do is create a new theme asset yeah robert webb is calling me out when i don't want to change and that is exactly it i've been doing this for almost three years and i'm comfortable and they had to go change everything on me all right so you will see i think it was julia sons one this is certainly making it easier all right so first of all you have to select font on the theme asset wait can i look at what other categories you have there it's just phone and image and none that's it for now okay i'm sure they'll add more nate later if they need it but um but so you've got you set it as font and then you give it a name you have to remember the name that's a great song it is asset properties i don't think i need any for that one and then what we need to do is change a font family to julia sons one is this the one you use on your site yes i'm proud of you your typography is pretty good julia sons one sons sarah serif did i escape wrong i escaped now you've got like yeah oh i'm missing a comma there we go syntax back in my day we didn't have no syntax checkers yeah i love showing you some of these new tools that have all the handy hotness in them and you're like we didn't do it that way back in my day we had to blah blah blah and i'm like well this is easy so i'm gonna use it it just takes me a while to get used to a lot of the new stuff yeah i know i know get off my lawn and all that grandfather travis that built gorgeous portals back before service portal existed back in my day everything was an iframe dude you know jelly like i can't make fun of you because you're one of the few people that you know i don't know if that's a good thing what do you know jelly yeah it's a mark of trauma you should really get help for it uh all right so i'm looking for the font family right now so i gotta find the variable for the font family and one day we'll just make a gigantic list of these things and make a font family tree i don't know about that i'm so funny i was talking about the css special properties make a pretty list barnes says i'm not jelly um i still think i'm funny hold on i think i remember how i can you can like filter in the browser like right here you can well hold on hold on hold on fine go about the difficult way you can also filter up there in your uh now font family oh my goodness we're gonna change it the big broad stroke simple way now font family save see andrew thinks i'm funny too but not you whom that didn't work no see you can like go in the filter right here and put family in font family inherits she got fights not there var now font family that's right there it's being overridden by some family and there's another one i do this all the time so i don't have to scroll through 50 different um now on family source sons pro [Music] let's see did you put all the dashes in the right place hey kapano here let's simplify it real quick let's drop it down to just julia sans one now you have no fonts no i have no fonts you went back at times what did we mess up i did not attach the font attach the font to the asset now let's try that again well they don't make it obvious that was just like the attachment like that and there right there it is very nice so now very nice geometric sans serif so that is how we change fonts in this which which again i mean that's a huge step up from um from service portal where there was no there was no one way to do it you could get it in there but three ways of doing it yes there were three ways of doing it and so but i i don't feel like any of them were particularly baked in or intentional it was just circumstances it was just kind of a product it was more byproduct than or it seemed more byproduct than planned and if y'all are interested in learning how to handle custom fonts in service portal nathan firth at serviceportal.io has a great uh little article that i've referenced many many times because yeah um but google fonts are the easiest thing is you can just link to it um but then otherwise you can attach the attach the font files or option i've done all three so but in the new ux framework that is that's how you do that's how you do it yeah but and you can use this to affect the out of box components yes yes because that's an out of box component okay so the servicenow uh i don't know which team it is whether it's the seismic team the ui builder team if it's all the same team if it's one big experience family now or if they're like fighting factions the last airbender the different kingdoms you're gonna get a lame joke and a nerd reference in each one of these and you just need to be okay with that i can be okay with that but uh andrew barnes says you can't sit you can't stay back in my day in cold fusion and be like oh gosh but uh i don't even remember what i was saying anymore that was only like yesterday what was i saying again i don't know that so that was that's how we do um the fonts in the images and the colors it does leak into you can affect the out-of-box components so this way so so the experience team has done a phenomenal job of exposing dozens of these css custom properties i mean they are all over the css complete with defaults uh and it makes it really easy to go in target what you want they provide multiple fallbacks um it's and a lot of documentation to help you figure out what's what right that's coming that's coming i know i have full faith and confidence i i've gone to a lot of these little information bubbles and it goes and it shows like just a picture of the the component and i'm like but that doesn't answer my question but this stuff i know it's coming all right so that is the process of setting up the basic uh i don't want to use the term shell because app shell is something different but that's the basic scaffolding of a portal experience um that's that is how you go about setting it up now we can start focusing on the page level elements um can we undo the drag and drop thing now yeah we can do the drag and drop thing now so i'm gonna close out of that now you know what before we get into the drag and drop thing i have to i have to cover one thing before we go any further and that is the responsiveness and responsive design and all that so um you know portal it's it's standard i mean it's it uses bootstrap every bit of it from top to bottom is responsive not necessarily mobile first but it's responsive which is good because every one of my clients wants it right and so if we're talking about is this a is experiences is portal experience a replacement for portal service portal right now maybe maybe not um you can see it starts to get scrunchy here um it's not that makes me nervous it doesn't collapse down to a mobile menu the header and footer are not designed for mobile they're they're functional on mobile i think if you add too many menu links it won't be so functional um but it's it's it's it's passable but it's not a great experience so i don't think it's quite at the point of being a full replacement at least not with using the out of box header and footer if you did the custom app shell and manipulate it a little bit maybe if you could find a way to hide those and just or you know take the height down to zero or something along those lines maybe but basically there's all of the css is primarily controlled through either json or um if you add a component what we look at css blocks that are full of lies and decisions yeah it's not a real css style sheet it's injecting it into the style tag where you can't use media queries yeah so there's nowhere to inject media queries there's nowhere to drop those in now you can use flexbox and grid layouts to the extreme to make stuff inside of these containers responsive but in terms of making the overall experience itself responsive it's a little bit shaky but barnes says that help is on its way it's barnes says it's not quite there in queue but we'll get there soon that's that's really good to hear a promise for rome would be great because i have like cajoled travis into celebrating the rome release with me in rome so i'll tell you what what would make what would make portal experiences absolutely unbeatable from my standpoint is if i could uh through property or something else inject a sys id to select a component that should be used for the header and footer like you can in service portal oh that would be great if if i could turn around and craft my own custom component and drop that into the header or footer then the responsiveness is irrelevant because i can do that within my components and like i said the the body content you can already fairly easily handle or create a component and you can control it yourself so the ability to change just the sys ids of the header and footer components that are used i would say it would go beyond just going a long way it would make portal experiences the answer like if if if it had that today if it had the ability to replace the header and footer today i would say to you right now that the only reason that a customer should not use this in place of service portal is if they are stuck outside of quebec and cannot fire the manager that won't let them so i have very strong as a designer as a ui ux specialist and all that i have very strong opinions on this but i need to acknowledge that our nice trip to rome to celebrate the rome release has just turned into a party party in rome confirmed yeah everybody is uh joining so that's a thing now that being said when you were when you started looking into this and you like i think you did it because you wanted my head to explode you're like i don't think this supports mobile and i was like what what i am offended on all levels because like i can the thing i've been salivating over this for is to take not only a caseworker view and customize it to reflect that great end user experience that i provide in the portal but to also just bring it all under one roof and let it under one part of servicenow and let it be seamless but i cannot tell a state and local government who y'all know is my heart and soul i cannot go to them and say this is great this is for your citizens knowing that there are people in this country who the only internet they have is their mobile device i can't give them this as an answer that's not going to work sorry i'm getting i'm getting oh no no no i'm getting hot because you know i i think of all the people i know who had to try and apply for unemployment on these janky uh government websites yeah um which i am looking for opportunities to fix so if y'all know any state local governments you know hit me up no i know i'm timeless um but uh yeah i i need to see that happen and it's not even on your blog too no no my blog that i've look you know we've been busy like like weathering the store this what is that line and shake or weathering the uh somethings and arrows of life and arrows of life or whatever yeah so that's where that is i will get back to that whole blogging thing because i enjoy it but uh yeah yeah robert just said hashtag sarah triggered well yeah and i'll also second what you're saying because i tend to work a lot more on the internal side of things and even internal and you know maybe this will change as you know we hopefully exit the uh pandemic stages soon but with a lot of people working from home at this point there have been a lot of managers i've spoken to that pretty much view mobile as virtually essential one one made some comments they want to do their approvals while they're on the toilet pretty much pretty much he he was like you know they're they're they're at home in their bathrobe of course they're doing it from their phone yeah uh so you know to to some degree we're we're at a point where you almost you almost can't afford to not have mobile support um i i that was one of it was probably the most stunning thing about the ui about the portal experience it was the most stunning thing that hit me was that it was not not just responsive but mobile first i couldn't believe it wasn't mobile first um it just that was almost an immediate deal breaker for me and i'm still trying to find ways around that so that i can start using it now as opposed to waiting for the the next stuff to come out so i'm very anxious for for those updates um but yeah replacing the header and footer and or in some degree of mobile capability which honestly the header and the footer assist ids that alone would give you mobile because then you could build your own mobile but that is the only thing that realistically stands in my way of using this today aside from that it's this whole it all right let's let's first of all things i am glad that you walked me through this because the getting started part it was difficult like i played around in this trying to figure it out and i just it was so much that was so different it was overwhelming so also before we get started hello jace it's good to see you chase you are late welcome to the party though um so one thing i do want to get into next is a lot of the data binding and some of that stuff so to start i'm going to go as dead simple as possible because this stuff is just cool are you going to be able to change the text on this button yes we recently had like a rage fest together about how you can't easily oh my gosh really you're bringing that one up now oh shoot me nothing is sacred okay so we had the you want to tell it i don't know you may tell it better all right but anyway so go for it the service catalog widget you know i'm not going to mess with it i have no desire to mess with it but we were looking at some weird concept and uh we we wanted to change the text on the button to submit the service catalog item and we looked at it and we're like you can only change it to one of three things like that's it you're dead no other option and i was like what why can i not change it so we went on and like ranted to each other for like two hours about how you couldn't change this button text and it's been a request to service now for like 10 years and even the old dogs have been pleased can i change this button text and no one is listening and i swore up and down that you could change the name of the button and i kept telling her no you can change the name you can change it to three things you can have it in any color as long as it's black it really was i spent i i i don't want to admit to how many hours how much time i spend trying to prove that you could change the name on that button and technically you can because you can change the messages it just changes all the submit messages in the entire portal all right so moving on from that yes yes so let's start with that yes i can change the name of the button see i can change it to submit see jason i can change it to order i'm sorry i just triggered her okay fine next there's a new one for you in more recent news my husband is trying to tell me he doesn't love me anymore by triggering me with stuff oh gosh okay so wait put an exclamation point on that and prove to me you can change it to anything i can change it to anything nice you should make it anything where's the any key it's the itty all right so now uh let's just go hello ui builder and what i want to do is when i click the button i want to change the text of the ui builder you're a lot more proper than me i would have been like what up so but it's like hello world you have to so to do this we need client state so everything in ui builder goes through a central state mechanism so the entire application state is one big json object basically well technically javascript object um and you can add properties to this object which is what we're going to do we're going to add a client state parameter and we're going to call this one message text and it is best not to include spaces because spaces can mess with things and we're going to set the initial value to so would dashes be okay or is at that point it's just a matter of preferences i think dashes should i think it works well with anything that is well supported by javascript okay by javascript properties um so treat it as a javascript property and i think you'll be okay and you can see here it's dumping it into a javascript object or i guess i don't know that maybe that one's a json object hard to say um but so that adds your client state parameter uh to the central application state and just to keep us refreshed over oops i forgot to save just to keep us up to date we got a button we got hello ui builder that is not tied uh let's rename this one to just hello so that i can show that currently it is not tied you should make it hello world let me change it to hello fine yes hello world see my important contributions to this you're the reason everybody's here on the internet so i mean you're the reason i'm even here am i you asked me to do it oh that's right no ask is a nice word i've been badgering you i can't figure this out this hurts my anything for you [Laughter] there you go so okay so we've got hello world it's not tied to the client state parameter so now what i'm going to do is i am going to come in here and i'm going to uh first let's tie this to the client state parameter that's what you did down there right no this created the client state parameter now i'm going to make the text box reflect the client state parameter by coming here it's currently hello world i'm going instead of making it manual i'm going to make it data bound and i select message text oh that's what those are state message tests yeah okay so now when i save refresh hello ui builder because it's tied to the client state now so this would be like almost like an instance option where you put the string in and it's whatever this would actually be more like c dot data this is your c dot data oh um but imagine that you have a c dot data for the entire page that all of them share okay okay and i think components can have their own state and i think there's a state tree involved because it's fairly react oriented so i think that there is there are different contexts for the state but this one i think is the page level state and again i'm still trying to figure some of this out but now let's add an event handler to the button so do that when you click the button when i click the button right so i have to click that component go to events and add a new event handler to the button clicked event so each component exposes events that you can tie into oh so like if it was a different component it would tell you these are the ways you can manipulate this yes each one exposes its own types of events and you bind handlers to those events okay i was wondering where the button click came from so the button click is special to the button um if i go to stylize text you'll see that it has no events because it's just text so add a new event handler and you'll see that we've got a lot of different types of event handlers for this one we want to use the update client state parameter and we're going to select message text we'll select message text as the client state parameter and we're going to say to make it hello chat because we're going to say hello to everybody in the chat the people in the chat need a better name than chat well give me a better name um i'm not the marketing person here i'm not a marketing person either well we're just host i don't know i made a video i'm very proud of it where where is our lauren yeah okay so now i've saved it you can see that i've got the update handler in there so i can add multiple events so you can tell it okay update this text and then do the thing the thing that you have to say yes so click next hello chat and what i want to point out here is i haven't written any code i haven't touched code at all this is as complicated as code to me but yeah like once you learn the system and everything there's no code yeah so like this is the entire state right here this is everything that you can change and share um oh hang on i'll get the link in my video jake has to see it sorry i just saw i i just saw jace's message uh asking uh he said you made a video where and i was like who what video i made a promo video oh yeah yeah yeah that one that's it's the fasco video that's out on linkedin i made a promo video for um fastgov if it's this one yes this one y'all make fun of my voice so i don't know how to get this to you on your computer um can we use slack i i think you i i have no idea oh my goodness i think everybody in here is in slack i'll figure it out you keep going um all right but so that's that is how you bind the bind the events to one another but the the other thing i'll say is that the no code approach is not just important from a it's no code people who have no experience with code can build it um it's not really so much that side of things so much as it's a code can get very messy and dirty there are a lot of ways to accomplish code and that means that somebody with poor practices can royally mess up an instance and for somebody that spent most of their career going into instances that were set up by somebody else got into a problem and wanted somebody to come in and clean it up i like the idea that there is kind of one way of doing everything in this framework the it's going to be very difficult to royally screw up how this works because a lot of it's done without code and even the code you can write is very isolated um so let's try and do something a little more complicated i'm gonna delete this garbage and i'm gonna do a question i posted a link in the chat and it's not showing up on your on your page is it like not letting links i don't know you should know these things um so the link was right there it was before that because before that yeah um i can share it again settings um i feel filtering no i have no idea i don't know it might be oh there it is now it's showing up oh it's showing up now i guess it had to make sure it wasn't a naughty link or something oh okay sorry i don't do those kind of videos moving on from that one so uh all right so let's do some quick layouts here i'm gonna add two containers you were telling me you have to be careful about this yeah so the drag and drop basically there's not a whole lot of space there's no going back well i mean there's going back but you can see like that it's it's hard it's it's hard to drag things in between it's this and also uh as you'll see here shortly uh the wysiwyg editor does weird things when you start messing with the visibility like stuff will disappear on you in the wysiwyg because you've specified it to disappear over here yeah so you know you lose the ability to drag and drop um bottom line is you want to set up as much as you can up front before you start messing with stuff so i'm going to set up two main containers um i'm going to leave the names alone for now but you can name them and i think that's awesome i'm gonna add another container here and then i'm gonna add up here container did you say a pier container yeah two peers chil uh not not children but siblings siblings and then i'm gonna add two down here add a component after okay in this container i'm going to add some rich text and let's add one more container up top it's a lot of containers it is man i saw that setting where you can set them to be flexbox and i was like uh see this is the drag and drop j's heard pure not pier say oh pure pure yeah sorry siblings siblings um p2p containers uh let's see container one container two see stuff like this happens where did it go i want you above there we go did it work no see this is the kind of stuff that happens and it's really annoying where did container seven go it's in container three it's in container three i don't want it in container three all right can you just delete it and try it again yeah let's just delete it try again so this is why i say you want to get your layouts pretty solid up front because trying to use the drag and drop editor at this point is kind of messy all right so i actually want three top level containers so let's do three top level containers this is where wireframes come in handy click click click click click click is there an easier way let's see if i can just i mean it's still click click click that's fine that'll do all right so let's add our stylized text up here and um everything is awesome when you're part of a team everything is awesome all right so we'll call this the snap application because we've been doing all that government work ui flow everything else so we'll call this the snap application so that contains our title this next one is going to have two containers are you sure yes and in this one we're going to add a component and this one's going to be rich text and then we're going to add a component down here and it's going to be a button and i'm going to go up and do align items flex end to move the button over to the right and okay so that sets up that section then let's set up this section with two containers add after and we're going to add a component here and that one's going to be a button and then we're going to go up to its container and do a flex and was it main yeah main align items flex end add component here we'll do an input all right and i think that's everything i need so rich text we're going to edit html while he's doing that i'd like to mention if you all need a refresher on flexbox or want to become familiar with it csx csstricks.com has like a great guide to flex box that i reference more often than i want to admit so we're going to set that text and this button is going to be a next button make sure we get a tooltip one andrew left and came back for 30 minutes and he's like wow we have a full blown app you shouldn't hate css i hate javascript so i guess we could trade submit and then the input will do short description you're making a field yes and you can bind this to so you can do each individual field and make it as big or as little as you want right yes all right so the like two column approach that we're kind of stuck with on forms and right oh so using you can do flexbox layouts and stuff like that and also with service catalog you know you can't do the ui flow type stuff where you have multiple steps very well yeah what what servicenow wizards used to accomplish are you there's not really a way of doing it today with standard components but this using the ui using the ux framework is one way we can accomplish that so what i've created here is a title container a title container which is the snap application i've created an introduction container which is this and that first button and then i've created a the third container which is the input field and a submit button so what i want to do first is i want to show or hide these containers when i click the button so i want to move through a flow of steps so in order to do this i'm going to need some state parameters to hold what should be shown and what shouldn't be okay so i'm going to keep this fairly simple with a boolean approach for now hide we'll call it the intro boolean i really wish that would let me tab through but it doesn't hide form boolean okay so initially we're going to hide the form and we're going to show the intro okay so we'll save that real quick now what we need to do is we need to go to our containers and we need to go to the component visibility and bind the bind the hide component property to the client state so hide intro when we hide the intro we want to hide that container when we hide form we want to hide that one okay so we'll save it again real quick because i don't trust things i have to say or i i don't trust the saving okay so you can see see how it's hidden right now yeah you can't see it you can't draw drag and drop anything in it and i i i haven't test value no it it didn't come back so false false there we go okay all right so you can bring it back apparently we learned a thing we learned a thing um so you can bring it back but still i've i've had a lot of trouble with the drag and drop it's it's it's it's not quite refined yet excuse me travis i see y'all talking about css and design stuff in the chat i'm just not wanting to interrupt him but we're going to get to that stuff i'll address you [Laughter] um all right so okay so you've set up your client state parameters and bound them to the different and i bound them to the visibility so now when that state changes i've set the initial state for them and when the state changes then the hidden the show hide will change so for example if i come to this button add a new event handler update state parameter uh what we want to do is when i click next i want to hide intro and i also want to show the form save refresh next bless so now you've got a step-by-step form i can also add a button before this one have fun at sprint planning and this one will be previous and we'll give it a label and we'll bind its event hide intro height intro is false and height form is true now i will also add that you'll see i can change from form form to script so i could do some logic in here and return whether what the result of that property or properties should be i think it works i don't know if it'll work on multiple properties or not uh to be honest um but basically you have the ability to do logic in there as well so for example i could have done a single state parameter that contained the name of the uh of the section to show and then the visibility would update depending on which one was shot save and jay says he wonders if that script is server or client-side that one is client-side uh there's there's i i haven't seen any network calls when you run those ones but so now at this point i can click next previous next and submit does nothing and this container not the container the main there we go flex direction row and that should put those buttons in line next it broke my right adjustment oh i know why because it's no longer that it should be justified content now because i changed the axis there we go so with this you could build a multi-step form and i'd like to take a minute to talk about um as a user experience why this is so phenomenal um first of all order guides do exist in service portal but the ui of them the way they're laid out and everything is garbage um but uh multi-step forms do a lot uh ux studies have shown that users can keep in their head for five to seven pieces of information at a time um so you don't want to overwhelm them with a lot of choices and you know especially uh with uh working with state and local clients working with uh the public you've got these long ridiculous uh government program forms like the unemployment form for the state of north carolina is 10 pages long i downloaded it yesterday it's ridiculous um so by breaking this up we're helping these people who may be in a very vulnerable situation they may be very frustrated um lots of negative emotions we're making this as easy as possible for them to get through this one little step at a time and uh move on with their day so that is the value i see in multi-step forms it's a lot less overwhelming than putting all that information in front of them all at once and especially if you add in the ability to save drafts of applications and all that that can do a lot for you and again setting up this for use on mobile devices ensures that all of your users have better access to these forms so there i've given much feel you've given your spill um let's see identifier what are you doing um so now at this point what i want to do is bind the input value on this page to another client state parameter so that i can submit that to the server okay and again all this has been done without code i've not seen you touch code so far so far no no i haven't um the surveys in servicenow are so great servicenow uses them right [Laughter] ruthless chase ruthless um poor andrew barnes is in here and he's like getting put on the spot he says i did not come here to rep service now y'all leave me alone well i think two of the andrews are work work at servicenow i thought oh really i think so i don't know who everybody is i know who a few people are and i feel like i know something i thought there was a way to i can't remember if that does it or not how did i do this before invalid set value set we'll just make sure update state parameter short description new value is the ah that's how it was i need the identifier all right so for on the inputs i have to put an identifier so that i can access it and then i can say that when i set the value uh the short description client state parameter i bind to ah this this is where this is where we get into the scripts so i couldn't figure out a way to do the identifier from here so what i did was i switched to i i switched to script and i said chains short description property to api dot state because we're working with state parameters dot short description and so what this is going to do this is doing the same thing the form did just through script so what i'm returning is the property i want changed which was the first box you entered in yup and the value i want it changed to which is the second box you enter in instead i'm binding it to uh or actually wait a second value is not that value should be api dot elements dot there we go jace wants to know if you got this from trial and error or ninja or the docs you got this this this was trial and error oh this is what i did event so you see how you've got api and event available we're dealing with the input value set so the value has been set on the input so i'm going to use the event dot value i think and and yeah jace this is this was a lot of trial and error um getting the header footer menu getting that set up all came from the servicenow ninjas guys um everything that i've done here in terms of the binding and everything else i kind of did on my own um has been a lot to kind of help point you in the right direction right uh honestly the the input binding and such um i don't i don't recall if i saw it on hers i may have i was just speaking in general for everything yeah ash actually this question yeah ashley's stuff has given me a lot of insight into a lot of the new features in quebec um the servicenow ninjas guys have given me a lot of insight into the ui builder itself and understanding at least how to get it set up and started uh and then from there i just went into my own world of exploring experimenting and beating stuff up and cussing and um getting frustrated and when you are making something called snap application you might as well just shorten it to an application [Music] that's so epic i'm not suggesting that to the government clients but you're welcome too oh you know i will because like you're one of them yeah and we get to talking and everything like i was talking with this uh this one stakeholder today with an unemployment agency and we just clicked we're talking about the things we liked and didn't like about government uh technologies i mean it was it was beautiful yeah i could i could totally sorry i could totally suggest that uh and yeah jace i do plan on linking to those resources um i've got pages of notes uh from stuff i've grabbed from other stuff from other folks and pages that i've written up myself from all the stuff i've been doing and eventually i'm going to put that all in the blog uh yeah i'll probably do it in the blog for now and i'll connect to the resources eventually i might even do a more standard guide around it well those guides you did great i've had so many people tell me that it was a great walkthrough to get started in service portal i'm really glad to hear that i was hoping people would find it helpful i mean i found it helpful because like i was like the guinea pig that you wrote it for sort of yeah you and you and lauren [Music] both both of whom have now replaced me and and uh at a glide fast portal development i'm not the only one no y'all are not the only two we were the early replacements y'all right right if robert guin is in here he's like got his portal chops it's been fun watching him do it but he's one of them i've been retired i'm still looking for a good name for those of us that work on like the design side of things because i've been calling us portal people but that sounds kind of weird all right so uh bringing us to a point of wrapping up the last thing i want to do is a submit action um to do that we have to connect to data so we use this little data icon down here and we have to connect to certain resources you see that this one was inherited from the app shell yes so that's gathering data for the app shell we don't really care about it um what i want to do though is i want to add a new one from global and you'll see all kinds of different options in here from queries to uh there's there's some there's a lot of stuff in here i've seen a lot of talk about the evam which is entity value something or other you know how i told you with service portal that you've got the views you've got the data behind the scenes and then there should be a mapping layer in between that maps from your database properties to your view properties and then you wouldn't need a lot of the glide code yes that's the evam oh that's cool um so in the ux framework they've provided that um what i want to do is create a record and there's no other options here you just add it because what happens is we go to our events on our submit button add a new event one click and what we're going to do is you see down here we have added this create record one data and i should have given it a better name you can do edit and give it a name and an id at this point i don't care enough to um and then you get this here so this is where i can say i want to create an incident and then you can specify via condition builder which was a little weird but you can specify that short description should be test so for now i'm going to hard code it to test add save reload and submit and what happens is when i come over here and i go to incidents what i end up with is an incident created up at the top with test as the short description oh my gosh becky so now now we need to make it dynamic so this is where things got a little weird for me because in fact let's talk about how it took all of that just to get they've got to have a widget that just is a form for they do they do they're special this is special muffins yeah they have a catalog uh a catalog component they've got form components list components almost every component you can imagine but they also have these other components that let you snap together whatever you want and that's amazing that's something that we've never really yeah before i looked at like all these like they have like the starring like just these little tiny pieces just individualized and i was like that makes it so easy to like it's hot so um i was having trouble getting the dynamic elements of this to work because you can see that it's just a condition builder there's no data attachments in here um and i tried doing a few different fancy methods of trying to bind that and all it did was just post those to the short description the ui builder said i'm the fancy thing here you just need to stop yeah so uh so that didn't work so then what i started messing with was uh i click this and you can see that that sends a network message and this is the request that gets sent and i was hoping it would give me some indication as to how this stuff was constructed yes you can change from mode form and that's what we're getting ready to do uh so so hang on just a moment j so what i did was um i took this body and it's clearly base64 encoded so i went to a base64 decoder just because i wanted to see what this body looks like uh and this is the actual body that's being posted uh and you can see that it's doing an insert incident action and sis id values short description values and i point this out mostly to say that i th the framework is doing a lot of magic under the hood with service portal what you did was what you got and so if you saw a certain rest message going it was because somebody did a dollar sign http somewhere and that's what happened um but this object here is not going to the server this object here is being processed and then being embedded somewhere in this other object wrapped in an envelope and then is being passed in fact this short description object that's not even i actually tried to do some sort of short description option that's not the that's not the object you use so what so what it ended up being dummy me is an encoded query it's just an encoded query so this encoded query is getting converted to an object somewhere and that's in-service nails code so if i switch this to script i can specify the table manually incident and then the template fields is a encoded query oh just like you would grab from platform view so oh wait wait wait no we're not doing it this way we're not doing it this way i'm not using a string because ladies and gentlemen es6 is in the freaking building this is called a template literal which is really excited about that watch api dot state dot short description notice that it is embedded directly in the string you know how normally you have to do plus uh it would be short description closed string plus and then something else you don't need the concatenating plus anymore you don't need that join operator okay you can create a string and you can embed these little dollar sign squiggle brackets and inject javascript code in between those and it acts as a template and in es6 this is called a template literal oh in a lot of your modern web components the backticks these template literals are how stuff like lit element polymer a few others you actually build your entire html template inside of those because they are also multi-line so they are multi-line strings this is still a string not an error and if it's valid okay okay now of course we want the encoded query not all that junk so there you go there we go and then i don't care about using the display value apply save uh jay says that the es the es6 idea did get some updates about how servicenow is planning this stuff but i thought it was still years out so this stuff is definitely clients uh the these scripts uh this one here is still client-side all of these evaluate events the events are being evaluated on the client side uh as far as as far as i can tell so like if i go to network for example and i click previous you can see next in previous buttons there's no network events so all of these um all of these functions are client-side and it is then being processed by the sauce the voodoo box i i guess it's the seismic framework but i don't know what's what seismic what's tectonic i'm not sure which side's which or if this is something else entirely i think we need to call the voodoo box and see if it catches on kind of like fetch uh you lost me at fetch you lost me at fetish um but so in that way you can put again you can put logic in there you can put logic but everything is a return value there's no external mutation going on um immutable objects is a really big thing in react redux and a lot of your more modern central state driven frameworks so you can see we're creating a new object in all of this everything is new so when you are updating state parameters you're updating state parameters with a new object you're not changing the old one now we don't have to know anything about that because servicenow gave us these fancy little boxes where we can stick our code but what's important to know about it is that that central app state is the only way you can realistically change the application and you do it by returning values not by doing a bunch of mutations so that's really cool it's really simple it is it is um so now at this point i should be able to reload click next uh this is an app submission click submit and with any luck no i didn't actually want to ah undefined didn't work uh something botched in my uh that would be in the input event so something it does not like so event dot value is not giving me what i want event oh event dot payload dot let's try event.payload.value maybe that one was it uh we are working on the design and support for es6 in 2021 with the target for release in san diego we are prioritizing es6 over typescript for this initiative happy and healthy holidays to you all yeah so es6 is supposed to be coming server side um i don't know what all is included in that i would i i don't know i i i'm personally not expecting the full suite of es6 capabilities i think they're going to prioritize certain key es6 functionalities um yeah i appreciate you sharing that chase that's uh that that is something that is really really cool that should be coming to the platform getting temp temple literals serve aside would be awesome um getting uh i don't know that imports are necessarily something i'm totally i i'm kind of ambivalent towards imports because script includes kind of provide that in servicenow anyway um but native classes would be cool um there's just a lot of es6 functionality that i'm really looking forward to to getting a hold of um it may it may bring some really interesting changes to how we go about uh coding on servicenow and i've already been uh prepping some of my functional programming skills for um changing for for changing up how i personally write script includes and ef6 will drive that even further um does it work now i don't know let's find out i'm getting close are we going to be like oh snap application sensible there you go about to say you have very sensible test data reload snap location there we go so now we just created a form that we can walk through step by step to submit an incident so you've got this multi-step form going on and we could have added as many containers in here as the system would have supported i don't know how far how far you can take it but uh i imagine until your browser crashes um and then of course we could have on the submit button we could have added additional event handlers to take it to a completion we could have set a number of values in our app state pass stuff as parameters jay says that the prompt on the error should have been oh snap we have we had a problem um isn't that what google's does when it can't reach something i think so yeah yeah but uh oh robert webb says uh block scope let's go oh yeah the the let uh having the uh the let um wherever the heck those tokens are called uh keyword having the let keyword is going to be really cool for given block scopes um not having not having the iife everything will be awesome absolutely uh definitely looking forward to that as well um although although if some of the stuff i plan on posting around functional programming server side on servicenow catches on iifes and um frankly massive for loops and and massive functions may be coming to an end more on that to come more on that to come um you sound kind of excited i am i am i'm i'm really looking forward to basically it takes the glider api that i put together years ago and never really put to work uh because i didn't feel like importing a special library into everybody's instance when if nobody else was using it glide query is a very similar api that has started to catch on because it was provided by servicenow so you can download the plugin for it but one of the things that i found that was an issue with glider which also happens to be an issue with glide query is that it's a as a fluent api it's completely consolidated to itself if you want to change it you kind of have to go in and change it itself or extend it uh functional programming lets you create without extension you don't have to extend it anything and it allows you to create an api that is very similar to glide query almost identical to glide query and uh glider and basically you can extend it just by creating new script includes and adding new functions to the capability so yeah i'm excited about that one but uh anywho so at this point we've created a step-by-step form in the new ui builder with the portal experience uh we've been able to bind events we've been able to bind properties and uh you know submit those to server side so already you have pretty much all the tools you need to be able to build almost any component you that that you can think or any page you can think of components are a different story uh which i'm hoping to get to soon uh probably next but uh but this gives you the ability to using the existing components build really complex applications really complex uis without a whole lot of code not a whole lot of code i don't know some people may be uncomfortable with that it's it's going to be a change i mean i will say doing this in here um took a lot longer than what it would have taken me to do in yes like i look at those little selectors for like css properties or whatever and i'm like man i could just like type that out quicker than that yeah and it's a lot like flow designer you know with flow designer i can write the code a lot quicker than i can write the flow but the flow is less likely to break i'm more likely to get it right the first time and if i don't get it right the first time i'm more likely to get it right sooner than i would get the same equivalent code uh you know because with the code it could be syntax issues it could be misspellings of variable names it could be there's a million different ways your code could have gone wrong the logic could be wrong uh you could be overwriting you could be missing a semicolon you could be overriding a variable that you because of improper block scoping in javascript es5 um jay says this is painful compared to what i'm used to yeah it and and i agree with you on that it there's yeah i'm being drug kicking and screaming just just so we're all on the same page as as for as much as i love how fast that i can write code at this point and get what i'm looking for and i've gotten to a point where a lot of my coding practices are getting really really tight to the point that i can go back to stuff edit it real easily i can extend it easily without changing existing code uh i it almost hurts to feel like i'm going to be putting all of that aside to dump into this really complicated code-free editor uh where everything feels like it goes a lot slower but at the same time i like it from the standpoint of collaboration code requires really tight practices code reviews and everything else to make sure that teams are on the same page especially when you're working on multi-consultancy projects uh or projects where you're collaborating with the customer um you know there's a lot of management to making sure that code is done well flow designer ui builder with their low code no code type approaches make collaboration a lot easier because there's fewer ways of differentiating you know python has the mindset uh or is it python that has one i think it's python that has the there's one right way to do everything um even though there's still many ways of doing it there's one generally accepted way that everybody will adhere to um and that's something that servicenow hasn't really had servicenow you can do because javascript anything any way you want a million different ways you want to do functional programming do it functional prototype go for it class based go for it you know what although it's not true class-based but mincing um but you can pretty much do whatever you want in javascript and what that means is that you have people that will write a function that's 10 000 lines long and it's like that's that's painful now i don't know where to look peop in service poor people in service portal people will turn around and use nested widgets some will use events some will use uh uh they'll talk about nested some will use angular providers everybody uses a different tactic and when everybody uses a different tactic nobody's on the same page and things fall apart you know that's when you get into the these situations where it's like look i can fix i can go in and add the feature you want to this widget that somebody created and is now no longer on the team or i can rebuild the whole thing from scratch and then add the feature and it'll probably take me about the same amount of time but i'll be able to add future features faster uh and and that's what i kind of like about this approach is i i feel like this this low code environment will make it so that there's a little more standardization portal development well then you still have the advantage of creating components but your component code is protected from other people jacking up your component code which is awesome you know um you compile your component push it to the instance and now if you want access to that code you know you have to have access to that code and unless you know for us where we can turn around and build libraries of components as a consultancy and as a partner partner and we can deliver that to our customers we don't have to worry about other folks coming in and messing that stuff up we can manage that through source control and provide a better experience to our customers which sounds gorgeous right so um you know that's some of the stuff that i really like about this i it's definitely slower um this containerized stuff here is just painful and it was painful in service portal 2. um you know there's no wysiwyg editor that's going to make adding a bunch of containers and such easy i'd much rather just touch the html code but if i have to i'll take it to a component build a component that has the layout that i want and then i'm happy so let's against what you were saying years ago about not building these huge monolithic widgets well for service portal it made sense to make small widgets and honestly not really because in the components um you what you would want to do is create a um a layout component that has properties where you can embed other components um so you can still keep components very concentrated uh and still expose them in the environment and manipulate them the way you need to in the ui builder so you're still not creating monolithic components you're still creating small components you're just enhancing the complex or you're building complexity by adding multiple smaller components together so uh overall i really like the direction it's going i hope that unlike service portal cms workflow countless other things that have gone the way of the dinosaur i hope that this becomes a more standardized feature for servicenow moving in the long run where even if they come up with some new ui builder it still uses the same old data model and the same proprietary stuff yeah uh i hope that stuff becomes more portable unlike moving from jelly to service portal to this i hope the components becomes more uh future proof uh i hate have to think that i have to rewrite all my components a few years from now yet again um but i do like the direction these things are going i do like the the interfaces that are coming up if i can figure out or get this this mobile friendliness in the header where i want it um [Music] this is my new love on on servicenow this is this is where i build all my new uis if i can solve that that mobile first issue okay if you say so so but uh with that i think we're gonna wrap it up for tonight um obviously we've come a long way on the uh the using the portal experience over two days oh yeah and we've had some good conversation along the way um i do want us to come back and address some of the questions that some of the folks in the chat um asked about design and design inspiration and learning those things to make a good ui so i think we ought to come back to that at some point because if you don't i will yeah i can run my mouth about that all day long the short answer is i ingest a lot of different sites to look at good a good ui to look at ideas um to look for ideas and then it's just like pieces of a puzzle end up putting it together in ways that work but i can tell y'all some of the places that i go looking for stuff you know steal like an artist and all that good stuff dribble yeah dribble but the behance bahants however you say it uh a few others webb just burned you [Laughter] because you're the one that does most of the talking in this i just interject with stupid jokes and stuff like that this is like the only time i talk though yes um i am a ui ux designer i also build on service portal uh so i guess i'm a developer too but i'm more whereas a lot of the developers in this space are very um functional i focused yeah i look at it from the user's experience like it could first because like my part of my philosophy is if they don't like what they're looking at ux studies have shown this if they do not like what they're looking at they're not going to use it i mean come on y'all been ugly websites how much time do you really want to spend there um and so i strive to build something that is both functional and beautiful something that users are going to enjoy coming back to time and time again yeah sarah is uh is very design heavy like her the the portals she puts together so sarah learned development from me and i learned design from her and she's now getting better than me at both no because i when it comes to portal when it comes to portals because i know the layout like this is travis save me so but uh but but sarah's but i still hate javascript sarah was sarah put together her her promo her own promo video for fastgov so i mean whether it's print design video design raster graphics web design she's just design heavy she just picks this stuff up like it's nothing interior design yeah i my very first job was working at a uh fabric shop i sold fabric and had to help people i had to help ladies pick out their curtains and i've always said uh because i was eventually gonna originally gonna go to law school and i always said my retirement job i wanted to do interior design but you know i didn't go to law school for reasons and uh ended up on a very very winding path doing design anyway yes and and uh jason i go back and answer your question real quick on the mobile issue the mobile issue is that the uh header in particular is it it's it's functional but you know you got the search bar bumping right up against the logo when you actually use it on a mobile phone uh sometime on some of them this it all shrinks down the um the viewport settings are not set properly so everything is smaller it's just it's it's not ready to go for mobile yet see did we miss any other questions beauty love says this is the only time the only time i talk that is sad this is kind of the only time i am very introverted in our meetings i te in like the company meetings and our team meetings and everything else i sit back in the back and i let other people talk and i let other people handle handle things the only times i talk really are if i am running a workshop in these videos or if the only people i'm around are the members of my family in this household and i'm running around the house singing and getting up to antics um so what's great about this is like you know servicenow is his space and then i come in and like now everybody at glidefest is like oh sarah yeah blah blah and like i i've made so many friends at this company i love it and travis is like what are you doing i said i'm stealing your people trying to stop me so now they're my people they are your people y'all are my people too yeah that's just that even even the people here come here because you're here so i mean they're they're all your people yeah so we probably need to try and change the introduction for next time here's travis and his peanut gallery well welcome to code creative this is sarah and also her husband um and jace no you cannot have two headers uh because the headers are locked into the uh portal experiences app shell so there's one header one footer and it is servicenails components for it as of right now and he comes from oh thank you chase [Laughter] all right so are we ready oh god webb says i also get chatty at 3am when we're running headfirst into a deadline yeah at 3am at 3am the uh the ex-marine comes out to play oh oh um yeah 3am before deadlines the ex-marine comes this is why they don't put us on projects together no people always ask us how do you stand working together we don't jace no you cannot have no header either the space will still be taken up by the header just nothing is shown and there's a dividing line you can make the dividing line transparent transparent to well technically you have to change it to the background color otherwise the default overrides um but there's still a big margin and gap i suppose you could overcome that and this is something like the negative margin right this is some of the stuff i'm experimenting with is how i can override it you can also create a custom app shell and change the sys id of the header to a different component like one of your own creation but i'm pretty sure that's considered non-standard and not supported um so you'd be on your own if you did that um i probably i would not use it for production at this point because i don't understand the framework enough to get out of trouble faster than i got into it if it came to that yeah yeah ugh ugh jace that that that was my reaction to the the non-mobile first approach was was heartbreaking because i love so much else about it and i was so ready to commit to it and when i discovered that it was not mobile first or mobile-friendly initially it was heartbreaking but it is supposed to be coming it's supposed to be coming soon so barnes promised it so you know he's got like some inside scoop or something i love barnes and that's fine we can all go celebrate it in rome when rome releases in september but all right guys with that we are going to actually wrap up for the evening as opposed to the last time because i'm tired and i want cookies before bed like priorities but uh thanks all for joining in really appreciate the uh the company this this go around this was fun beauty love asks how often we do lives um whenever i feel like yeah definitely how chaotic our lives i created code creative live because it was too difficult to commit to recording videos on a regular basis because it takes so much time so do blog articles so do all my stuff took too much time and i never knew when i would have time to do it so code creative live has become my way of saying hey you you want to do a live tonight yeah let's do it live tonight and even that is planning in advance uh most of my lives have been hey honey i'm gonna do a live nail and then i like i'm in the background but uh yeah robert i don't know that we know what the typical desktop versus mobile is all i know is that all of my customers insist on mobile support most of the time a few haven't mined a desktop only but most of them internal application or external application most of mine have all wanted mobile and refused to do uh the the mobile app it could not be in an app it had to be in a browser um all right this is where we say this is where we say good night this is where we say good night y'all have a good one y'all have a good one thanks this is code creative signing off