why do you need terminal we you at we're in CLA [Music] [Laughter] [Music] [Music] hello everybody and welcome to you and I Builder live where sometimes it works and sometimes it doesn't my name is Maria Gabriella oo press Rector I am an outbound product manager at service now and with me today is Brad Tilton me too that was like the cleanest intro I've ever done and you just had to go and ruin it so yours was good welcome everybody today we're gonna have a little bit more an an unusual episode we're probably not going to build something we might get there who knows we're going to be talking about our new store releases in UI Builder and highlighting some other features that are also coming out or rather that are already out our next episode is going to be on June 13th and that is going to be our one-year celebration of you and I Builder live now yes I know it's a little bit late I kind of forgot that this might be a fun thing to do but what we're GNA do is we're GNA go back to episode one you and I hungi and we're gonna have a rebuilding challenge we're gonna see how fast we can rebuild that app with all of the new features that UI Builder has grown and created and released over the past year here and then we're going to have a special edition episode I'm trying to um figure this out right now but on June 27th We're not gonna be here me and Brad are gonna be on PTO so someone else is gonna take over the show who it is I don't know what they're gonna do I don't know not yet anyways I'm gonna be floating in a lake that's you're gonna be in a lake I'm gonna be in the ocean nice well be both be floating though that's nice we should uh we should have like a brad Cam and a gabby cam just showing us relaxing while people here are trying to work we can host that on as ajb on a cruise yeah yes okay that spoilers for a much later episode but today we're gonna go ahead and uh see what Brad has in store for us oh no pressure Brad all right you know what we didn't do we didn't do screen sharing uh before we started the episode no we didn't so um while you figured that out I will plug what happened to my camera oh no good I was gonna make this like a real tight episode um there we go hey there's a white screen all right uh we're going to go over a couple of things today so we had uh the May store release uh so one of the big parts of the May store release for our world is UI Builder now a store app uh in uh in the store as of Washington so we had Washington store release one that came out in February when EA dropped uh and so Washington store release too came out in the middle of may we will have a Washington store release three and four so uib gets updated four times a year uh and and uh we're going to show off some of the things that got updated uh this the the off off Family Store releases the ones in May and November are a little bit tougher because people aren't really looking out for new release content at that point uh and so you know we're we're trying to do this to to uh socialize some of that also uh the CLA CA got some updates uh in May CLA I don't know what's going on CLI got updates in May as as well and so there were a couple of big updates if you are doing custom component development so we're going to start with that but not spend a ton of time on it um and yeah so I have uh so we don't have anything to build but I also in true uh you and I Builder live fashion don't have a PowerPoint or anything so we will at least show things so it's kind of a compromise um but let's go ahead and start with the CLI um so we'll just show uh so snc UI component this is riveting uh but version so there's a new version out it is 264.0 uh you can update that through the store I can zoom in more um yeah uh you can update that through the store or there is a GitHub link that I think we will be able to post here uh if you don't have store access um so new version of the CLI uh some of the big things about this uh are we are now supporting uh up to node 16 uh which is still sounds silly um if you know a lot about node because there's newer versions uh but we're supporting node 16 uh the other thing that you won't really see uh a lot of differences about but it's kind of a big deal moving forward uh is that uh we when we came out with the CLI itself the UI component extension uh it was a fork of our current internal CLI that we use to build components and so we've actually been maintaining kind of two branches of this CLI one of the big things we did in this release uh is we married them back together um so what you are using from May forward is the same thing that our internal developers are using to build components um so there's there's a few like little things that if you're super familiar with with developing components you might notice some differences and some cool things you can do uh we're not going to go into it a ton here um but that's one of the big ones uh the other big thing is that uh we're now supporting supporting profiles with the UI component extension uh so before you had to use the login command uh in the UI component extension specifically where the snc CLI actually use profiles um so now the component extension is using profiles itself this this was kind of a security issue with the login command um but one of the things that you need to uh to know if you want it to work is that you also need to update the snc uh CLI uh to the version we released in February which is oh what's the version one oh I can't it won't tell me oh there's okay here we go um so Ali asked didn't this advance so uh the the UI component uh actually used the login command so if you've always been developing against the same instance you might not have noticed this but it didn't support profiles so now you can uh when you develop or I guess when you scaffold a project or when deploy uh you can also pass a profile with it and you know deploy to to and develop against different places um yeah so 1.1.2 is the version of the snc CLI you need and then the UI component extension is 26.4 um so those were some updates uh we have uh we have a pretty robust I feel like road map planned for uh the CLI so if you saw it not getting any updates for a couple of years uh and you know didn't think we cared about it anymore we do care about it it has investment we're going to keep updating it um and so we have some some nice things on the road mapap for it uh but these are all kind of just getting it back up to speeds one of the things we would really like to do is support the most current version of node um and and then also kind of make uh make it a little lighter when you're scaffolding a product a project uh as well uh I think that's everything I have oh uh we're also uh the the dev server uh when you do develop uh and then open up the CLI uh should respond a lot faster so we've made some performance improvements uh to the CLI and local development as well I think my favorite part of knowledge was sitting at the um component building ask the experts and hearing a lot just like say a whole bunch of things that made no sense to me about this and it was so exciting and then I just repeated all of the things that aop told us at knowledge is basically what this last 10 minutes was yeah I wasn't gonna call you out like that but it's fine it's fine you did it indirectly which is just as effective um we will now move to oh here's an incident form we're going to move into uib now uh let's start with plugins um so that was CLI updates there will be more CLI updates um later this year Safe Harbor um but uh can I zoom out some more I'm gonna Zoom it again um so the CLI updates uh we will have more later on uh we're not going to do any Ned tools uh which is now which is what we're calling the next experienced developer tools uh we have been referring to it as Ned tools internally and I like that a little better although it's a little odd own um and we didn't update that in May but we are planning on doing that uh in the next couple of months um Zoom some more I will Zoom again sorry this is my my 27 inch 4k monitor and oh there we go this is good uh so we went to plugins let's look at UI Builder uh where is UI Builder fun plug and reminder for everybody UI Builder is now a store application so if you don't see any of the stuff that we're talking about in your instance of Washington UI build make sure you go and upgrade like Brad just showed that's right uh so the newest version is 2524 this came out on May 9th uh I only remember that because it was the Thursday of knowledge uh and uh I think what's the do we wait please tell me that we're literally gonna sit here for the next 47 minutes and just read the release notes oh that'd be awesome no that would be a power move these are basically all the release notes um so we're going to show we're going to show them uh I wanted to see if uh if it was dependent on a specific Washington uh patch uh and that's something I should have looked at before I don't know if you have to be on patch three um but uh we can find that out nobody asked that it's just a question that came into my head um so if you're on Washington go ahead and update uh your UI Builder uh so you get the most recent version that we're talking about here um so there's a very obvious first uh update to uib that completely um completely made our lab screenshots outdated the moment we presented them that's right yeah we built labs and then uh two days after we presented them they were now outdated because we have this really nice new uh uib homepage I think it's it's super cool it is nice uh I love the search being at the top so this is the new uib homepage um you know the the main reason we shipped a new homepage here is because it just makes the user experience a lot better uh using uib uh and not just getting two long lists of experiences and Page collections um and so here we have a few things going on uh so we obviously have the search bar where I can start searching and find either uh and experience or a page collection um and then then once I start opening things uh I also have my most recently opened five experiences in page collections I can go view more and see the full list here um but you know a little bit more contextual uh I think for most customers uh you're probably working in the same one or two workspaces most of the time um so hopefully this makes things a little easier for you uh it's also a little easier to to create new experiences or page collections the process of creation hasn't changed um but you know it's a little more obvious and then we have I think we have like 60s something pieces of content um all these different videos and tutorials and stuff um so this is worth exploring if I go in here yeah we've got all sorts of help content in here uh as well and then uh we also you can always go to the full list of experiences or the full list of page collections so this is similar to what you've seen before except the search bar is right here instead of having toh click into and do a contain search um so this is just a new thing uh we also have some cool stuff planned for the the um xanadoo store release one which is the August release uh and as we do more things within UI Builder uh you might see more tabs across the top and and you know more functionality from this page one of the coolest things about this page that you may have noticed uh is that it has this madeen UI Builder tag with it and yes uh the UI Builder uh engineering team did build this page using UI Builder itself uh which is kind of fun uh so yeah that's uh that means we can steal it I mean borrow it uh maybe yeah yeah you probably could at least can we borrow it real quick we yeah after sorry after we do the thing we're here to do let's do I don't even know that we wanted well it's not all that complicated but we did it once no this is that's not the experience I want let's go let's do my knowledge lab because it has some nice stuff in there all right so let's go ahead and open an experience so that was the first thing there's four there's three things we're going to show here so that was that was thing number one that's not what I wanted to open um update it is letting me update to version 25.2 25.2 point4 on an instance that only has Washington patch one oh nice great right I just have to refresh the store connection so if you guys are having that same issue just uh refresh your store connection and it should show up all right uh so this is uh this is a knowledge lab uh that I built uh that we'll kind of use to show some of the other stuff we're loading I I clicked real fast a few times and it may be mad at me uh you'll also notice I can't remember did we do this in store release one or two with the new um the Builder itself having a fairly newer theme so one of two okay we are trying to um you should be able to update a UI builder in the PDI yeah so uh UI Builder does not have any licensing associated with it and so you should never be you should never have to go to the store to actually update UI Builder you can just do it from your from your instance whichever instance that is that's something that starting out really confused me because I was like I don't know how to connect to the store and we always call it a store application but in your instance you go to plugins application manager to update it so there's a lot of confusion out there but you you can upgrade it on your PDI just go to the application manager by typing in plugins to your filter Navigator nice so thing number two we did in the Washington release uh is we actually rebuilt this entire middle section of uib uh so we call this the stage we call it stage 3.0 uh it's our inter internal name for it but it's just the new stage and the biggest part about it it is it is actually a wizzywig um so this this is the actual renderer that you get when you render this page in runtime it's not the preview anymore uh and so this should help with having to save the page and preview it all the time especially when you're doing styling uh and you're not really sure how it's going to act uh so one of the one of the parts of that that you'll see is that you do get the app shell as well uh with the rest of the page so you can kind of see what that you know what that looks like uh in the runtime the other thing that you get is if you have a repeater uh you have all of the different uh items in the repeater uh showing here uh and it is also more performant uh than um the old preview um so that should be helpful as well uh there are some things that may not be exactly the same because um uh because you know we have to optimize performance and we were loading all this other stuff around it as well U but for the most part it is kind of what you see is what you get uh one of the things that you might not get here uh is uh if you if the page needs to be passed parameters or if something needs to happen on click uh you may not see that on the page uh but uh other than that you know this is the actual renderer uh that you see in the runtime is that a repeater component showing more than one let's let's uh where are we body there we are repeater it's a repeater component show we got the number back back so that's cool that's super cool also if you want to know how this how to build this page um you can well you can do my knowledge lab which was not quite ready for you to do yet but uh anyway uh so this was thing number two what's in the middle uh the third one is uh we have changed how we show Json uh in some different spots uh mainly with the data resource output um so in Washington store release one uh you will or you might remember that we yeah so we added this visual data binding where it's no longer you know data do data resource name dot uh you can just go in and kind of Click through uh and uh you know there are some some parts of this that are really nice because I can now discover a lot of what this is and I don't have to know all of the um you know the entire schema of what I'm trying to do in order to get there I can explore things like page properties and see all of the session properties that are associated with the user and things like that um so this was Washington store release one uh and then uh we kind of changed the data resource output to match that uh so before this was still just uh Json and uh that sometimes made it kind of hard to know okay I want to take some of this output from my data resource but I'm not quite sure how it matches up because the some of the data resource output would actually show me display names and the pill data pills are going to show me the actual field names uh so now it should match up a little better to where I can still kind of Click through uh and see values but then I I can also see this uh in more of a Json uh structure as well uh the nice thing about the Json structure is it does give me the different kind of colors and icons for array arrays or objects or strings uh and so I still have that but then I can kind of you know scroll through this and in a better way um than the pill view I think this is a huge accessibility win because I have a really bad problem with being able to read giant blocks of code and seeing it broken up by different data types there is really cool and also um if you go back to the um visual data binding this view is also available here that's right click the button and show them oh which oh this one sorry thank [Laughter] you we have a question from the chat Brad yes and I know the answer but I want to know if you know the answer do you know if the Chrome toolbar and those other properties that activate sidebars headers Etc are going to be added to the VII Builder so it's not so difficult to implement um so the sidebar is already available right so if you're in a workspace and you need to add icons to the sidebar you can do that through the experience view uh for things like the Chrome toolbar no right now uh we don't have uh I I wouldn't I would not look for that uh in the near future I guess as well I wanted to know how you're going to word that yeah I can't be super definite about it so just to be a little bit more um skirting the line of what'll get me in trouble as Brad sweats profusely over there um I do want to make a quick distinction between the things that you're asking for because a lot of like like the Chrome toolbar is associated with portal experiences versus what's available to configure for a workspace so like a workspace sidebar is available to configure but these two sort of experiences are going to experience different levels of growth in the near future so keep an eye out for the workspace configurations that are coming all right uh that was thing number three right let me look at my notes and see uh the other thing that we have enabled but won't matter at this point is that uh I believe and I haven't tested this but it's in the release notes I I believe we have added a banner to uib uh so that when you upgrade to zanadu uh and you need to upgrade the store app it will tell you hey there's a new version of uib go ahead and update it um so that's that's kind of the biggest downside of uh moving something to the store is that it's a little harder to know am I on the most recent version I'm I'm going to go look at all my updates and oh hey I have a hundred apps that I can update you know how do I how do I do this so that's one of the you know one of the ways that we're we're tackling that at least from the uib perspective is we're going to tell you from inside of uib uh that uh that it needs to be updated or it can be updated uh I will also say we did add to the what's new um the what's new dialogue uh so anytime you're wondering ing if you've upgraded what's new uh this is a place to go check you can see that we added the wizzywig um I think the rest of the stuff was in Washington store release one um but yeah so I want to to see something so this is the whsy wig new stage 3.0 internal name thing in the if you could open up a workspace in uh your regular platform view real quick just like s so works and then go to the form page my form might look weird why is the guy I'm really sad that we're in the Tilt new instance instead of the Bradington instance I know that instance is problematic I'm gonna have to up a new one so in the top right corner if you click on your avatar oh that's a good call we can configure page and we can go to form layout right yep so now my question is what happens if we do the same thing inside of the Stage Preview now that it's showing the Avatar it's not nothing it's not clickable no it's just there to to show you so we've done some things with the stage uh to uh to control that but sorry I had I had exited out of the I thought we were G to show a form Builder which is what I clicked on no I was hoping we could just D like dramatically destroy the system live but I guess they thought of it ahead of time bummer they did there there are some smart people on the uh on the UI you can't you can't mess with I do like that it shows the instance tools that makes me happy yeah so I mean it's rendering what your view will look like right so I have instance tools enabled you know this is a good what if we uh no that's now assist uh what if we do this oh and then refresh uib okay that's kind of sick nice so that worked it's not showing me the oh it did show me the red circle there we go yeah so it's it's uh showing me uh as ay says what you see is what you get wiiz wig um I don't does anybody else when they type wizzywig I always I'm like what you see is what you get as I'm typing letters anybody else I don't even try to type it oh I know it's going to end in Failure all right I I think that's the end of the content for this episode should we take some questions do you have anything try copying the layout copying the layout what do you mean copy the layout of the homepage let's make our homepage with it oh of the uib hom page yeah let's do it and we'll wait for questions to come in yeah ask questions while we do this weird thing um UI Builder default I'm curious to see what we can actually do here because if so I'm just going to use this UI like for the rest of forever for all my applications right priv oh it's a private scope so we we can't uh we can't like duplicate the variant and change the uib homepage which in my opinion is a good thing um but we could access this layout and then use it to build our own thing if we wanted to uh and so so we you know we don't have the option oh I do have the option to do click it click it click it I don't want to here just go to Global all right and today was the last episode of UI Builder live page let's go be great if we could make it even better and then ship this with the UI Builder we can now edit content that's awesome but we're stuck in this experience so if we want to copy it over to a new experience and use it there we're gonna have to do the macr proponent way anyways right oh I thought you wanted to replace the uib homepage with something else no I wasn't trying to be evil it's chaotic good not chaotic evil what if we do what if this is how we ship it out of box [Laughter] now change Maiden UI maen UI Builder Tom madeen yiel we should do that all right this is all random at this point so if you have better things to do you're welcome to drop off well there goes our viewer retention oh how did they put that there how did they put that there think that is let's see there's a lot of stuff on this uh yeah let's it wouldn't be a custom component would it uh it might be because it floats around is there anything under page container no list container list tabs it appears on all the list tabs wait what's this oh I think this is it oh no show create this is your domain oh no no no that's the create button in the top right corner I don't know maybe they just have a component on every list tab no this is the create button oh that is the create button move it to the left uh if I go CSS Styles no I mean they had to make it float somehow so I am invested I it looks like a custom component that they've add in in there they wouldn't just add it to each individual tab you think show create experience modal I don't know yeah I think it's in the list tabs check the list tabs yeah but it it'd have to be in all of them I I'm not S I mean if that's what it takes that's what it took man create new help maybe did they do something to the body component I'm sure they cheated and did something that we can't see they are it is the uib engineering team true there has to be maybe an event when that gets clicked I don't think it's clickable it is I thought I don't think so I I think I tried to click on it position absolute exclamation mark important here let's see uh how do we get to the oh no I want to yeah there we go so what I really want to see is if I go to I change this and go to the uib homepage is it actually going to show that let's do a hard refresh do work so you probably shouldn't do this uh next in you and I Builder live a public apology in a patch uh I mean I don't think it's that harmful but um yeah if you needed to to do something to this page you could it's all built in uib but the cool thing about this is that all of these uib pages and the modals and all of this stuff like you can look at how we made it and you know build your own cool Builder if you wanted to on Surface now was that uh yeah any nobody's asked any questions since we uh no I think we're all invested in figuring out how they got that to hover oh yeah see it's not cck well let's oh we could uh we use the dev tools use the dev tools yes use their own tools against them you know what's really funny we could probably just ask one of our many co-workers who would probably be able to tell us very quickly how this is done but this is much more fun I'm sure they would be fine with telling us so this is where we at oh no that's this is not the inspector anymore I did the wrong thing this would make a fabulous April Fool's joke just change all the links in a duplicated variant so that someone has no idea what's going on that is chaotic evil what I was thinking was trying to figure out how the how we could insert the Konami Code in here and then have uh the confetti shooting out from the sides so it's under the tabs it is under the tabs well but it's not in the tabs I guess is what I'm saying oh page simple oh this is a I think this is added not in uib a so if I'm reading this correctly everything is uib except for the thing that says it was made in uib is is possible I want to replicate this functionality now and just have it I'm sending some messages after we're done to figure out what what how this is actually added this would be great we could have it on our actual show and have made with yiel a part of every app we build that's right we have a business purpose business purpose water marking for our video yeah all right I think uh I think we're done I guess I'll allow it okay so hello everybody once again thank you guys so very much for watching I wanted to have one last Quick plug a quick thank you and goodbye to Ay who is going to be traveling to Norway and doing really awesome stuff over there on a mission and I am super excited for her but I wanted to quickly say hash Yale thank you so much for your contributions to the community to the show you're an awesome MVP and I'm gonna miss you so much ditto everything that Gabby said oh my gosh you're you're you're probably that person who like someone writes something really meaningful on a card and then just says comma Brad at the end yeah well I do and and and Brad okay but yes I wanted to say thank you ay and I hope you have safe travels A's gonna be doing a um a Blog for her travels in Norway and I'm really excited about that you should ask her if you're interested in signing up for it um and then I guess I'll do some final plugs I hope everybody's been rested from uh from knowledge it has certainly been a very um rest full week for me I am still exhausted but we have some really awesome stuff coming up in the future so we've got the Year celebration on the 13th of June we've got the guest episode on the 27th of June and then July it's going to be the Gabby birthday travaganza again we're gonna have build along along month so if you know how to reach me on snev send me app ideas I'm going to be we're going to try to see how quickly we can build an app app on build along month and you're going to be able to build it with us and then uh who knows what it'll become I have no idea what I want to build yet um but it's going to need to cover two episodes so it's got to be a good app idea so let me know chat send me a message message me on LinkedIn or whatever and then on July we're also going to have a contest to name this guy that's off screen right now Earl no not Earl we're not naming Earl we're naming the octopus in my background so if you would like to be a part of my name and I just click the button if you like to be a part of yiel history and name the octopus in the background no the octopus is not called Earl although that would be so funny so this is all the stuff that we have coming for you in the summer I am super excited thank you once again so much for supporting us and watching us for the past year anything you would like to say Brad no I appreciate everybody watching us uh it's always nice to hear you know when uh you know when somebody says that uh some of the silly things that we do on this show actually help them to use UI Builder uh is always great uh and so yeah keep the feedback coming uh if there's something you want to see on the show let us know on a YouTube comment or or by messaging us um so yeah thanks everybody and uh we have a lot of fun doing this I was waiting for you to say me too me too thank you guys so very much for watching and I hope you have a happy R year Wednesday bye-bye thanks everybody [Music] he [Music] I [Music]