[Music] hey guys welcome back to the ui builder video series and in the last video we understood that how we can have our debugging and how we can have a mutation data broker events attached with our normal event now in this video we gonna have some fun so in this video what we're gonna do is that we gonna play with this rating component and we're gonna see that how we can get the value of this rating component while loading the page now here's the fun part we are not gonna do that with data broker we're gonna show you something called as sn http so it's a component it's an underlying component by which we can call any api so if so it's it's it's not i would say it's not a component uh but it's a service right basically yes yeah so in future are we gonna call any of the third party api so instead of uh doing it from platform we can just directly use this s and http so for that what we're gonna do is that we're gonna create a new client script so let's give it name as uh set rating because we are we are just setting the rating right i mean we got the rating so now uh you're just setting it up so i'll just copy paste my script here but we will explain it what it is so this is pretty much same now we have something known as helper inside helper we are having this sn http and then uh we are getting the cis id from our context properties for this current article so basically it's pretty it's head forward and now the syntax of this s and http is pretty much same [Music] that uh we are having while calling any of the api data uh from our any javascript library like dollar http or http components or xml request or exercise request so it's like just giving the url and the method we were gonna call and the response so yeah once we get the rating uh from that api uh from the table we are just setting the state so we now we are gonna create uh the state variable in order to hold this rating right and then map it again back to the component so that's what we're gonna do yeah so let me just save it and now let's go to a client state and add one rating component so we got it give give it as rating one and in the type we can have it number and let's save it so now this rating component is the same state variable that we have used in our client script now we just need to map it so when is the page ready when the page is ready is where we gonna do that that said this is added and then do we need to have something else let me save it yeah yeah so you what you need to do is now go back to your rating component uh and you see that rating uh first property on the rating just bind the state there right so you can say state dot rating so this is something new that how we can bind the state to any any of the component rating property and i'll save it yeah and do we need to have so we have already bind the body event as well when the page is loaded so let's try it with this one yep because the last one we saved is as three so that's why it has has three so let's change it let's change it to five oh yeah perfect let's refresh it now now let's refresh it yep nope let's still have three that's strange probably uh uh yeah because that's how it is saved maybe save it again let's let's select again five or something yeah okay close uh is it like since the rating is already given i guess that could be the reason but yeah something similar to that if you can go back and clear the rating let's see and then do it again like just just clear this off just delete this update for i think no no just delete this record there are many records exactly that could be the reason why is it happening it is only fetching the latest one correct let me i mean definitely uh in terms of rating right you have to do a lot of calculations and stuff which we are not doing here because it's an average rating ultimately right so so let me just give it five refresh it now it is coming up five because we have only one yeah yeah and it's actually you are correct because it's the average rating which is calculating so basically if i give it as uh 3 now it becomes 5 plus 3 divided by 2 which is 4 or every kind of system so so that's it folks that how we can uh we saw that that how we can uh use as an http component or service instead of calling our data broker to get the data so again now we are having two type of stuff so it will again depend on our users that we which we want to use but there are these two components by which we can fetch the data from anywhere thank you thank you you