foreign [Music] Travis Kaufman aka Big tasty with blindfast Consulting here to drop some UI build our knowledge on you so today we're just going to quickly get started we're going to build a workspace experience a landing page and kind of go over UI builder in general at a very top level just to get you started so without further Ado let's rock and roll first thing we want to do is open up UI Builder and the easiest way to do that is we can either say come to the now experience or we can type in UI builder in this case let's just be the UI Builder click the UI Builder you'll see it open up here in a couple seconds all right so you can see this is my PDI I have a bunch of stuff out there I've been just toying with and everything but for this this video we're just going to go to create experience and you'll see that we have a name app shell UI URL path Landing paths roles and application I'm one of the global application scope we'll just leave that there we're going to give it a name let's use Simple workspace we'll give it a agent workspace app show because that's what we kind of want to work in you see it automatically populated the URL path force and the landing path of home that's good to go we're not going to add any roles to this we're going to keep it easy today let's go to create again we're not going to apply an ACL rules or anything like that so bam open up experience you'll see there's nothing here right now so let's go ahead and create a page and we'll name it landing page because that's what we're going to build today you see it automatically gives you the path you can pick a template there's a bunch of templates out there we won't be working with any of them today but maybe in the future episodes we'll start working with a couple ones I know the one most I have used is the record page because I don't feel like building off that whole record page the way it is so they offer a template for that which is really nice but in this case we don't need a page template we're going to create our own so let's go to create first thing you'll notice is successful page created you see some stuff happen in the background we're going to talk about a little bit before around this this box open up right here we can add required parameters or optional parameters and also access controls again required parameters are parameters that will put it in your url so if you're on the record page let's so to speak we can say that that we can give it a table parameter and a sysid parameter and what it will happen is we can pass in those parameters to that record page to allow you to see the table that it needs to use and it's this ID of it and display all the information for that record in the case of our landing page it's just simply a landing page so we won't worry with required parameters or optional parameters for now we'll just say done all right you'll see now we have the what I like to call wizzy wig because that's basically kind of what it is and what you see is what you get so if you've ever developed web pages in the 90s or the 2000s you might have heard that term before so we have our landing page that's the only page we have created in there but we can switch Pages if we were to create more we have our variants for for this page so if maybe we wanted to have an itel specific landing page and then uh maybe a major incident or HR or whatever it might be other variant for the landing page we can do that and use the same space but just kind of have different variants and you can push those using audiences which is uh ruling great bait excuse me Rule and group based or take use those parameters we talked about a few seconds ago and take them and use those as conditions inside your variant this case we don't need a variant we're just going to create One landing page on the left hand side you'll see your content when we start populating content we can add components directly on the content left hand nav or we can hit this little plus button and add component here once we start adding components you'll see each component has three tabs a config a styles and events so your configure basically the properties of that component say if it's a a record or form component you're going to want to know the table of the form component the sys ID of it the view things like that Styles is what it says it's styling it's your CSS since we're in San Diego we're on the Polaris theme UI Builder now has it makes it a little easier for you to decide how you want to style things and it kind of gives you stuff that's just set as properties so you don't have to write the CSS but if you did want to write the CSS it's perfectly okay to come in here and click View and edit CSS and Bam there you go you can you can style it there if you'd like let's put down on that and events events are what happens when let's say we have a button on our page and we want an event to happen when we click that button so I'm click on that button we added an event maybe that another event links us somewhere maybe it opens up a modal whatever it might be that's where events are handled so cool we got this but now I want to show you the next thing is the edit experience settings so this is going to have your four four General topics here your general you know your title of your workspace you can give it a description of course the path let's go to advanced settings and open that up but we're going to talk about these other things here really quickly branding and theming of course we're gonna use our Polaris theme for now that's fine or sad navigation and this is going to be the navigation you see on most workspaces on the left hand side there where you have usually your home a navigation Or List link maybe your notifications that you get inside your workspace while you're working on it stuff like that we're going to create that page out real quick here in a second but we're gonna touch on utilities too so we have our notification so those as like I said if we want to turn on our notifications that allow users to get notifications while they're working inside this workspace something that's been assigned to them things of that nature also we have our Global search that we can add if we want to use the global search we're not going to mess with any of that today we are going to start our set navigation we're going to add a page and of course we only have one page we're gonna pick the landing page we're going to give it the home icon and I always like to use the outline I just think it looks better but you can use whatever you like as you have a lot of options here I mean you just have tons so you can pick whatever you want I just particularly I like the outlines and I try to keep it as big as possible but we'll give it a label of home that's good we do want it to be on the top and it is going to be the first in the order so we'll leave it at 100. we're going to save all changes and this will cook us back to our UI Builder we're going to touch on this page here in a second just give me one moment we're going to hit open for now and you're gonna see there's no other content available because we haven't created any but we do have our top header here as you notice we did let the left-hand navigation but it's no it's not set here so sometimes what you actually really need to do is open up that config file that we opened up you can see that there's now a US page property under Chrome toolbar so let's kick into that and the value in here is actually Json which is just a JavaScript object that's used to display data and pass data and do a bunch of different things and we see typos hit set to string so really all we need to do there is go to Json hit update let's go back to our landing page and you should see on the left hand now here awesome we got the home button out I want to do one other thing one other property here so I'm going to go ahead and grab it from my another workspace I've been working in to test things and we're going to say new and we want that to be name of Chrome tab and this will give us our tabs inside of course we're going to want Json again and we're going to do this copy and paste all right we're going to change the table here because we don't want that table also students the table for now and basically what that does is we're going to get our tabs at the top of the the workspace like you see it because workspaces have those nice hierarchy of tabs to where if you're in one incident Or List view or something you have a tab for it and once you come down into that that record view of that incident or whatever you can have multiple layers of tabs under that with the details tab any related lists you want to use in case you want to you know if you're on a change request or incident that has a CI Associated to it you can open that CI see the details and then quickly get back to your incident and try to help alleviate that incident and solve it in this case we just changed this to incident because that's the table we want to open when we hit the plus button on our tabs if we want to open up a new record in this case it'll be a new incident record negative one sysid denotes a new record instead of it having a record that has a sysid that's already created in the system negative one is is for that it's just denoting a new record inside the service now so let's hit submit all right cool we can close this out and we can refresh again and you can see here we have our tabs now and if we hit plus we add track product and didn't change the name of that but it should hopefully well it won't because we don't have a record page but in the future we'll do that so now we've got this kind of set up as a basic workspace we just need to add stuff to it so let's go ahead and start just knocking some things out on the landing page all right the first thing I want to do is I want to add a component and the first component I want to add is this container component and think of containers like divs for your HTML it's kind of just a section of you you want certain things inside it so sometimes like if you were coding HTML you would have your header you'd have your body your content body and then your footer so let's let's look at it like that so we'll have a couple different things and in this case we're not going to make a header a footer and all that we're just going to make like a simple text box at the top give it a little styling uh then we'll start adding some components under that and I'll show you the expansive component Library that's already in here so let's add component and we want to do the heading we'll just give a heading of one renamed our simple workspace simple workspace let's just say welcome to your simple simple workspace and in the future I can show you how to actually make this Dynamic so we can put names in it and stuff like that for this case we're just going to keep it as simple as possible and Welcome to our to your simple workspace we'll keep it a level one head primary sounds good let's go ahead and save it let's come back up to this container and go to our styling and we want to keep this as a column because we're not going to put anything around this this isn't going to be the only component in this container but we do want to center it and let's give it a maximum height uh let's say 65 pixels to cut down on size of that maybe a little smaller yeah that looks good let us Center that to we can that looks good though that changed much because of the maybe because of the heights but anyway let's go ahead and give it a background make it easy on you so the background we're going to have our colors from our theme and these are the colors from the Polaris theme we can certainly change that in the future but for now let's just keep keep it with our so we don't have to re-theme everything let's give it a background color and let's give it a drop down shadow medium sounds good let's hit save let's go back to our landing page and we should start seeing content here now yes welcome to your simple workspace awesome now let's create a new let's create another container so we can either say we can either come here and hit add this is going to add it to our component that's right now and just add it in the column view inside this container we can hit add here and this will allow us to add another component right under this what I like to do though is try to do it as much as possible from over here just because sometimes you might click the wrong thing and you have to redo it you can drag and drop things in here as well but it's kind of much easier if you just kind of do it in a linear fashion and then kind of edit as you go if you need to move stuff around a little bit so in this case we're just going to add a component after we're going to add our container again and for this container I actually want it to be a row and I want to add a couple things so I'm going to put a couple incident and problem data visuals on here and I want to really have some leverage over those working in the future so I'm going to put a filter a couple filters in here and so there's our first data source so we're going to use this filter to filter things on the incident record so we're going to add we're going to say incident and we're going to filter stuff that's going to be priority based because we're going to make our first out of visual is going to be based on Priority One twos and threes so let's go ahead and save that so priority good to go let's add one more right under it and I'll show you how the row Works component after We'll add another filter let's use incident again and let's use assignment group maybe we'll use that in the future so we can pick off if we want just a big based off our assignment groups or if you're looking for a certain assignment group you can hit save so let's do that here's an example of moving so we can move it over here to this side because we want primary priority then assignment let's give this container some padding just something small no background needed padding let's give it small let's do it on each of the filters as well let's go extra small for that and then extra small for this and then we're going to explain a little bit more in the cool so we just give them some padding make it a little nicer so if we actually go into one of these filters and go to the config file and see the properties you can add here so you can actually add some more values if you want to figure off of it you can set up a priority label in this case we do want to say let's do the answer to the priority because if we have a priority data Visual and or excuse me an instant data Visual and then a problem data visual it might confuse everybody for what priority we're looking at so let's go to that we're not going to put any default values in there we're just going to let it let it be as it is and of course ascending works assignment group it is actually a reference to assignment group we're not going to mess with that anything right now so let's go ahead hit save all right and let's load our see how it looks cool that drop shadow might be coming along a little bit that's okay so now we have some filters here and you can see once we start adding our data visuals we can actually uh applied to our data visuals or thing like that it'll it'll show and here's our assignment group so pretty easy to set up right all right let's go on to our next container and let's start adding some data visuals so again we're going to say configure add a component after we're going to add another container we want this to be a row as well we're going to actually add a background color to this just to separate it from oh sorry let's add something a little lighter a little lighter perfect all right let's jump into adding our components now so no more we're done with the filters but like I said we wanted a data visual which when I say data visual I mean a report it's based essentially a report on the back end when you're using your your home pages your workspaces you're allowed to choose reports that are kind of already in the system when you're using the UI Builder they don't pull from the back end of the system the reporting you already have you kind of have to create your own which is not bad because they're pretty easy to set up and they're pretty straightforward so we're going to go ahead and pick our data visualization that's one and we're going to make this a bar chart and as you can see there's a bunch of different kind of charts in here that you can use let's use our vertical bar let's give it a header I do like to have it the header separator the title let's give it priority one two three got that data we're going to add a data source of force so you can search for any table on here I've got some some tables already out about or that I've already used here so I'm going to go ahead and pick the incident this will load up some predefined filter conditions excuse me if you want to use any of these in this case I'm not I'm going to set it just all add the custom filters here active is true good to go let's make it and and pick a priority is and we're going to do is one of because we actually want one two and three level priorities good to go there you can actually run it here and you can see that we have the ones and the twos uh we have a three in there so we see what it draws back so that's good let's add the source good to go there all right we're going to keep it as the count incident that's what we want we do not want to group by on action status we actually want a group by priority because we want the ones and the twos and the threes let's hit apply you can see that update you see this is very small it's got the it's taking the background of the container color we have now just to kind of separate things and make it look a little more aesthetically pleasing so we're going to remedy that but let me go through you can actually use sorting if you wanna sort it by value uh or name and descending or ascending and data update if you want to you know show filters a couple different things there for your options in your presentation display settings you can you add your data labels you can switch up the colors if you want to you know pick from a color palette or a fixed element color there's a bunch of different things you can do there we won't play around with that too much today we'll say that for a future presentation but we want do want to do is get some of the styling cleaned up for this this data visual so let's go to our styles um height I like to use 400 pixels I think that's always a pretty good height we do want to take out 50 of the screen so we're not going to use any padding around this so we're good there the background color we do actually want it to be neutral so it stands out a little bit and all right so that one while it doesn't look exactly like it's going to look on the back end you'll have to accept that as a UI Builder thing for now because it's not going to look exactly like it does on the background I'll show you whenever we refresh the landing page so let's add one more data Visual and kind of do the same thing real quick so add component after because we know it's a row so it's going to be right beside it we want another data visual and I'm not going to use single Source here we're going to our single score we're going to use a pi and header and Border we're going to say my groups problems let's add a data source of course we're going to pick problem this time I'm not going to Define any pre-existing condition or predefined conditions we do want to say active is true and let's pick assignment group and said it is we're going to make it as Dynamic so we can say one of my groups I've added myself to a couple groups out there so we should see some data so let's run it yeah so those are the problems all the problems I've been kind of that I'm that my group and because I'm in the software and hardware and help desk and my PDI awesome let that load count is good action status let's go ahead and you know switch it over to our assignment group to better associate things so cool we got a nice pie chart here and we kind of do got to do the same thing under styles so we're going to go ahead and give it another 400 pixel height we're going to give it a width of 50 of the page no margin padding or anything like that but we do want to switch that background color to a nice white color the neutral zero all right I think that should be it let's see if it's safe all right so that actually looks a little better so it does not it's not perfect because it has the bars in here what not but let's go ahead and Save and refresh this now hopefully it looks a lot better yeah there we go that's what we're looking for so we have our Priority One twos and three instance uh my group's problems in the future we're actually going to be able to click through these um it's going to be set up through those events so let's let's do one more thing cover the landing page what we've done and then we'll call it a wraps for today and we'll hopefully create another episode where we actually start diving into some data resources or data sources and uh events and stuff will make it more accessible and create more pages and just build a whole build a whole workspace so we're going to do one last thing and that's going to add another component after in this case we actually just want to list and we're going to use the the bigger list the simplest can be used if you just kind of want to display data and then click through it and get to somewhere and let's add another component f is because we don't want it in a row we want it right after it as you can see it's kind of displayed like that now but the the best thing is sometimes that might not look correctly because I like to put everything in its own okay that doesn't look so bad I would I would like to put it in its own you know container just to keep it that way in case it overlaps or things like that but that doesn't look so bad even though our kind of our gray background is up because we're not using any padding but that's okay we won't worry about that right now so we just want to configure this list real quick menu selections we'll leave that as it is the task table is good because we actually do want to see both problems and incidents we're going to say my active tasks edit fixed filter this is a filter used if you want to have a filter on the back end so you only want them to search on filter on active Zone like you can set the active filter in the background I cannot change that one okay so you ever need to do that for security reasons or whatever whatever the use case may be in this case I'm just going to use the simple edit filter here we're going to say activist true is great and we're going to say do I have anything assign to me here let's check assigned to is dynamic and is me and apply I should have some stuff out there yeah cool I have some things out there you'll see my nickname big tasty so let's hit save and cover what we've done today refresh all right so this has been a very simple tutorial on how to create your own workspace experience using the new UI Builder hopefully this helps you get started maybe it helps you edit some other pages in the future we're going to add some more Dynamic things to this content We'll add more pages and whatnot for now we created our experience we gave it a workspace app shell we did some of the back we did some of the behind the scenes config stuff to get it looking like an actual workspace we've added a simple header some filters that we'll use for both our our incident our problem data visual we also have the list you see my active task so we can quickly go okay these are things I'm working on and in the future we're going to be able to click on these and get to a record so that wraps up for today I hope you enjoy it I hope you learned something have fun with UI Builder hopefully you'll be able to watch some of my future episodes and we'll really dive into stuff but thank you very much for viewing appreciate you have a wonderful day foreign