welcome everybody what are we covering we're going to kind of take a deep dive into some advanced portal techniques and specifically enhancing your forms creating custom forms with custom variables but i just thought i was going to call them variables and spell them differently anyway what are you going to learn today we are going to show you how to systematically replace your form variables with your own custom inputs so like i've done here i've imported the ng material library which is the third-party javascript library out there and i've created reusable replacements for all of these fields that normally appear on the out of the box ask a question record producer so we're going to look at several components that it took to do this now this is similar to a share of the wealth that i did a while back but what i did in that one is i showed you how you could replace some form inputs so we're going to repeat that small little bit but this is more about making that more of a reusable solution this is very applicable to actually enhancing your forms but what you learn here is hopefully some angular tools for your toolkit that you'll be able to do you know all kinds of other things with so we'll be looking at how to connect your form up to your widget using the g-form object we'll be creating a widget variable with some fun client script stuff in there we'll use an angular provider and a template create some reusable form input templates and we'll be using a widget dependency to import the ng material library so let's go ahead and just jump right in to the demo i've already got this all built out so we're just going to kind of walk through the components and maybe play with them a little bit alright so what we're looking at here is just an out-of-the-box catalog page catalog widget right nothing special i did to anything in the portal here but what i did is i added a widget variable to the ask a question catalog item that transformed it into this so we've got our regular input there you know nothing really special about that but we have a different kind of input selection for the select box for your input fields here we have different types of fields that are kind of fun to use and then you know i've added and also the ability to just easily show and hide the help text in any way that you want so you know i've set forth just a very basic template of setting you on your way to a few things but hopefully you guys can take this in other directions and do much fancier stuff with her or add on to it all right so let's take a look at how this was built so i'm in a paris instance here and i've got everything in an update set i can publish this out afterwards so let's go to ask a question actually that's under record producers so the only change i made to this record producer is i added a widget variable right i called it variables okay and of course that's pointing to this custom widget that i made variables so that's all i had to do to this record producer everything else happens in the widget so let's go ahead and go right to that widget so let's take a look well here let's go into the client script first so i think you might be surprised at actually how easy or how little code all this took so the very first thing i did in my client script is i just create a reference to g form right g form is going to give me everything that you would normally get from g form you know when you're doing client scripting when there's a form present on the page next thing i did is i just identified the types of fields that i want to replace because i don't have templates in there for everything yeah i just did this for four different types of fields and then this code right here what this does i'm populating a fields array with so you can see what i'm doing here is i'm getting all the field names on the form and for each one i'm just seeing if it's one of the types that i want to replace and if it is then i'm pushing that field to my fields array so that's then the array that of fields that i'm going to use then when i print out my custom templates all right so how am i printing out those custom templates so you see over here in my html template it's very easy i've got i'm using my own custom directive and repeating that for every field in my fields array so all right the fields is just you know the fields that are are of these type so let's take a look at this directive here now how did i do this why do we do this so directives are a great feature of angularjs really that's kind of like the crux of it it's the ability to have these directives in your template to create one in service now you go to angular providers well actually you can see right here so here's here's my widget write variables you go to the angular providers list i created this here this is what my directive looks like actually just let's open it right here right got it here too so let's close these down so you've got a few different kind of directives right or actually really mainly three you've got different kinds of providers right there's directives services factories so this is a directive i'll just kind of walk through each of these properties pretty strictly so this one tells how i call this provider or how i call this directive so i'm using e e stands for element so that means my element name is actually going to be the name my directive and it does the camel case to conversion automatically right so i name it this with camelcase but then this is how i call it and then scope this is where i'm tying right here this field object to whatever i pass in as field so you can see right here i just have a variable that i defined called field and i'm passing in my field that i'm iterating over replace is true this is just saying that you know i'm going to replace this whole line with whatever template that i provide so this is where it gets fun here so this is where you can you know maybe if you've seen other directives you've seen them actually write the template out right in here and it really sucks because you have to pass everything you know your whole template your all your html in his string that's really lame so use template url so how you use that now there's no module for this there's no way to get to it you got to go to it manually spng template that's the table all right so here's the one that i created variable field template so each one of these templates gets assigned to one and one only widget so i've assigned it to mine here so this is where i have my templates for the different input types that you might have but we don't need to look at it here because we actually have it here in our widget editor too all right i can look at it over here so this whole template is what's going to be inserted right here for every one of my fields and of course you know we use a template file because obviously i don't have to write everything as strings here it's just much easier to manage one note about your templates do remember that your templates can only have one root element see how i have md input container and that's it and that's what closes it i can't have another div down here that's gonna it's gonna mess things up actually it'll error out on you okay so let's take a look into what i'm doing with the each of these input templates to tie them to the fields because here you know let me do something here really quick let me just comment this out and we'll demonstrate something okay so what i did i just turned off my line where i was hiding the original variables just so that we could see them all here and just so you could see that say what i typed in the short description see how it populated down here because i've got all my custom ones bound to the original field i didn't necessarily create new ones i'm creating new templates and binding the values of those templates so let's go take a look at how i do that okay so this is repeated for each field right i put a switch on here so it's going to we're going to switch on each type and so for all of them regardless i'm going to print their label so now you see when i have a string this is my input when i have a text area type this is mine a reference is this a choice is here all of them i'm giving them a unique id just whatever their field name is then i use ng model so this is another angular directive that you can use to bind the value of something to one of the variables in your scope right and in this case the value of this field and there's all kinds of other things that we know about that field that i can use to control this input right i know it's max length i know when it's mandatory or not based upon this property when it's read only or when it's visible see so when it's not visible i just hide the whole thing thing or let's look at text area i guess there's nothing really that different about that one now the record picker so this is using the service now one right this isn't anything special here there is an ng material component that works like a record picker that's going to take a lot more work because you're going to have to do you know a rest call to actually perform the queries and stuff yourself so i got to finish writing that but when i finish that i think that's going to be a pretty awesome component that everyone might want to use so yeah so for reference i'm just using a regular old record picker field but then choice we're using an ng material component so we know what choices are available so i can print out all other choices this is the just the toggle for showing or hiding the field help text so these behave the way they do right because they are ng material components right i've imported that library through dependencies so if i look at our widget and we go down to dependencies you see how i have one called ng so this is a way you may have used these before maybe preaching the crowd to a lot of you but this is a way to bring in third party libraries scripts css things like that into your widgets or to your page so this one ng material you want that one to load on page load and so then i i've selected just this service portal otherwise it could load in all portals and then so for ng material yes i loaded this the ng material js just into a ui script and so i'm pulling that in through this part and then the css this is the style sheet also i'm just calling that one in by url so that's how these fields behave and look this way right i didn't have to do anything extra just because i pulled these libraries in and that's where it's getting the styles and the behavior from so as you can see all i had to do was define you know i just had to figure out with ng material which properties are relevant for each one and the documentation is pretty good for those also okay so then to hide the original ones that is in our link function so whenever you do dom manipulation in your widgets you want to make sure you do that in your link function as a best practice you can do it in the client script but you're really supposed to keep that all in the link function what i'm doing here is i'm just going through that array of fields that i created and for each one i'm finding the original one right because out of the box their templates all get printed out with the id of their field name i also gave them the same kind of id but none of them are on a div i may want to tighten that up a little bit just to make sure that i don't eventually end up hiding my own accidentally but anyways that's how i'm doing it now and so i'm just adding the class of ng-hides of those so it doesn't remove them it just hides them let's go ahead and save that all right let's refresh this so what these are doing as you can see these are really just kind of controlling the original fields that are still on the form they're just hitting all right this is just a new layer of it all right and let's just test this submit it all right so everything's set properly my user my description my short description also we just wanted to double check that what if i tried submitting it without it's still going to tell me short descriptions required and i do have an asterisk there it's not very big so you might want to adjust the css a little bit on these to show how i did that right what was that that was the short description so that was a string so to set an attribute dynamically just do ng in that attribute in this case it's required disabled and you know we have those properties from the g-form object that we can use okay let's see anything else that i wanted to show you here yes nothing in the server script here right so if i wanted to keep adding on to this right i would you know want to keep building out each of these different field types right figure out exactly what properties i'm going to want to maintain for them figure out where in the g form object that i could find that information yeah so my next step is to here actually i'll just show you that right here so mg material so here's the ng material library if you go to demos you can see here i'll actually show you it's the auto complete yeah so this is essentially what our reference field would be right something like this it shows you how it's done right so you can just take this code and everything copy it right into your widgets this one of course is going to be a lot more complicated you know they have a lot of different i mean there are several different functions used to maintain the list and you know what i would have to do is like i mentioned earlier set up a rest call that i actually go and do the glide record with the appropriate reference qualifier and everything to populate this list so that's something i'm still working on some of these other ones are super simple like just for example the inputs you know go and check those out like there's the first name let's go see how they did that there it is just copy that right in your template i mean as long as you've got the engine material dependencies set up yeah you got a lot of different components that you can use here a lot of fun stuff so like the select box is this one right here right and so you've got ways of deactivating certain items in it different ways of styling them are not necessarily styling them but you know you can have different types of selections so check this stuff out these components are nice and you know as you can see it's not that hard it's just a matter of matching up the appropriate properties to your g-form properties but that's about it you know you saw how easy it was you just once you get this widget set up you can throw this on any catalog item to replace any variables so if you wanted to say you've got one catalog item where you want to replace the string fields got another one where it's like this case where you want to replace all of these kinds what i would do in that case is create two different variables one for each scenario and you know you would just change this i've got a question what all of the client scripts and ui policies still work if you did this yes because here let's go ahead and turn this piece off again so that we show those so these respond immediately to any changes see that that's now medium and so you know say you have a client script or whatever checking for values and it's going to stop the form or like in this case you know i don't have the short description populated so it's just not going to let me so anything that you've got going on client script ui policy wise you know say say i select one of these and now description should disappear it's going to happen because we've gone through the trouble of binding all of those properties so for example so we know when it's required we know when it's disabled we know when it's visible so these are all responding to that that original g-form field object so any changes you know it goes two-way any changes we make down here happen up here i mean any changes or rules up here also get enforced down here hey jeff a great presentation by the way i do have one question in the sn record figure that one's supposed to replay the reference right which property is the one that binds the data i didn't see any in there versus the other one is ng models right how would the record gets created would know which data is this yeah so this one is a servicenow directive right these other ones well these two are just standard html elements right this one is an ng material directive and this one is one that servicenow created so it's right here so it's this property here field that actually does the ng model and stuff behind the scene oh got it great thank you yeah so there are a lot of a lot of other field types that can be done here and you know of course just the ng material is one way i did it right there are a lot of other libraries out there for form elements another thing you can do now also is we can attach in our dependency so this is our right this is my angular provider that i created ain't a whole lot to it right because i'm pointing to this other template file that does most of the work but we can provide all kinds of your own functions here for responding to form interactions right and you know when to show messages and things like that so if you ever do want to get really fancy with it you just come here into your directive and start manipulating your form thanks for attending feel free to reach out with any questions [Music] you