How to add a Glide List field in a UI Page? | use-case | ServiceNow
hi everyone in this video let's consider a random use case where i'm going to uh notify random groups based on the need for example if there are certain stakeholders data to be notified for an incident then we need to include an option that may be the incident manager whenever he wants to do that he has the luxury to do that instead of reassigning the ticket to different different stakeholders so we already have a couple of options available in the incident form already one of them as i said is the assignment group so only one group can be assigned to a ticket at one point in time the other options are to include the members in the work note list or the watch list so let's create a custom option over here so that the groups could be notified so i'm going to use uh the out of the box available options also to make it work so what i'm going to do is i'm going to include include a link over here for example it could be like notify groups and whatever group names are selected a notification should trigger to them and whenever it is required incident manager for example can use that option to trigger notifications to the stakeholders apart from the assignment go so let's start working on this one so i am going to create a ui action first the name of my [Applause] ui action as auto file girls it should be visible on update let's make it client side and i'm going to make it appear as a form length under the related link section so on link let's call the function and this function will be called right here is the definition of the function i am planning to invoke a ui page over here where and i will be adding those options where the incident manager can select the groups and once a particular button is clicked a notification will be sent to the stakeholders which are added so let's the dialog window over here so this covers another use case of how we can call a ui page how we can include it how we can pass works into it and based on it how we can take a notification so there are multiple use cases that are considered in this demo okay console space is info here i am going to pass the name of my ui page so let's add a title for example it can be add groups for my pop-up window that is going to open up let's set a size maybe yeah so i'm going to include a pop-up of this site what's next i'm going to call this function and call it top and so this is done now uh to save some time i've already created a ui page and let us open the ui page module and i'm directly going to pass the name of that ui page over here so once it opens the list in the new tab i'm going to so this is the ui page that i have created so i'm going to pass this name in my ui action and now my link should appear on any of the incident form that i'm going to open so this is just a basic code that i have kept in the ui page so that i don't have to do much and he said sometimes so i'm going to add my code in this section which is going to utilize the out of the box available macos so that that pop-up comes up with the list collector kind of option so let's first take a look how it appears for now so let's open any of the incident yes so the link is visible if i click on it now it appears something like this so this is the title that we have set and i have included two buttons click cancel and send email and i am using the css for the one and the ones related to what servicenow uses out of the box like if you add a destructive button on the form it appears right in color if you had a primary button on the form it appears green in color so i'm using the same css that service now uses so that i don't have to put much efforts in deciding the color of the buttons now let's add a simple fold over here which will help us get those lists on the form so i am going to include the macro okay so g macro underscore invoke is the attribute which we are going to use over here and then here i need to pass the name of the macro so it is as i said an out of the box macro which i'm going to use over here so we'll just see that in a minute now a specific id for my attribute so for example groups email is the id that i'm going to pass over here then another attribute for my tag is let's see control name and i'll give it as good list and this is going to reference vegetable that also i need to tell so reference table in this case is my group table and the name of the table is says underscore user underscore group i think this is more or less sufficient not what we need now let's take a look at the macros which are available out of the box so i am going to navigate to my previous screen again and let's open the macbook over here let's search with something called a list okay i think this list is too big so let's filtered by adding more specific keywords so here you can see that we have couple of options available like lightweight glideless and lightweight glide list two so they are not much differences it's just that the list version 2 uses the updated css and all that service now uses it in all of its forms so i'm going to use the lightweight led list too and let's update it in the ui page and now let's save this form so now my pop-up is ready it's just that i need to trigger certain functions and scripts so that an email is triggered from here so if i now take a look at the incident and let's say i want to click on this notify girls okay so it doesn't populate yet let's see what did we miss okay okay let's include one more uh attribute for the gmat code tag which is can underscore right and i'm going to give it as 2 let's navigate back to the incident we load the form and click on notify groups now so this option appears now because i enabled it so that it can be written so if i click on it i can see that the pop-up opens up with the list of groups and i can select any number of groups over here so test group notify one is the one that i created specifically for this demo and i can select this one also but if i click on send email now nothing is going to happen because i did not configure it yet so let's navigate back to uh ui page and here i need to do certain coding so that my function gets called okay so let's do it uh let's quickly see what all uh functions we need to call so first function is on cancel so if the cancel is called or clicked on that incident then it should close that pop-up window without doing anything without sending a notification so let's create this function first so i'm going to create it in my client script so on click of cancel button i want to close that dialog window so uh there is out of the box function available for dialog windows and i'm going to call that right okay so i'm going to get my glide window then i'm going to destroy it like thanos snap now my next function that i need to call is send gup email so this one so in this case what i'm going to do is i am going to trigger a notification based on an event now to trigger that event i'm going to write that code in a script include and i'm going to call my script include from this client script so let's see how i can do that first of all i'm going to create a function with the same names and go email firstly i need to get the value of that girl so i gave this id as the identifier for this particular macro invoke tag so using this i will try to get the list of verbs okay and then i'm going to use the jquery identifiers which fetches the value using the id so if we want to fetch the value using a class we use dot and the class name if it is using id then it is hash then id so this will give me the value of all the groups all the societies okay and we'll try it out uh if we need to do certain changes in this code later on or not but right now we are assuming everything on the basis of what is available on the form and how we are trying to do it so now let me write some code for script include let me quickly write that lightly [Music] okay so let's create a script include with this name i am going to double verify that there is no other script included with this one okay so there is none since i'm calling it from a client's cup this should be client callable and here i am going to add my function so let's go back to the ui page and there are a couple of things that i need to do here so first of all i am going to pass the function name [Laughter] let's say this is the name of my function which i'm going to call from here and the definition of this would be present in the script include now next is i want to pass the incident society so that i can do since the button is present on the form already i can do get unique value next is i want to pass the group list as well so the web list is directly available to me in the variable named group list and now i can simply now wrap up my glide editing skull which gives me the response i don't have to do anything with respect to the response over here it's just that once the call is complete i want to simply close the dialog window so i'll call this function again over here so let's save this code and we'll see whether it works out or not whether we need to do any modifications over here so let's copy the function name and i am going to navigate back to my skipping page the first part in my script include is that i need to get those parameters which i want to use in my code so this is the first parameter now i need to fetch my next pair okay i don't remember the exact name let's click copy it so that we don't make a mistake by assuming the name okay so i've taken here all the parameters that i needed and now based on these parameters i can get anything from my incident record if i want to and the second thing that i want to do over here is i have the group list so i can trigger a notification by sending the list to the event so let's see how we can do that first of all i'm going to glide through the incident module and since i already have this id i can simply do that you can do i'll get on instas id or i can i use the simple method by querying and then doing next and once i have the same condition and the navigation goes inside this condition i can trigger my event so first parameter is the name of the event so i have already created the event just to save some time so this is my event because it is very very important that we register the event before trying to use it anywhere in our script second parameter is the glide record object which is uh inc gr in this case third parameter is anything that we want to pass on uh where the function call where the event calls file so in this case i want to pass the group list and second parameter i want to keep it as null and i don't want to pass any queue as the fifth parameter so let's do it this way okay so now my code is complete i just need to test it out so to verify whether the code is actually working or not whether we are getting the list or not let me put an alert over here so as soon as i click on the send email button it should show me the societies of the groups that i have selected so i'm going to save my ui page let's reload the form once if i click on notify verbs and let's select any of this code if i click on send email it says undefined now why so because i selected the group i am using the id of the macro could there be a problem with that so this is the group's email id i'm using over here and i am passing the id over this is why it is not working so let's see whether what we are trying to do is correct or not so if i add let's go over here and let me check in the developer tools whether this is the actual id that we should be getting or we should be using in our code or not so if you can see that there is a hidden input tag created in the back end which contains the actual value so to verify whether this is the actual or not let's add one more group over here and it should show the society of two groups now so this list got updated so instead of using the id of the mango we need to use the id of this input tag so as to get the groups list so let me copy this and the name and the name and the id of this input tag is based on the control name that we have passed over here in our macro so instead of doing group list and using the this id i am going to use the id of what we have passed in the control name so now let's save this ui page code and i'm going to navigate back to my incident reload the form so if i click on notify groups now let me select both the groups again send emails to this content with the society so this piece is working fine so far if i click on ok it should send the email let's verify in the event logs that the the event has triggered or not okay so event has triggered and it has been processed as well so i think in that case notification but also also got triggered so i hop on to the emails module so this is the notification that was created in the back end and i have associated the event with this notification so this is already created by me and if i open this and these are the two group emails that i have associated with those groups so let me show it to you facebook notified one so you can see that this is the group email and let's preview the email so it should contain the incident details so you can include your company logo here and the details of the incident and any work notes if any okay so this is how we can uh inform stakeholders by using a custom option like maybe a button or a link whenever we want to do it from the incident form using the ui page and this included another use case how we can pass different uh how we can use glide list in the ui page and based on that how we can take a notification or an event so thank you so much for watching
https://www.youtube.com/watch?v=iSCGHjleDvA