[Music] hello and welcome to code creative this is Travis Tolson alright so we are going to pick up where we left off in part four I think let's jump on over and I'll go fullscreen so quick recap for those joining in we've been building a simplest widget that supports skeleton loading so if I go ahead and reload this look do I not have these set to so we've added a bunch of instance options to these we've built them up quite a bit yeah so you can see that I've currently got them set to synchronous so I'm gonna switch to a sync with skeleton we were playing around last time with seeing what sort of performance impact there was so I'm gonna switch a couple of these back to async with skeleton two should be fine so now if I reload you'll see briefly it's got that little skeleton that pops up with placeholder data and then once the data loads then it renders that data so that's what we're working on and in this episode we're going to tackle some CSS styles so we're gonna try and clean this stuff up and make it look a little bit better I've got my in-house designer with me so that's alright that's alright that's that makes two of us so honestly nothing that I've ever done regarding service portals or CMS in the past has ever gone without her critical eye over my shoulder so [Laughter] so we'll include her in this one as well and she can help make sure that I'm staying on the right path so gonna pull up the widget editor here and there's a couple things I wanted to do so you know out of box if you're using the bootstrap classes then you get certain Styles predefined this can be very useful when you know you have an existing theme since most of the existing ServiceNow themes are going to be working with the bootstrap classes it's very useful to have those classes in place because then you know if you already had a theme and you plug this widget in you know our panel styles that we've specified in our theme or panel heading list group list group item all of these are going to pick up the native styles for bootstrap and it should we should be able to drop this widget into an existing theme and have it pick up those Styles pretty easily if the if those Styles were originally done from a broader scope as opposed to widget by widget so those are good to have once you start talking about you know starting from scratch or trying to build a larger set of portal widgets and what-have-you using bootstraps baseline can actually be a little bit detrimental you know ServiceNow ultimately controls the bootstrap that's included it is not a [Music] it's not a pure bootstrap version they have customized the bootstrap they've customized the CSS in it so you know it's not the latest version of bootstrap which I know a number of the web devs that I've worked with that have crossed over from general web development to service portal you know they go in and they start trying to use the card class and stuff like that and it just doesn't exist so you know there's always the possibility that ServiceNow could update to the latest bootstrap there's always the possibility that they could change the customized version of bootstrap you know tweaking different things under the hood and all of these can cause conflicts in upgrades with your widgets and with your existing themes this is one of the reasons why I have you know anytime somebody asks me I push them to clone even for simple CSS changes sure you can turn around and you can add a couple you know CSS declarations in your theme these Bangla says that that has hit him a couple times would love to see them get in line with current bootstrap oh yeah I write I really like bootstrap for I really like the latest of what they've come out with I do like it a lot better than free and I believe that there are some compatibility layers as well that can be introduced it'd definitely be interesting to see that but even with that still just if I take an existing simple list and come in here to instance and page editor for example and manipulate thee where is it some of these will have a CSS on it or you know let's let's say that I turn around and I go in to the container background and change the parent class or CSS class and add some special styles over in my theme record well that may work out really really well initially but a version down the line when ServiceNow changes the HTML from an h1 to and h2 or they change the class or they switch up the order of some of the elements all of a sudden you find out that your CSS is broken and I know Sarah you recently dealt with a customer where you had to go back and tweak a few things I value of cloning your out of functionality and so but they wanted a look and feel that was very custom so honestly I ended up cloning a lot of the out of box widgets and just putting like a CSS veneer over it but because I used my own classes and everything and put that CSS in those widgets and clone them we did a double upgrade and I had to change one line of code to fix one little thing right that was it right you know I didn't have to fix that one thing because it was one of the only things that I did I put it on the theme or the page or something like that I didn't put it in the widget right the one thing the one thing you had to fix was the one thing that wasn't cloned you know and with cloning you can always revert back to out of thoughts without touching the code and that's one of the great aspects of the the cloning widgets is that they have made it really easy for you to take ownership of the code make it custom but still be able to get back to the out of box without having to z boot or do something crazy I really love to see some of those patterns that exist in service portal adapted to some of the other code components because it's it's really quite powerful how you can seamlessly go back and forth between the the widget components you can override it with custom or you can revert back to to the original without actually having to change the code in either so in the spirit of that what I want to do is I want to provide a bit of a switch so that we can create custom Styles custom theming that is separate from the bootstrap so the first thing that I'm gonna do here is I'm gonna jump over to server script and don't worry we will get to the CSS and the aesthetic pieces but I got to set you up first all right so let's see one of the things that I want to do here is a one expose a new instance option and I'm just gonna call this one theme I guess for now and we'll go options theme or bootstrap and then we'll add an instance option and this one is going to be theme and it's gonna be choice and I'm not going to make the same mistake I made last time and do it comma separated choices bootstrap we'll just do bootstrap and custom for now I do try to avoid boolean as a choice flag because with a choice list you can always add new but with a boolean you only ever have true and false so rather than ending up with a collection of boolean's I do try to stick with choices and if you go back to part 4 you'll see where I had boolean x' initially in part 3 and I ended up taking that back and putting a choice list and instead I am NOT making it awesome instead Travis always have to tell me no Sara you cannot your code bothers me and this is going to be in the presentation default value will be bootstrap I'm just waiting for chat to blow up with I love the banter it's who's that at the service now deaf program who are you who are you let this play into the game it's that who's your daddy and what does he do alright so I've got my instance option in there I do have to capitalize the default value there okay so I think we're ready to go alright so the directive I need to use over here is going to be ng class and ng class has a couple different variations the one that I like to use most is the object which is basically a set of key value pairs so for example if I want to add the panel class I then specify a boolean value so C dot data dot dot theme is equal to bootstrap so now if the bootstrap theme is set the panel class will be included we're gonna do the same with panel default it'd be an easier way to do that with multiple but I don't know not familiar with it offhand so we'll go the long way know I'm familiar with the panel default class I'm having to repeat the same logic twice in my in my ng class object and that's what I'm not sure of Barnes Barnes azar is our visitor from the service knelt death program good to have you man good to have you you know what let me get to some research on ng class because I feel like there's a better way of of doing this setting multiple classes yeah I need to get I need to get schooled up on the class ng class evaluates an expression yeah what kind of expression I love using in class just to turn on and off different whether it's the drop shadow because it's on white background versus the colored background or you can even set it up so that your widget changes completely for a colored background or for a different use case or something like that you use the same widget multiple times it's beautiful yeah I don't get to use it much I have no class I'm sorry thanks goes all right so uh to catch everybody up on my thinking here I highlighted this array style so it one of the things that ng class can take is an array of classes to apply so I am going to attempt to leverage that syntax using a function don't know if this is going to work but we'll find out the function actually multiple functions I don't know I'll leave it at this alright so if C dot theta dot ops is equal to bootstrap I still feel like there's a better way of doing this and I'm missing it panel and panel defaults all right all right so then see dot data no see dot get panel classes this should be fun I don't know if this is gonna let's test this before I go doing the others like this yeah see over here in the preview it clearly broke we clearly lost the the we clearly lost our panel class we got our panel heading but we did not get our engine class let me try squiggle bracing it I don't know if that'll actually fix it but it's curly brace yeah I think I think that's the preferred term I like squiggles so I can have an array using arrays and some tacks can I use and let's see in G class function exactly exactly Andrew squiggles is more fun ng class with function and expression Stack Overflow for the wins oh yeah Stack Overflow ServiceNow community [Music] so CSS tricks is my favorite oh yeah I love CSS tricks I love CSS tricks their stuff is cool and then of course there's also those times shameless plug where I end up going back to my own site it could creative and I'm like oh yeah I did do this before impressive and it annoys me when I'm researching something but I've read that and that's not what I'm looking for or it is what I'm looking for I'm like ah so anyway well I can tell you passed Travis always seems to have more answers than present Travis exactly exactly [Music] using a dollar sign scope method on the controller you can calculate what classes to output in the view both class and logic and Andrew says that's half the reason to write things down so I help future me same here man same here man this is kicking my butt I did not expect this this is getting brutal the many ways to use in Chico this is another one I like to use Scotch i/o apparently I haven't used it recently you guys have the wait go back hmm you guys have changed stuff up on scotch or is it just my resolution I don't know I kind of like this looks nice sorry that's scotch I Oh apparently changed their web design at some point my mists in its animated RUC no wait go back let me see no no the the one on the background I can't see the little thing in the corner the yellow thing the only thing uh-huh oh that Amorphis blog yeah but this one is animated too so you watch it okay sorry we got distracted ng class using string syntax using array syntax using evaluated expression this one seems like what I'm looking for nope ng class using the ternary operator ng class I've no idea I've never tried you could probably provide a link to the image ng class style once down to as an attribute here let's do this let's it seems to be without the curly braces that seems to be it and you know a day I love the little background images that give it a little more let me try just returning just just returning no conditions no oh my gosh I think I figured it out hold on this should work it works Raphael keeps telling me that I've got it I think and I'm there and I've got it and the problem is I got I got the power chat I can talk to everybody YouTube YouTube twitch I can talk to all of that well I'll have to figure out how to give you power chat we'll have to figure I don't know how to do that okay so the problem I had this function was working originally the issue is that I had cdata ops but I never asked it for theme option so it's the theme that has to be equal to bootstrap otherwise I'm returning an empty array and if I save it tada there we go okay now we're on a roll now I got to get moving quickly so that we still have time for these styles and prettifying and you're now in all reality all of her work makes my stuff actually look professional one of these days I'm gonna have to show my first CMS on Oh on ServiceNow it was brutal we need to show that because that was when I was first learning to design so it was like it was bad on all ends does that mean I get to say I've been doing this portal for two I think it counts I think it counts you know what I'm gonna go I'm gonna keep this one simple because it's just the one class so I'm gonna use the other syntax I'm gonna use the object syntax for this one so when C dot data dot ops dot theme is equal to bootstrap you see sometimes most of the time how about everybody out there y'all like singing and hollering your code and stuff I talk with my code I don't think that's like a whole nother level of extra what year did I move in our kid has friends over and apparently they're discussing how long we lived in the neighborhood yeah one of them just like came in here and asked us how long we've been here and I'm like I I kind of want to be a part of this conversation oh and they're so cute the house full of a bunch of little boys so when the theme is strap thang says gogo of musical interlude I think I need a sound board with sound effects so when you mess up I can be like that's brutal ng class ng class so you're having to do this on all of the all of those strats right because what I'm gonna do I see what you're setting up for yeah and sometimes the the tedious setup work is slow worth it in the end because then you don't talk about it exactly that's what I did on those SVG images when I made it so you could control the class PS a variable it's it's real tedious work oh yeah oh my gosh that was that was amazing yeah so gosh I have to like thought it was so cool maybe share a link or simply yeah it's like what we're talking about is Sarah was working on some stuff for Glide fast purposes that was basically she took SVG images you know which for those who aren't familiar SVG's is an XML markup you know similar to HTML but it describes a vector image it describes an image so instead of being a instead of describing it as pixel by pixel what it does is it basically gives drawing instructions for how to draw the image well what she did was she added a bunch of CSS to it and created this entire theme where I think there was like eight CSS variables and you change those eight CSS variables and the entire service portal theme would completely flip to those colors it was just it was incredible especially to watch the images change colors with the rest of the theme it was just it was wild to the point it took it was tedious it took a while I refined the process as I did it because I was kind of figuring it out as I went so I figured out like how the shortcut it and everything by establishing my class names and all that so and then will take - where'd it go let's go find them all right now do I want to do skeleton text skeleton text title I'm gonna leave the skeleton text ones I'm not gonna modify those because those those aren't ServiceNow controlled so I'm going to leave those as is if I wanted to extend their capabilities I could easily add some s CSS variables to that but for now I'm going to leave it alone all right so next I need to give you some classes to play with well first let's jump over and once again we're gonna yeah well I'm gonna switch a couple instance options here we'll make sure the instance options wired up so in theory I should change this if not that one theme so if I switch to custom theme it should completely screw up the look and feel and it did not dang yes it was supposed to break was supposed to break everything Oh let's see let's do an inspect so first pal Styles should have brick stood but they did not oh my cidade panel da see not get panel classes now because I forgot to clear the return statement that would help but that doesn't explain the other ones that doesn't explain the other ones at all let's go back reload we're still not getting a broken theme killing me smalls what am I missing now umm dum dum dum if C dot dat adopts done themes equal to bootstrap return all those guys else returned empty array [Music] curiosities abandoned let's see check the instance options just to make sure theme is custom as expected and yet if I jump down here and look at my panel it is adding you can see here it's adding the panel and panel default classes not ideal not what we're going for so let's see options dot let's see C dot theta dot ops team that's just do some logging console dot log C dot data up stop theme let's just see what the theme is at this maybe that'll help when of course I'm gonna get a dump out of each widget doing it so that'll be fun bootstrap strength bootstrap bootstrap everybody's bootstrap that's not good it is not so cdata ops teen which is coming from over here is always bootstrap and at adoption schema hmm all right so let's bring this one over here and I'm gonna plug something into this function console dot blog and there's a really cool Java class that has been added to ServiceNow and I forget who taught this one to me I brought it up in one of the earlier episodes as well but you can call console dot log from your server script and it will pass that data to the client side so if I clear this and reload boom I get the logout over here two of them are custom four of them are bootstrap this is confusing it doesn't it doesn't at all options becomes data dots I'm I am testing equality I'm not accidentally assigning it I don't know anybody got any thoughts on this one I'm clearly getting my butt kicked I'm with you I don't like JavaScript anymore easy man you just tell it you want it to be red and it's red but you never tell it to be red because red is an awful color unless you use it very experienced options don't theme yeah let's get rid of pretty real quick try was returning something other than the empty array okay let's give it a shot we'll return Steve Steve it's the first thing that came to mind I I don't know why he insists that the baby calls him Steve it's great time is coming Steve Pennell heading sir top speed strap that's panel heading here we go and nada so for some reason over here you know what let's check something real quick let's go to instance options let's or not instance options let's go to our widget instances is there already a theme field by chance I've never seen nope I see so far no so we shouldn't have any overriding there so are some Oh transferring well so what's happening is over here in the server script options theme bootstrap it's changed from custom to bootstrap but the only thing in between is this assignment here unless there's something Rafael's asking me to expand the V HTML is it okay that you opt s in one place and you fill out options and the other yeah because I have created that variable here on line 69 so that's where that's where C da da da da is coming from normalize options data ops dot theme let's check it after just to be sure oops console clear refresh yeah see I've got two custom for bootstrap and that's what I would expect to see and then there's two custom again for some reason maybe it's like one two three four five six it's like going oh I know why cuz I've got that one async these two are async the rest are sync the rest are only running once um so that ain't it so it's the right value there and the wrong value over here about how you're passing it running the code football dude yeah it's it's been console dot log C dot data dot up stop team just to validate cuz I feel like I'm losing my mind here reload it's all bootstrap it's not a cache thing is it cash is disabled umm umm umm see Jared on top stock theme it is just theme right the auction name is important something else just just to take a stab yeah I died just I gotta take a stab at something here or just to see it see changing the name did it is something something is wrong with using the theme even though it's one cdata ops that's weird all right let's try re naming it name it weird exactly Andrew that's per level debugging namath weird which seem to for the win since yeah I'm gonna have to go with that oh how many of y'all like spinning on or inordinate amount of time naming your variables and all that so I've gotta have like the perfect name [Music] we'll call it themed classes how about that you had so many good options I was not coming I was not going with which theme because it weighs more than a doc it turned me into a new theme classes John I can't do that XYZ I have to give them names seem cloudy he says he likes to make his variable names get as close to over the line in terms of appropriate as he can I feel like there's there's a point at which you try to make your names relevant and then there's a point at which you start running out of relevant names and then you cross over to a point where you might as well just name them ABCD Star Wars named dick what it still didn't work what happened oh wait I probably have to change my instance options now more layers of namespaces oh thank goodness I just had to change my instance options the baby needs you to look at me oh my goodness what are you doing alright baby it's ornery if his dad doesn't acknowledge me starts yelling on people he does throne it's still not work bad thing bad day what I don't know did it work no Andrew says if you run out of relevant names you need to refactor into smaller functions good point but what happens when you start running out of relevant names for your functions it's all bootstrap again what am I doing wrong I know I know I had to go all extra on it it's all good Oh more players Andrew says more layers booger booger booger no no we do know babies do not require charging here he's grabbing the the laptop charging cables and wanting to chew on them and I am like at a loss here can you like you know your CSS out of the CSS you can see all of the HTML like that this was the function not getting the classes well the the issue is here let's see the issue is that if I put my log down here then I get to custom and the remaining are bootstrap as expected major let's note that works with a weird name or not uh it it worked with one of the names it worked when I renamed just the value up here but as soon as I tried to use the value it collapsed go back to what work it's only weird if it doesn't work you watch the bug like commercial I think it wasn't the object where you're trying to set the theme the condition is failing and picking up your default value of bootstrap all right so let's let's let's see all right so if I put console log data dot dot dot theme and I save it here I should expect for these four should say bootstrap and these two should say custom oh wait I changed from theme to theme classes and then we'll try that again so I get two custom for bootstrap and that's as expected so when I console dot log at the bottom of my server script thank you you want to come up here and match on the keyboard you might have better luck [Music] console dot log data ops team okay all right so yeah if I if I put my console dot log statement down here at the bottom theme classes has the classes I would expect by the time it gets over here into the C dot panel classes func get panel classes function though if I reload it's all bootstrap would it matter that you capitalize the default option in your service group here yeah shouldn't okay I didn't think so but you know they basically from line seven line seventy has the expected results on the server side and I have unexpected results by the time I hit line twenty two of the client script so there's did yeah yeah yeah the I originally set console dot log to log data ops team instead of theme classes and I got a bunch of undefined and that's what he was playing now now let me go one step further let me go absolutely themed classes options down theme classes or bootstrap does it make a difference if you do one of those long or - - is the is the or operator so options dot theme classes basically if it's a falsie value which in JavaScript is complicated the default thing should be a string default theme the the the type the type of it is and is a choice is a choice value which should evaluate to a string should being the operative word there I'm gonna try what Andrew was saying because he's saying to nuke the underscore which if I stayed consistent with all of my ones that were working before I did nuke the underscore so we'll give that a shot and then I have to nuke it over here and then I gotta update it here and then I gotta update it in all these places theme theme theme thinking oh my gosh I think I just saw it I just saw it oh my gosh I'm an idiot I'm an idiot I'm an idiot idiot idiot idiot guys guys over here in the HTML template over here in the HTML template I use the assignment operator instead of the what do they call it the equality logic operator you didn't use the right number of equal sign I did not use the right number of equal signs one equal sign assigns the value of bootstrap to checks the value oh my goodness oh my goodness and that makes sense because rendering this as I've said in previous in previous episodes rendering the HTML template into actual HTML is technically a function that gets perform so so this would happen in between and cause that that should add up everything adds up with that oh my goodness all right let's give it a shot I'm not gonna laugh at you because I have struggled with this so many times equal signs of evil know what still gets me is when like why is my CSS not working oh I didn't set my fall in their theme classes themed classes okay and reload nothing no so they're more stubborn work oh my goodness cdata stop stop name classes let's see what we got am I still missing one of the right custom bootstrap custom bootstrap custom bootstrap that's one I would expect if Sita theta dot ops dot themed classes is equal to bootstrap so my expectation is that these ones that are marked as custom should not have the panel classes so this panel and panel default should not be there because for those two the theme class should be custom as we saw in the logout over here two of them are custom but they are not rendering properly they're not rendering with my Steve class I'm gonna change all of them to custom throw the console inside your check hmm for the console inside your check intercepts you're getting some serious health care wrong right now everybody's on board with this now everybody's like we're gonna fix this throw the console inside my check inside the check tell me something Oh bootstrap okay inside check look a bugger bugger bugger bugger bugger bugger and before check goodness [Music] so before check custom no inside check goodness are you all right so let's flop all these two custom a whole lap of it has something to do with your other instance options have you checked that make sure there's no way and Oh at this point at this point any guess is a good guess um oh my goodness really are you kidding me are you kidding me I'm gonna flip my stool guys guys guys guys guys line six of the HTML I missed one of the equals don't like JavaScript do not worry see I make stickers for knowledge I paint JavaScript and it works oh my goodness alright so now that I have successfully broken my CSS I'm getting the classes that I expect oh my goodness oh all right so okay so man that's a sweet script you might say I hope so all right hmm so we're gonna go else if custom actually you know what now I'm just gonna say else I don't even care what what the if somebody sets it to something that's not bootstrap I'm happy to call it custom all right so all right so now I need to add classes that we can completely control ourselves to keep it separate from bootstrap classes and to help prevent any potential overlap I'm gonna prefix it with CC code creative and right so I'm gonna prefix it cc ready ready and he's gonna let me code we're gonna coat with one hand and we're gonna let him beat on the keyboard with the other so you want one for the the our panel yeah how are you taking over now you got keyboard I got baby sure all right but I don't know how to syntax it so you got to coach me through that um honestly that should be fine I'm I'm happy just to give it that that base panel class for now okay so I usually do with my panels as I do like outer one that controls the look and feel card and then I do kind of an inner div that gives it a nice easy I'm cutting hiding all the way around for my inner elements actually why don't we go instead let's go skeleton list because that way what we can do is we can create classes around the component as opposed to around really low-level design concepts we can go at a higher level Wow Wow let go to hair ow y'all it's very validating to have a husband whose hair is longer than mine the baby pulls his hair more than he does mine all right so so what that's gonna do is that's going to put the skeleton list class up here on this one and let's say now at this point we've got a couple options we can add subclasses down here or we can based our styles off of the HTML structure we can go off the structure yeah I don't really see a reason to vary the structure of the symbol list dude you're kicking the desk and it's going to push us both over backwards that's not funny so I had him sitting in my lap and he's got his he's got his feet propped up against the desk and he's pushing backwards while I'm trying to sit on the stool and keep us from flipping over backwards now we've got our class on there I know well we can do is we can get the kids taken care of and maybe try and tackle this labor I know I know but I get a cook dinner I'll be dangled this design this panel thing I mean if you want you want you can take it over and I'll go cook no all right all right all right so we'll wrap it up for now we have our class in place now and the next time we actually will be able to do CSS CSS and we may try for that later on tonight so we may try to handle putting that one together late later on tonight after we get the kid it was a little more settled because I really want to put a nail in this one and be able to move forward with you know app development stuff this the skeleton motor is just a warm-up for the live streaming ah Andrew it almost has his problem solved while he was listening along that's awesome alright guys well thanks a lot for joining in if you've got the time to join us later bright be on the lookout for that one okay cool yeah I'll let you know when we're when we're up and straining Andrew and you can repost that'll be cool still trying to figure out how all this stuff works but alright guys yeah thanks for joining then we'll see you next time [Music]