[Music] hi all and welcome back so this is the second part of the ui builder series okay and in today's tutorial will be uh if you remember in the last tutorial we have seen how to create a login page uh i know i've created quite quite a pathetic login page okay but in today's tutorial we'll try to create something good okay so we'll be trying try to create a page after the login page you can call it as a home page okay so let's get started as you can see on my screen uh we have the service now personal development instance okay and we will simply go and type now experience okay so now experience framework in this application will go with the experience and we'll look into the experience which we have created the last time so well that we have this experience created last time techno monk and if you have not seen the previous video tutorial you can simply go okay and watch that tutorial first so that you will get some hint okay our glass of what we have built in the last tutorial so from this i will go to the admin panel okay so i will open this record out okay and in this in this uh required we have an open ui builder open a ui builder right so we'll open this admin panel in the ui builder screen so just to give you a glance of the last tutorial okay so we have created a login page i know it was pathetic at the first instance okay when we saw it um during the last time okay but i tried to made it pretty good so uh i just worked on it not great okay but yeah you can say this is how the login page looks like now okay so we have login technology some information just have given login profile pic you can say and that's it okay and now i will just give it a name as that mean you can simply login to that pss did i spell my password okay and now as we login to i think okay this is my password okay [Music] so now when we log into the system right you can see for zero page no page form because we have not created a page so we will create this page now you can call it as home page okay so what we'll do i will simply this is our terminal okay or you can call it as your builder screen okay and now in order to create a new page what you have to do you have to just click on this three buttons or three dots over here and then you can define a create page okay now we will give the name for the page we will give it as home okay uh the path will get auto generated okay we will not be using any template for now okay i don't want to go with template because we are creating everything so we are trying to create everything from scratch as much as possible okay so we'll select as none okay and [Music] we'll go create okay now this will create a new page out okay now okay now the page got created now it's asking for do you want to have required parameters do we require some parameters do you want to define a variant but we will not define these things out i've already explained what exactly it means in the past okay so you can um you can consider variant as a row specific thing okay for certain role you want to show something for certain role you want to show different thing right so that you can control by variant okay so we're not creating any variable and we will go with done so as soon as you complete it out you can see now we got a home page now so you can toggle the pages from here i'm not sure whether ui built comfortably enough to see this out so we have page under that home page and login okay so currently we are on the home page and there's nothing inside it okay so let's add something out so first of all we will add container okay i'll add a container and inside this container okay so let's define some property to this container okay so what we want to do with is already hundred percent okay we'll give color okay background color we will give something light so what should i give light pink okay and then we will give um what else we want to give we keep padding okay let's add padding also starting and we will give overall padding so i will give 50px perfect okay now we got a padding of 50 percent you can see and we got a color also okay so now after this what we'll do we'll go to the component okay so component in the main component okay and here we will define certain properties out okay we will make everything as center i want everything align center so i will just give align center align items sorry later center okay so we have given what this align center will do what padding will do it will add some borders some spaces okay between the component and the border of the piece again what this align center will do uh it will align whatever whatever things will be adding to this page okay so it will align it to the center okay so it will start from the center itself now what we will be doing we will first add an image let's add an image i guess okay so here i'll give image okay what kind of image and let's see if i have some okay so do we want to go ahead with this image not sure okay so what i will do i will simply go to images okay and let's try to add so i will give new image category i will not define okay system i will give it a name as uh header name as a ui what okay and we will add first of all yeah i have to define which image i want to push i will just for a second i will give it as dot jpg let's see what we what image i i can put it over there so i will go to my desktop to my private stuff [Music] and i can okay i can put this image right this is a banner i've created for my youtube channel so it's a png okay so we will give i will click ok and now i will just change it out to png okay because it's a png image okay now we'll go over here and now we will replace this image with that image okay so done ideally it should get reflected okay perfect it looks good i guess i guess so okay i'm not sure now we can add a style text okay so [Music] style text we will give okay and what we have to go to is style decks okay i will give it a name okay uh we i just want to create a search box okay and we will continue the tutorial from there onwards okay so for now today we'll just adding a search bar okay okay we'll give please welcome to technology technomong okay perfect and i can give as font or i can give color its font trash color i am not getting font color okay let's change font family i will give 20 okay so now we have added now we'll be adding a search box so as you can see we have given the align as center align items center that's why everything is coming into the center okay so now this is done now the next thing what we want to do we want to add search input so i will exactly depend so i will just go over here and i would search why it's not coming some problem i just backspin search input okay it will come up in a second and this is a search box okay so we can give some what you can give with wetted okay so i will give width i will give 600 px so that it will look good okay and that's oh i can change the uh helper text also okay so what we'll be doing okay search what you want to search okay this this looks good okay and i will save it out so this is what we have created as home page okay and if i go and want to see the preview of this page okay so if i go over here okay i think this looks good for now okay perfect i think it's it's more than what i thought of okay so this looks good okay now what i want to do one thing is missing okay if you see if you see that there's no logo we we need to have a logo for technomancer right so let's add logo also so how you can add the logo okay now we have created a home page okay we have added image style text search box it has a helper text also okay predefined text also and now we want to define a logo over there okay so how you can define a logo so it's also pretty simple you can go to ux app configuration okay i will just zoom out somewhat and i will ux app configuration you can go to themes okay and under themes we can go with new okay so we'll define our own theme i don't know why it's happening okay theme so i will give technomong theme okay you can give description yes i am doing it okay something okay extend so we'll be extending the default theme okay so what service now is provided okay and we'll be overriding if needed we can override the parameters also for the same okay but we'll not be focusing on that theme that's it okay and you can simply save it out okay now once you save it out i know the logo logo uh creation process is different okay uh it's nothing to do with the ui buildup but you have to do some configuration for the same now as soon as you save the record under the record you can see ux theme asset right so we have to create a new asset for the same so you can click new asset okay on the asset just go to the magnifying glass okay and just check for the header logo okay so we want to create a header logo for the same okay so or you can you can don't need to go for that also you can either uh change the change the header property okay let's do that also i don't think it will make a difference okay so we'll go a set header logo and you can simply save it out okay asset header logo we have set now we simply define a property okay you have to define a asset property over here so it suggests and write everything in ui builder is the json so we can give it a property like position position and we can define a pro position as header logo and that's called logo okay done so you can save it out now we are using the default header logo okay you can create your own also okay but i i i recommend that i'm doing this okay it depends on you and now if i escape okay if i if i skip it out i reload and now you know the process okay okay so what exactly i will just repeat the process we went to the theme okay from ux application okay we went to the admin panel first okay i will open the admin panel from admin panel we have created a new theme okay under that theme once the theme is created under that theme we have defined an ux theme asset okay which is a header logo where do you have property that's it okay now if i go and refresh this page out i think this one so i think i will get the logo now you can see this small tiny look over here okay okay i get this logo because on this asset i have already configured i've modified it out okay and there was a default logo i changed it out to my logo okay you have to attach the logo over here logo file over here so now i think we are done for uh the stuff which we have think which we were thinking that we will build so we have created a home page okay and if we start from the scratch now okay so for example if i go to the login page now and i will open this login page okay so this login page will pop up okay now if i log into this login page right so if i go admin and i will give my password which you guys already know now okay enter so now it will give the home page which we have created okay so this is what about the second tutorial of this series okay in the second in the first tutorial we have created the login page in the second tutorial we just created a basic of the home page okay we will be refining it out as you go further in this in this tutorials okay till then stay safe stay happy and have a nice day okay and if you have any queries please drop it in the comments so that i can look over that and i can provide the needful assistance okay till then stay happy and have a nice day thank you