foreign [Music] pages so let's start with the basic so what is UI page well think of it as a front end of your service Now application you it's where user interact with your application and it's your job to make sure that interaction is smooth in iterative and download awesome right and that's what UI page comes in now I know that you are thinking customizing a UI can't be that exciting can it but let me tell you my friend it's like giving a makeover to already a gorgeous platform okay or the gorgeous model we have provided with the service now it's all about enhancing the beauty and functionality of what's already there and speaking of functionality UI page can do it all from displaying data to creating forms to even integrating with third party application the possibilities are understood but wait there is more to it with UI page you can also create your own custom widgets using HTML CSS and JavaScript that's right you are just not limited to the out of the box widget you can create your own from scratch it's like having a blank canvas and you can create your own Masterpiece and the best part of it it's all done within the servicenow platform so you don't need to worry about coding being a coding genius into any other language right you can simply use opportunities or or all the enhancement you can do okay on your fingertips only so in today's example we'll be creating a sample UI page it will be really simple it's a UI page okay where we'll be trying to create an incident okay or from a customized page uh I will just go with the basic okay but as its HTML CSS you can play around it like anything so let's get started now as you can see on my screen this is my uh this is my what we can say service from instance and it's currently in the Utah version so in order to create a UI page what you have to do you have to just go to the filter Navigator and type UI page so what we'll be doing we'll be creating a UI page using that UI page you can create an incident so we will just create a dumb effect on top of it and we would use that particular form okay of that UI page to create an incident why because I don't I didn't add any other idea to forecast it in an easy way okay so let's go to the UI page click on new so out of the box there are 521 UI Pages already created so if you want to reference certain things out for your learning you can just look into this I will create a new one and we can give the name as student demo form okay I will put it a category General learning okay so you can make home page HTML editor knowledge base service catalog there are tons of option but I will go with General okay you can provide the description this is incident create UI page okay just to give you a reference in the future okay and then it has three main component one is HTML it's pretty clear from the name HTML is like it process HTML context then we have client script if you want to do certain value mutations on the client side so you can add client script for the same and set functions and they will process this is where you can add the server set script so we'll simply go over here and try to add vegetable first so these are the jelly tax whatever you are you want to add you can add in between only so first of all we will just create a form okay so how you can create a form because it's a jail attack it's something somewhat different from the HTML not completely different but somewhat different okay so I will show you what are the primary syntax you you must know so first is G underscore G colon colon UI UI underscore form and that's where you can give the ID to the form so I will give ID equal to and let's give ideas hello or I will give incision incident and I will close the brace out now how to close the brace okay if you want to do you can simply go and do this it will close it out okay but you have to add UI form because it's a form computer perfect so the first part is done now we will writing a complete HTML if you know some estimate it will be easy for you to understand now the next thing is Center so we will we want everything in center right so we'll go we'll go with Center tab I will just close it out okay Center in Center we want to give the heading so I will just go with H1 or let's go to with H2 S2 um I will just close the H2 also always keep on closing the things so that you will not have the errors of something is open over there right outside S2 I will Define a table I don't want let's first give the heading right so I will give heading as what incident demo form okay now this is done okay now what we'll be doing S2 is defined now we will Define a table also in the center tab only so let's define table how to define table in HTM you can simply go for table it is right table I will close it out also okay under table now tra 0 and TD is column kind of thing consider that way out okay so we'll first Define TR protea and this particular TR will have TD inside it so first let me close it here and inside that now we will start defining different columns for the same okay so the first TD will be e d not d a TD and I will just give it as a requester who is the requester for the same right and we can simply go TD done sorry okay TD is closed now we will add one more TV so we want this requester to be a reference field right okay because you will be referencing to the user table and from there you will be pulling the data right so let's define TD for the same okay and this particular TD let's close it out also quickly and in this TD what we'll be doing we'll be using cell scripting so the function name is G underscore it's it's always G colon and then we are doing on DUI so it's UI underscore then you will get all the things as we are doing reference so we can use reference one you are reference right you don't have to give this spaces okay keep in mind so your reference and yeah I can give name equal to equal to use the underscore ID and then we have to Define on which particular table it will refer so it will I will get table equal to if you if you don't know this okay you should not be inside call yourself as a service no developer where the user status stored failed which particular field we want to take as a display one so we want to take name and then we will give display value display value and how to define the display value this is more important right so it will be display value equal to you can give it in a string format dollar it's somewhat different from HTML when it comes to referencing and all those things out you can simply give GS Dot because we won't get a logged in user right so we can get user and we want display name for the same circuit this display name of it right so this is done and then finally the value for it we have given the reference now we want to define the value for it so you can give value as equal to dollar sorry dollar and there are whenever I do I I always get tons of challenge okay with the syntax okay something somewhere syntax is getting um scrambled from is8 so you should be pretty sure what exactly you are doing so this is done for this okay so we have done the reference also if you have closed the TD for the same right and now you can move ahead so this was the first row okay we have defined now let's jump into the next row so I will go over here I really don't like to write so we will Define 2D I over here and we will close it out because we want a spacing over there so we'll close this here then we'll open the new tier okay we will close that also and in this TR we will Define other field now fields for the incident right so the first one will be let's copy this only all fresh hop Fest so in this Tria will add this TD and it will have the value as what we can say category category and then we will be Define the static categories for it okay whatever is present out of the box will give define those categories so I'll just give we want to drop down for the same so I'll give TD and it will be like I'll just remove this out select box right so it will be select what name equal to cat underscore ID at and let's go to ID and then we can do ID equal to C underscore ID cat ID there we go simply close this out now we will Define the option for the same before closing the TD let's close the CD first and here let's define the option in between we can align this out and then you can give option one material option value equal to 0 0 and what it will be what is the display name for it it's none none is for zero okay just keep it in mind so this is the first option we have added in the similar way we have we all we want it for all the incident options so if you go over here right let's say if I go see it and what we are trying to dot left and if I am enable if I open any incident order so we are trying to replicate this category one okay all this none and all so I'll go back over here we will copy this out so these are the option and we will give the values what is present on the incident form so for first is inquiry query and will give the same name the second one is software the third one is what Hardware I hope I'm right the right values and you can you can change the display name for the same okay it's not a problem so for instance for Hardware I will give my Hardware is it you can do anything okay in the similar way I will get network which will be Network then we have last one is database which is foreign so we have defined all the options also we have closed the TD also for the same we have TR close now we will add other freedom so what what should the other fields so if we will add one more TR stands for table row in that we will Define two columns so I will be writing the DD and what is that column is short description we will close this TD out and we want a value for it so it should be a text field right so we'll open one more TD and we will make it a free text field over there how we can Define input what kind of input is that so input type equal to text name equal to we will give short description ID short description underscore ID and I will close this out the input Tab and then we have this TD close the newly opened one and then sorry TD and then we have TR so this is done for short description in the similar way we want uh let's give this space over here let's get proper short description and the last entity what we want is description I'll just paste it out I'll just remove description and we will give it free text over here so we can give it instead of input we'll give it text area text area name equal to and give description for DTS description ID and what should we what should be the height and all for it so we can make it rules to 4 and cause 250 so this is what the dimension we are defining for it and we can close the text area so text area is also done and the last thing what we have to do is we have to define the buttons so we will Define two buttons submit and reset reset to reset the format submit is to submit the form okay so for that we want we'll go with the uh and we will close this to your first then in this TR we can Define TD and then we will close this TD and in this 3D I can Define input type equal to whenever it's the button type should be submit for submit button and what will happen when we click on it so we will on click what should happen so it should call a function called redirect which will be defining at later point so it should be redirect and we can close this out okay and then we can close the TD for the same but it is already closed right so this is done for submit one now we want another four the reset so I will copy the same Ctrl Z no it didn't get copied and paste it out why because we want another button with a name reset right so we can give TT then input type equal to reset reset on click we can give on reset button one reset button and that's it we have Center close we have G form close done see we are done with the HTML what we have done we have defined the uh heading for the incident form then we Define the requester filled it with the logged in user we have defined the category we have defined the option for the category okay which should be which will be coming into drop down we have given a input text field for short description for description we have given a text area because it can be a multi-line text then we have to find to put a submit and reset so this is done till now and we are done with our HTML file so I will save this out select use that one I can give it itl for itl user let's show this page what happened what didn't determine who we didn't Terminator with the select box okay let's do that not bad them this is what happens that this is the role to which this UI can be visible so we are done with the HTML side of it now what we'll be doing let's give it a try okay if I do try it it should showcase how the form looks at this particular point so we have this requester and then we have this query description and short description you can make it better okay so I will go back to the form okay and now the next step is like we have to first Define the functions which were defined on the name right so we have to if we have to define those functions out so for that foreign what you have to do so for that we have to define the client script so on clientscript side we can Define the on reset function first the function and we'll get on reset and this will Define a function to reset the form so how we can do that you can simply do document Dot get element by ID and in that we have to define the form name only so what was the form name we have given come on the form name was incident right so so incident can the you can Define this out dot reset so what you do it will reset the form okay that's it for this client script and then we have processing script which is server side script and what we'll be doing over here if the record is okay if if a user is clicking on submit then it will create a record of out of it so we can give variable initialize incident equal to new Glide record it will be on ident form then instead initialize then we can give and see Dot color unless code ID equal to what we have given over there because it's it's user ID so we have to provide the name we choose ID in the similar and C dot short description equal to short description underscore ID then we have Inc dot description equal to this code ID and C dot category equal to cat underscore ID and that's what I've given right see in this code ID or cat underscore ID and then we can do variable says and just go to ID equal to and C Dot insert and variable because we want to retarget verify URL equal to we can simply copy this thing out of 11 copy this one then this is id1 and I can give it over here and we just want to replace the society with the new season so how we can do that we'll just remove this out and we can do Plus SSID and we can respond Dot sign right to URL we are done with that implementation so I will save this out now so everything looks good I don't know just one thing I think I've made because the packet name should be filled name don't forget one thing over here ID equal to okay so now we can try it out so if I click on try it let's see how the fonts look so this is how the phone look I think the information with the request but we can go ahead if I say click I will give test description I will get test encryption and if we do reset it will get reset the entire form will get reset I will get software Dash short description test description and I can simply submit it all so the record got submitted if we go if we go over here and if we sort by updated by um so are opened I add it so you can see the record got created over you as an incident so this is how you can create a UI page and this was just a basic example but you can play around it like anything and be careful because you have seen what kind of challenges you are faced um with one one slash okay we have added wrongly so this is all for today's tutorial hope you liked it out please follow to my channel to get notified okay with future coming videos okay till then stay safe stay happy and have a nice day thank you