[Music] hello and welcome to live coding happy hour it is great to see you because we have a special day here not only are we going to be covering ui builder but it happens to be my birthday and andrew barnes's birthday who knew we shared a birthday well you would if you listened to druve and ashitosh's podcast but there's a shameless plug if there ever was one let's do the introductions starting with brad thanks chuck hi everybody my name is brad tilton and i am a developer advocate with the developer program here at servicenow i have been developing on the platform since 2008 as a customer partner and now employee and i'm excited about today's show and uh we'll go to david next hey everybody thanks for having me my name is david leonard i am the senior engineering manager for the now design system we make a lot of the components that you see if you've been using ui builder i saw in some of the past episodes you all were making some pages with them so hopefully that went well and i'm excited to talk to you today about theming very good thank you david for joining us and finally over to chris well thank you uh my name is chris johnson happy to be back i am the design lead for ui builder and uh excited to make some pretty things with theming today and my name is chuck tomasi senior developer advocate at servicenow been here since 2010 was a customer for a couple years before that and have a long sorted history for almost 40 years in the iit industry one way shape or another so very happy to be here always learning always sharing with you and glad you are here watching live or watching later okay it's the time where we introduce our beverages same order brad what have you got today all right i have uh a variation of what i had last week but it is a macadamia nut barrel aged stout uh so i will be drinking part of this option sounds good david what's your choice so i've got a local beer the city from calicraft where i live here in the east bay in california it's a nice west coast ipa i wish i was at their beer garden but you know soon we all do yeah chris well i also went local today i've got a kinschlager which is a oak park illinois local brewery and it's the neil's world half of eisen all right and i'm uh closer to chris's territory since everybody else is drinking local i can't say this is kind of local when i used to live in wisconsin about six seven years ago i have i'm back to the line and coogles berry vice so always a favorite whenever you can find linies out here okay on to today's topic brad what have we got for the topic of the day all right random screen share going on [Laughter] wonderful and then i saw what the screen share was who did that come on you got to have andrew in there too is there one where he's like that i think that was andrew all right today so we are going to talk about uh theming in ui builder today uh so we've got uh we've got a starter portal experience that we're gonna get started with uh we're gonna kind of take a look at you know how you might get started doing some theming and then we will actually change some things like change the logo change the colors and then we'll probably get down into the weeds as well uh i have uh you know probably there there probably are not more expert people out there than than who we have on the show uh so we've got some uh some people to help us out while we're there and uh to answer questions so you know if you all have any questions in the chat about how you know the theming works or you know what why it is the way that it is in some place feel free to ask us in the chat and with that i am going to go ahead and share my screen wonderful wonderful which is this one i think all right and we're shared okay so let's start uh so today uh due to uh popular demand we're gonna be doing a uh a plant management app uh so i've got my plant app in aes here where we've got a few different plant tables we're not going to do a ton with the actual tables but i did spin up a plant experience a starter experience so i'm going to open it in directly in ui builder here so this is just our standard starter portal experience you know you get a get a bunch of pages with it like that there it goes um you know we get a bunch of pages by default with it and we also get a theme and header so let's let's take a look at what that looks like so we're going to come in and we're going to change some of these colors and change the logo which is a pretty standard thing if you you know are going to be implementing this you know in in your company you've got a you've got an app that you've created through aes and you spin up an experience and then you're going to come in and change it to represent you know what your what your corporate theme is or for that specific app do something with it so the first thing that i'm going to do is i'm going to create a new page and so this is a little trick that that chris showed me earlier this week when we were talking about this and then we're just going to call this theme test i think is a decent name so i created this page and then we're going to go ahead and open the page and the platform ui i can't remember whether there is a is there a menu application application menu for this we'll see all right so uh i'm opening up the the macroponent table which i believe all of our components live on this table and then pages are also basically components and also live on this table am i am i right there is that you you are correct yes all right so we're gonna open up the the uh page that we just created and then i've got a couple of uh json blobs that i'm going to paste in here hey brad just so you know there's actually a faster way to get to this page right from ui builder would you like me to show you yeah let's do that we're all about faster all right so if you go to ui builder back to that tab and you go up to the menu menu aptly named and you scroll down to developer there's the open page definition link and that should take you right to that spot in platform there's a bunch of other great links that'll link you off the platform but this is a massive time saver if you don't want to have to remember the name of the table that is a massive time saver although i have gotten fairly good at typing macro opponent i don't think i typed it correctly for a while but that's great uh and then i've got just a couple of things that i'm going to paste in so um you know the the page itself i guess is just a collection of you know you've got the layout defined here and then the composition is telling the page here's where all my components are and here's their you know how their properties and everything are and then i guess we don't have any event mappings or anything like that for this page so what's updated and now if i come back and i guess we'll do a refresh i should get some components on the page takes a second where did you get that json the other page this was actually something that i sent him earlier this week oh okay yeah oh sorry my audio cut out for a second there was there a question i just said where did you get the json from yes so uh so chris sent this to me uh we'll go ahead and post this uh i think that should be fine uh to post the the json because this was like when i thought about having to do this i was like man that's it's gonna be a lot of things to add and then i did it in you know 30 seconds i was like oh that's really nice um yeah so the the origin of this this page is i was doing a demo for some folks earlier this week and part of the demo was to create a custom theme and and it's much easier to see how the the theme works if you can see the components that use the theme and so it's just a really easy page to use you start making some changes to your theme and then you can go to this page in the run time and refresh it and then you can see exactly what changes are being made so it's a really big time saver yeah that's really great i mean i've i've you know back in the day when i was doing cms portals or or even service portals you're clicking around in all sorts of pages like you know did you know did when i changed the padding on this did it mess up my catalog page and this is uh this is really nice um so one of the things that i wanted to call out before we actually get into this was that when we look at some of the things like the buttons and the input fields you know they are like the inputs just have the line on the bottom but then when you come over and look in ui builder at the input fields you know they they are styled differently and these are you know these are the same components right we're just applying different themes to them yeah 100 during the development of ui builder through paris and quebec um all of our input fields in the configuration panel look exactly like what you see on the stage and it was actually close to the end when we actually built the theme to make them look like what you're seeing here one of the most kind of stark components for contrast besides the input is actually the um the toggle and so you can see that you know the toggle in the the config panel is this kind of very circular thing with the rounded corners but if we add a toggle onto the stage it's it's very square and that's not an insult to the toggle it's hip to be square but uh it's just kind of the style of the toggle there and it's the same component behind the scenes just themed differently i think it's it's a really good demonstration of um our goals with theming too on the platform you know just like we need to make two different experiences that you see at the same time that look really different we know you all need to make you know your experiences look however you need them to look sometimes in dramatically different ways to match the way that your company website looks or your other internal tools look and so i think this just kind of proves that you know what we say is true you can do that and and both aes and ui builder share a common theme as well and so we kind of internally have nicknamed it the builder theme but um it's uh sharing a common architecture and common code behind the scenes that that is that is controlling it yeah that does look the same so was was aes created with ui builder no but we we partnered together i mean it's it's using the same component tree um but they were they were in development at the same time so it's kind of hard to assemble the plane or assemble the you know whatever the right metaphor there is um while you're building the thing to construct it as well yeah i think fred luddy calls that the self-eating watermelon all right so let's uh let's actually get into this and do some theming so if we we'll go ahead and open this theme or did i already do that oh no we'll go ahead and open the theme test up so we can see what it looks like all right we've got all these things here so let's go ahead and uh so i think the fir the main things we want to do is we want to change the logo and then we want to change the primary and secondary colors because those are going to give us the big biggest bang for our buck so i guess first of all i know i know where the theme record is on the back end can i get to it from the from ui builder [Music] yes oh yes actually yes so edit experience settings um actually is where you go to change the theme branding and theme tab there and then um the advanced settings or create a theme uh one of those two will take you to the right spot and then we create a new theme or just edit this one uh this so this light theme this is the same thing that gets spun up for all of the starter experiences right so we probably would want to create a new one uh so that we don't it you can also extend a theme as well so you can use the light theme and extend that and actually probably the light theme i don't know this for a fact but it may be extending a theme as well um using that extends field i think it is extending like a default theme if i remember correctly the theme extensions help a lot with like staying upgrade safe which we know is something people really care about so um you know we want to bring like a lot of nice base themes for you and add more over time every release that you can try but you know if you go and make a change to one of ours and on upgraded you know you know get the the new cool stuff in there that wouldn't be cool so extends gives you the option to extend one of our themes and you get all the values that it has and then you can override any of them to be what you want them to be you can add additional ones that we didn't put in our theme which might be useful if you make custom components that you want to make theme mobile in a different way um and another really cool thing is that you can also use extends on your own too like maybe you want to have a base company theme and have a different one that you extend for workspaces and a different one you extend for portals to make them look different and you can even manage your own themes that way how does the override fit into that scheme oh yeah it's a good question i don't remember off the top of my head except to encourage people to use extents [Laughter] got it so use extend so i did notice there's two light themes and i have created two portal experiences so i wonder if it creates me a new theme for each experience i think that's the case all right so we have our theme here i think we need to save it and then we probably need to go ahead and select it but i bet i need to refresh this oh it wasn't that opened in ui builder all right that was experience settings and we called that plants all caps very important all caps so we now have the plants theme since we extended i should this should be the same right because we're still applying all the same styling yep all right and so now we can actually mess with this theme so i think the first thing we want to do is the logo and i'm guessing that's theme assets let's try it nobody told me no yet um the asset so i think i probably do have to put this in the this is probably the image table right oh no theme asset okay let's create a new asset image ah this is where i can add a font okay maybe we'll do that uh so let's call this about plant logo do i need to give it an extension i didn't see what else is in this table i didn't see one on the other ones all right let's not give it an extension all right and then let's attach something i don't think i have anything all right i guess i should just submit that something and then what what are these asset properties do here so asset properties um control where your theme assets get used when the page is rendered so for example to control um the fact that you want this image to go into the um header for the logo it's json and the key is position and the value of this header and i'm like you're mentioning about themes or typography you can also upload fonts this way and you just give them different properties uh did i do that right or does position need to be in i think position needs to be in quotes double quotes too because json's fun double quotes everywhere i love json it's my favorite all right so looks like you guys can't hear me very well in the chat i'm gonna bring my mic a little closer hopefully that helps out i do have a mumble problem but hopefully this works a little better okay so we've got our asset with our asset properties here and then i'm guessing i need to do something in the theme as well or do i that's it i think if you just go with this you're going to be fine to see the logo all right we'll see so i encountered this earlier this week where uh there is a bit of a caching delay and so if that wasn't a hard refresh you might want to try a hard refresh um uh i can clear the cache through the uh developer tools right yeah i normally just do command shift r whatever that is let's see nothing you could also try hitting cache.do on the instance and might be in the server cache if you tried turning it off and on again i guess let's run a cached idea all right let's see how that goes um drumroll please and [Music] no logo let's change the uh well i guess the logo wouldn't uh wouldn't matter see if we can uh oh hmm even in my incognito it is what do we think let's move on to primary and secondary and then maybe uh somebody can yeah i think so changing the primary and secondary color should be instantaneous and we should that's a good way to verify that the theme is actually so that's quite cool yeah so we want to go back to the theme which i closed out of for some reason let's see though how we did that experience settings branding and theming how about advanced settings yeah sarah says uh have has seen this happen a lot with images and yeah me too it's kind of it can be annoying all right so that is my config and here is my theme record so the way i think i would generally do this that's where i want to go oh i'm on the mini to mini record let's get into that record so i think i would generally uh look at the existing and it looks like this is where i am defining the primary oh no that's a bunch of primaries yeah so the kind of the way to think about the different levels of primary is generally primary zero is is the lightest color and primary one is actually the one that gets used by a lot of the buttons and other things um okay so that's that's kind of the the big color that you want to make sure that you probably set first is primary one and then usually there'll be like a sort of a gradation you know the primary zero is the lightest gradation and then primary 3 is going to be the darkest form of that gradation that's not always going to be the case depending on your branding and other considerations but in this particular case for this particular site i believe that's what's going on so we probably want to set primary one and primary two for our our green and blue colors well so primary one is probably going to be the the the green or the blue i forget which one is the the one that's the main one in the color and then we've also have secondary colors so um that generally if you've got two different colors the the the ones that are in the same family so your greens are going to be in the the primaries and then even maybe you've got a secondary color palette and that will be maybe your blues for this example and that would be you know secondary zero through three all right well let's uh we'll do i guess primary one and secondary one for uh for the purposes of this one yeah why did i get like we just asked him which is his favorite child well that was interesting all right uh we do have some questions in the chat that i saw looked interesting uh from phil and sarah and so one of them is can we serve up different themes depending on uh parameters slash audiences like can they be so different themes associated with different page variants or that sort of thing yes um the the page variants i'm not 100 sure about but you can definitely serve up different themes based on different parameters and the audience is is is is one of the ways that you do that yeah you know when brad was on the um experience record a little bit ago before i got to that m2m record there was a related list for all the themes that are attached to my experience and one of the columns there in that related list is called applicability and that's where you can change which theme is served depending on like certain characteristics of the person who's accessing the page right now you can't change it based on page variant like you've got a theme for your experience and andrew can have a different theme and chuck can have a different theme but um you know the you can't have it change when the url changes right now essentially it makes sense if you're on a domain instance it's also domain separated so um all the the benefits of domain separation are there for themes as well i like i like the domain stuff because you know it only applies to like 10 of the people but it makes those 10 really happy when when stuff is uh domain friendly we spent an awful lot of time thinking about domain separation and ui builder so awesome um i think it works pretty well but i'm also quite biased all right well let's see so so does this look right i just for secondary i just replaced the word primary with secondary yeah that that looks right to me all right well it's oh well we did get a green here it's greener than the old green and then we got some secondary yeah yeah so this that worked someone asked in the chat does it have to be rgb the answer for colors is yes right now and one quick tip to think about when you're doing this i have to do it a lot is you know be like did i change that did that value change is that green just really similar to the green before um you know rgb it's three numbers separated by commas and the higher the number the more that color is in there so if you want to see like a really obvious change do two five five comma zero comma zero you got bright red right or zero two five five zero you got bright green so i have a i have a trick for that when we get to the the font as well where um sometimes you know sans serif fonts they're hard to tell even for a designer the difference between them um yeah there you go so what you can also do is you can uh just in your font list that you're defining it's just a css list of fonts you can have the end of it be cursive you know comma cursive and if you see cursive um things are whatever font you picked it ain't working um and maybe it's not installed on your machine or maybe the link isn't bad or whatever it is but that's a way to test it now you just got to make sure that you remove the cursive when you push to production but uh yeah that's that's also a good little trick no nobody watching the show would ever push something to production and forget to take something out never happens all right well i think that yeah we got the we got our secondary blue and primary green uh our image is still uh not showing up uh i thought we had to i thought you had to replace that somewhere else um the logo but i i could be wrong i thought there was like a property somewhere if it is a property it's in the the app shell configuration um oh yeah that's where you can figure like what goes in the header and the footer and that kind of stuff that would be for the whole i mean that that would be that all all of the app shell it's it's the app shell version for the actual experience that you've set up so okay um this is the app shell for the the whole instance that gets copied in but but you you're wanting to edit the one for the particular experience i i think it's in the experience record oh it's in the it's time to experience yeah so it would be let's go i think i closed the experience record let's open it back up uh it was no how did i get to that oh it's just advanced settings that's right uh so this is this is where we were talking about earlier there is the um the themes so this is where you could do the different themes for the different audiences yeah correct all right so all right if we're looking for the logo i just we let's look one more place for this and then we can move on to doing other things uh where do i find i'm in this is the is this the experience record i'm all turned around now yeah i'm frantically trying to find the right spot in the browser all right all right let's see any do we have any questions come in okay so so brad what i normally do is i just type experiences into the navigator and then i find the experience that i'm currently working on yeah now experience framing let's do that that one and then and then what you'll see is chrome footer chrome header chrome menu and these are the configurations for the different parts of the app shell and one thing to understand about this is that route column so what you can do here is you can actually define different configurations for a different page and so in this case that second chrome header there is actually defining a specific chrome header for the landing page and probably i haven't looked at this but what's going on is normally the header has the search box in it and on the landing page for a portal normally you have a big huge hero region with a search box and so they've configured the header for that one page to remove the search box in the header so that you're searching from the main big hero region of the screen and there's a few other cases like logged in and logged out users and different other things that you might want to configure what goes in in in the header and footer so this is the default one it looks like yeah um and what a great field to search when i see something with the logo here i there's something in here about logo logo route i guess i could um yeah it's just the one on the bottom i don't know any any ideas before we punt this and move on to something else all right oh look at me chuck how do we replace the logo all right um so we did we sort of did the logo we did primary and secondary colors uh i think font isn't is another good one um that uh that we can do here um yeah i think sarah was asking for that earlier yeah because i i believe it's pretty straightforward compared to uh how how we used to do fonts and other things do i still have the uh no i'm just gonna plants there we go and then i'm guessing i just add a ux theme asset for a font because i noticed uh when i created the other one that we had font has an option here and then i think what was the name of the font we used cursive cursor i i think the the logo font was cabin which is a cabin a google font comic sans always comic sans hot pink comic sans all right i think i have which is the right one to use so probably the second one all right yeah first one's italics okay when you get a font there's often the other variants like bold and italic there's some strong comic sans opinions in the chat [Laughter] uh do i have to do anything with the properties in the font yes um it is more json so it's an object i know we all love json um and you need the key uh font dash uh style and you want the value for that to be it's dependent on what font you uploaded i think i saw from your image that you uploaded a variable font so let's just call it normal variable fonts are cool because they encode like normal and italic in the same file so it's lighter oh nice all right and then you want font weight on that object too just another key and we'll make that normal too since this looks like a variable form you're missing a double quote yep there we go yeah so if you're uploading your own fonts to the instance one thing i strongly recommend everybody does is just make sure you pick like an optimized one that has only the stuff you wanted it because fonts have to be parsed before any part of your page is rendered and if you load like a really big font with a bunch of language you know character sets you don't need then you can see performance going way down and that's not great that's a great point travis had one last idea on that logo oh did he if we if we have a moment we'll come back to it i'll copy and paste it into the chat let's see if our uh if our font worked we gotta do one more thing we just have to set the property here to use that font so the last thing we did was we were uploading the font so it's like served as a file and now if you do the now font family property we can configure it to use that font and then do we use the asset name here or use this is like a cssc type thing you you use a cabin with a capital c for this case um if you want to figure out what you should use there you can always install that font on your computer and go look in your font settings and it'll give you the right name all right yeah and one thing to note here too is that um sometimes especially for fonts in css that are multiple words you may so the double quotes here are actually the the double quotes required by json but you may need to also include single quotes inside of that because what you're doing is you are spitting out the string in css and so for in a lot of cases what you'll do is you'll actually define a few like a comma separated list of fonts and so like typically on the mac they'll do like san francisco and then helvetica new and ariel and you know sans serif right so it's like fall back to this to this to this all the way down and so you can put that here in one long string but if you need the double quotes for the font in order for css to work you use the the single quotes here in order to make that work in json and so in my previous like test case you know it would be cabin comma cursive here and if we'll know whether it worked if we see cursive all right here we go drum roll you can already see it's working yeah all right yeah it definitely looks different [Laughter] someone's hacked your system who who hopped into my pdi the grinning guy on the bottom of the stack all right happy birthday chuck and andrew and andrew all right so the font worked so i'm taking a drink off camera you guys couldn't see that um that i mean so as someone who has done some custom fonts many years ago at this point it was much more painful in the past than just uploading the font file and doing some some css there so that was really nice one of the other things that i want to make sure we get to uh is just you know if if you guys could talk about some of the just the theming hooks in the components and then we can i want to look at the component playground and maybe we can do some theming to one of the components that we have on the page here yeah i can talk a little bit to that so um we've got three levels of theme hooks those are those um properties that begin with two dashes that you saw brad writing in the json blob right there and so it if you're familiar with like css or with any other type of like object oriented hierarchy you know there's like just a few things up here at the very top that control a lot of stuff like that color primary one controls a lot of parts of the ui but you can keep going down more levels in controlling more and more specific things so maybe you want to only set the primary color for your buttons but you want to leave the primary color a different color for you know all your other stuff on your page you can even go down another layer from that you could say only for iconic buttons buttons that have only an icon in them so those are the different kinds of theme hooks um i i think we i'm not sure if we have them all documented on the components pages right now we're always improving the documentation so i'll keep looking for that if you don't see it there but it does give you the opportunity to make some pretty deep customizations if you need to i think the documentation is updated if you're logged in and so if you log into the developer site there's a few things that show up and and the theme hooks for quebec are one of them it may be uh so for employees you see different things than when our customers and partners are logged in so we i we probably see some things logged in uh but i think i think the non-law the unauthenticated and customer experience are the same i believe uh andrew that's right am i right yeah um so what's uh what's a good what's a good component that we know has some theming hooks documented or is there how about how about input i thought i saw one somewhere not input one place to go to if you're looking for theming hooks and also how they're being used is if you go to the theme table on the instance and you look at the existing themes that servicenow ships they will also have listed theme configurations so for example that the default theme or it also depends on what apps and plugins you have installed as well because sometimes those will also bring in themes but you can see here um like for example the base agent workspace theme or the builder theme you know they will have all these different theme hooks here so like now button primary color now button border width and these are the things that we use to theme the builder which is ui builder and aes but this is kind of an interesting starting point for you if you want to start looking at what is available and what we're using when we talk it's a good time for example like this is the stuff that we changed to change that toggle so let's grab let's grab the toggle and see if we can make our toggle look like the uib toggle so you know even though we don't have like the perfect docs on it yet you can kind of parse a little bit the meanings of these things by looking at their syntax already right now so you might be able to tell um things that are specific to a component the first thing after the dash dash is usually their tag name like now toggle and then an underscore here indicates an area inside the toggle so the track is like the background area of the toggle then there's another area that's like the little handle you can press on and then after that the next dash border color those are the different kinds of visual styles you can set for the um track area of the toggle the border color the background color okay and then to make it round yeah again 100 pixels is a lot but we just wanted to make sure that it was definitely going to be round so that's why we picked a big number um but if if for example you were to take the the color primary that you've got there that 0 1973 and then copy it you know in the track border color or the background color and put it there you would then hopefully see if everything's working correctly the the track color change all right let's see let's see what happens so that should be oh did i not save i don't think you see no i think i added that and didn't save it so let's go ahead and it was a toggle that's weird because i save a lot generally and oh the suspense is killing me come on there we go it's round now and it may be hard to see on this on the stream but you can definitely tell that there's this green border around it try turning it off if you change both places then maybe it'll okay that didn't change that's yeah the service now ui building okay teal but you could then replace that color as well in the theme file and change that too another tip on looking at those theme hooks and trying to figure out what can i write there is the part that you see that looks like css like the border color or the border radius those take the same values that those css rules take so you know you can look up docs on on the internet and be like what can i type for a border radius any value that you can type for border radius and css you can set for one of our border radius focus properties so it could be a px could be a percent it could be nice pica inch whatever you like except for color right yeah don't put color where or size colors are all rgb today all right okay well i think we've got uh you know we've got about 10 minutes left uh we've shown a lot of things is there anything else you guys want to show i think we'll probably we'll open it up for some questions um but uh yeah anything else you guys want to highlight or show in the last 10 minutes one thing that is is really visible when you're using a page like this is if you could scroll down brad and i didn't realize this until i started playing around with it i was i was changing some colors and i discovered that because components are nested within components sometimes the the theming has larger impacts so if we look at those alerts for example there's a now icon component to the left and then some text and then that link label is actually a i believe it's a it's a secondary button or a bear button but it's using the secondary color property and so when you're making changes to your theme what i ended up discovering when i was creating this custom theme is oh i have to think about how that color will impact not just in the the use case for the for the button by itself but also that when that button or component is used in other locations and so seeing a page like this where you've got kind of a clear view on the cascading changes and effects makes troubleshooting some of those issues really clear and understandable nice one more interesting thing i point out is um like thinking about what kind of change you're making and where you're going to make it can be important so like if you're in ui builder for this page for example you can click on one of those buttons in ui builder and in its configurations it has a configuration called variant that controls its style but variants letting you sort of pick from which theme values it uses you know you're not like going and writing use the background color red and ui builder you're saying use the primary button and then in the theme you get to go say what primary means or the secondary button and the theme you get to go say what secondary means um and we see that is a good thing too but just um knowing that there's kind of two places that you might need to be going to change something depending on what you're trying to accomplish is something to keep in mind and the power of the way that the theme hooks are set up is that you know by default we have it set so that the the primary button inherits primary one but we also have it set up so that you can go in and say hey i would like primary button to have a different color or you can reference another variable and say hey i'd like the primary button to actually reference secondary 1 or secondary 2 or secondary 3 or even a custom variable that you specify and so you have multiple levels of specificity that you can sort of say hey you know by default you're changing a couple of values and getting a lot of bang for your buck but you also have the ability to go in and customize and be very granular on kind of a per component basis if you need that level of customization nice so we do i just saw a question come in asking if we can integrate a full css library like bootstrap uh not really it's a little bit different and it's different i think than what some people might have experience with um from how you might be um controlling like the css of your service portals um you know you're not writing css here you're you're setting the values of some things that um somewhere down the line are consumed by the components in their css that's already been written um so you can't just kind of like bring bootstrap with you now bootstrap's got a set of colors and it's got um i think it uses like helvetica it's got a set of typography it's got some rules for how things are rounded you can bring all of those if you want by setting the theme properties to look like bootstrap um but you know the benefit the reason why we didn't want to have it just be css is it's really upgrade safe like it's really unlikely that anything that you change here is ever going to have a problem for you as you move forward where when we expose css as you all might be familiar with it can be tricky because as we fix you know problems or things change you know your rules might no longer apply because the dom structure changed and then you might not know that until you upgrade and we can't protect you from that we built this system to be able to protect you from that nice and then another question was around setting these variables and setting them on the theme level sorry my headphones just had a had something crazy happen um where was i oh setting variables on the theme level versus the container itself um so i think if you set the like the css on a component whether it's a container an actual component that's only affecting question you were down there giving the timeout signal andrew all right i think we're back yeah all right so i don't know where we ended up i had a headphone issue and then we cut out uh but the question i think the question is you know uh if i am doing styling from here can i also do what the theme hooks are doing and i believe the answer is no this styling is only really affecting um like the container of the of the component itself that's correct yes all right so the so generally when i've used this i'm like setting padding or margins or maybe changing the background color of a container it's not going to be able to you know we're not going to be able to change the border radius on the toggle through this style panel that has to be done with the theming hooks yeah that's correct all right all right well i think i will go ahead and stop the share here we're ready for that good stuff gentlemen thank you for supporting us on that that answered a lot of questions and i know the chat was happy about that too and i think that there was a question here that i'm saying about referencing other variables from within variables and yes that's a 100 um possible so once you've defined a variable in one place like now color primary or now color whatever you can then reference that variable in any of the other properties and and so it's it's really quite useful for for doing those sorts of things very good nice thanks brad well one other thing i think i don't think we actually mentioned it but uh we are you know like our our documentation for this stuff is a work in progress uh and it is you know we're adding to it and you know david i think you were mentioning that you know in the in the near future we're going to be seeing some more you know some more documentation come out around the design system uh on the developer site yeah we know you need it we're working on it we need it too so we make it for us and and for you and uh we feel the pain so look look out for it coming on some of those component pages and then more content on the developer site as well there's some good theming content on the doc site you know around like setting up themes but we're going to continue to look to add more content for you building pages and building components and how that interacts with theming and as a reminder i think i've mentioned this before but you have the ability to get directly to the component documentation from within ui builder so you select a component on the stage and there will be all the config properties in the config panel and there's a little eye icon information icon you can click on that or mouse over it and it'll show you more details about that config property but it's also got a learn more link that takes you right to the developer.servicenow documentation for that component and so it's a real easy shortcut to get from ui builder to developer site um so there you go i'm saved [Laughter] i built that feature for me those are the best those are the most important ones if you need it chances are other people need it too right that's right that's right that and and how debug messages turn into status messages really [Laughter] all right gentlemen let's rate our beers brad you're up i think i'm first i had the macadamia barrel aged out uh i'm gonna give it a four it was pretty good uh but this is a series like i got four of them this is probably the worst of the series but it's a barrel aged out so if the worst is a four i'm there all right from a from a scale of zero is skunky to five is i could drink this every day and never get tired of it david what do you got it's on a quarter point scale too yeah uh i've i've got again the city here from from calicraft the fantastic local brewery down the road from me um you know i think that i give it a four i think it's it's a good beer very nice and christopher so i had the kinslogger neil's world half of eisen um so because i generally drink half a vison when the weather warms up it's a five because the weather's starting to warm up but i think in general it's probably more like a 4.25 or so it's a good beer but it reminds me of summer and so that's why i'm giving it a little bit more today he's pining for the weather and uh like last time my lighting kugels went down like kool-aid that berry vice is just too easy to drink i give it a four five it's got a nice nice easy i mean it is like drinking kool-aid with alcohol it's almost like i'm drinking a daiquiri over here but it's technically beer really mom so with that i think we've rated our beers we've learned a lot about ui builder and theming once again thank you very much gentlemen and thank you viewer for hanging out with us even though we had a little bit of a glitch at the end andrew pulled us through in record time so we will see you again next week uh topic i think is to be determined but we've got a really good idea what it could be but i'm not gonna spoil that yet so watch for the social media alerts we'll be back soon thanks everybody