logo

NJP

Master ServiceNow Client Scripting: How to Call UI Pages from Client Scripts

Import · May 02, 2023 · video

foreign [Music] script okay and what are the different methods using which we can do that so if you have not if you are not familiar with what is UI page in service now I've already created tutorial for this way you can go and look into the same so in order to call a UI page into class if the first performance thing what we need is UI page right so let's create a UI page first so I will just go to UI page in the UI pages I will not explain the components because our intention is different today and we want to give the name for the so I will give greeting as a name and will give will create a simple div whenever you are working on UI page whenever you open any tag just close it out so that it will not give errors at latest rate and you can give paragraph like a paragraph and I will give hello and and let's close the paragraph out and then I will give H1 and I will give my name hello myth Gujarati action is closed so done so we'll give only this thing into the page okay and I will try to see this out for which user for which particular role I will just give RTL for now because only itl user will be playing around incidents so it got saved okay and to try it out so it looks nice okay hello perfect now what we'll do we'll go to our favorite table student Dot list will go here configure we want client script right and we'll be creating on load clientscript so our entities like whenever oh a user comes to incident form this particular message will be displayed okay we will keep creating we will try to make him happy so that he will not screw us out with the incidents okay so let's create a new I'll create a name as what UI your page call type will give it as on load Okay so nothing came up and now what we have to do what we have to do is we have to call the functional so there are two methods using which we can call it out one is a fly dialog window API and the secondary line model one and we will see the difference between both of them so let's use the Glide dialogue one first so how to define the accent type for it see its variable slide dialog window GW I will give okay equal to new slide dialog window we have to just provide the name of the your page so creating and then we can simply do DTW dot render dot render so this is done okay let's save the form and I will do now incident Dot 2. let's see how exactly it comes up so we open the form a dialog is open oh wow we got a hello amigosity but is it a truth for other users right that every time it will be Amit Gujarati only no right so let's do some modification let's go back to the UI page and do some modifications I will just go to the history from history we'll go to the UI page and now we'll be looking how we can pass the value from client script to the UI page so there is a syntax which you have you have to learn only okay because it it's kind of tricky for me also okay so it's G and G colon evaluate okay in that we can give variable which particular variable it should store so I'll just give it a name as um for example J Bar text okay expressions expression in that we can give r p and if you ask from where did you get this I got it from service now community window prop properties Dot get and in that cat we have to pass the variable what will be passing from the client side okay from from the from the client side so I'll give it as name as user okay user and we can simply close it out perfect right and then we have to replace this Amit Gujarati with the same so I'll just remove the summit Gujarati and I can do g under what we can do not g underscore so we have to just pass it into the curly breath so you can simply pass it like how dollar and in that you have to pass the variable so it watch your text done we have done on the client side now let's do some modification to the server set for the same sorry for on the client side for the same so go to history from history we'll call this current call UI page and in this we have to pass that attribute now right so how to pass that attribute so it's pretty easy now what do you have to do you have to slide dialogue window Dot set preferences and in that you can give the name of the variable which have giveness user and then we can pass the value so it's three underscore the user user Dot get full name okay and save this out so we will go to history and we'll open the instant new record so it's getting should get load now and now we got hello system administrator oh and system administrator at this particular point of time so we got hello system administrator but do you think it looks good okay we want to impress the user we want to make him happy so that he will not raise an incident but if you see this kind of pop-up right he will raise three incident instead of one so how to make it better for that we have another API called Cloud Model so let's see how it looks with the Glide model one so I will go again to the client script you have policy call and you also thinking oh we have to learn one more method right one more API but it's not that difficult what you have to just do I will just copy this out okay so that you can see the difference copy it out paste it at the bottom will comment this out okay and instead of Glide dialog window you have to just add Glide model okay so you have to just add carried model you can just change it out she GM if you want to follow some naming convention and that's it nothing has to change okay so the only difference is with this name only like dialog window install Light dialogue window we have to justify the Glide model now what I will do I will save this again we'll go to the history and hopefully you will see the difference we'll go to the instant in your record it's getting load and now you can see this it looks like this so when it comes to Glide model it it makes it beautify it supports more what we can say it's responsive okay it adjusts itself according to the context okay Automotive content of the page so this is another way to show the UI to call the UI page from the client screen I hope this particular tutorial was useful to you okay if you like this video please subscribe to my channel so that you will get notified with my future upcoming videos till then stay safe stay happy and have a nice day ahead thank you

View original source

https://www.youtube.com/watch?v=zDXn5tSUmcQ