Part 1 - UI Builder & Portal Creation
[Music] hey guys good morning and welcome to our video series where we are going to create now experience for our fictious company pawn attack and i have milaf with me who is going to help me while creating this now experience new portal throughout the series hey welcome lap how are you hey good good how are you doing i'm fine why don't you quickly explain uh what is uh now experience and then we'll start creating a new portal so i would rather talk about the ui builder right because yeah that's what we are focusing on so uh basically as part of quebec release a servicenow has released this designer called ui builder where you know you can simply drag and drop components and building experiences uh and it's a great tool uh to build your portal experience and out of the box basically it comes with the portal experience and your workspace experience and it's pretty handy uh and i'm really excited to talk more about that oh great so why don't we do one thing why don't we create and uh talk in the same time okay yeah that's that's what that would be awesome let's let's start creating the experience directly absolutely so what i'm going to do is i have taken one cubic instance developer instance i am going on to the experiences i am going to create a new experience and again we are going to name it as pan attack because it's again our fictious company we are going to select the app shell ui blob you want to say something about app shell ui yeah so as i mentioned earlier servicenow out of the box has two experiences baked in which has a basic things already uh you know configurable uh things are already available for portal let's say you have header footer your navigation menus navigation actions and stuff like that is already available same way for a workspace if you have seen the agent workspace it has a typical ui where in the left hand side you see all your work items uh your live agent queue and then on the right hand side of the space where you you work on your incidents or interactions and stuff like that sim so all those uh that shell ui will help us using that uh ui as a default ui so for headers and footers and all those things it's it's very easy to configure and we don't have to do a lot of free work so but but definitely we would have a more detailed series on uh what the app shell ui is but right now it is just reusable component for portal and workspace okay great so we're gonna have another video on app shell ui great so let me do one thing let me quickly select the admin panel so here what i'll do is i'll create a new ui app configuration i'll name it as bond attack here we can put the icon as well but right now i'm just leaving it here okay and last but not least we have to provide the auth route which is nothing it's a authorization public route so i believe that we are gonna have again a video on that yes but in short uh whatever your public uh routes are like login and log out and stuff uh you you would like to you would like to let the system know that where it should go to so if somebody says okay slash log out where it should line to and when somebody says slash login where it should land too so that's what it is you are basically your public uh uh all your public pages uh on your ui is what or throughout means oh great so we have filled with dummy data so uh when we are going to create the pages we are going to create our login page and exactly uh that's why we have put for login and log out as login and log out so everywhere in ui builder in wherever we are putting any configuration most of the time it's json configuration so i'm gonna go and save this one so we have created this one now we are going to go into ui builder and it should show our new experience that we have just created and while this is loading uh can you go back to the same screen where you were earlier perfect so here if you go back to the admin panel there is another way how you can navigate through the ui builder and yeah if you open that admin panel you have the button here called open in ui builder what happens is it will directly take you to this particular experience and if you are on this page it will show you all your experiences what you have created and you have to select it but whatever it is yeah yeah okay so this is for uh video one in uh second video what we are going to do is we are going to create our very first page for the second video thank you thank you
http://www.youtube.com/watch?v=6AXWj4RRiSs