[Music] thank you foreign [Music] welcome to Creator toolbox we are live for our first time for Utah calendar content after Tech now if you aren't sure what I'm talking about regarding Utah or the content calendar or Tech now we have a bunch of links for you make sure to jump into this link first devlink.sn Utah to see everything about the servicenow Utah release that we're doing uh this month and the next month if you missed Tech now where we did an entire overview of the Utah release make sure to go to devilink.sn Tech now but if you're new to uh Creator toolbox Creator toolbox is a show that we do as servicenow developer program where we demo different tools that are being released or featured uh for the sake of all Builders and developers out there on the servicenow platform we want to do you do a good demo for all these things that we're releasing so that you have a better idea of what's going on here joining me today is everybody on the screen half of us are Developer Advocates half of us are product managers and so we'll go ahead and do go ahead and do introductions uh first of all hi everyone My Name is Earl Duque I am a developer Advocate with servicenow I joined servicenow about a year and a half ago and before that I was with a bunch of different customers mostly in higher ed but I was a developer senior Dev team lead for a few years before I joined service now and I'll kick it off over to bernoff hi everyone I'm the newest senior developer advocate here at servicenow I also started as a software engineer in the past moved into Consulting then I worked with a customer prior to joining service now I'm here to help you out passing on to Gabby hello everybody my name is Maria Gabriella Ochoa Perez Vector a lot of you know me as Gabby or it's MGO PW I have spent five years in the servicenow ecosystem working mostly with partners and I have had so much fun getting to know a lot of you as a community member and this is my first show as officially a servicenow outbound product manager I joined the company in January and I'm excited to get you guys more content and learning on next experience over to Brad hey everybody uh my name is Brad Tilton I'm also on the outbound product management team for next experience I've been in the ecosystem it'll be about 15 years this year which is kind of crazy and I've been an employee for the last six thanks Brad and before we jump into the content uh as a reminder we are in Utah release and so all the content that will be hitting this channel for the next two months will be all Utah related so make sure to check out everything that is Utah related by going to our Blog devlink.sn blog or to the developerport portal developer.servicenow.com and ask for tradition for our seasonal content we have a little logo so if you look at pranav's uh shoulder print off can you point over there where's the logo right there there it is that's uh there it goes we always have trouble knowing which shoulder it's going to appear on but whenever you see that logo up there that means uh you can kind of tell which video this is relating to this one's Utah release and so we're going to go ahead and kick it off uh to Gabby and Brad to talk about theme Builder Brad is muted I'm muted sorry I froze for a little bit and it was I'm through enough uh yeah so we're gonna talk about uh theme Builder which is a new uh a new tool that we released uh what last Thursday so less than a week ago via the store but we've already done intros so we will go come on PowerPoint uh so Safe Harbor uh we may talk about some things that are going to happen in the future or or may happen in the future uh things can always change uh things can get pulled from releases so don't make any financial decisions based on what we're sharing that may happen in the future so with that I'm going to turn it over to Gabby and she's going to tell us about what we're doing today you can skip over to the next one awesome so today I wanted to start with showing you guys a little bit of how things currently work and how they're going to be working in the future so we can go to the next slide um the best thing happened directly before we started today actually I had to switch computers so now I'm on my Windows machine and I don't have the PowerPoint so I apologize for uh having to tell Brad to skip over to the next one you know we're just doing this live so the basics of theming is uh the ability to customize the now experience design system to reflect your product or your brand you can style various aspects so the product while still maintaining the overall look and feel you can change things like fonts spacing shapes in the form and it allows you the customization that you want when you're branding and you're providing improved experiences so that's the basics of that next slide please the new data model um the way that themes have currently worked with uh next experience is you've got the ux theme record in this case the out of the box one is Polaris and through the M2M table ux theme style you then are linked to multiple different ux styles and this is sort of what builds out your theme so you have the shape and form style the dashboard visualization imagery typography and then you've got the uh Polaris uh colors style and that is the one that mostly handles your actual theme colors if we go to the next one the next slide there should be a nice little screenshot of what that looks like or not maybe I just didn't hit save awesome so I'll show you guys that inside of the demo then um basically the way that it works is that the colors ux style is it contains all of the um all of the variables required to show your uh colors and Earl can you share my screen please thank you so this is what your uxl your ux theme looks like and you've got all of your Styles here and you've got the colors core type Style here and then you've also got something called a variant which is called Dark down here so this is basically your basic color template that is generated for Polaris and these are all of the properties that use the colors listed up here to change how things look and currently the way that you have to work with this is you have to edit everything in here manually you have to go in figure out how the theming hooks work where they're located we have some awesome documentation available on what a lot of these do and also the do prototypes website is back up live if you guys are familiar with that one we'll be linking it in the chat here shortly and then the way that these work basically is this is a variance and variants are what you're used to seeing uh be available for customers as a option on the theme selection up under uh preferences you can go to theme and this shows you the variance so this is the default color core and then this is the dark variant and basically it just lives on top of the core colors and it just changes a couple of things here and there in order to make dark true so this is how your theme Works currently you can even set some applicability to set some things to be available to some people according to different criteria but this is basically how it works right now and what you have to get familiar with in order to be able to uh style your instance but now we have theme Builder and theme Builder is going to be making things a lot easier for you guys I'm very excited to get to show this to you um this is the home page it's got a little bit of information on how your experience is going to go and then you've got a bunch of options down here uh to get started so we're going to go ahead and scroll back up here this is a an important bit of the navigation area because this is where you can access the manager in the editor so first I'm going to show you guys the manager and this is where you can see your themes now if you already have some themes created in your instance prior to installing in uh using theme Builder they will not show up here yet that is um a piece of feedback that we've given already to ideally uh be able to edit currently existing themes but right now theme Builder works with newly created themes inside of theme Builder and it also does not edit variants just yet that is another piece of feedback and something to note is that this is the first version of theme Builder if there's any feedback or any things that you want to see here that you didn't see it today please let us know through the idea portal and I'll make sure that the right people get a look at those ideas of yours so this is the manager here you can take a look and you can apply different um themes and then we can go to the editor and this is oh it's got a nice little tour for you I'm going to click skip sorry tour people um so let's actually go back home and click on create a theme hey Gabby before we get into that how do we get theme builder in our instance that is a great question thank you very much go into your printer Navigator and type in plugins and then it is a store app so it should just pop up here for you you just have to look up beam Builder and click install something to note is that it is only available on Utah um so right now uh only instances on the Utah Early Access will be able to see it there thank you so much I was just so excited to get started and show you guys this that I just completely forgot one of the most important bits how to even install it so before we get started you'll need some stuff you need your company logo and your brand color palette I already have those on my side here and today I'm going to name this teal Donuts yum yes and now this is kind of actually um really awesome it's going to ask you to select your Brand's colors and it's got a hex RGB or hsl selector so depending on how your brand um has it on their on their actual uh brand guidelines you're able to select it in here without needing to do any of the transforms yourself and I am going to put in my numbers here funny thing about my personal computer is I have my keyboard modified to where I don't have a numpad and my number keys are replaced with random images um from a video game I play so I don't know what numbers I'm clicking so this might be a little bit fun that's very on brand for you I was really expecting to be able to use my grown-up keyboard um and now I'm going to choose a neutral color b b e zero now this is another cool thing if your brand has more than three colors which I hope they do um I really hope they do here you're able to add them as as additional colors so I'm going to add 7786 there's a couple in here to show you guys what you can do with them what are the other ways is it is it hexadecimal and CMYK or RGB what are the other ones are GB and hso okay okay nine one five six apply cool and then one last one fun fact RGB is makes more sense than CMYK because RGB is for is better for digital format and CMYK is more for printed format and that's something that always uh gets me when I'm working with um with Adobe Photoshop files is which one do I uh select but I just had to switch computers so let me get the logo over here because I want to show you guys how to set the logo um so I'm going to grab this real fast yeah so I'm just thinking about theme Builder just because we've always had very hacky ways of dealing with things in the past and so a lot of people were very excited to hear something like this was coming but oh a little lime donut here we go oh right I forgot I named it lime donut whoops so there we go we've got the lime donut is you and select uh different fonts to use so we're going to select cabin um I'm always in open Sans type of person but let's go different today um to answer sarab's question in the chat does this also change branding across portals currently it does not I do believe that that is a long-term goal to be able to edit um the new portals uh branding through this there is a part of the theme Builder that does preview it on the old SP layout but this is not currently supported um it is a goal in the future uh for the team so here is the theme Builder itself we're in the editor um and we're able to select a bunch of different um options something to note here is that you need to update the system properties to use your logo so right now if I refresh my instance once I apply this theme it will not reflect my logo um right here they're saying we're working to make this simpler for you if you click on the details it takes you to a KB to a document article and down here it shows you what system property to set up in order to help your theme Builder override your logo system uh property so here you're able to see that it's selected the most rounded shape which is what I like I like super circling things and it reflected that on most of my UI elements here um I'm going to go over these little tabs here shortly um Pablo the plug-in name for theme Builder should just be theme Builder itself um and it is a store app right so if it doesn't show up in your applications list you might need to go to the store and and add it yeah I had to do that for one of my instances it was kind of but not for another one it was kind of interesting um for murali I let me get back to you with that question um on whether we can upload custom fonts or not I'll take note of it and get right back to you um something to uh something that's important to note is we'll be adding information on theme Builder to the next experience Center of Excellence so if there's any questions that I miss or that I need to come back to You'll likely see me addressing them in an article there um but that's a great place to go to if you have any questions about next experience in general um so back to the theme Builder if you click on this little color palette up here you're able to see all of the colors that you have selected it shows you the different places where the colors apply to and if you click on them you're actually able to change what the colors are so for example if I want my focus ring to be a different color I want it to be more on brand with my stuff instead of being blue I can select the color click apply and it changes it something very important to note is that your changes are automatically saved each time you make an edit and there is currently No undo button that is a feature that is being looked at right now for future enhancement um so that's you're you're going to want to be a bit careful when you're changing the colors around to make sure that you uh know what to uh go back to in case you don't quite like the change that you made um you can also access the custom Color Picker here that way if you don't have a color already in your brand colors you can always create it from here and then it also has a different view where you can see the hex code and see the actual variables that are tied to what you're editing so it there's a lot of different ways to be able to see what you're clicking on and what you want to select uh not just a cute little color palette like this um you're able to edit a lot of different things here and I encourage you guys to go in and kind of poke around and see what you find um you're also able to change your logo here you're able to change the font family from the four that are preset here as well and you're able to change the shape um then something that's really cool is you're able to go into component Styles and you're able to see your different uh configurations applied to I feel like a very thorough list of uh UI elements so you're able to see okay um this is what my primary button looks like if I want to change it I can go here and take a look at what my colors are um and you're able to just kind of Dig Down um we are working on trying to get a full list of hooks uh that control things um in these previews and that is hopefully something that will be coming in the future but now something else that you can do is you can go into the experience preview and here you can select different experiences to preview your theme with so we can go into uh-huh and these are experiences that are in your current instance right yes these are experiences that are going to be almost like live previews of the theme as it would look like in your instance and if you want to go ahead and apply it you're done setting up your theme just click apply theme and it will set it for everything so now if we refresh the page we should see while that refreshes I'm going to go in here and I'm going to grab the system property from the docs page because as you said earlier the company logo only changes once you play with the properties correct and now look at that it's all donuty but we're not done yet we need that donut in the top left corner something kind of neat for those of you who may not be familiar with it if you know the table that you're going to you can pipe it into the filter Navigator and type that list lowercase if you want it to show up on the same screen you're already on it can do all caps if you want it to show up on a different screen and you can see here I change the focus ring to be lime eye bleeding glean so it's it's already reflecting our changes here very nice and it looks like we just have to create a new and I'm going to hit true submit and I hope I created that right we have a donut ladies and gentlemen look at that even has a hover change oh that's cool so that is theme Builder um it's uh so now just one last thing if I go back to manager here you can take a look at all of the um all of the themes that you have created through theme Builder and I'm trying to see if there's anything else that I wanted to go over something important to note is just that currently theme Builder does not Auto create a dark variant so if your company has a need to use dark variant we still suggest that you use the Polaris theme because that one has the dark variant this is something that we're looking to work on in the future um but I'm pretty excited for what we have it's a version one um Bill yes so theme Builder will only modify how the next experience UI looks it does not affect the Legacy UI 16 look and also just to be clear uh when your users click on the preferences to change the theme and they see multiple themes those are all variants of the same theme right and so if you create a new theme with theme Builder you only get the one theme so even even without dark mode if you want them to choose between blimey and everybody loves blimey blimey and other things uh you probably want to stick with the Polaris theme for now and create variants exactly so here we can see the difference between teal donut which has just the core um types of styles and Polaris has a few others but it also has the dark variant type now you can go outside of um you can go outside of theme Builder and add your own variants directly to a theme that you've created um but you're not able to make to edit or manage those inside of theme Builder just yet thank you on a side note I like that anytime I put up a comment I cover Brad's face completely I was gonna try to hear where we [Laughter] so Jeff there actually is a Community member who already created those out of recreated those out-of-the-box themes um you should be able to find his post on share somewhere and you'll get your blimey back hello Jeff and and it is uh we are looking at uh you know what it would look like to include more options uh in future releases in the themes I think yeah I think that's a something we all know for service now if you've been into servicenow ecosystem as a developer for any amount of time uh Gabby mentioned this is version one uh and we're always hoping and improving on things as we release some so feedback is important and so we don't shy away from that these are the people to be giving the feedback to so if you have seen anything about theme Builder or have anything else to do with next experience the UI uh UI Builder everything next experience these are the faces you want to uh be connecting with and reaching out to um uh did you have anything else for the demo I think I went over everything I wanted to go over I'll just be posting the do prototypes Link in the chat here shortly I just have to type it over for my other computer this is an awesome website where you can go to in order to create um or at least help you create uh new themes manually or can it'll help you create variants as well right yeah here we go if you did need to recreate blimey although it already exists out in the community uh this is a good way to generate all of that crazy Json that you need to create new variants yeah so here you can go in and do pretty much what I did um and select your things and what it's going to do is it's going to create all the variant of the primary color so and then you can create auto generate oh wait so Auto generate generates the color of gradients for you if you click on copy Json now this is going to be a big blurb of text that you can go in and copy over and it's going to have the settings that you just created in your theme something else is kind of cool is you can also bring over it's got the original uh Polaris and Polaris dark themes in here so you can look at them and edit them however you want as well and you can also validate whether your Json is good or not because if anybody's worked with Json you know that it's very easy to mess up if you just have an extra comma somewhere but I am posting that in the chat now it's on the screen too thank you poor Brad's face [Laughter] so we got two a couple of links actually uh from this let me get rid of that screen we got the theme dot dooprototypes.com we also had earlier someone mentioned the center of excellence you can go to NXT XP as a next experience dot link Coe to get to the center of excellence easily I found it by simply Googling Dex experience Coe and that's where it got me uh but I want to say thank you to Gabby and Brad for showing us theme Builder and if you want more of Gabby and Brad there are a couple of things coming up next week is the start am I allowed to advertise that next week we are starting a show uh dedicated to UI Builder hosted by myself Brad and Gabby but Gabby and Brad mostly talking about UI Builder called you and I Builder live and I love the name I know it's such a good name you and I Builder live if you world speed it will be on Twitch actually so not on YouTube as we usually do we're going to be doing it on Twitch to have a separate space to have that videos um but sometime after each episode of you and I Builder live we will be doing uh we'll convert it into a video on demand and put it on the YouTube channel also but if you are still wanting more Gabby and Brad join us next week on Friday uh for our first live coding happy hour for the Utah season uh this show right here is Creator toolbox a little bit more of a prepared demo from experts from people that are used to the product and can answer questions uh live but on live coding happy hour it's a little bit more relaxed we uh it's not really a demo per se but more of us trying to build something or get through something live to kind of demonstrate the actual process that we developers go through to get to uh from point A to point Z or maybe never gets a z and try to figure it out from there uh we also uh partake during that episode to get kind of lighting up this um Spirit but one of the fun things we're going to be doing this Utah release is not only live coding happy hour for uh our typical time slot of in the evening afternoon for America but pranav is actually going to be hosting some live coding happy hours um on the other side of the world at more convenient times for them so pay attention to that Utah calendar again devlink.sn Utah it has the exact times on there so if you see make sure to check if it might say am on some of those things versus pm and that's because it's meant for the other side of the world so that we can have a little bit more diversity on how we handle time zones now another reason why we love to have pranav join our team um but again welcome to Utah thank you for kicking off Creator toolbox this season uh Gabby and Brad I'm this is the start of a lot of content a lot of cool stuff coming up and I'm sure it's not the last time we're going to be hearing from uh well we know it's not the last time we're going to be hearing from YouTube but even theme Builder is going to have updates and we hope to update everybody when that time comes too uh Gabby Brad if you had your own announcements feel free to get some of that out can I uh can I replug feedback uh so again first version of theme Builder we would love your feedback um so the absolute best way to give product feedback is through the idea portal I know not everybody has a support login so if you can't access the idea portal you can find Gabby or myself or Ashley who chimed in about blimey uh earlier in the chat uh you can find us on S and devs or LinkedIn or wherever and give us feedback and then if you run into issues with theme Builder please put in a support ticket um so you know if it's if there's a bug or it's not working how you want it to put in a support ticket we use ideas support tickets um and then personal feedback uh and all of that feeds back into our inbound product teams to make the product better so you know we want this product to work uh better for for everyone anything Debbie no I'm so happy to finally be on a uh on a on a live stream with you as your official co-worker I know how many like we were on so many live streams even before I was a servicenow employee so and I'm being print off too like all we're doing that we're all taking this route of building content for you all and now we're just doing it officially so hopefully we can do more and more and more sweet thank you for having me is there anything else that we need to announce pranav no I'm good all right again reach out to us if you need anything um find us on the either submit something on the idea portal or find any of us it's easy to reach us especially if you're on sndez.com community or if you want to find us on LinkedIn we're all there too thanks again everybody make sure to check out the Utah content calendar to see what we're we have planned for you all in the next couple months it's a lot it's podcasts live streams videos blogs there's a lot of stuff that we're covering and we want to make sure uh we cover the things that are interesting to you sweet thanks everybody have a great morning Day evening [Music] foreign [Music] foreign