Part 4 - Creating a Home Page
[Music] under tech series where we are going to learn that how we can quickly create our new servicenow portal with new ui builder so in today's video we are going to see that how quickly we can create a home page and we can add some of the stuff so if you remember while we were creating this experience so we added a landing page as a home but still we have not created that home page so mulap why don't you just talk about a little bit about home page and then we can start on track on creating that yeah so if if you remember when we created an experience right uh at some point while we were configuring our app config we said what would be the landing path of our entire app right so let's see if somebody says our url and then they say put let's say now and then just put the path of our experience where it should land right so that's that's basically we have given is given as home earlier so now we don't have any anything as such yet but this is what we are going to create now so that will land it once it once you're logged in it will land you to that page okay great so now what we are going to do is let's create that page quickly and let's see how we can put more widgets and components there so to create a page what i need to do is i need to click on these three dots page options and click on create page and here we can put the name of the page let's say capital home and here i can select our page template but in our case we are not going to see that we are not going to use that but obviously if you need to have any kind of a specific ui with servicenow provide as a part of template you can obviously choose anyone i'll click on create we still don't need any kind of page variant and parameters for this page so i'm just selecting it as it is now we have our blank page so in a blank page what we need to do is we need to click on add component and here i'm going to add a container and inside that container and probably on this container let's write some css style okay to make this container stylish what i can do is let's add background color as blue you can put light blue or something that looks better yeah let's let's see if it has a light blue and then some padding let's say 50px and others are zero so let's have it something like this okay now let's select the main component as well because uh still it is somewhat out and in the mean component as well we will add some of the css so let's say we don't need anything so align is centered and then justify content and this is where we still don't get this center one so we will have it as here center and save i learned it a very hard way that if you do not save sometimes it does not sometimes you navigate and it does not gives you a pop-up that you have not saved it okay so why don't we add something stylized text and here let's see so so so basically what we are doing here is uh we are uh creating a simple uh global search kind of widget in the uh in between of the header i mean i'm calling this as a banner i would say this is a banner where we are saying okay search for lecture services and then we'll put some kind of search there let's say welcome to panda tech and this is what i was talking about so let's save and continue and still i just need to change my home page so here i'm giving a salutation and inside that and let me change the style instead of it why don't we call it as spam h maybe h2 h2 s2 s3 yeah that's one sound better and then what we are going to do is we are going to put search one and let's see let's let's do which so just search input right now we'll just put the input because we need the text box yeah yeah so we will be seeing that uh when we are doing most of the search configuration that how we can put it but here we are here to help you i just want to put this placeholder i think this can you put some can you put some weight as well like just want to make sure like search is a little bigger maybe some kind of bit like some pixels okay let's see maybe five days extended yeah anything is fine don't you this would be smaller yeah because uh put like 600 uh uh 800 rdm would be too much maybe just 600 uh px should be good okay okay let's let's rock and roll with bx then yeah yeah for now yeah i know you hate it though yeah i know yep so let's try and see this page how it is looking uh it is looking good still we don't have those header and uh those logos but in upcoming videos we are going to see that how we can have user option and logo but for right now it looks good and our url is would you mind would you mind going to the private window login and see if it is landing to the correct page yup that's the next stuff that i'm going to just do let's say dab nine seven and now slash upon attack login now after login it should land on this page yeah previously it was showing us 404 great we have connected our home page as a connecting page as a landing page so that's it folks in this video in the next one we're gonna see that how quickly we can add header and footers
http://www.youtube.com/watch?v=y7UaDb68MlA