[Music] hi everyone welcome to glide fest on air today's webinar the top ways to enhance ServiceNow catalog forms with widgets I'm Lauren Jankowski the marketing specialist here at Glide fast consulting and I'll be monitoring moderating today's webinar I'm very excited to introduce you to out today's presenter Jeff Pierce a ServiceNow architect and sales consultant at Glide fast before we get started we like to give you some background information on Glide fast glide fest is a consulting firm that is dedicated exclusively to ServiceNow and as an elite ServiceNow partner our expert team of developers and architects have worked on both sides of the table as customers and on the consulting side our company was founded by ServiceNow architects and we're proud to have a team of over a hundred experienced consultants and an average CSAT score of over 9.6 and many more accolades as you can see here will be monitored monitoring the Q&A throughout today's session so please send in any questions that arise and we'll do our best to answer them as another perk of attending today's webinar we'll be giving away a $50 Visa gift card we'll announce the winner at the end of today's session so make sure you stay on until the very end now we'd like to hang hand things over to Jeff Pierce our presenter for today's webinar are you welcome everybody thanks for joining I'm glad to have you here yeah thanks for the introduction Lauren today we're gonna be talking about enhancing your catalog item forms before we get into this I'm just going to I just want to kind of prep the audience for what type of content we're going to cover and also I think we got some poll questions we can throw out there first one if I can get a gauge for your familiarity with say client-side g-form object so you know if you do have any client-side scripting with catalog items you probably are so if you could let me know what your experience with that is I was just going to help me kind of gauge my technical language and make sure that I'm delivering this more suitable to y'all and also are you familiar with angular providers so those are things like directives and services that are used in widgets in the service portal so if you don't mind answering those questions for us that'd be great and we'll just keep an eye on those as as we go along and also if you I think Lauren mention if you got any questions go ahead and pop them in the in the questions panel don't be shy all right okay so this presentation this is not going to be I'm not gonna be Bob Ross for you I'm not going to teach you how to paint a full picture and you're going to have something to hang on you all in the end that's not what this is also this isn't Westworld I'm not going to be telling you some long story about how things were and how things came to be that's not what I intend to do I like to look at myself as as Bob Vila I want to show you how to use tools and how you can use those tools to make an impact on what you're working with so we're not gonna build a whole house and in one webinar we're just gonna show you some really cool things and hopefully you'll be able to take those and then do your own things with them all right so this will be pretty technical right we're gonna get into some pretty juicy stuff with widgets and the G form object and it's gonna be fun and hopefully you're gonna feel much more equipped after this to do some fun and fancy things all right so we're gonna be talking about three ways to enhance your Service Catalog forms the first one is vs. UX analysis you know you can't we don't want to even try putting lipstick on a pig that's the same right so if you have a terrible form to begin with let's not worry about CSS let's not worry about custom inputs fix your form first so we'll talk a little bit about that then we'll talk about what you can do just by using CSS alone and then we'll get a little more advanced and actually replacing the variables on the screen with new custom form elements and making those repeatable alright so UX analysis so like so don't try to dress something up it isn't good to begin with so I have two suggestions here we're gonna focus a whole lot on this because this is you know really more conceptual this is for you to do in your organization how you see fit but first do the blank slate exercises where you just start with a blank form you know you and you're gonna prioritize what needs to be on there you're gonna try to understand what priority things need to be in the order they're going to be in and then hold focus groups see if that form actually resonates with people if they understand the language and using and the order things are in if the layout is cluttered things like that so I've put a couple links in there those are some good resources for doing those exercises to make sure that you've got a good form to begin with alright that's all I'm gonna say about you Excel Asus it's a lot more to say about that for another day okay using CSS alone I'll go in and do some demos in a few moments and we'll actually look at the CSS and everything but what we're going to be looking at is specifically what to target we're going to try to get to know the form elements you know the HTML structure of the form so that we know what elements and classes to be familiar with so that we can apply CSS effectively and then also where to put it right there there are many different places to put CSS in the service portal so we'll look at where those are and I'll let you know the pros and cons of each of those places and those links that you see there those are just some websites that have some good examples of a form CSS you know doing different things with fields and layouts that'll give you some good some some ideas how you might want to dress yourself all right then lastly this is what we'll spend most of our time on is the custom form inputs because this is where it gets really technical and a little more difficult but once you learn these techniques you're going to be feel quite proud of yourself hopefully all right so first we'll look at different widget techniques specifically looking at the G form object and and how we can access that client side and that link that I put there that's that is a Chrome extension that you're gonna want to have so you're gonna see me using that and you're gonna probably ask hey what is that how do I get that so that's the link number 2 we're gonna see how to make these components reusable so that's where we're going to get into directives and things like that angular providers and then 3 we'll see how we can take those and do some pretty cool things with some pulling in some third-party libraries specifically angularjs material and G material ok all right so at this point I'm gonna take over and start sharing my screen you should see my screen alright you should see my instance ok so what did we talk about first we talk about CSS what can we do with CSS alone alright so here I have your start and out-of-the-box service portal let's go to maybe create an incident form okay so looking at this you know we got to kind of narrow the scope because there's a lot that we can deal with right we can we can work on the panel here you know which is the entire container that it's in we can deal with how text appears the more difficult parts are going to be working with the fields you know the different variables and making sure that what we do doesn't negatively impact on the things right you can see here I got a great big submit button I have some CSS in here affecting the buttons I thought I took everything out before I did but this was still in here so I'll show you where that is but so let's take a look at just a few different elements and where we can put these things so the first place I'm gonna go is into the widget instance so I'm so I access this menu by doing ctrl click right on the list right on the widget and I do instance and page editor okay and so this is the instance record right I'm not going to go into all the service portal theory behind widget instances and everything but every time you put a widget on a page creates an instance of that widget right and then you can edit the options and properties of that instance without affecting every instance of that widget okay so here you have a CSS field in the widget instance I've got a bunch of stuff in here that I've got commented out and we're just gonna kind of bring those in one at a time yeah you can see down here at the end I've got some button styles that I hadn't commented out so let's look at let's just look at this one first so what did I do so I targeted the button class right on the button class yeah so let's get into this alright so if you've never gotten into your element inspector right you just right-click on the page choose inspect that pulls up this panel right here where you can inspect all of the the code behind the page right in this panel I have all the HTML so I can use this button right here to target something on the page right now I'm targeting that button so it's a button element and I see it's got the class of BTN so that and BTN that's a common bootstrap class if you're not familiar with it right so there is already a lot of styles that get applied to to the BTN class okay but here's the styles that that I had applied right this right here is but what you see there that's the this idea I believe of my widget instance all right so it scopes this so whatever styles that are right or only going to be applied to buttons inside this instance this would instance right so so my styles are not going to affect any button on any other page or outside of this widget so what did I do here well one I just adjusted the border radius slightly with this style I added a transition on there what is the transition do you see when I hover over it doesn't just flip to another color it actually transitions to it that's nice I adjust the line height to make it a much bigger button adjust the font size all right so that's a really easy thing you can do right off the bat make your buttons bigger much easier to click on a little softer when you hover over it so if we take a look at some of the other styles that I I put in here just as an example for buttons let's look at number two see that one's much rounder and it doesn't change quite as much on on hover right so that's that's one really easy thing you can do to give a little character to your forms or maybe even make them a little easier to use it is adjust your buttons styles let's see here what else can we do here and let's start take a look at some of these other elements how about the panel let's bring the panel styles in here so I'm not a huge fan of out-of-the-box bootstrap panels I just think they're I mean there's nothing wrong with that it's just you see them everywhere right it's so let's let's apply just a little bit of new stuff to the panel and some of the elements inside of it all right so some of the changes that took place you can see there's no border anymore instead there's a drop shadow I took off the border radius so it's just got sharp corners put a drop shadow on the title of it all right so now this form pops a little bit it's not just your your standard roll boostrap form so let's take a look at what I did there so you see I took the border off so at the border radius and I put a box shadow did a few things to the title to the short description yeah all you know pretty simple CSS stuff here you know another thing I like to do is say like say letters face and see what three pixels does there I kind of like to space out my title a little bit sometimes yeah maybe a little much but you get the idea all right what else can we do here let's skip this that was something I was playing around with let's let's update the labels will bring those label Styles back in so what are we doing to it we are where'd they go increasing the font size making it uppercase getting a little text shadow so how does that look now not bad yeah specially with the very simple form or imagine a login form you know you might want to really space this out a lot more may the fonts quite a bit bigger all right that's I want to spend a whole lot of time on this because this is really just becoming a CSS lesson let's talk about where you can put this stuff now so so here I'm putting it in the widget instance right this isn't a bad place to put it because if I only want the CSS to effect what I'm seeing here on this page then that's exactly where I want it to be now what if you have multiple portals and you're all using the SE CAD item page and you only want this to affect your portal so your first thought might be well let me put it in my portal screen as a CSS record our CSS file but that's going to apply to everything and then you are gonna have to get really specific in your CSS just to target this stuff so what you want to do in that case is you're going to want to set up a a clone of the cat item page which I've already done here I'll just show you so I've made my cat item page which is an exact clone right has all the same stuff on there right but this instance of the SC catalog item widget is different than this one right that's on this page and this one is on this page so I'll set up a page route map go to page route maps on your service portal I think I actually already have it great yeah so we'll go to default cat item page routing so I created this right this doesn't exist out of the box so I created one that says for this service portal I'm gonna route from this page to this page all right that's already active so I'm just gonna get out of here now and go back to let's go back to our widget instances all right so because that page route map is active I'm actually not on this page right now even though my URL says that I was routed to the my cat item page so when I go into the widget instances so this is the one I've been updating right here right this is not this is not the widget instance on the SE cat item page it's the widget instance on the my ok item page which we're actually on so I can just demonstrate if I just change that to my you see the styles are the same but if we go back to SC and I turn off that page route map okay and we'll navigate back to SC we should go back to our default styles see that because now we're actually on this page so that's one way you can you know kind of use the same page is what the portals are using but only apply changes to your portal so I'm going to reactivate that okay and then when i refresh this it's going to route to my cat item yeah all right okay so that that concludes what I wanted to show you about CSS right there's just a few different places you can put it one other place we didn't look at here go to page in designer you can put CSS at the page level too so here I'm looking at a WYSIWYG view of the page layout I'm gonna go up to the page settings I can also put it here right but keep in mind that's you know so I could also done this right just put my CSS at the page level for my cat item right but hey maybe there's other widgets that end up going on that page that I don't want to be affected with my CSS so I would put it at the widget instance level alright okay enough of CSS promise now let's go into working on some custom elements so there's some questions in there I saw what can you do with the date picker variable what can you do with reference field I'll try to get to those I'm going to show a couple of other examples first we've got plenty of time here so let's let's take a look at a few other examples that I have prepared and then we'll see if I can get to those so for these I have prepared an order pizza form cuz I'm always hungry and pizza is my favorite okay so this is just a very simple form do you want pizza well of course I do all right what size do you want I want a large of course any special requests No anchovies right I'm not gonna worry about submitting this right now because this isn't really about submitting requests this is about what are we gonna do to make these variables much more exciting okay all right we got a couple of questions coming in let me just pause here I'm gonna hit those specifying the location of the light source foreshadowing oh good question alright let's take a look at that so we're looking at this text shadow right here you can see that my shadow drops down to the right as if there was a light above it to the left right so to take a look at my CSS property here text shadow these first three or the first two are my X&Y coordinates right so X is going to be you know if I want to adjust it horizontally see that now it's all of Darnley over there and then this one is vertically now this one is going to be my spread your you know our EMS on this on that property are a little difficult pixels might be a little C yeah one pixel I've got a nice crisp line but the higher it goes it spreads out right it's fuzzy and then over here Mike my color I always just like to do I use the RGB a black and then I set opacity on it that's kind of my favorite way of doing shadows all right so I can make this shadow darker by making it more opaque so that's the text-shadow works cool all right let's see Jake's hey Jay it's good to see you buddy is there any way you suggest organizing theme variables and such for CSS yes if you make a new widget and you want to take advantage of the CSS colors defined oh yeah absolutely so some some some very basic best practices with with CSS is if you have properties that are defined by your theme here let's just go take a look at portal so we can see exactly what I'm talking about right at the portal level guts you can have CSS properties defined I've got a couple in here from a past project I was working on where I was specifying colors right because my primary color if I decide it's a shade of blue and then later decide is another shade of blue I don't want to have to hunt that down everywhere I've put it in my CSS so I'm gonna define it once here say all right Maya my quick primary color is this so now I'm just going to refer to primary everywhere and now I can change this all I want and I don't have to go out and it down so there are a few different places you can put this right here's one place you can put CSS variables you can put CSS variables in your theme record all right and then in your CSS you just refer to that so I've actually done that let's take a look at where was some of that CSS it was on the widget instance where did it instance let's take a look where I made use of that yeah okay I didn't really I didn't activate these ones oh here here's actually a very good here's a good little lesson all right so if idea if I bring this CSS and what I'm trying to do here with this is effect a drop-down drop-down choices right so you can see what I did with this one the background color I referred to my brand primary CSS variable right so whether it's in your widget CSS your CSS files your instant CSS or ever always make use of these and as long as your I think is it Madrid I think mid Madrid now or since Madrid see the CSS variables are supported everywhere you know it didn't used to be a used to only be in your your widgets I think anyway but now it is okay so let's let's bring this in and let's see the effect that it has on my drop-down okay let's go back to my crate incident form for this actually alright so see it didn't really have the effect that I wanted even though if I if I look in here I can see it's like all these all these select two classes that's what I'm that's what I'm targeting here right so why isn't that working well because this this drop-down this actually gets inserted on top of the Dom so this is no longer inside this widget instance anymore so if I want this to take effect then I'm actually going to have to take these so I'm going to take them out of there and I'm going to put these ones now at the page level let's see how that works there we go now that's see what I did I made it much bigger much easier to click on don't you love those drop-down menus where like you're scrolling down it try to hit it if you like move one pixel in the wrong direction the whole thing collapses yeah that's what I was trying to fix you're not not actually these dropdowns don't have that problem very much but yeah alright so something that that answered your questions thanks for those very cool yeah they give you a chance to cover this - I forgot about this so yeah depending on the the part of your forum elements you want to target the widget instance may not be a good place for it because yeah I'll show you so if I target in on on this you'll see here if I keep going to the parent element eventually boom I'm like on top of the page right so this gets it's a it's a mask that gets put over the page and then you have this so that's why when you click outside of it you're actually clicking on this mask and the thing closes all right we got another question does anything change if you are in a scoped app instead of being in global not CSS wise or a CSS well I mean yeah okay so if you're targeting an element and a scoped widget from a global stylesheet you may have to get pretty specific on your CSS to override anything that might be at the widget level right because but actually I actually it doesn't really even matter that scoped at that point so I actually no I don't think anything really changes that yeah unless I'm not quite understanding your question but if it's just about CSS then yeah CSS doesn't really you know CSS is actually already kind of scoped in service portal in a way alright I'm going to I need to move on to these other let's look at getting some custom elements on here because this is where like I said this is where it gets really fun and I would be quite this point if I spent this long preparing on this part didn't have enough time to do it all all right okay so we're gonna go back to our pizza form or order pizza okay and I had three variables on here and some UI policies right do I want a pizza of course I do any special requests all right so this is all fine and dandy let's take a look at this catalog item or there's a record producer where is that or a pizza yeah [Music] just give it a moment it's waiting it knows I'm hungry you didn't actually order a pizza I promise just trying to open this darn record producer alright so let's take a look at our variables I got a yes/no a multiple-choice multi-line text and a macro right we're gonna be there's nothing special about these these are just plain old variables so we're not going to look any further end of those where you look at this one the math there we go okay okay so this macro I said is going to be a widget get some variables I called it let's go to that widget [Music] okay so now now we don't have to go back actually we do have to go back one more time because I need to turn that variable on it was sorry about that it's still deactivated okay so we're turning on her pizza variables macro and let's see what that does okay nothing yet but if I answer the question nothing yet okay let's see let's go a little to her all right let's make sure we get this on the page oh you have to reload we're like a producer make sure that that variable is good that save oh it didn't okay I know you guys saw me do that don't make me like rewind the webinar I clicked active and hit update I know I did all right let's do it again all right do I want to pizza yes okay all right so you see what happened here I've got something else going on down here then I got another thing going down here it looks kind of ugly though we're gonna have to fix that so don't worry about that right now actually what we're going to do let's we're gonna just take off that CSS that we were doing before because I think that's kind of messing with us right now we're not working on that right now anyhow so let's take all that CSS out also at the page level remember I'm not Bob Rost we're not painting a complete picture and just showing a few different things all right let's try this again yes all right okay so let's take a look here at what's going on so you can see I have kind of these two variables reproduced right I got my size and I'm gonna got a special request let's actually go just one of these at a time here so I'm going to open up this widget and let's start inspecting this yeah so Jase will have this uploaded on YouTube I'm also going to have this widget here and you know all the other supporting files in a in an update set for you no worries okay alright so let's take a look what I'm doing here let's start let's start with the client script let's close everything else down let's not be this good to actually buy anything let's not even look at this okay our client script we're doing two things in this right so this widget gets embedded on the catalog item form so now this is a blank slate for us to do whatever we want in this catalog item first thing I want to do is I'm just I'm setting up an easy reference to the G form object the G form object is everything you want to know and everything you would want to do with the catalog item form so let's go in and look at that so when what you actually let's what you actually get with this okay so remember I said that there is a Chrome extension that you're gonna want this is it right I just drilled into an HTML element which this is actually my widget that's sitting on the catalog item form I can go into the angularjs scope of that now we're going to my scope and then here here's some your some properties that I've defined so here's that g form object all kinds of things in here we've got you can get all your fields you can get field names set values get values right so if I need to interact with the catalog item form in any way I've got all these methods that I can use furthermore also make a reference to the variables themselves and get some really good information about them for example so I've set up this object this field logic which - so this is actually synced to the actual size field right so it tells me what my choices are I know if it's mandatory I know if it's read-only if it's visible right so all of the stuff changes as you interact with the form depending on your UI policies and catalog our client scripts etc right and I don't want to have to try to reproduce all that stuff to try to tell if a field is mandatory you know based on other fields so I'm able to to know all of that stuff from the G form object right so so that's what I'm doing first is I'm adding to my data object the G form object by that creates a reference I'm also spelling out a couple variables that I want to convert right because that's really what this widget is meant to do is used to convert existing variables on the page into new ones so let's take out comments for now let's just focus on the size all right I'm going to save that now well just so you know nothing in the server script we're not doing anything server-side here let's look at our HTML element now I created an angular provider directive called GF variable embedded ER or and better because I want to be able to use this functionality that I'm creating on any variable that I want and I don't want to have to like recreate everything behind this over and over and over right so really if I want to use this on another form with another set of variables I just create a new widget here's my HTML template and here's my client script everything else is in here right so this becomes extremely reusable so let's take a look at it all right well actually before we do I keep looking over here I'm feeding it my data object my client-side data object this is scope data and this is just a this is there's an attribute that I made up cat data right and this is the name of my directive so in an angular speak so service now calls them all angular providers angular providers can be directive services or factories right this is a directive provider so here is over here now don't let this fool you this way it's spelled camel case is this right when you're in the template it's going to convert camel case to these two the - notation or however you call that alright restrict e this just means that I'm going to be calling this oops by element name right so this this is an element right I could use C restrict C and call it by class and then I would just like you say div class equals EGF variable embedder but excuse me I got some of my throat Olsen ok wells are there all right yeah ok so I'm not gonna explain everything about Directors here but suffice it to say you can also then from you know this is where I'm linking that cat data attribute to a local object you know so I've locally named object so now now I can use scope data in my client script and in my HTML template and it's just like scope that data over here so that's how I link these two up ok and so what am I doing here for every variable that I define right now we're just doing sighs I'm doing well I'm getting that field right I'm getting the field object from the g-form method so now when I repeat which through my variables or my fields we'll say I'm kind of using the words variables and fields interchangeably here so when I'm repeating through my fields I'm actually working with the original field object from G form all right so there's a couple of cool things that I can do with that let's go ahead and close this down then I let's see here so I only want to show this if the visible property is true right and that gets flipped on and off based on UI policies I don't have to script anything else now right I just have to watch that property and so I'm also I'm switching on field type right because I might have many different variables that I want to variable types that I want to replace so I've got two examples here I did a multiple choice so when the field type is multiple choice I'm calling in this directive when it's a text area I'm doing this one all right and then there I just I'm also passing to these the G form object as well as the field object so that's carrying through all right so now let's take a look at that directive this multiple choice directive and you'll see what I'm doing there and I'll actually get this working all right there's a multiple choice directive okay so you can see it's a very similar format to the other directive right we're calling it by element here were we're connecting up our scope field in form I have just a simple function here for forgetting style of well I'll show you what this is doing in a second here so here let's say should just go back over here I'm first I need to reinstate the CSS is that why it wasn't looking right before and then you close that down and you look at that anymore let's give this another try there we go this is looking much better all right so I've taken in this variable and reproduced it in a completely different way all right so first thing you might be wondering is where those images come from well that's just a sneaky little trick in my image Bank I just loaded these so there's the variable name there's the choice value all right and then you can see over here how do I get the background image well I just take the field name and the choice value and I and I go grab that image right so that's what I'm doing there right that's not actually loaded into the catalog item anywhere where I suppose you could do that right you just extend the the choice table to load an image stuff like that but here's the cool part on a medium it just looked at medium down there I want a large just select a large there right these two are in total sync with each other how'd I do that because two ways one right there I set the model of this element to be the field value so whenever the field value changes you know we know which which item is selected and then this when I click on an item I'm going to RG form object which I just passed down here just just form right and I'm calling set value this field that choice right and then I've got some other things on here so if it is selected right if this value is the same as the field value the and it's going to get the selected class right so I was able to use all that stuff that I found in the field object and in the G form object to easily keep these in sync with each other okay so now let's bring it my comments field so say I want to do that - the comments - because right now we just got this right there are any special requests so let's reload it of course I want a pizza I want a large pizza any special requests yes no anchovies and look at that see how these two are in sync please don't forget lovely huh and you like this little input let's take a look at that so how did I make this well actually before we go any further you might be wondering yeah but now we've got like two sets of variables on the page and that's silly well linked I need a I need Legend of Zelda theme music right now link to the rescue the link function alright so I commented this out right because I didn't want to show you yet and our link function I'm looping through all our variables and ones I defined that I wanted to replace and I'm just finding that in the Dom and I'm removing it so let's take that let's reload there we go beautiful okay so let's take a look at that other directive right this one because that's a little fancier let's look at that one so that one let's go to angularfire we've got about ten minutes left I don't know if I'm gonna get to the reference field or actually be able to do these but I can talk through them or the date picker with the confirmation message but let's take a look at the just the text area first and an atom yeah my girlfriend loves anchovies I don't somehow we're still together apparently Adam Shelley likes anchovies no offense there is sir I want this to be a safe space for everybody so if if you are an anchovy lover I really apologize I will try to be more tolerant and not trigger you all right where are we text area text area so okay so very similar to the others right restrict Bayona passing infield inform I don't have any link in here or no no function how to put I don't need any any client-side scripting here it's all in the template all right so for this one I just used a form element and now there's this and the input container what is that okay so this is where I'm pulling in a third-party library to create some cool elements but you can see I've got some of the same things going on here right ng-model you recognize that other one that's where I'm I'm binding the value of this but with a text area you actually want to bind it to the staged value and that the value interesting enough you can set a max length but that's really about all I'm doing here oh and then also right I'm giving the the label of the field a red color if it's mandatory and it hasn't been filled which doesn't apply to this we'll look at that in a second - all right so so this right here this element that might look foreign to you that comes from the ng material library so let me show you that really quick [Music] so if you go to angularjs material so material angularjs.org so that link is in the in our in the presentation let's go to where was that text guy wasn't it input so you can go and just browse all of the components that they have and so so I kind of liked this one right I liked how that will work so I went to hear you sirs down at the bottom I just saw what you know how to construct that but that's not it I mean that's that's how I knew how to you know HTML HTML elements to use but there's one other step and that is if we go take a look at this pizza variables and we scroll down do we have a dependent actually yeah let's talk about a couple things here now that we're here so that right this is my widget that's embedded on the catalog item for a macro variable right we have to attach the one angular provider to this widget variable and better that's what makes this so repeatable right so I can make and actually you know okay is starting to think out loud I'm realizing how this is can be even more efficient right so so this widget should be very easily repeatable right I should be able to name it whatever I want and just drop this provider in there and tell it what variables I want to watch and then I just had to attach to that provider via angular providers right so I just realized that I have all this stuff here in the CSS well let's take that out and put in a better place right because I want this widget to be super reusable so I let's just say this dependency that I'm using and Jeevan material I created it just for this purpose right so let's actually go into this and add a CSS file to this actually I'm not going to do it right now just because I just realized there's other steps right because then this dependency you can actually set it to the lower on page load which where I believe that CSS will be applied to the whole page and really I really only want to target that with it so let's not complicate at the moment let's just put this we'll put our CSS back into that for now you know as you can see there's many different places to put it really what I would want to do is actually dice this up a little bit beside what could be applied to the whole page what I wouldn't want to be etc anyway let's look at this dependency alright so ng material I gave it this name ng material I'll I want this to load on page load because of the way the library works so I'm specifying portals that I want it to load for alright and this has a je s include this is the ng material JS file and I'm just calling it by URL you can version 1.1 dot 19 I'm also importing the ng material stylesheet now if you notice the blue here right that's coming from this stylesheet if you want to make sure that it's in line with your theme you're gonna want to not call it by URL but embed this as an actual stylesheet and it's actually not that hard to go through here and and update the colors I know it probably seems like it is but like there's actually just a couple of places where you would go in here and and change your color values so it's not as daunting as it looks but that's what you do so so this dependency right you need the stylesheet and you need the j/s file and i load it with the widget right the patch might be two variables so so this budget really dependency and these displeasure able to unless the one more time and look at that angular provider the textarea right so a lot of the standard stuff that you would do with a farm especially in angularjs your model and everything but just like a few other things I can set the max length of it how many rows I wanted there to be right so so going and do some studying in angularjs material it's actually really use it's pretty flexible and and you do some pretty awesome things right that's a it was just a much funner text box than then what you get out of the box all right well hey we're we got four minutes to spare and I don't feel like I had to rush hopefully I was able to show you how to use some of these methods and help you understand them so that you can take them and do your own cool stuff with them order your own pizzas any other questions well we got just a couple minutes left No all right well thanks everybody for joining we will look like I said we'll get the update set published to you one way or another give me a minute to clean that up we'll get that out Oh participating in a hackathon when we do it for K 20 we have several social conferencing events happening I know for GLAAD I fast maybe this would be a great place for Lauren or somebody to jump in I think you could probably answer this a lot better but me personally in the hackathon I haven't had any plans yet on that I'm actually kind of in the middle of moving so my extracurricular activities are eliminated moving back to the East Coast but yeah we'll get this update set out to you so you can see my examples this presentation to you your free email Jeff Pearson glide past helped you out with anything my screen for a second Jeff oh yeah awesome yeah and if everyone follows a glide fast on Instagram Twitter LinkedIn we will be having a big announcement soon in regards to knowledge 20 and with that being said we are almost out of time for our presentation so we do want to announce our winner of the $50 Visa gift card and it is tom nar savage so congratulations Tom will directly to you but if you didn't win today don't be discouraged every on-air webinar you attend for both Glide fast and our sister company fair code will give you an entry into our grand prize giveaway of a mirror which is a fifteen hundred dollar prize value so we'll select the winner for that in June and we'd like to thank all of you I know we're at two o'clock right now so thanks everyone for attending the webinar we hope you enjoyed it and definitely register for some other glide fast on-air webinars and we hope to hear from you all soon [Music]