foreign [Music] thank you [Music] hello and welcome to Creator tool boxes servicenow show that brings you tools for your toolbox that's about as simple as it could get we are here for you developers and admins and let's start with some introductions we'll start with that guy first hey everybody my name is Brad Tilton uh I am on the outbound product management team for all of our next experience products uh I previously was a developer advocate so not not new to Creator toolbox but really happy to be back thank you Brad and my name is Chuck tomasi senior developer Advocate at service now I've been here since 2010 was a custom customer for a couple of years before that and a long history of tech and it and computers going back decades I I do have to admit I got a little bit of extra laugh when I did that to Lauren because I do stuff like that to her on stage all the time she's driving the cameras back and forth so that's uh we're just gonna roll with it this is a live stream so this is not produced you're going to see us possibly make some mistakes like that welcome if you are joining us don't forget to like And subscribe I wouldn't be on YouTube If I didn't say that at least once there we go a couple of quick announcements before we get started we do have hacktoberfest starting so go over to our developer.servicenow.com blog and check it out there's full information about that is that the right that's the right leg okay is it a little short for some reason devlink.sn slash blog we have hacktoberfest you can earn some swag Earl just put out a wonderful video yesterday uh showing what what you can get if you participate in hectoberfest and do it right we also have call for no the devies that call for content is coming up soon but I'll talk about that another time but the devies our app of the Year award entries are opening October 20th so watch for an announcement on that we'll also have that on our blog maybe even have our blog migrated to the new platform soon finally but the Devi's is a great way to get your recognition and and showcase what you've built now this is an app that must be in production so that you have a value prop behind it say we save this much money and we save this much time or increased Revenue whatever it is that that you do to tell your story around that application we will be doing a podcast shortly with last year's winners so that will coincide shortly before registration so mark your calendars it's open for about three weeks don't delay get your ideas together talk to your team October 20th is when you want to start doing those entries okay that commercials are over Brad what are we doing today all right uh so uh my uh my products here at servicenow are UI Builder and workspaces and components and things like that uh so I wanted to share uh what we have in Vancouver uh for those products uh and so yeah let's uh let's get into that love it we've got a demo that I'm going to walk through uh that is uh probably less than a planned demo and more of a bullet point demo so we'll uh we'll see if we run into anything crazy here um but I've got a few different sections uh the first one I'm sure has been talked about uh on uh some of the dev program stuff already but the first one is one of the big things in San Diego when we launched the new UI was to access my update set and application picker I have to click it requires an extra click I can't just glance at you know what those things are set at uh there is if you are an SN utils user which should be just about every developer or admin where where their company allows them to use Chrome extensions or I think it's a Firefox and other extensions as well there's a great uh little thing that shows the update set and application Pickers but we finally have been able to work that into the product and so I'm just going to show real quick how to enable that just a wee bit bigger I can all right I may have to go back down once we get into uib right not like little screens that's one of when we're at knowledge and I'm watching people uh do my uib labs on like a surface or something it's always very painful I always take that back to our other teams and say hey can we make this easier all right I think false is the right way disabled yes we want it to be false disabled equals false always throws me it's like inactive equals true that's right let's do a hard refresh here I think that'll get it to me there we go uh so if you noticed my little Globe icon switched to this instance tools uh utility icon when I click on that I get this bar here and this little message here actually comes from a system property before the new UI it actually showed up to the right of the logo up here so this is a good way it's not a great way but you can differentiate between your different instances uh with that but it also shows uh your application an update set picker I believe five total Pickers show up here and so I one of the questions we get is like why didn't we just add it to this bar up up at the top and with all of the new admin configurable menus here where you could have lots of menus across the top we've kind of added more things here uh we did a lot of this for accessibility we added the easy favorite um favorite in here um so there really wasn't space to add the update set picker or all five of the pickers that you can add so I think it's application update set um domain language and there's one other one I think it's encryption related but I can't remember what it is so I think there's five total Pickers that can show up um so obviously that's a lot of screen real estate especially if you're zoomed in a lot like I am so yeah we're gonna start with that so that was uh task number one we have completed it so we get at least a 20 percent uh here and then John has filled in in the chat uh What uh what the property name for uh for this is okay by default it's service management uh so this was actually uh this property name actually came from uh a feedback session we did with all the developer MVPs uh probably it was probably a couple of years ago it was after the San Diego release and one of the big pieces of feedback was like hey we really use that uh property to differentiate or kind of say what the instance does especially for a sub prod some of our customers have lots of different sub prods and so we want to differentiate between them and we we used that so we took that and and added it here so we we do listen to feedback nice all right um so from here let's let's move into kind of workspace improvements and so these are going to be things that don't directly apply to developers but that developers will want to know about uh real quick when you turn on that instance tools bar is that persistent does it stay on like yes yeah it can be persistent so I can toggle it so I can if I want the screen real estate back I can toggle it and then if I log back in it's going to be like this so it is persistent I generally just leave it open because I usually I mean I have a pretty large uh monitor that I work from normally so I'm generally not to not want for screen real estate uh but yeah you can toggle that and that's persistent okay stored as a user preference I assume I assume that it is stored as well why not we're live here so we can see while we're doing that I I forgot to mention that icon in the upper right shows that we're using this is this is related to our Vancouver release which just came out General availability in last week I should know that because I was there for it so if you if you want to see all of the other content related to Vancouver you can go to devlink.sn Vancouver and uh according to Lauren this is our last There's the link this is our last Creator toolbox official in the series we may be adding one or two more things that seem to be sneaking onto our radar oh wow I'm just gonna assume you saved the best for last so uh yeah it looks like we do have user preferences uh um strangely all right so we do have the four Pickers here what was the one I think language was the other one I don't know why we're not storing user preference for that um but what these were all around the same oh we're let's do it now all right so we'll toggle it let's refresh this list and did anything change um went to Falls it did it did not change I don't think this was two minutes ago so that's interesting I don't know how we're tracking that uh I got 8 10 right now is it not 8 10. oh I have 12 but or eleven well maybe let's let's do it one more time yeah that one's 8 10 54. for some reason yeah I that maybe you could come in here turn one off that you didn't want I I know oh let's do that oh no is it a sculpting what wait a minute let's cut that out let's cut that out it worked right no I can't I can look into that one that's interesting it's in the list you click it it's recorded it's there let's do any of these work I just zbooted this instance last night which I don't recommend doing if you need it in the morning because this morning was a little stressful two days before knowledge let's just manually change it and yeah oh domain figure that's the one that we're not missing let's try updates that bigger this is that audience thing this is how you reverse engineer things and understand a little bit better all right we saved it I think is it saved yeah it's saved all right let's start so didn't do anything it might be a cash thing but we're not gonna wait for you to clear your cash and then oh I did I did a hard refresh here let's see then oh okay okay now which which is good I yeah I don't really want people playing around with these years of references sorry I walked you into that one who cares how it works y'all it just works you asked for it we've been we delivered it all right so uh let's talk about some workspace uh enhancements um so uh we we kind of separate uh on from our side of things we kind of separate like developer and Builder tooling from the fulfiller tooling and so for for here we're going to look at fulfiller uh things that mostly affect the fillers but our admins and developers always want to know about those things because they're going to be asked to configure them so let's look at some of these these are all kind of ease of ease of use of workspace making agents more productive as they're using workspace so I'm going to open up this is a custom app I have that I used for knowledge last year that I kind of use to do workspace training and things like that um so the first thing I want to show is that one of the things that we added in the Vancouver release was better use of screen real estate for forms and workspace and so if you're looking at this form it should look different than any other form you've ever seen in a workspace and that's because we've added something around how we use horizontal screen real estate so if I drag this smaller this is how workspace forms have normally looked with the label above the field and you know kind of everything in two columns here which if you make this a lot bigger is not a great use of if you make it bigger horizontally it doesn't use screen real estate all that well because you still have all this spacing in between the fields but if I do this then my Fields get a little closer together so I think we can get I think if you can see like if you've got two columns and you can see Seven Fields and you expand it I think we get to like 11 fields or something like that um so it just lets you use the screen real estate a little better and then it also if you make it small enough we get one column so we're not saying anything about responsive design here this is where we're kind of saying things about uh break points at different uh screen widths sure um because it's not technically responsive uh but yeah if I you know if I minimize things we just get kind of better uh better screen real estate if I enable compact mode through the settings we've improved that a little bit so if I go to preferences display and we add compact mode that's gotten a little better it's hard to demo that without looking at another form but this has gotten a little better as well I don't like compact mode because I use a pretty large monitor as we have seen so this this feels more like how the core platform UI the traditional forms would work yeah this is so this form is really close to one of the traditional forms and this was a lot of the feedback we got from customers you know we we absolutely listen to customer feedback uh when um you know we we release things and when we have so many customers that uh it's hard to like get everything right on the first go and so we release something and then people use it and we get a lot of feedback from it and we take that feedback and incorporate it back into the product and try to make it better every release um and so and you know as somebody who now listens to a lot of customer feedback sometimes we get customer feedback that's exactly opposite uh which is always fun to try to uh uh to try to um you know make make better but you know a lot of times we can add in different things to make life easier for everyone so this was one of those where a big topic was around form spacing and that sort of thing and how we use real estate all right so I'm gonna go this way and the next thing that we're going to talk about here is email so we have added an email tab to the activity uh stream component I was going to say formatter we don't support formatters and workspace but what we do is we build new components that replace formatters so we no longer need jelly in workspace uh so we added this email um this kind of email component uh to the X activity stream components at some point I'm going to be able to say that more quickly um but uh this lets you compose an email directly from the activity stream which is really helpful if you need to look at you know values on the form if you want to look at activity if you remember before this you either had to build something in the sidebar let's get rid of the sidebar you either had to build something in the sidebar or you could say compose email open a new tab nobody really liked working from a different tab than the details tab which totally makes sense I wouldn't want to do that either and so we've added in in here a couple other enhancements you can now drag and drop people from different fields and sometimes it feels silly talking about this because this is all normal things that most email clients can do but there are also things that you've not been able to do from any servicenow email clients in the past the other big thing with email is that if you forward an email you can choose to also forward attachments which was actually a pretty big piece of feedback from customers so that that was pretty helpful as well and this is not the last email enhancements you will see Safe Harbor we are really looking to make the email client within workspace and kind of look look feel and behave like email clients that you're used to using so you'll continue to see enhancements there I think at some point we wanted to kill email it didn't work everybody uses email it's not it's never going away right so we're embracing it and we're going to make it all easier to do from service now all right so that's email we also did some things with the activity stream here where if you see the activity stream you can see there's a few different things in here we've added some filtering capabilities to the activity streams uh-oh I think we launched Bradford his screen is still working but his camera seems to have disappeared this is a I feel like we're doing ventriloquism here he's still moving the cursor around so let me see if I can figure out not he must be logged in with our developer program because he said one sec I did not type that so I'm noticing a few things that that maybe were there were not there before you guys can tell me the colored icons certainly Stand Out nicely I I would have initially thought those would be the avatars or the the little circle images but the the colors oh here he comes can you hear me now chuck oh here we go bread with the with the colored icons next to the the names new or was that there before I I think we've done that for a while in workspace here um but yeah sorry about that I have a I have this fancy camera that uh is so fancy that sometimes it just stops working um but anyway I also have a backup camera because sometimes the fancy one stops working so that's what we're using now anyway I was talking about filter sets and we've got these filter sets I can filter down to a conversation uh I can just do my filtering here where I can look at different post types I can look at field changes on a ticket like this you know it may seem kind of silly to be filtering because there's barely anything in the activity stream but I I think we've all worked with tickets where maybe it's been open for six months and you've got a thousand entries in the activity stream and you're trying to find like hey what are all the emails that were sent out or how many times did this one field change and now I can do all of that through the filtering and then I can also create a filter set and give it a name so that later on I can use the same set of filters so this is you know this is something that for admins and Developers you may not care a ton but for your agents they're really going to care about this especially on tickets that I'm going to open for a long time heck yeah all right and then I think my last thing is around attachments um I should oh I have a record with an attachment open here we go you were holding on to me I didn't get this into Tech now or did this come out in like a store release one or something no it was there it was just a little but the other thing is I can now add custom actions to attachments um so this is another you know piece of feedback that we heard where people wanted to do things other than just download remove or rename um like maybe you want to send it or something like that you can add custom actions here with attachments there are other things that we know people want to do in terms of maybe filtering out attachments and things like that that we're looking at in the future but for now it's kind of this custom attachment to action here all right so before we get into UI Builder there's one other thing I want to show and we went over this in great detail in a uni Builder live episode from a couple of weeks ago um and in addition to going through this Chrome extension uh Gabby sang on it so if if you had any doubts about whether you wanted to check it out um you should check it out uh so why is this not working okay so there's a new Chrome extension ah there we go and it is called Next experience developer tools it was called Dex developer tools but we realized we had two things named Dex and so we renamed it to next experience developer tools which I hope makes more sense anyway so we have this new Chrome extension uh if you go to um there's a link somewhere I can post later on but if you search next experience developer tools in the Chrome Store you'll find it but anyway what we get is when we open and experience uh it it has to be a next experience page so if you look at a page in classic environment it's not going to show up there you go or was that was that Lauren sorry I can't tell anymore I thought maybe he grabbed it from the old uh from the other show anyway you got A plus plus in the comments for that one there we go you like that um so yeah if you've been working with uib Pages you are going to love this extension uh so if you noticed I came over into this next experience inspector and one of the things about this new framework that we have is that it is a shadow Dom based and so it can be hard to inspect what's happening from the regular console through the elements uh and so this is actually an extension we've been using internally for a while and the team uh kind of edited it uh so that we could release it externally but all you have to do is download and install it open up a next experience page you'll get two new tabs here for inspector and profiler and we'll walk through it real quick what these do but one of the things I can do is I can click on the little inspector and come in here and I know this is a thing so let's click on it and we can see I've got this component called now record common UI action bar so I can see a few things from here like the component ID and then the best thing my favorite thing that I can see is the component properties uh so this is something that you can see in UI Builder what's being passed into a component but most of the time it's kind of dynamic and so uh it's hard to see what the actual values are so I can come in here and click through into these properties and see how we're passing things into some of these properties so this is really going to help for troubleshooting and also reverse engineering some of the stuff that we ship we have some components most of our components are pretty well documented and they're pretty simple and then we have a few components that are not as well documented or maybe we document everything that's supposed to go in there but it doesn't quite make sense to you this would let you take something like the calendar component or the kanban component or the Gantt component and really see all of the data that's being passed into each of the properties of this component um and you know kind of reverse engineer that and do it yourself yeah it's also helpful if you've built a page and have a component it's not displaying the way that you want it to you can come in here and look at the properties and see what's being passed in we can look at the components internal state if you're not using custom components this this is probably a little less helpful as well as the action handlers and then we can also see the actions that this component will take for this component it's a little more complex and doesn't directly take any actions but that's there we have actions so if I were to there we go so let's say I were to Mouse over a button uh I think we'll see an action if I click on a button we'll definitely see an action cool and so we can kind of see what those actions are we can copy them uh some of these actions we can if it's an action that's taken in uib like I resized an element I can refire it without actually clicking on something oh wow this could be helpful for troubleshooting yeah so I can also change the payload right so if I wanted to refire it action but change the payload that's getting passed into that action or into that event handler I can do that so some really powerful stuff in here I can look at transactions this is a little probably less helpful for external people and then I can also see some different logs um so that's that in the interest of time let's move on to the profiler real quick so the profiler is really centered around performance so what I can do is I could say hey I know people maybe don't like a certain page in terms of performance or maybe there's a page that's really important to my company whether it's like the instance landing page or sow's home page uh I could reload that page and then right now I'm tracking the performance of the page until it's loaded so I think it's probably all the way loaded now I'm going to hit done and we're going to get this flame chart of all of the different things that are loading and the time frame of this I can also drill into it and see you know hey we've got a spike here what's going on in this Spike and then everything changes I can click into these things I get a donut chart at the bottom that tells me how many events were fired and which events they were and then the other thing I can do is I can I can download this Baseline yeah and uh then I can use it later on so it's always good if you're trying to do um you know if you're trying to do any sort of performance troubleshooting it's really helpful if you have a baseline because somebody can tell you that something's slow and you can load a page and say you know this seems a little slow but if you don't have anything to compare it against it's pretty tough uh to uh to troubleshoot that this is impressive I I have to imagine this started as an internal thing and then somebody polished it up and said let's make it available to everyone yes it is definitely internal tools uh one of the actually one of the big use cases for this is for our own support teams uh to do troubleshooting and performance and so once we kind of made it available to them we thought let's also make it available publicly a couple of quick things here I can also run multiple bass lines and then I can compare them and I can also run a Baseline download it and then load it into a different instance and compare different instances uh so I have a Dev instance and test instance are running really differently for some reason I can compare those and see where the the difference lies we've been there before Brad yeah yeah absolutely oh because you had this system property or there's something in Dev that's just causing this horrific bottleneck somewhere of a resource you need yeah or they're like what is this code and then maybe don't let Brad write code anymore who knows all right that's my Dev tools and then this last section we're going to get into is UI Builders specific I saved it for last because this is you know really what I care a lot about is UI Builder and the Builder and oh this is a new instance I don't have my roulette [Laughter] reference I know so we're going to get into uh the uh into UI Builder here uh and what are we going to look at first Let's uh let's take a look first at uh let's open up a page and I think this is the right one to open up but the first thing you well probably not the first thing you'll notice because it's hidden up at the top right but we do have this what's new button and uh if you click on it it's going to tell you the you know four main things we did in uib for the Vancouver release and so this will be this will be something that will be available in future releases you'll see different things and so we're really trying to do a better job of letting people know what's new when we come across a different release because we know that uh you know when Chuck and I started 15-ish years ago there was not that much going on in the platform it was all pretty standard uh we've got UI policies now you don't have to regular science script that was about it that's right hey workflow came out that's pretty exciting dictionary overrides what a concept uh so now the platform is very Broad and all of our you know different applications uh are getting into some really complex use cases and doing some really great problem solving but it can be hard to stay on top of all of those updates so we're trying to do a better job from an in-product perspective of letting you know what's new without you having to read the release notes because again reading the release notes is a different activity now than it was was 15 years ago but he still follows the same pattern though right we're we're seeing what not to use the word pattern again but we're seeing what patterns customers have what developers have and how they're doing their roles and then working to make that better it's like hey you know what people have been doing this one thing over and over and it feels kind of janky let's work on improving that so this is one step closer I I want to see this like everywhere throughout the platform yes yes and you know we are looking we're kind of working on some um some big projects internally around kind of unifying how we do a lot of these things like next experience itself is an exercise in like let's unify all of the custom UI that we build instead of building some angular and react pages and all sorts of things and UI Pages you know let's really standardize on this and so I hope we see this what's new button and other builders as well very helpful but yeah so you can see I'm not going to click into the all of these because I don't want the what's new pop-up to steal my thunder uh but let's go ahead and click out of that uh I should change Scopes into the scope I want here you get a new truck yeah this is actually my old truck I have my family is too large for me to own this vehicle anymore so have you gone to school bus yet there's no school bus uh but yeah so uh we've got um a few things that are new so what's new uh the other cool things that we have are up here so let's go ahead and make some changes uh and let's say I want to delete this button and make a change so you'll notice I have I have undo redo now so my two favorite things about the Vancouver release oh the first one is undo redo uh and undo redo I can kind of go back selectively uh I can you know just hit the button it supports the standards keyboard shortcuts it works across saves um so if I save the page and don't like what happened I can undo back before my page Save which is a pretty big deal uh it goes back I think about 20 steps so after that we're not tracking anymore uh if you exit this page you you lose the undo redo if you close out a UI Builder you use undo you lose the undo redo those are things that are the current state but I you might not they may not be the current state uh forever and they may not be the case forever but for now it's about 20 steps and you have to be on the page the whole time now did I hear right too if if you made a change that's in say a hidden panel or something and you do an undo it will bring you back to that panel um maybe I don't know let's see I thought I saw that somewhere but put a comment in the code or something or yeah let's do client State parameters and then we'll close out of it okay and then we'll kind of undo back here oh I went to the wrong spot ah all right let's try again all right so here's the panel I'm gonna make the panel go away I don't think it's going to do that it did highlight oh okay it did it it sort of got you there yeah um all right so let's go ahead and get rid of that button again where's my button there we go all right so let's delete my button so I deleted this button I haven't saved the page yet but before I save I want to preview what that's going to look like and so this is this may be the most useful feature uh in UI Builder and this release for existing pages and this is letting me preview the page that I'm on this is the runtime of the page it's fully rendered here but I haven't saved the page and what it's actually previewing is not the page itself it's previewing the specific variant that I'm looking at and the reason that's important is because if I have you know five variants of a page and a variant is basically a different version of a page I'm showing based on the audience that's seeing the page or the URL parameters passed into the page and so if I hit record I may show people different record Pages depending on what table they're passing in and previous to Vancouver if I wanted to preview a variant I was on I had to save the page and open it in the runtime and the problem with that is if you know the the conditions for the page or my audience was different than the variant I was seeing I couldn't preview it and so what I would have to do is like change the order of the page or change things passed in or give myself a different role in order to just test that page and so you know for most cases it wasn't a huge deal but for some cases it was really difficult because I may forget to reorder it afterwards and then you know I push it to production and we've gotta you know we've got an incident so this is really helpful letting me preview something without saving and preview the current variant that I'm on oh yeah what else do we have all right let's go let's do some styling all right so if you are used to UI Builder the Styles panel uh is kind of constantly evolving uh and we think this latest evolution of the panel is going to be really helpful for people especially for people that aren't CSS experts which I think is most of us that'd be me I am always mixing up marching and padding every time so we've done a few things one of the first things we did was we tried to make everything a little bit more visual so margin and padding is a great example um you know it takes a while before you really know um you know you really know which goes to which so margin is on the outside of what I'm doing padding is on the inside so it's a container and I want to make everything inside it have have a little bit of space around it I use padding on the outside as margin but that is you know it's not like those terms are really self-explanatory nope that's you have to learn it uh so we can see here we can see what the margin and padding is and then we can also see what each of the different uh values are so with margin and padding I can set them all together so I could say let's give some huge padding here or that was a margin uh or I can set them differently I want it to be zero and then on the bottom I want it to be zero right and so it lets you target all of those areas without having to know a ton about uh what that is the other thing you might have noticed is that when I said it uh instead of just uh value numbers I get a graphical representation of how big that is which is really helpful because you know Excel and 3XL like I kind of know what the shirt sizes mean but I don't really know what they refer to when it comes to CSS so those can be helpful and then I still have the option to kind of break down into custom CSS where I could use rem or you know any of those other options that I have and so we've done that more than just margin and padding that's the biggest one we've kind of shown hey here's the difference between flexbox and grid our sizing um is a little more helpful in terms of the values here and then we've also kind of done with the background book and then border is the other big one where you know thickness type we show the color and then Corner shape you know like most rounded and less rounded doesn't mean a lot to me but when I see it oh yeah that that looks good um so those are just some differences in styling uh the other thing we've done is uh what we call Progressive disclosure uh where we we try not to overwhelm you the first time you come in here and then if you need to do more uh formatting and styling you can hit show Advanced layout options because you know these are all fairly confusing to somebody when you see them all at the same time and so we're going to do more Progressive disclosure with different things in the future but just something to make it a little bit easier and more approachable for somebody coming into a uib all right so now we're going to create a new page what's the best way to create I don't need any changes all right so we're going to create a page from scratch and this was always pretty uh overwhelming for a lot of people um this is like kind of overwhelming for people because you know how do I lay out a page that's blank from scratch especially if I have a pretty good idea of what I want that design to look like um let's click open an editor I would love for us to remove that step and just put me in the page um so one of the things you can see is that you may not notice this unless you're in uib all the time like I am but we have this new like pink border and some pink options here and what that means is that I'm looking at a container here rather than a component and so that'll make more sense in just a minute but once I go add component we've changed the component toolbox a little bit where we've separated out layouts and components uh so that and and it's contextual so if I don't have a layout on the screen um I it's going to show me layouts and say Hey you probably need one of these and then if I'm in a layout and adding something into an individual container it's probably going to show me components so we're trying to be a little smarter and make things easier for people that are adding things we also have this little did you know we think you should start with layouts and layouts were really one of the this is one of the things that took the most work from our engineering teams because they really kind of rebuilt how layouts work to make it easier for people to create pages from scratch if you did this pre-vancouver you were basically adding individual containers to pages and if you needed to do something like you know let's say we want this kind of side panels experience which is pretty standard uh where maybe these are going to be blank and I only want content in the middle I add this layout and I can see that you know I've got 20 on the side 60 in the middle I could change this I can drag these to be smaller uh change how this works yeah I can add additional columns if I want to I can Nest layouts within each other so like I could say hey in here let's do two columns right and so we've got some nested layouts here um you know I I can add things and then the other thing that's kind of cool is let's just add some random components in here uh let's say none and then let's add uh I can still add a container I will add a flexbox container and then in that container let's add another stylized text because that's my favorite foreign all right uh so one of the things that I can do is we've kind of improved the stage controls as we call them uh and uh you can you can see that since I'm looking at a component it's blue instead of pink but I can also come in and from the component itself I can navigate up and down so I can navigate up to the container I can navigate up to the column layout or down to the specific um you know the specific component so this is something if you have a really complicated page which you know if you have a page where it's doing a lot of things you know this um this content tree may get pretty long and confusing and so it can be helpful just to click in here and our targeting is a little better now when I Mouse over something I get the dotted line around it which makes things a little easier to Target but then I can walk up and down the content structure you know from the stage itself which is pretty nice this is looking good yeah I think I think we're getting we're getting there uh in terms of you know being able to build out uh really nice custom experiences uh with uib um so you know this is my my two components here are very impressive um but with this column layout you can really do a lot and the nice thing about the column layout is you can you know you can really do a lot of things within this format and change things and build out some pretty Advanced Pages pretty quickly um and so let's do there is one last thing that I want to demo and to do that we're going to use a button and I cannot handle the button being in the very corner so we have to give it some padding it can say button that's fine with me it just can't be all the way in the corner um so we added a new feature called popovers and they live in the modals and popover section used to just be the modal section so if you don't know what a modal is a modal is something that you click on it comes up shows up in the middle of the page and um and really takes the focus of the user to the modal so generally with a modal you want somebody to do something and then hit a button and close it out or click out of it with a pop over and show it a pop over as popover is something that you can trigger on any event and it's going to kind of show up anchored to whatever triggered it and it's something more more informational or if you want somebody still to be able to use the rest of the page you don't necessarily need their focus but you want to show them more information that's where a pop over comes in so let's add satellite's text and we'll give it real text here or kind of real Bob over we're happy about it and uh of course we're forecast margin there we go uh and then uh let's go ahead and Trigger this pop over from our button here so I'm gonna click into the button and then we're going to add a um open pop over event handler to the button event so I'm going to choose an existing popover uh this is one reason why I should always rename your pop-overs and buttons so we're going to preview that remember I haven't saved anything yet so if I click on the button I now get this pop over you can configure where your popover shows up I could have it show up in the middle I think I could have it show up in the middle of the screen um and so in the popover you really have you can do anything in a pop-up so you could add buttons to it it could be super interactive but you have a lot of options in the popover as soon as I click somewhere else on the page the popover goes away is there any visual indication to know there is a pop over there or uh there is not I mean there could be that that would be kind of up to you to build uh in into your experience there's nothing you know by default um but but you could build something so we do have a comment that says hey could those be used for hints on fields and Etc um sort of uh you know Fields already have some hint functionality built into them and once you get into a form component and try to do things within the form component it gets a little more complex the answer is yes you could fire a popover based on something you're doing from a field but it's probably not as simple as you would want it to be I guess is the nicest way to say that um one other thing I wanted to show real quick I know we're running out of time here okay is uh one of the things we did with modals in this release was we allowed people to resize modals this was a big you know if you've got a modal where somebody has to fill it out uh you know fill out a form or something you might want to enable a resize on that modal and that just means somebody will be able to in the runtime come in and drag and drop or drag that window to be a lot larger um you know for the modal you can control how big and how small they can make it but it was a nice little enhancement there we did get a bit of feedback especially if you know you want somebody to like fill out a long form in a modal like on a record page you probably want them to be able to resize it if they're on a big monitor or something yeah I think with that that's just about everything I wanted to cover so I'd love to do a little bit of q a if anybody's got any questions about uh really anything we're doing with next experience or um and uib workspaces I'm looking at the Q a see it to come up or Ole misses bootstrap thanks for that yep and just general comment from Deborah about this is this is way easier it's it's not so overwhelming and that she followed up and said it's not that it was overly complex just there were easier ways to do this elsewhere and that's generally the track that we would take it's like how can I get this done the fastest uh modal resize does mean that if you enable it uh the user the end user can change the side of the model okay good clarification I think that might be it give everybody a second to last minute any questions again hacktoberfest devilink.sn slash Oktoberfest I think we had a banner on there somewhere we've got the Creator con call for Content coming up soon we've got the Debbie's submission lots of stuff lots of stuff coming so keep your eyes on the developer Blog devlink.sn blog if you use that short link it will go to the right place either before or after we make this migrations for us as much as you I'll also mention uh so I know y'all are talking hacktoberfest on Friday uh we're doing a uni Builder live uh on Thursday where we're going to talk a little bit of hacktoberfest but we're really going to talk about um different next experience custom component UI Builder things that you can do for Oktoberfest so some real specific projects we're going to try not to steal any Thunder from the uh the big stream which I think is going to be a lot of fun we've got World Forum events coming up are you going to be at any of those Brad I think I'm going to be at the Dallas World forum uh all right hope to see you there I'll be at Dallas Toronto New York and London and we are working to make meetups developer meetups adjacent to all of those so great that'll be fun and with with fingers crossed I might get to see a long time friend that I've never met face to face in Belgium [Laughter] real soon thanks for watching and all that's left for us to say is take care stay safe and bye [Music] thank you [Music] foreign [Music]