logo

NJP

#6 GlideAjax, Script Includes and Client Script Learn Application Development in ServiceNow | LMS

Import · Nov 09, 2020 · video

[Music] please subscribe to my channel and click on the bell icon to get the regular updates of my channel and do not forget to like comment and share the next requirement we have is calculate and set duration now in order to do the calculation so for example i'm an employee and i'm submitting the request for leave i select the start date i select the end date now system should calculate that how many days i have selected so if i go to my personal developer instance over here so let's say i select start date i will just make it like this let's say i select this 5th of october and here i select 8th of october so here you can see that i have selected 5 that means five six seven eight that means four days of leave but here it's showing nothing so i don't want users to put it manually that maybe i will put 10 as well i can put 20 as well how will i make sure that this should be calculated automatically and that is also on the client that means when i select these dates system should automatically populate that you have selected four days five days it should basically subtract the days and then populate it over here now how can i do that so first of all this is something achievable with the help of client script so you have to create the client script but the important piece is how will you get the data that means you have to calculate it now for that calculation we have to basically uh basically work with the glide date apis so we have glide date apis from service now that is what you have to use now those are server-side apis which we have to use for that how exactly i can i can use them so what i have to do i have to uh basically write a server side code pull that data on the client and use it that means overall i have to pull the duration so i have to push these values i have to calculate at server side and then pull the duration value that's and which i can populate in this particular field so how exactly i can do it i will do it with the help of client script now if i talk about whenever we talk uh server side scripting with client script there's one element comes into the picture always that is glide ajax so what we are going to do we will and that is with script include so we will create a script include and we will also create a client script so starting with script include over here i will close this one i will close this one and i will go to create application file so i will go to create application file i will go to create application file and then i will select server development that is script include and here i will just double click and i will give it a name so we have this leave management system so maybe i will just give it a name as lms ajax in caps uh so in just one word so i'm just giving it lms ajax but that's what we are going to use i will press tab it will create the api name over here now i have to select this check box as well because i have to make it client callable so i will select this check box now if you will come over here i will make it full screen because i have to write the script now i will make it a little bit large and i will just squeeze little bit here so now i will write the script now what exactly you do when you when you create ajax script in in script include so for that you have to basically write a server side code but you have to create a function so maybe because we have to uh calculate the date difference so what we will do we will calculate the days difference on server side level and we will push that data to our client so in that case what i will do i will do get date and i will make it diff just a function we are going to create and i can do colon and i will do function that's it and i can do like this and i can just put it here comma now whatever code we have to write we have to co write that code into this particular function so i will start with so i have to capture the value of uh the fields basically the start date and end it that's what i have to capture but before that what exactly you have to do basically you have to capture the glide date uh glide date variable you have to create that glide object of that glide date uh api how exactly i will do it so maybe i will do d1 that's a date one i will do new glite date this is what i can do i will do semicolon and here i can do d1 i can just do that dot here you can see i have the set display value basically i have to set the display value of that start date and end date so i can just do display value over here now under this for what value i have to set the display value here you can do this dot get parameter this is correct parameter syntax is correct and i can just put here now this is the parameter which we will get from our client because it's glide ajax so we will get this parameter from the client so i can give it a name so i can just do sperm underscore start that's it this is okay and i can just give semicolon next one i can just go do where d2 that's a date two and i can do new glide date and i can do semicolon and here i can do d2 dot set display value and i can do maybe i will copy this one and i will put it like this and here i will make it end rest will be same because that's what the parameter we will have so whatever whatever dates we will we will get okay i think we have pasted in the wrong section it has to be here so we will do new glide date and like this i will format the code it will be like this says sperm end and i will put the semicolon now i will so what will happen this d1 dot this uh set display value they will basically store the value of value of the field we have in start and end which i will push it via these parameters so whatever do i have to calculate the duration how can i calculate the duration i can just do where duration equal to glide date and here i can do subtract so now i have to subtract it how basically from start till end i have to basically subtract the dates so for that i can just put over here d1 comma d2 that's it and you put semicolon and here i can do return duration because i have to send this value back to our our client one thing we have to do you have to basically do uh you have to get the numeric value so in that case i have to get the numeric value for that i can just do numeric value and i will just do like this so i think we should be good so if we have return duration dot get numeric value it will basically return the numeric value because it will this this won't return the numeric value because we have to populate the numeric value in our duration uh duration field so um in that case i will just save it i think we should be good with this script include so i can click on save now the next part is our creating the client script that's our next part so in that case i will just go to over here and maybe i will make it a little bit smaller just to show you so here we will select client development and here we have client script because that is what i have to create so i will just create the client script i will give it a name and the name i can put maybe set duration that's what we have to set and here i can just select the table and this table is leave request that's our form i will just do leave request now ui type i will select all now here we have to select type now what type you think we should select idli it should be on change because whenever you will change the dates then only it should basically calculate the duration so in that case i will do on change so it is done and which field okay that is also very important so i will just put it for end date because that's a field so start date will not calculate it it will also it will always calculate with the help of stand date with end date has to be mandatory and that's the reason we made it as mandatory because without end date i cannot i cannot i cannot calculate the dates uh so i will just select the end date uh and if i come over here uh then here i can write my script so starting with i have to call that script include with the help of glide ajax so i will start creating this i will do where ga we will just use this variable where ga equal to new glide ajax or maybe let me make it full screen and i will just do new glide ajax and here i will do semicolon now here i have to put the name of the script include which we just created that is lms ajax i will come over here and i will just do like this okay so we have called our script include now i have to call the function which we just created and how we will call it so we will do ga dot add pattern and here we have to provide the parameter name so this will be because this is just a function so this will always be cisperm underscore name and if i do comma now here in string format i have to copy this function name that is this get date diff i will copy this one and i will put semicolon go next now i have to push the parameters which we created so i will do g a dot add pattern and here we will start with cis perm underscore start that's our basically first value that's a start uh date value uh the parameter which we have used in our script include and now how exactly i will push the value now value what i can do maybe i will i will just select over here where start equal to g underscore form dot get value and and what what exactly that field is that is start underscore date yeah i think that's what we have selected i'm sure if i go to leave request and if i check the field name we can quickly check this and if i select the field name yeah we have end date we have uh start date so it should be start underscore underscore date and if i come over here so i can i can basically get the value of of this particular date and i can just do like this now i will also put the new value that means the value of end date do i have to do this g underscore form not really because i already have that value in our parameter and that parameter is new value so i will come over here this time i will put over here start that's it and that's our second parameter i will do add pattern i will do like this says pum underscore i will do end now here i will do comma and i don't have to put the underscore form variable i don't have to store it i can just put new value that's it you are done and then now here i have to do now ga dot get xml we have to call asynchronously so i have to do this get xml now here i have to put uh the basically callback function so maybe i will give that callback function is get duration uh that's that's a function we can mention get duration uh then i can put this semicolon and i can just go a little bit down here now here i have to call this callback function so i can just do function function and i can do get duration that's a function we have uh created over here like function and i think we are not using a duration somewhere else so you can see we have this get duration and here i can put response that's a parameter we have to use now i will start with their answer now this is kind of i would say common variable which uh you you actually use uh during during declaring the glide ajax i think that's what now we normally uh do so we can just put where answer equal to and i can do response dot response xml that's what you have to put so you have to put response dot response xml uh i think sometimes even i forgot it so you have to just make sure you have you are remembering it you have to just uh maybe it's kind of i i would say pretty much easy that it's just response.responsexml then you have to just put document but you have to make sure that syntax is correct even because it's case sensitive so you have to make sure that you are selecting you are putting the right character over there so you have document e caps then i have element and then i can put dot get then we have a caps attribute and i will just put parenthesis here and i can just put answer in string and i can just put semicolon and now here because i am just calculating the duration now what will happen whatever value i will get from uh from our script that server side script basically it will return in milliseconds and you will definitely get this situation that whenever you will calculate the dates uh you will always get the uh the the basically results the output in milliseconds so how can you change that because you have to change that value from milliseconds to days so we can definitely do that because there's a formula for that to convert it how exactly i can do that so i can just write over here there so we will we will basically capture that value so that's basically days so we will create a variable uh days and i will put equal to and here we will just put it in the parenthesis so that i'm just doing the calculation so whatever i will get the value that means answer okay that's what i will get the answer from our script include that means over here so once you are doing here return duration so this value whatever data i'm storing over here it will be returned to my client script this client script so what i have to do so the formula for converting to days from milliseconds is i have to answer divided by i have to use this thousand this is what we have to use multiply by 60 multiply by 60 and multiply by 24 you are done now i can so now it is it has stored the value of days in this day's variable that means the duration how many days we are calculating that is something we are storing in days variable and now i can do g underscore form dot set value because i have to show that value on the form so i can just quickly show you the set value the field is duration so i can just put duration uh and then i can just do comma and now i have to put the days so that is and it's a string basically it's a floating point number that's what we uh selected so i can just do here days that's it and i can just do semicolon and yep i think it should be good so we are good with this script i would say and if i make it a little bit smaller as well so you can see the whole script together so this is the whole script we have written on change of end date and i can save this so a script is created now i will do a testing because that is something as a developer you have to make sure that whatever script you have written whether it is working or not how we will do that we will come over here and we will reload it that's something we have to do uh here we will select start date let's say we select uh fifth of uh october uh i'm not selecting uh this one i'm just selecting here um i will select let's say i will select um seven can you see that it is populating two so we are able to populate uh the number of days from fifth off till seventh that is what you can do here i think it's five uh from five i think start date is five and that we have this seven idly it should be uh three days because if if i talk about uh calculation perspective it should be uh three days so what you can do because it's not populating it's just i would say decreasing one day if if i if i see here like five to seven it is just i think if i say five six seven because that's how you always uh mention the started and then because it started is the one when you start your uh leaf ended that by end day that i i will i will be taking the leave by this day so i leave these are three days but duration is coming as two it's quite simple i will come over here what i can do i will do maybe let me do that days one equal to i can do days plus one that's it nothing else and here we will just change it to days one and i'm sure this will change that because it is it will always decrease one day so if i come over here i will reload it i select the fifth i select seventh and you can see we are getting three that's what we are getting and we are calculating it perfectly so this is how you calculate the duration and you can play with basically date and time fields with the help of client script with the help of glide ajax you can basically fulfill lot of requirements for your customers and clients so we are able to provide next feature for this application with the help of client script with the help of script include and with the help of glide ajax

View original source

https://www.youtube.com/watch?v=2OA-lxkrow8