[Music] hi all hope you are doing fine so in today's tutorial we'll be looking into how we can create a custom widget from scratch okay so before getting started we will understand what the widget is so basically every component of the service portal you can call it as a result so you can call it like service portal is a collection of widgets okay so as you can see on the servicenow definition widgets are what they find the content on the portal so whatever is there on the portal you can call it as visit widget okay you can use the base system which i have provided with service portal clone and modify widget okay but you will be developing from scratch so today we'll be looking on one example where we'll be creating a widget to update the user information which user logged in user information okay so let's get started without wasting time so basically we will go to service portal and in service portal you can go to widgets so here you can see out of the box there are couple of widgets which are already present but we will be creating a new one for so we click on new and we will give the name as update user okay i'll give the same name to id also done and then we will simply save it out so once we save it out what we'll do why i saved it out without updating anything will be opening the same thing in open in widget editor okay so it will take some time it will open into a widget it and we'll be doing the further coding over there so basically what we want to do for logged in user the information will pull on the widget and a user can update that information for example if i'm a logged in user i can see my information like name mobile number and so on on the widget and then i have a provision that i can update it out also perfect so let's go over here and i will just you can hide and show the template from here okay like html classical server side css and all the things okay and once you save you can i will enable the preview also okay so you will be able to see the preview also once you save it up if i save this out and if i click on this eye icon so a blue window will open and as you can see there is nothing currently okay so let's close it up i don't need a html for now i don't need a client screen so we'll be working on servers at first so we'll be call we will be creating a function just a simple function just to pull the information from the data table so what i will be doing data dot user info i will define an array okay and then we'll be pushing out the things into this array only so this is done so i will do variable right gr gr tap oh it doesn't work over here here equal to new client record client record on which table we will go is this and let's call user table then we have to add the query so i will do gr dot add query inquiry what i want to give [Music] ssid this id is equal to what will this is that we want the current username right so gs dot get used what does that function get use or use capital user id okay so we got the query then we will be doing gr dot but query then while jr or next ideally it will return only one record because we will go we are doing with the society and society is generic okay not generically it's a collis or user nothing to now we'll be pushing the data into the array so we can do the data dot user info dot push push is like we are pushing the data into the database and we'll be pushing a json object inside the database so how you can define that so we have defined the json object and the json object will be like first name what will the name name will be gr dot name dot to string because i want it in a string format in the similar way we'll be adding few more things it should be gr not gs gr so we'll be having name mobile number email and what id let's let's have this all things for now okay and we'll add a semicolon over here so your first name is done then i will add phone and i can give mobile mobile is this is the market value for the mobile x dot 3 so the mobile is done and what is email we have to give it a do as email and i will give email to string and the last one i want to go with id and for id i made a mistake it should be comma not semicolon my bad and here there is four attributes or nothing id for id it will be like ssid perfect so this is done and now what we'll be doing is like just for the confirmation purpose whether we are getting proper information or not so we will be doing gs dot add info message and there i can do data dot user info dot of zero because i i i know there will be only one object dot to string just to see okay if it works and i will add semicolon and we will save it out so once it's saved we will try to see if we are getting the required input information or not so it's getting saved i guess let's try to do the thing is still getting saved so now i started loading okay now it got saved and we got object object object object so we are getting something let's try to get something out for example if i go with name let's see what's coming in name system administrator so it's working we can expect it's working okay so we don't need this outcome now this is done okay so we have added a server set code now will be we the next action what we have to do is like we have to show case it out on the user form so first of all we will be creating a html template so this is a html template i will just remove the server side script for now and in html template what we'll be doing class i'll be adding two class over here so class and in class i will give one class and let's give one class on it which is panel has channel default and in this will be closing the date so the first view is closed now in this div we'll be adding one more deal okay so that they will be like this dips and and this is this will be adding more uh to form.group founded and now in this particular day we will start creating a space so the first field will be just add one more class and this particular class we will finally dash body and we'll provide two css we will just define it for now and then we'll go with the definition for the same in some time one already border and the second one will be back background okay just to make it more beautiful okay we'll be doing that so in the form group level we will be adding our first field which will be like they will label is added for it and default so i will give name and name and we will give it a input value as equal to form dash control and we'll make it read only or not just okay so we have created one field with the divs in the similar way we will create few more let's create three so one this second one the third one here the second one will be mobile and the third one i don't want to read only for mobile and the third one will be email and we will remove the read only from here also and if i save this out now let's see how exactly it looks so name okay i think okay save i miss that particular angle brace that's the reason it was showing like that so we have name mobile number email mob name is read-only and others are editable okay and the last thing we want to add is a tape button so we will simply get this name again and copy paste and for button as you must be knowing so what we'll be doing is activate class equal to for okay input type equal to will give submit class will change so first of all i will give type equal to submit and value value i will give to update what is class also i will give it's not form control it's button button and i will give it a primary for now perfect if i save this out we should be able to see the buttons we don't want this label now we have created a form now the next step as a part of this what we have to do is like we have to pull the information whichever we have pulled in the server set script over here and bind it to this field okay so how we can do that it's pretty simple so what we have to do we'll be using the ng tactics okay we'll be using angular directors to get the things done so for that what we have to do is simple before that let's let's fix the css also okay we have already defined this this is body right so let's make it more beautiful so i will do dot border the first class and will be adding it a border which i will go to for the color now three pixel and i will give solid red color okay and the second thing what we have to draw by background let's give it a background as what don't thought [Music] blue see if it works so i have saved it out we'll go for preview again nothing got set okay the border got it now the color i think for color i have to give color code so let's give let's give a color hash ffff zero so we are giving color for the background right now so we got the border and now we are waiting for the color and then we will be binding the server side code to this html body how we will be doing that i will showcase that also if this get over oh it's sticking i don't know why it's taking so much of time error what happened oh there is a mystic over here that's the reason background color if i save this right now can let it be i'll remove this i think white also looks good on me so we will remove the sound and we will look into the css at the latter point come on and now we can see the form like this now let's quickly bind the data so i will close this out i will close the css also okay and i will open the server side thing because we want to pull this data and show it over here so what you have to do for this will be using an ng repeat functions okay so what will be doing over here this background i will do n g this is active and angular okay it will iterate through all the array and showcase the data say ng dot and there we can give n in what and in data dot user input so it will iterate through this array okay and now what we have to do we have to bind this information to after it so for example name so we will be doing ng dash model equal to n dot name and dot name in the similar way we'll be doing it for mobile and it will be in front instead of name it will be mobile and for here it will be emailed i will save this out so it got saved and if i do the preview so you can see system administrator but why we are not able to see the mobile number and this oh sorry i i gave my actual mobile number because this particular information will not be there under you on the user table let's try to find it out so if i go and type this says underscore user dot list and if this is a username right and if i search with the name user system administrator if i open with that so we have to give the email address six six six this is okay just some random let's see if i gave the right name it's mobile underscore phone okay perfect so i'll go back save still didn't load just a second jihad. is me um and dot email is oh i added it to a wrong place sorry for that so it's ng mobile pro it should be over here ctrl x v close this out mobile is there now my bad i save this outro right now so it got saved and if i preview it out so here i can see the information currently now what we did we pulled the information for the logged in user in the server side script then we defined the html template on html site we gave the css okay to the widget now the next step is like currently if you click on this update nothing will happen okay the reason being there is no action required for that right so we'll be defining the action for the same now so that it will return the information back to the server setting right so for that what we have to do is like first of all we will define a button action class button and we will do nj dash click what should happen on this so if you will give a a method called c dot date user and will pass the n which is the current object for this particular uh action will be passing this object over there okay now once we get this information right we have to pass this information from html to client side so how the exactly flow works from from server side it goes to client side from client side it goes to html and in the similar way it goes from html to client side from client side it goes to server side so we have to define this function on the client side so let's define the function on the client side we will close this out for now and we will give c dot this then we will do c dot update user see lot of the user equal to function which will take in argument as n right and it will take an argument and i think i removed one function out one curly brace out okay and now we'll be defining this function out so what we'll be doing is c dot data dot phone or we can say mobile. mobile dot underscore phone equal to n dot mobile in the similar way we have to do it for other two periods also so mobile as username is read only i will not go for that i will have two things on the mobile and email id so we'll go with email you and it will be n dot email from where i'm getting the reference from here i am getting the reference okay and then from here once the object is set will be passing it to the server set how to pass it like c dot server dot update dot update dot then and in this we have to define a function which has c dot theta theta equal to empty object we are returning the empty out together so this is done over here we have passed the information of mobile number from the html we have passed it to client script now from client script we'll be passing it the information to the server set so that it gets updated on the on the database so we will go with the server side i'll just remove the html and here we have defined the function till now this is coming as an input to or to what we can say server side so what we can do if input then only will be processing the thing if input then what we have to do gs dot add info message i am just verifying it out mobile equal to and i can give colon and it will be input dot mobile underscore phone let's go to phone and what was the next it will be like the speed email golden plus in input dot email i'm just verifying the data okay whether the data is coming correctly or not so let's save this out now if i click on the button over there it should pass this information from my html to client side and from client side to server side to get this info message now it's taking so much of time to see only happened let's check this one out if input mhm but i've defined other client side mobile underscore phone right and email let's just copy it once and i will paste it out so this is mobile phone and the next one is saved and if i click on this update button so you can see mobile number is this and email id is this so the information is correct coming correctly now let's move forward if information is there then what we'll be doing variable update gr equal to new knight record on which table it will be this and let's go to user table we'll be doing gr dot cat get in this gs dot start get user id and and then we'll be doing if gr it should be not gr it should be updated here let me add some spaces so that you can see the code if updates here dot next how we can give updates here then we have to do this here [Music] equal to input.mobile and discord phone and in the similar way we have the email id also so this is for updating the email id and phone number if you have and then simply gr dot here updates here dot done so if i save this out and let's see if it works into it now hit save i will preview the tip through it out hmm come on come on save and it's you can't do again so it's loading so where here we can see this is the mobile number and email id it's my email id if i want to change my first element id 652 amiga and if i update so ideally it should update it to the database so now it got updated and if we do the same again let's see if we see the updated information we can check it over here till that time it has updated the information correctly i think my interest is pretty slow today what's happening okay and now if i the previous loading and now you can see the email id got updated okay if i go to the screen yeah also you can see the id got updated if i again update it out if i do i make wizard one two three from here and if i update so ideally it should update so it got updated over here and if i go you can see it's got update to one two three see in this way you can create a custom video and now this widget is full-size develop now you can use this widget variables just say in the portal okay and you can create your own use case your own widget okay and use it in the code so this is all for today's tutorial in today's tutorial we have understood how we can create a basic widget from the scratch from scratch to the end okay hope you like this video stay please like follow subscribe to my channel please stay and please drop comment uh in the comment box okay so that we can get some ideas to create futures in the future till then stay safe stay happy and have a nice day thank you you