[Music] hey guys welcome to another blog series where we are going to learn how to work with ui builder of new now experience of servicenow in this series we are going to create a portal for our fictious company pandatec and in this video we are going to see that how to add header and logos and in this video i have milaf with me hey milap yeah yeah let's get started absolutely so guys till now what we have done is we have created a we have created a portal and inside that portal we have created two pages one is login and another is home in our last video we see that how to connect this home page with our login page now in this one what we gonna see is that how to work with header and footers and logos and this is a little bit tricky part because to do that we do need to use actually the ui builder we have to go back into the native platform so mila before we even start the header and footer do you wanna say something about the configurations and what are the steps we gonna take yeah so uh initially uh when we started we created the experience uh if we remember we used out of the box portal app shell right so that portal app shell uh comes with uh you know a pre-configured like header footer uh and all those uh things right a header footer even navigation menu as well so all we have to do is there is a predefined json we have to just use so and create a page property uh once we do that the header will start showing up so yeah let's do that so basically all this is happening basic from the app shell whatever we added the portal laptop absolutely so let's start that so i am inside uh experience so i have clicked experience i'm inside my panda tech and before going to that so you see that here we have selected portal app shell so whatever the properties we gonna define in the portal f shell layout those properties are already well defined in a json format so here for header what we need to do is we need to create a new ux page property and there is a specific format to add the json okay so what we gonna do is we gonna copy and paste that json file we have already created that json contact and in this video under the link we gonna provide you that json context so here inside name and these names are also predefined that like chrome header chrome footer we're gonna learn about all those stuff so here what i'm going to do is i'm going to define chrome header this this component is basically to define the header here and and so why why chrome underscore header only right so that's just a variable okay so if let's say go to if you go to the porter laptop right uh you would see that that header com header component has these name given so if you give let's say any name let's say if you give akash there you can give there update it there and then cache header or something like that so that variable name is basically coming so if you just search there can you just do uh ctrl f and say chrome underscore header yeah you see there oh it has there is a binding there so let's say if you want to use something else i mean i would prefer not to use it just you just use as is what it is but this is where it is coming from like this this variable name is coming from your app shell which is bind with your header component absolutely so so as i said before that whatever json component we are going to use it is very well defined the composition of the portal app shell record so let's see how we gonna use that so for that for this json i have already created this json we gonna post the link of that file but right now what i'm going to do is i'm just copy paste here we're going to talk about something about this more but that will be in future video but but most of the time you know most of the things are pretty it looks really scary when you see like this but when you just go ahead and put it in some nice json editor everything would just make sense you just compare that whatever compare with whatever results we get after adding this and you would definitely connect the dots but anyways if you go uh you know to i mean this json will be available as a as our cast shared like in the video description as well as well as in the uh service now ninjas blog as well so absolutely and uh to there is one catch if we want to apply this chrome header to a particular page basically route then we have to select it and if we want it to be applied for all the pages then we we will leave it blank so in the description i'm just putting chrome header demo and yeah that's a good point though the the route yeah that the drought is really good point because yeah that in future we might play around with that as well absolutely in future we might have different header and footers for some of the different pages so in that case we can define uh two different properties for one is for all and one is specific for that particular page and page one takes a specific uh city okay it takes uh uh that what i say it has uh that uh potential right to override the fun stuff now and this is the simplest of that once we have edited chrome header then what we need to do is we just need to open this page so let's try opening this page and these demo instances are taking time so you see that previously it was just this blank now we are having a search and a nice drop down of user menu and all these news yeah so just one thing i want to note it here is uh the property is what you see there right uh you can add roles to it right so let's say if you see configure there uh if you see the actual json there the configure has a role saying that okay it has to be an admin or somebody so you can put those kind of conditions as well if you have only you know certain people to see that particular option absolutely you see uh i i can see it here that i have embedded with this configure this rule admin correct okay and in a same way in a same way i can add the footer as well and uh i can add theme so footer we will see in next video but right now i don't just we add a logo here because only the thing is missing is logo right so to work with logos there is another component instead of work with properties we have something known as themes and we obviously know about theme that's that what themes are but here i uh i'll just ask one question to love that how are themes related to logo why we don't have a separate property for that so that's a very good point so ideally the logo should have been handled through header as well but right now it doesn't work like that so for logo what basically it does is uh you have to create a theme there's something called theme asset and the theme asset uh should be attached to the header and footer i mean if you want to put logo in footer also you can do that so that's what we are going to see so we have to use theme asset for now and that's the way it is designed right now but ideally you know it should have been on the uh chrome header property what we just created okay okay so let's do one thing then let's add themes so to add the theme i need to open this admin panel that we created i'll just open this one and inside it i'll go to themes and i'll create a new theme so and again themes are very uh good components what i can do is i can reuse the existing themes or even i can rewrite and uh extend them so here what i'm going to give is i'm going to give it as an e panda tag theme and i am going to extend it with default theme that is being provided by servicenow and obviously i can extend it whatever the variables i want to extend if i need to do that i can put it on override and then submit so once a theme has been created i need to open the theme and inside a theme a set i need to upload a new asset now this is a tricky part here i have to select an asset and i have to upload that asset okay so i'll create a new theme asset let's say image and what's the name let's say panda tag sorry you have a typo here yeah fun attack logo and submit and again i have to open it no no no you are good you just copy that name panda take global right okay that's yeah save it yeah let's save it and i have to now attach the attachment here yeah i'll just drag and drop okay that's it right no no no so basically you have to say what is the position right so you can use the same asset for different positions right there you have to put a json exactly everything is json so i have to put it to that components right and save it yeah you're all good and reloaded again and we are not gonna see our video why okay hmm i think it's inside i said oh yeah yeah you have to add it inside the asset correct i have to attach it inside asset yeah attach it here yep all good and let's do it maybe clear the cache absolutely so it's not coming yeah because it's definitely your cache just just do that hard reload yeah that way also it is fine oops this isn't chrome so let me open it again ui builder or let me directly go now panda tech [Music] and this is how it looks so we got our logo here now it is working fine and i think it's because of the safari cache issue i think we are getting one more thing one more thing just a small thing when you click on the logo you see there is a link okay and if you go back to your json you would see that where where this basically this logo route is defined okay it's very simple go to the theme and go to that chrome header and here basically it says there should be a logo out to be okay let me just open a json editor so that it will be better for everyone to look into this way yeah so if you see line numbers eight it basically it says like uh logo route is type route okay and the route is home home is nothing but our home page whatever page we created yeah absolutely and uh there are many other things and which are self-explanatory uh and in future we gonna have a detailed video on these jsons properties that how these are defined what is their position and how quickly we can find out all properties okay thanks that's it for today's video thank you thank you