[Music] hi all and welcome back so we are starting a new series which is on now experience ui builder okay first of all thanks a lot for all your love and support which he has given for the flow designer series okay so i start i thought and we all also conducted one survey on uh ui builder series and i got really positive feedback on the same so we'll be starting with the same so this for this will be the first chapter of this series okay and i will try to cover as much as possible okay uh as per my knowledge okay with the on this topic of ui now experience and ui builder so let's first try to understand what is the now experience ui framework okay so as you can see on the screen okay on the service not docs it states that the now experience ui framework enables developer to develop custom web components to create a modern user interface for application user okay so in simple words i will explain what i according to my understanding so what flow designer is doing for workflow right okay the similar thing your ui builder will be doing for the service portal okay so it it's basically or no code or we can call it as the last code approach okay in order to develop a ui interface or service portal or any custom pages okay and uh unlike uh unlike flow designer okay it's like pretty easy to understand you can create a different components okay web components and you can use those component uh in multiple pages okay so we will not go into that theoretical concept okay and we will simply jump on to the actual video okay so let's get started so i will just go on my personal instance okay so you can see this is this is the screen of my pda instance and now what we can do in order to get started with the now experience okay you can simply go to now and under now experience framework you can this is this will be the application okay which we'll be using for the ui builder and under this you can see the module called experience so click on the experience model once you click on the experience module there are multiple modules which are out of the box creates uh present so you can look into all of this okay and but you will be creating a our own custom module okay we'll create everything from scratch so that you will come to know everything okay so we'll give it a title we will give title as techno monk because i want to promote my channel now page will not give okay actually what we can give and actually you i if i want to just we'll come to this topic afterwards also but just to give a basic briefing of this so it provides a framework okay which can he use okay so basically framework in the sales you can get some head footer all these components established in that particular page so you can use those containers out okay so for today's for today's tutorial we'll be uh going with portal as shell because we are creating a portal kind of scenarios okay then we can provide a url so i will give a url as technomong so this will act like a base url for all your custom pages okay so i give it the base you as technomog then you can go and admin panel currently it's empty so we'll create a new admin panel for us so it's under ux configurations only we'll go to the documents and we will create a new one so what should i give the name i will give techno monk okay uh you can either you can also give the icon for the same we can give landing page so landing page i will give it i will keep it as home for now okay um that's it and i will submit it all so we have created a component uh admin panel okay we can see it over here and then you can give a app or throughout so our throat is basically a redirection uh redirection component so you have to define if there is a slash login so on which particular page it will route to if it's log out then which particular page it should go and so on okay so it's just like a page binding things kind of thing so you can define it in a json format so we will give i will give couple of them so i will give login first um and login should route to what login okay and today in in today's first tutorial we will try to create a login page only okay we'll try to create a login page then in subsequent tutorials we will keep increasing the level of the level of the work okay so i will just define some pages out so i will give login then i will give what i log out and what else let's give one more i hate to align these things up okay so i will give login then log out and what else i can forget password okay and we will remove the semicolon from you so we have validated json we have defined three com or throughout okay and i will submit it out now what's a record with the same url path so i will give techno monk ui okay you right i will over here also we get ui okay submit invalid insert i record with the same path with same path [Music] okay i think it's for this record so i will go to this record we'll change it to login on it update i'll save it again you are path i don't think there is something with this so let me give huh [Music] i will give my website url and now we are able to save it okay now what we will do we will go to the admin panel record okay the one which we have created just now and from here you can open in ui builder we can do the opening ui builder so it will take some time to get open okay so i will close this tab till now and as i as i mentioned we'll be focusing on creating a login page today okay so we'll i'm not really good in the creativity side okay but i will try my best to get something um go down you can say now will they create a create page okay so this is a ui phrase for the ui builder okay pretty awesome okay if some of you must have used wordpress okay i'm not sure i'm using wordpress to a great extent so in that there's a plugin called elementor which helps you out to just drag and drop the things to create your beautiful website in the similar way there we have this ui builder stuff so we'll come to know so i will create a page i will give it a page name as login we are creating a login page it will generate a path out of this you can customize the path also what i for now i think it's good and page template will not take for now okay because we are developing everything from scratch and we will do the create okay now once you get created it asks for variants and all that things okay so what is variant okay the invariant there are it's like he um you can define our target audience okay for that particular page okay so you or you can create a different variants also for example you want to choose ten components to manager and five companies to employ so those kind of things you can you can manage via variants but we will see those in the subsequent tutorials so we will not define any access control also and we'll go with done so this is a user interface which you can see on the screen when when you go with the when you go with that particular page so you can see the page is also coming up as now technomong login so techno mark is the base url now is the extension of servicenow ui builder and then i'll page name okay and if you open this out for now if i try to open this up then i think there will be nothing over there why no content available because we have not defined anything over there this is a big mess okay every time we log up we we have to again login and i don't know the password so we'll go from where i can see my credentials hmm [Music] oh i can see it from here so where's the password my instance password and this password let's dig this up right here admin sorry for this so we got logged now i will keep in mind to open it in like you know incognito tab only so now this is a ui now we'll start building the ui okay so first of all we will add the container so in add component we will add a container so container is like a interface okay so this box you can consider as container now in container you can define the splits so you can see you want without split you want single split okay or how exactly you want it to happen okay so what we'll do which will be the best suited for this today let's go with this particular thing okay so we got two containers now it got split into two sections the first one and the second one so let's add the first one i will add and we will add what we'll add we'll add text okay text first and i will give as rich text okay and we can do edit html and we can simply replace it out so i will give welcome to tech no monk right check no wrong okay now we can center it then we can change the color i will change it to this color i'll increase the font size okay and i will change the font family to ariel that's it i think for now i will make it bold now it's look good so we added welcome to tecmo technomog we'll add few more things i will give text area and what should i give in the text area what should i give i will give what um [Music] sorry over here texted here i can give the value for the sale hmm what value i should give i sh i will give thanks for joining us okay and we'll give please subscribe to my channel something like this okay and now you can make it um we can make it align let's see what all options we have we will keep auto resize resize vertically show border okay you can also style it out okay so i will do font font family one family i'll make it as what options we have franklin okay you can add whatever you want okay and you can also give font color i love a lot of things you can give okay i will just i'm just thinking what what else i can give i think for now this is good good to go so you can provide all kind of css over here okay now i want to align this item i want to align this item let's see how we can align this out align item center it didn't reflect okay or we can do one thing okay it's not getting reflected so i can go to container from container i can directly configure on the content level itself so i can give configuration on main and i will align everything to center it's not coming to the center okay let's see it is it should come to center i'm not sure okay and uh now we'll go to the another container and we'll provide a text or style text i will provide okay and i will give what let's login oh please not please log in okay h1 okay align item to center is it considering this center align text to center oh i have to give a line text sorry sorry for that i will give line text a line i will give that center so that it will look good but it's not working for this it work for this it's not working for this whatever maybe that is it now we have given please login now what i want to do i let's remove this component out okay because i'm definitely i'm not liking this out okay and instead of this i just came to my mind that i have an image okay in the system i don't want so i can put my logo here so which is the monk logo dot png i hope this is the name yeah perfect so we got a logo okay we have please log in and under please login i can add one more section i will just and now we want to add a section below this okay please login and for that i can simply click on plus icon i get the components and i will use simply the pre-existing component which is a login we want to provide login so i can give the login form over there below that and i think it will get rendered so you can see the login form came up over here okay so in this similar way this is one of the example of component which is already existing in the system but in the similar way you can have multiple components okay which are already defined in the system or you can create your own component also so i think this is this is looking good for now okay for initial thing okay and i will save it out okay now you can say this is the login form okay so if i go if i take this base url i don't want to login log out myself again so if i go to incognito if i paste this out and it's now slash what was that now slash the techno monks like the mark and if i hit enter then ideally it should be see you should be able to see the page but you will not you will not be seeing this page the page you are looking could not be found what's the reason behind this because you don't have the permission to see this page right so let's see how we can provide the permission to this page so you can go to login default you can click on this three dot and you can do edit audience now we want to make this particular page visible to the public so let's do that now we will go to add audience and under audience you can add audience like public but there is no public record right this may be the scenario when you are also trying okay for the first time that you will not you will not be able to find the public uh public domain okay so in that terms what you have to do you have to just go to the table okay which is this underscore ux and thus code applicability l-i-c-a-p-i-l-i-d-y dot list i hope this is a table so you have to go to this table and you have to create a new record so you can simply give it a name as public and you can define a role so if you are unable to find any role you have to just insert the record in this particular table i will submit it out now probably i will be able to see over there i will again close it out i will go to edit audience add audience and now if i go i can see the public okay public safe and done now if i go back to the incognito page okay and if i reload the form now i should be able to see the page i know it's looking weird but yeah we can we can do techno mark let's let's i think this is looking quite weird okay so let's come over here and we don't want to expand we'll keep it original size center save file i think now it will look good um okay this is also not looking good so let's check if we can change the layout and if i delete it out for now okay because it's in the square syntax if i save it out and let's see now because because of that logo it has a transfer background so it's not looking good so in this way you can see how it looks if you are not happy with this also you can [Music] style height i will give 50 px thank you px and wait i'll give 50 250 bigs i'm just trying it out i'm really bad at creativity okay you should know some basic of html to try this thing you