[Music] [Applause] [Music] [Music] [Music] Hello everybody welcome back to you and I Builder live the show where one day I will have an actual introduction my name is Maria Gabriella choa pess wector and I am an outbound product manager at service now joining me today is my name is Brad Tilton and I am also an outbound Ser outbound service outbound product manager at service now uh I didn't get an intro I didn't get it seamlessly either so very well welcome Brad I am so happy to do today's show it is the first show of 2024 um I am super excited for what this year is going to bring us thank you all again so much for joining us on our journey the last year um this today though what are we gonna do Brad today we are going to look at the standard record page uh and we'll talk a little bit about what what does that mean standard record page uh and then we are going to attempt to create a page collection and add something either one of the tabs on the standard record page probably in the contextual sbar awesome and just for those of us who are joining us uh for the first time today first of the year uh this show is meant to be an exploration of UI Builder where we learn stuff alongside um all of our peers in the chat we have fun and we are I I think that we show the real side of development where not everything goes perfect but it's okay because we can all get through it together Lord knows the chat has helped us a lot that's right and none of this is practiced or rehearsed in fact I have not done what we're doing today in at least a few months so no promises that it even works but we're going to try it and hope we may run into some issues and they're probably the same forward looking statements these statements are intended to be covered by the Safe Harbor Provisions con so guys this is why you don't give your friends your AI voice because now he can make funny things with it so now before Earl can distract us further Brad let's get started oh we didn't even we we didn't even test sharing my screen huh great let's see if sharing screen even works uh hold on my notes is on that screen it's not going to be helpful all right so let's try this Now seamless on coming back from break completely rehearsed very well practiced it's this one it worked all right yay uh okay so uh a couple of questions coming in there are some requests for uh at least one topic um Playbook activity in a custom workspace I do want to hit on playbooks and workspace sometime in the near future uh so we'll do that um yeah my shirt is an internal thing only I love the MBA and I work for a service now so I had to I had to get it um all right so what we're going to do today is uh we're going to look at uh the standard record page layout first uh and so a little bit of background um historically so I'm I'm going to open up service operations workspace here and should we zoom in a little scroll down yeah I zoomed in a little bit but this is a big month all right we'll start here this is kind of a a rough page to look at in general anyway uh here I'll zoom in one more um so this is service operations workspace uh this is my team is the Rockets I grew up in here Houston I love the Rockets um just answer that question uh so uh the um the record page in service now in workspaces there's kind of three main Pages there's the landing page the list page and the record page right so those are the three main places that people go to do things we have a lot of other Pages uh there's lots of possibilities for all sorts uh of um you know of circumstances and scenarios and use cases those are the big ones uh service operations workspace has some different variants of that record page uh and so previously the main one was this record snc page and then depending on what you're doing uh if you're emailing or doing a catalog item there's different versions of that which are different variants uh so if we look at this uh record essenc is kind of the first version of this record page this is kind of the older version of the way that we used to do record pages when uh configurable workspaces and UI Builder first came out in Quebec um so you can see on the left here there's not a ton going on but this page is fairly complex um so where where is everything that's happening uh part of it is in this record page tabs which doesn't really help you out a lot if you want to add a tab to record page tabs it involved going into the platform View and adding things and it was kind of difficult uh and then the sidebar is kind of similar we used all these viewports and it could be kind of hard toh to work with uh also if you wanted to add more things you had to kind of manually configure a lot of things um so what we did in Tokyo uh was we added um we kind of changed the way some of these components work uh to where we created uh presets and controllers uh so if I drag a preset enabled component onto a page uh it will automatically add a controller to the page a controller is a type of data resource and it'll wire it all up together so if you look at the form component which is [Music] here I don't even remember where the farm component is uh you have a lot of uh a lot of these things that if you were having to create this page from scratch yourself this would be really hard to do because you just have to know all of these things so that's the old version of the record page the newer version of the record page uh you'll see SRP or standard record page uh so that's kind of the the term for it uh there's more going on in the left here uh but what that means is that it's a little more discoverable and you can tell what's happening a little better so we have our form form component and then what's happening with our form component is these are all presets uh so this is all kind of hardcoded in here and if I were just just to drag this form component onto a blank page uh it would say do you want to add a controller and I would say yes and then it would just wire it all up for me um so that's uh that's one of the kind of ways we're trying to make things a little easier it also makes things a little different and newer to go ahead and add uh to these pages so I'll stop gab you have anything to add or questions there no I'm mostly been trolling the chat um I love how it's an SRP record though standard record page record yeah yeah so SRP is a term that we use a lot internally and so it's kind of yeah it's kind of a so we can all know what the difference between s so record and SRP record are see I just uh likened it to an ATM machine there you go um so let's look at this a little bit protction policy uh so this is the out of the box page uh so we're not able to edit it uh which is good uh you can see that it's using the controller for that one uh and then if we come in here uh we can see why are we oh I need to we can actually see things if I give it a all right so I can't do that can I add test your parameters if I'm in the right scope yes all right we'll look at incident because that's what I generally look at and then oh we don't have any test data in this oh so we can use a new incident record all right so now we should see something in the middle here now that we gave the page some data all right oh that's actually a really handy tip putting in minus one in there nice yeah it actually did that for me so I really I looked for and I was oh there's no data and it says use new record and so it added the minus one in which is nice um all right so now we have some some things here uh and you can kind of see where uh where everything lives at this point so we've got these uh record tabs left the details so the details is the same thing as the actual form middle and right and then we've got the side panel over here uh so if we come in what's record tabs left main tab record tabs left uh so record tabs left uh is okay so this is the main tab shows you all of the tabs right so uh the record page has a lot of tabs on it and so this is one of the differences between uh the old version of the record page and the standard record page uh and then one one thing I should also say before we get going uh so there's these two versions of record Pages uh and the old version most of our workspaces we're using that but as of the November store release most of our workspaces have a standard record page at this point um so I know s so uh came out with one in the November store release I believe 4.1.0 or 4.0.1 is the newest version of s so um so if you want to upgrade I think you have to be on Vancouver patch 3 or four uh to be able to upgrade uh but you can get this newer version and so one of the things that you'll see are all of the tabs that are in the the tab collection there and so let's uh let's go ahead and preview this sure let's save and continue we can kind of see what this page looks like a little bit so I'm going to go ahead and save this so that we can see all the tabs that are going to show up testing yeah come on who's up ay you're part of our demo data so this gets to be opened on your behalf Paige you don't get to answer first version you and Brad don't count was it uh winter I actually don't know it's either winter or fall 2008 for me that's the exact same answer that page GI I I don't remember um yeah so now we have we've got an overview tab uh which I love putting an overview tab if you're creating a workspace uh or if you have a new record page on a workspace I like an overview tab because uh when somebody's interacting with a record uh a lot of the time they're not actually updating the record and the overview tab gives you the opportunity uh to really surface the most important things about the record you obviously still can have uh the activity stream and that that sort of thing in here um but if you have a record type that most of the time people are just looking at it they're not updating it uh the overview tab gives you the opportunity to do all sorts of things uh you can it can also be interactive you can put buttons in there so that people could do things um but yeah so we got details and then related records and so Rel relateded records has another vertical tabs component along with this horizontal tabs component so we haven't actually done any development yet and we're 15 minutes in so we should start that soon uh but the other thing is we've got the contextual sidebar here which is just another tab component um so for service operations workspace we have agent assist we've got some recommended actions and so I think what we want to do for our task here is we we want to add another icon that shows another page here and I think we want to show I don't know we'll figure it out when we get there but we should show some sort of information related to the logged in user the caller or um the record itself uh in this tab here so this is I I think a lot of what people used to do with like field decorators and things like that U may make more sense in the contextual sidebar uh in workspace um so that's kind of something to think about uh you also have the ability to customize this whole area uh so you know one one thing that I always talk to customers about is um you know in the in the classic environment you have a form uh and you're pretty limited to um you're pretty limited to formatters and field decorators on forms so I can stick things in between uh fields or I can put things to the right of fields but I can't really fect the page other than that and so in workspace this page is a lot more um configurable and customizable so let's actually go do some development now all right so what we're going to do is we're going to create a new page collection uh so a page collection allows you to create Pages uh that you show within uh viewports or tabs uh on a workspace page uh they can exist across workspaces so it's one way to do to have some scalability uh and generally they they generally have to be on a record page at this point they have to work with a controller if you want to interact with the page data uh but let's go ahead and create one so this is the part where I'm a little fuzzy it's been a while so hopefully this works so there are a number of page collections in there by default I don't think this instance has too many any workspaces yeah not just service operations is the main one so we're going to create a new page collection uh I think I have what's my scope here yeah so I created a new app scope for this uib live page collection probably um let's read I'm not going to read anything we're going to call it um that is a lot of text Brad so w page collection and what what are our options here oh it's all components I think we want it to work with the form component and there's a lot of options there all right actually this is what we're going to do uh we're going to go back so I already know there are some page collections that work with form tabs and so I'm just going to copy the CIS ID of one of those are there any record page this is what I want um tabs component is tabs so and while you do that we had a question in the chat can you add an existing page to a page collection no you cannnot what's a what a short answer for that thanks uh we do uh if you want to uh softly play The Safe Harbor uh we we are looking at how to um do some make things more scalable uh so how can we reuse things a little better um so that is something you can look forward litigation of9 so for those of us who might be joining us for the first time we are product managers which means we may say something called forward looking statements basically you should not make any purchasing decisions based off of anything that we say you should only make purchasing decisions based off of what's in GA um but I mean honestly it's a pretty good practice to make no purchasing decisions based off of anything I say [Laughter] did I copy the right let's go tabs all right we're just going to select tabs uh viewport no controller I think I do want a controller here all right so there's my page collection so the page collection is kind of an umbrella and then inside of that page collection uh I'll be able to create pages and do I do that here no I think we do that in uib again it's been a long time since I've done this all right so my page collection now shows up in uib uh I got it I'm editing a p page collection so we're going to create a new page within this page collection uh we're going to call it uh let's start by just putting some info about the logged in user in this page collection so uh user info sure all right so let's go ahead and edit it uh so we have this nice little message that says you're editing content in a page collection the reason this is important is because page pages in a page collection can show up in multiple workspaces and multiple Pages uh so if you edit it in one place I I edit it is so hard to say if you edit it in one place uh then it'll show up uh in uh in multiple places so just something to be aware of so let's let's we're just going to put something in here and kind of hope that uh it can show up on our s so record page uh so I think we're going to go stylize text this is my favorite component it honestly makes me wonder sometimes how much different everything would be if you weren't the PM for this product what component would everybody be using I don't know and I don't know that the uib team loves that this is my favorite component to be honest I mean I do know that they don't love that it's my favorite component because it's kind of a catch up we actually have components for header and other things that are really a better practice to use uh but this this one's kind of easy and it does lots of stuff and so I don't have to remember the names of the other components uh so let's go contact seeing behind the curtain I had no idea those components existed uh props I no not props let's go I'm GNA what we're going to do is just show the name of the logged in user here um so how can yeah I want to talk more about this uh data binding but I can't um safe haror isn't there more oh because I don't have access to the log to the page stuff this is where we have some fun um ah all right so this is uh this is helpful so from this page collection I'm I'm inside of another page so I don't directly have access to things that are in the URL or things that I would normally have ACC access to in the uib page but I do have access to the controller uh that uh that my record page is using so that's why uh these page collections right now are really only useful on record Pages because record pages are the only pages that use controllers right now uh that will change we're introducing more controllers and more preset enabled components uh but for now it's really just record pages in the future there will be more pages that you can use these with and we'll be able to communicate back to the parent but for now uh we're going to use the controller so let's go ahead and uh I don't remember what the L out of all this data is I hit the wrong button there so let's go form do Fields do caller [Music] ID I keep hitting dot instead of enter and then do I need display value pretty sure I do but we'll leave it at that because he said it requires the controller does that mean we're not going to have any data we can preview stuff from here uh we should I think well let's see Fields assigned to oh so that's going to show us the fields sometimes it takes forever to figure out what we actually uh where the data lies description name value no here let's go all right so caller ID it should have a value in here already scroll past it some top level outfits no it's got to be in form it's where Brad tries to remember how this works uh oh let's go oh because it doesn't know what our test data is yeah yeah so let's just try this for now and it may end up being some Json all right so I think that's all we need to do with this page collection so now do we need to do something in s so let's see I just changed to Pink I realized that I hadn't fully set up this instance all right so I think we need to do something to add the page collection and y'all are all more more than welcome to China chime in if I'm doing something wrong again it's been a while we're all figuring this out together does that test values um drop down do anything in the top right corner which one test values where preview would be for your page collection oh probably I didn't see that should we go back and look at it I don't know why it's on the right instead of on the left like in the pages but it looks useful well played there we go so now let's look at the controller oh I need to be here yeah I think you're there we go we do have a value I guess we do need display value is that at the top there yeah yep it's just uh color ID not alphabetical all right well that does something now we now we have to figure out how to get this into uh into the page itself let's go to settings ah this page collection is not included in any of the experiences so how do we include it in an experience I think there's probably a couple of ways to do it but let's go ahead and try something here so I don't think we're going to be able to edit this record page without cloning it but let's see what we can do without duplicating the variant first all right so at our sidebar tabs and then it yeah so we're going to have to add another page collection here so because I can't edit this page we are going to duplicate this variant into a new one we put my name on it so why not I think there's a way to do this without duplicating without owning the page uh and we will uh we'll figure that out all right so tab sidebar we're going to add another page collection uh so this is the tabs component uh the tabs component I can kind of create a custom tab I can use a repeater to create tabs for me uh I can specifically add related list tabs or I can add a page collection here so we're going to go page collection and then I get to pick my page collection which is this one so now we have this one as well quick question yeah can you go back to the add tabs and then go back to add page collection please if you scroll down there's multiple records per record what what are we looking at here so wonderful question Gabby I'm so sorry no I'm not quite sure they may be um it may be the same page collection and then pages that work with different controllers within the page collection uh seems like that could be it I think this page now has a couple of controllers on it U but that's a very good question uh that someone should find the answer to I will add it to my notes I think you just volunteered uh all right so let's save that and then I'm yeah we can use the preview here we don't have to save and preview I could have just previewed for the record uh this was my no so my page collection still didn't show up uh do I need an existing incident uh let's do this all right so mine's at the top let's just go ahead and do a refresh here see what shows up there all right so my page collection did not show up uh so our sidebar tabs user info default see what kind of things we can do here so we can edit the page collection from here I go to the settings for this page no audiences the order zero top of the page URL pad that all looks right let's go to the page collection itself and go to the settings Form controller it's used by service operations workspace let's see if we need to do something here it's not a Vi work what is app configuration no that's not work all right let going to do the same thing all right so first troubleshooting step we're gonna flush the cash wait Brad can you go back what am I going back to no no no ignore that that was oh no that was AI Gabby wait Brad can you go back I have made a mistake good morning to India so I find it interesting because those tabs that we see there are from the other page collection would from the other one not ours yeah yeah I'm I'm pretty sure there's a configuration step that I'm missing I just don't remember what it is we still have 15 minutes to figure it out all right let's find my page again and then we did all sorts of things let's see if it works now no I don't think any of these are mine where do so there's a place where you define the icon and I think that's what we're missing because we have not been able to Define an icon anywhere so those look the same so our tab component collapse tabs by default all right did you check out the page configuration of the page collection there is a label let's look at it again so you think this label could it be anything is possible this doesn't work I'm going to have to go into my other instance where I know I have successfully done this before oh well now we got a label there our test I know I guess it's just a label for the body oof there we all right Talk Amongst yourselves while I go look at something okay awesome so let's see so it's early January you know what I'm thinking about knowledge because that's uh basically gonna be right around the corner before I know it and I am super excited about hopefully getting to see people again but also about all the cool content I'm going to make for knowledge if you guys have any suggestions you should always drop them in the chat for any kind of content you want to see throughout the year or [Music] specifically at knowledge um I am I'm trying to make a really cool custom app inside of a a custom component inside of uib right now um that you guys may or may not have seen in a previous episode and I hope that we can make it into something really awesome um and fun to have at knowledge but I think we could probably kill some time talking about what our favorite knowledge memories are because that's all I can think about knowledge I wake up I think knowledge I go to sleep I think knowledge It's haunting my knowledge dreams sounds good we're gonna have a lot of uh content at knowledge we've got a few Labs we've got uh some ask the expert sessions that'll be happening all right I'm kind of at a loss here but let's go we're going to try a couple of things so let's look at all the other page collections that are here and most of them have the controller specified and I don't think we no we did do that okay well there goes that um I we don't have any dependencies let's look at 100% ay my favorite part um last year was all the community based stuff that was in the little Community content uh Corner basically is what I called it there was the hackathon there were all the community belonging group meetups um it was a ton of fun I did Skip karaoke this year because um of what happened at New York in 22 I didn't I didn't want to lose my voice again even though I did lose my voice again a knowledge it was great [Music] um I'd be happy to tell you that story anytime [Music] um that is literally me Brad right now like I I need to start doing so many things Brad can you do that again Earl is going to cost so many I can I think I can tell at this point okay good uh I think we need an appp configuration I think this is right yeah yeah I think this is what we need um app configuration I think would be well let's let's go back and look at the other ones so we know we know attachments works ah that one doesn't have an app configuration but it has the controller dependencies we don't have any dependencies I promise I'm going to start I'm I'm going to stop just uh quickly clicking everywhere but all right I think we want a so W app config there and maybe not all right Andrew I see your chat let's try it it tab [Music] sidebar what are you talking about in here in uib for the workspace I think he means when you click on the tab uh component on the tab component all right I'm so far down the rabbit hole that I I can't uh that's not even the right thing that I clicked on there well this is very annoying because I've done it before but I couldn't find where I've done it before I I testing something out real quick I made my own variant of your uh page because I think I have a suspicion we don't need conditions all right so we want to let's just add a uh a regular Tab and see how it works tab label uh test tab create once add there that's fine let's work for it we will have this figured out by Wednesday of next week because we're going to do an academy on how to do this this was like our our test because I have very little time so that didn't work so that's our problem oh oh Brad what oh I hope this isn't it one second okay can you do me a quick favor and go back to the tab configuration please yes go to tab right sidebar and then scroll down can you uncheck hide tab labels I think that's going to give us words instead of is that right yeah oh we didn't have icons but they're there all right well it's been fun [Laughter] y'all great catch Gabby so now we just have to add icons that is so interesting so our homework for um Wednesday's Academy is going to be to figure out how to get those icons in there obviously we're doing it we should be out of time almost unless you want to keep trying to hunt for the icon or something else you want to I want to figure out how to put an icon in there because this has upset me awesome let's go ahead and keep looking yeah I guess we can go to the record in the classic environment I was hoping I could do it in uib I do find that interesting though I thought with the way things typically work that it would make you pick between the page collection and then pick the item inside of the page collection but it's pretty cool that it shows the items from both page collection one on top of the other that is nice all right we're gonna have to go route uh where can I specify ion yeah I think the view page collection settings just sends you to this this page and then you can't open the record and then page definition from there uh page collection let's see if the page definition works we have variant record yeah I would kind of expect this to be where the icon lives is it in the Json I think it's in the Json I'm looking right now that's in general rather than variant setting there is not ay I am at a loss where's our test this was so this did work once we figured out how to get it to show up so it was successful technically speaking it may not pass uat but it's all about how you measure success and that's true in all sorts of areas [Laughter] let's see how let's see if we can find real quickly in here somewhere so screens anything that looks like an icon uh it would not be in anything related to declarative actions um but we will talk more about declarative actions in fact there was an incredible declarative actions article published last week by Dylan uh and it is just about everything you ever wanted to know about declarative actions I'm gonna send it to Earl so he can post it here there we go because I just happen to have it up for no related reason whatsoever yeah so we'll we'll get this uh figured out I know I have it somewhere and there there's some instructions somewhere so we'll get this figured out the nice thing is once we get going uh we'll do an academy next week and then from that we'll have a community article that will at least give you some guidance on uh how to um you know how to do this uh and then how to get more into it so obviously and there's lots of people in the community that have already done this U this sort of thing and been successful with it uh but once you kind of learn how to make these page Collections and tabs work uh you can do lots of things things in here so obviously agent assist and attachments and templates already are pretty interactive and let you do a lot of things uh and then when you can create your own and have it be interactive and that sort of thing uh it really kind of extends the capability of uh you know what you're able to do on these record Pages uh oh that's the new one that's why I don't have the yeah I think we'll go ahead and call it uh for that unfortunately uh we did not uh did not make it happen but that's all right I mean technically we did though yeah that's true it sort of worked it sort of worked it it won't get past uh peer review but it'll be fine the users don't need an icon to click they can look at the labels it'll be great so thank you all so much for joining us again uh one more time we are going to have a next experience Academy on Wednesday the 17th at 11:00 a.m. Eastern where we're going to have um a couple of slides and a more structured demo completely different from us today um we're gonna do this but successfully We're not gonna show real Dev it's just going to basically be a PowerPoint we're clicking through but it's a great place to ask questions have other resources and a lot more is coming for us in the 2024m other than that our next you Andi Builder live is going to be on Thursday the 25th at 400 PM eastern time just like today it's going to be a lot of fun I don't remember off the top of my head what we're going to cover um all right we're probably going to talk about declarative actions so you should totally tune back in uh in two weeks if you want to learn more about those we should hopefully have a fully working uh kind of mini lab we could go through or just something new that we could figure out totally so thank you so much Brad it was a lot of fun and thank you all so much for watching have a good one byebye thanks [Music] [Applause] everybody so soothing I'm waiting for AI Gabby to say [Music] [Applause] something this presentation may contain forward-looking statements these statements are intended to