[Music] hi all and welcome back so today's today will be quite interesting why interesting because we'll be creating this tutorial on your Builder and your next favorite topic is integration right so it will be combination of UI Builder and integration so today's topic will be how we can integrate an API and bring the data from the API to the UI Builder okay isn't it amazing so will not we waste a lot of time okay because I know people are pretty excited whenever any tutorials are coming on the UI beta side so let's get started so if you are new to UI Builder how you can get started you have it is a Qi interface uype hold you can create a UI okay like portal workspace and all those things out using UI Builder so how you can navigate to it you have to just go to UI Builder you can just click on the same and here we will go create experience it will give experience as um what we can give the rest APA recipe will select a Powershell I will select a portal app for now and will not change anything else so I'll just go quickly and create so as a part of this particular tutorial I'll be calling a joke CPA why because it's free it's easily available and I can create it pretty easily so you can just go on open experience here you can create a new page I don't want to follow any template I will create a blank one I'll give as a rest API I'll create so it will take some time to get created and this is the initial screen whenever you log into any UI Builder with a blank template so now you we want to add the data from external entity right so it's not present on service now so you have to just bind it the data out so I will go to the data in data you can do add and add you can click on data resources okay and if I click new now the smart guys will be like yes we got the option over here first one but that's not the right option because this particular option is used whenever you want to call an API internally into service now for our case as we are using extended API we will be going with the transform so I clicked on transform and I will give it a name as rest API you don't have to add anything else okay that's pretty fine I'll just submit it out the previous one so what we can do if I go over here all and now we want to add that particular area right so how we can do that first of all refresh it out whenever you are working on UI Builder try to refresh it as much as possible because I face this you feel this okay I'm not sure about you so again we'll go to data data and we will not click over there okay and we will go for ADD and here we will search the component which we have created okay so we'll rest API this other one oh it's showing this oh yeah and it's showing so small okay I can I can pull it down right so let's do it once again ah I'm not able to do come on let's make it full screen and probably then yeah now I will click over here and search for rest yeah and you can see the transform which you have created it's like output no description yeah because you have one cute description will be add so your rest API got added okay I will just save it out just to save my progress till now okay and I'll close this up so we have added a component over here which is rest API one perfect now the next step is like so we have created data broker here also data broker server script now what is the use of it so basically if I go back to the same right can I go back to the same history why not so if I go over here all no not history and if I go to this data broker layer no it's not showing the one which you created I'll just go I will do underscore list not tested list so here it should be the rest yeah okay if I open this out so why we are using it out because it gives you a provision to call a script and here we will be calling the rest Master script and you must be familiar with the rest message if you are not we'll be creating transmission okay so you will get more idea about the same so let's jump back to the full screen okay and let's call the API so we will go to rest message so I am using a jokes API but you can do whatever you want okay you can call any API so I will click new I'll give it a name as again rest API why I'm not giving jokes API because you'll be using it out in other use cases and I have a URL for the same why I have the URL because I have used this VPN lot so I will just copy link for the same I'll paste it down so this is the API using which you create a random joke and I will save this out now it by default it created a get right so I'll click this out and we can simply it doesn't require any authentication so we can simply go for test now it's 200 that way is successful but the response is in XML we don't want in the XML format right so let's just change it out so what we can do over here we can go in the HTTP headers and we can give accept what you must be aware about this application last Json okay and who I have to do it on the resources I'll leave so over here we can give except and over here I can give education and let's see if it changed the response for us so I will go again untouched and now we got a response okay as you can see the response is ID of the joke joke or the defaulted like stars they come out at night okay all not that fascinating joke but we have successfully integrated the API now as per The Next Step as you must be aware that on the resource if you go you have provision to extract the script for the same which will trigger this API out so what you can do over here you can simply preview script usage I think it's still loading or what okay through script user and just copy this out entire thing huh I just copied it out let's verify the same okay so I will go on I'll go to grip background what's the name for that background script and we will just try to run and see if everything is fine or not so I will just paste this script over here and as we want to verify the respawn body right so I will just give information for the scene I'll just give GS dot info response body and we got the object right so this is what we we are looking for now we will go back to our Builder not to a UI Builder sorry we'll go back to our data broker script and what you have to do you have to create a transform because there's transfer function right so we can do function transform function transform it will have one input and you can simply paste oh sorry I'm messed up token go back first if you get my third leave a forgot to copy this cell or I copied someone something else so I'll go to previous script usage again copy this out and then again to history foreign you can keep it as a function transform which will have one attribute which is input and then you can dump the your entire resume script over you I'll just paste it out now let's do some corrections so I don't want this particular part so I will just remove it out Ctrl a shift tab and now we don't want to show an entire body right so what I will be doing what I will be doing over here is to first of all I will save this out I don't want to match this again and again we go to history and let's see if we have when we have that background script let's go to background script again or I can go simply to default this also we will test the API and I just want to I will just copy this out just for my reference okay so I'll go over here come over here so just for and reference I am putting it over here this will be the payload so I'm not interested in ID I'm just interested in choke so what I want is just this joke right so I can do return Json I think it's Json only okay so written response body foreign what is it choke right so what it will do it will just extract the joke out of this body that's two Json dot password so I'm not pretty sure whether it's string or Json dot pass will add the request body and then dot job so it will extract the joke from this recipe message and it will push to the UI Builder this is what we are expecting let's see if it works that way so I'll save this out and if I go back to our UI Builder you can see it clearly shows something got updated right so I'll just go and do the update page and if I go to data presently it went I've added it right let's do it one more time left hip here add So currently it's giving some error ACL for data broker oh I got the issue is here for data broker right so you have to Define an ACL also how the data broker so how you can solve this out you can this is a mass okay you can simply copy the sys ID for the same offices ID for data script then you go to all then you go to first of all you have to elevate the rows right because you have to create an ecl so I will go to security admin date and and all I'll go to ACL security access rows click on this and here you have to create a new ACL so I will go to new now you will be seeing a new type of ACN so it's not a record type of scn you can simply go and see ux data broker one right and this we want an execute permission to execute the script out and over here what we have to do in the name we have to just provide the Sid for that particular record and Save okay this is not documented anyway so you have to just do some exploration around the same okay so I have to refresh it out my bad hmm Got Loaded loading loading loading load yeah nothing is there go to data rest API one is there and you can see you got the joke okay what did one played say to other plate okay dinner is on me wow funny now we got the data right now we will see how we can add the data to the UI Builder so that step is pretty easy what do you have to do let's add it out so let's give it as a heading so when our person comes to this particular page The Heading should be a joke so I will go to Hadi and here we will configure the heading out so configuration now there's a label which is static one which will make it dynamic so I will go over here I will to add the red so it's a data winding kind of thing array so you can do at the rate and then data data dot so in data we have a layer called rest API one Dot it's in the output we also so we got the we got the message right and every time you refresh it out it will it will give the new joke isn't it amazing if I click on open a new joke will arise yeah you can see this is how the page looks for now so this is how we have integrated a rest API to fetch certain data from external system uh to servicenow and then showcase it on the UI Builder hope you like this particular tutorial out okay okay if you have any doubts on any query you can drop a comment on this video and I'm also learning these things out so it will be really helpful for me if you like this video out to please subscribe to my channel so that you will get notified of my upcoming videos till then stay safe stay happy and have a nice day ahead thank you foreign