[Music] thank you [Music] thank you [Music] all right hello and welcome to live coding happy hour on this fantastic April 9th 2021 I'm your host Andrew Barnes here with my great co-host today Brad Tillman why don't you give us an intro hello my name is Brad Tilton and I am a developer Advocate with the developer program here at servicenow I've been developing on servicenow since 2008 and am excited to do some UI Builder development today awesome thanks Brad and I too am a developer advocate here at servicenow I've been developing on the platform not not quite as long as Brad has but for about seven years and I am just super excited to be here with you today this is my favorite way to get into the weekend and we're gonna we're gonna jump right into things today so we're let's introduce our beverages all right I am drinking I've done this once before on the show this is a Avery Brewing Barrel age Stout of course uh it's called Uh tweak tweak nice I uh did not realize that my second Norwegian beer was the same brewery as the one from last week so I get to slaughter its name again uh so this one is a barrel H Porter and the uh Brewer is hanbrigide is as close as I'm gonna get to that today uh and I'm excited about it because the one last week was really good uh so I hope this one is too uh so we are going to talk about uh UI Builder today uh let's set the stage real fast if you've never been here before welcome we're glad you're here um and delighted that you're here with us live if you are or watching it later we do completely unscripted uh that is we don't practice this stuff ahead of time nor do we even decide fully what we're doing until now uh we're gonna make some choices actually in a moment so this is is unscripted we haven't practiced this this is not a polished demo um but what it does is it shows you uh the person interested in servicenow development what it actually looks like under the hood as a developer doing things on a daily basis running into walls and then figuring out ways to go around them under them or scale that you know you know however you get through that wall might be Kool-Aid Man uh for for your for those of you who get that reference but that's what we do on this show today specifically Brad we're going to be looking at UI Builder so that is our uh you know in Quebec uh we've got a greatly enhanced UI Builder that allows us to put together all of these more than 100 now experienced components uh the servicenow provides along with ones that we might create ourselves um uh you know by developing them locally with the CLI and deploying them to our instance and and tying them together and building these experiences so what experience are we going to work on today are we wearing the same Orlando shirt no I think I want you back today okay uh what experience are we building today Brad yeah so so I have uh myself and uh Lisa Lisa holenstein have uh Creator con workshops around UI Builder uh and we both start with the same app it's an app created through AES it's a blogging application and my workshop creates the portal side of the app which is kind of the front end where you go in and look at a list of blog posts and click into one and you get the post and you can like it uh Lisa's is the authoring experience through a workspace so if you get the chance uh you should do both of those if you're interested in UI Builder they're complementary you don't have to do one before the other but what we're going to do today is we're going to take the portal that you end up with at the end of my blogging workshop and we're going to add commenting or the goal is to add commenting to the post so the post currently and we'll show this in a little bit you can click into a post read it and then there's a like button at the bottom where you can increment the light count and I would also like to add commenting to that and we have a couple of options for how we can do that oh that sounds like fun so um I will make sure that I add the links to those two sessions so if you haven't registered for knowledge yet um go ahead and do so and if you have you'll be able to use those sessions right now and for the next couple of weeks uh you'll be able to favorite those sessions that Brad just outlined and then later uh maybe even when you're watching this though they might be available for you to do if this is far enough in the future uh for you uh so I've done like a fun thing to do is there any other setup that we need before we start screen sharing I don't think so all right well let's do that then let's get into it Google Chrome is what we're sharing Google Chrome hello it's nice to see you how do we look I mean you look fabulous Brad but let's see how your screen sharing all right um I've got you to the the sea on create an app on your button in the top right all right I'll probably pull it over when we get going we're doing UI Builder today so I might need to give you the whole screen yeah we will uh we will see so uh so I did want to highlight the beautiful landing page and the PDI uh this is a wonderful page uh to be in uh and if you click on open UI Builder you get into UI Builder uh so I've got a bunch of experiences listed in here and we're going to get into the blogging one so I can let's do this let's zoom in just a little bit and then I can pull it over if we want no I I've got you re-centered all right um but what I will ask you to do is zoom in at least one more time and then uh when possible collapse one of those sidebars got it um it won't be possible all the time but if we can keep one of them uh clapsed most of the time I think we'll be okay and you out there watching let us know uh if if we need to adjust anymore foreign yeah so this is the landing page let's go ahead and just look through this is a very simple portal experience um there is this landing page that lists a featured post and then it has a data set component that shows all of the posts this is our plant Corp uh company that we came up with a couple of weeks ago and that's what we use in the UI Builder workshops uh so there there are plants on the show today this is a plant here to appease all of our our plant people watching uh so the blog posts are all my UI Builder blog posts from the developer blog um um and uh and yeah so you can click into any of these if you click into the resources uh you get the blog post page this is made up of a number of different components and we'll we'll end up taking a look closer look at the page and then there's a like button down at the bottom where I can like it and then the account will eventually increment uh to one from nine I know why it did that but it's uh it's still not fun anyway uh so this is the blog post page what we want to do is we want to add some comments down here too so every blog should have some commenting uh so that's what we want to add and we have to play up your Workshop a little bit so this is the outcome of your two workshops together right well yours does this front end and hers does the authoring experience and and and so this is the outcome of yours and how long uh do you think that Workshop takes that's a great question uh I have not been through and timed it yet but something like an hour it's something like an hour to an hour and a half uh but the like lab is actually a challenge lab so it may that one may take a little longer but the first lab you build this page the second lab you uh you customize the existing landing page and then the third lab uh you add data set the fourth one you do theming and then the last one is a challenge lab where you add likes uh so yeah this portal is the outcome of my lab and then uh Lisa's lab is the uh the author experience so it's a workspace experience so we both started both of the labs uh when if you go into AES and say create me a portal experience or create me a workspace experience uh that's where we start from from these labs the question and I almost want to tell them he's going to have to go do the the workshop and you can still answer it that way but I'll at least say the question which is uh how is uh that page layered um is the section containers got a background image styled in like how are you doing that I believe you're welcome to tell him do the workshop I believe it's this road this is actually if you spin up a portal experience you get a portal that has this image in it already so we don't change images out uh and it's part of this row uh this is a slot uh in the body um or yeah it's a slot uh and it has a URL here that sets the background image so just an image as it said as a background image for this uh container all right so we have a decision to make to start so I think we all understand we want to add comments uh to the blog post page and we have two options for that so option one is there's this nested comments widget not widget it's a component there's a nested comments component built for the knowledge base that kind of looks like it would work uh for our our blog posts I don't we don't reply to components there's no nested uh comments so we don't reply to blogs there's no nested comments um but I think that's fine to happen nested though yeah I think on the back end we did it for Simplicity sakes for ours uh because it was a lot easier to not do nesting but I think nesting is perfectly fine and in the data structure it's easy because you just said the parent field and now you have nesting so yes so that that's one option is to try to reverse engineer this comments uh component uh which you know obviously taking a component and using it for a purpose that was not the original intention is always risky uh they could change the way the component Works uh and you know my my blog comments might start stop working our other option is to create an evam which will give me uh you know a set of records and then use a data set component but have it show in a list instead of the cards that you see on the blog home page and then kind of do that a little bit more manually and then have a button that says that comment we pop up a modal you type in your comment and submit and then it shows up in the data set component uh so the decision is which one do we want to do and I want it to look like there's I either want to you know reverse engineer it and do one just like theirs or see if we can leverage theirs so so that's one of the reasons I was drawn to this components or this comments component is because uh right now in UI Builder there's not a component that lets me do like a repeat or a loop or iterate through things I would really love something where I give it a set of data and it iterates through that and then I can call components within that iteration I'm I am guessing that something like that will be available eventually or maybe we'll build it on the show sometime but we're kind of limited at this point to either a list which I don't think is going to look right for comments or this comments component or using a data set component as a list which is still going to kind of look listy instead of like this so I think we both lean towards repurposing yes I link towards repurposing this or building our own custom component like that's and and since since I'm not prepared to build a custom component today so I don't have my custom component hat uh building on today uh let's let's see if we can repurpose this one and see how close it is I'm not even on the right computer to build a custom component right now so so we're let's repurpose this let's repurpose this and see how far we get and then and then that will tell us if it makes sense for us to to make our own custom one yeah so let's take a look at the component itself is not very complex right there's only these six properties uh so in the properties that look like they're doing the most work are this comments property no this is a real small property for what looks like probably a big Json block that gets injected into it and then this actions so if we look at the actions it looks like all right what if I go yeah there we go uh this is just uh oh this is how we have the delete button right so I guess we could add more buttons to this uh what if we what if we add a new button and call it um red I like the Brad button I don't know I just I just like to name things after myself um so do we get that's good brand invalid Json it's only one in a way from Brand oh and now our trash can icon turned into uh an ellipses icon is that what we can call this to this isn't really material to our what we're doing but that's that's where half of this show goes hey there we go now all right I love a brand action so that all all this actions does I guess is ADD actions on that part it is not uh doing anything with like or reply so this this comments is looking at this data resource and it's uh the retrieve knowledge comments and then the output is this knowledge comments so let's take a look at what that data resource was it retrieve yeah so it's calling so it looks like by default there's this retrieve knowledge comments uh composite data resource and a composite data resource that basically means that you've taken more than one data resources and put them together so that you can just call it all at once so I think this one probably has at least a graphql data resource that's pulling data and then it's got a transform data resource that's taking that data and putting it into a format that this component is going to expect which is here that makes sense to me that it's you know a graphic UL beating it to this sorry you broke up for me I don't know if that's my connection or you I said that makes sense um so that's right uh let's go see if uh we should probably go track down that graphql right yeah I wonder if we should start by taking um by just taking this and seeing if we can change the Json and feed it to a new component on our Blog Page and then we worry about getting the data into it later on does that make sense okay sure I'm I'm a flexible I'm flexible today all right so let's go to our page hopefully everybody's still following I'm gonna I'm gonna copy this somewhere yeah it feels like that looks good we're gonna go build our own graphql to feed it done and I'm like yes all right we see eye to eye Phil you can't see me I'm doing the eye to eye gesture all right here's my blog post uh this is what it looks like on the back end I don't think we looked at this uh so just a bunch of components that are pulling data from a single data resource and then I've got another data resource for the like button so I'm going to add another component after component five no let's add it after the button and I'm going to make that container because I generally put everything in a container and then we're going to add that comments nested comments and then this is what I think I want to do I want to create another client State parameter uh that's let's just call it comments Json I want it to be Json and then this was what we got from the KB comments okay so let's uh let's change them and say uh this is a vlog comment and we'll save for this one here is a Blog comic right so this is our Json here and then we will uh let's bind that Json here and so uh just use a few more words uh to tell us so you're interacting in UI Builder with a component and you're configuring that component in the properties area and can you collapse the uh the Navigator yeah just click the page yeah it does yeah um and you're interacting with that um in its properties and in there you just adjusted the uh or you were going to adjust the the data what do we call the little uh data as the database little icon it's the dynamic data Dynamic data binding we made it short so it's easy to remember uh and I'm yeah and to me I'm like the little database icon yeah so what we did was we we took this client State parameter and client State parameters are basically uh like the pages scratch pad or the pages State however you want to think about it and so this was just a place for me to um to put that Json and then we can bind it into the comments field here right so this comments Json this is our value uh you know this is what we grabbed from that other data resource and we're just passing it in so right now and I I believe this worked so right now we have these comments here but this is it looks like it worked to me it's just static data that we passed in let's let's test it um so we do have some comments down here so that's good uh and uh so this is all part of we didn't configure any of this this has to be just part of the um part of the component uh uh this shouldn't work because we didn't do anything to it and it does not work so what we need to do we have a couple of so we have a question it makes sense that that doesn't do anything yeah of course we didn't we didn't we just hard-coded some stuff in a client parameter that's it uh so I think this comment submitted uh this is where we need to do something uh to tell it uh to tell it to to do that so let's let's go ahead and do this part let's make it to where we can submit a comment uh first so do you want to just build it yourself or do you want to go look at a place where they're using this and look to see how they're doing their event handling I don't think it'll be a big deal uh but that's it can do when when the thing is already in the system is you can go see how uh I did you know it was used and leveraged yeah we can definitely look at it um let's see so this is the KB page and if we look at it it's doing an execute so it's inserting a knowledge comment this is a data resource I think and then it's showing submit comment alert so this is a client script I think when you do a comment you still have one of those pages open it'll show you an alert and say Hey you submitted a comment successfully and then this third one is refreshing that rich knowledge comments data resource so this is a nice this is a nice thing you can do so after you submit it then you need to tell the component like hey go get more data because we added something new to it so it's doing three things we probably don't I I think we need to just start with this execute um so insert knowledge comment and this one uh insert knowledge comment is here so this is just a graphql query so we may be able to just take this and do a do an insert and stay and change some value so let's try that um I think we're gonna have to go on the back end so let's go I love a good copy there is another way we copy and adjust but let's start here what was the name of that uh insert knowledge comment insert knowledge comments I think this is the one so the problem with this is uh we have to remember how graphql works yeah that's okay I'm not scared so we're doing a mutate so in graphql mutate means you're changing data rather than a query means you're pulling data uh app knowledge mutation and we're inserting a comment like I don't so we're giving it an article ID and a parent ID I think we may need to end up doing our own thing because I think probably in this is going to be hard-coded a you know the knowledge table what yeah exactly so it we are going to have to do our own thing but this does give us inspiration for like what we need to do which is uh you know grab the contents and shove it into a record so yes but I think I'm gonna do it differently um we're gonna use uh so let's go to the Post so okay I think we're gonna do this really similarly to how we do the likes uh in this lab which the likes uh actually we can use the same data resource so there's this data resource called create record and it's a graphql data resource that does a mutation and so what you do is you pass it a table well let's look at the client script we have here so this is how we add likes so we pass it to table name and then we pass it an encoded query for the table uh and then we tell it whether our values our display values or not and then we execute it so it's a fairly straightforward thing that is still using graphql we're just passing in these values so I think this is what I want to do because it seems uh it seems easier uh you know I'm the big fan of the easier so let's I love the easier let's add a new client script called add comment just one comment one at a time please and then I'm pretty sure that table is named blogging comment comment and if it's named comments I'm going to be really upset yeah well I'll be pretty sure it's someone's comment it would only be me I'm the one that created it so um and then let's say let's just call this uh my beer is really good nice how was yours treatment mine mine is also good I've had this one before um but we need something else we need something else with this which we need we need the payload uh from the from that from the comments input yeah which was a dollar context in the other one so let's say um let's say comment is I want to say it's event that sounds right dot payload uh and let's uh let's just log that uh and okay so uh see what we get there just to see what it is and I know I can do like the fancy uh es6 stuff but I never remember exactly how it works actually let's try it I think I use the back ticks somebody ought to tell me if I did that right uh and then I'm gonna comment out the rest of this because we don't actually want to create anything yeah and then we want to call this from that component yep so let's click on the component and then we're going to go into the events and then we're gonna add a new event handler and there's lots of event handlers and since we added this new client script it shows up as an event handler also you have you know we talked about refreshing uh that lookup and this is where you would come in and do a Refresh on those foreign so I'm going to save and let's open it all right and then post a comment and this should be a payload a kid it's going a little crazy it's an object you can't control kittens foreign so let's go back and stringify this thing [Music] I can do that in here I think that'll work come back and do a refresh thanks and where am I where is Brad where is Brad's comment there it is payload is comment uh no that was part of the that's what we looked the payload is content and parent ID because it if you were replying to the nesting yeah so that's the nesting so we're not going to worry about the parent ID to start we just want the content so uh yeah that pillow Dot content and then let's see let's take a look at that table and I'm pretty sure the field is actually I don't know what the field is called that's called comment that makes sense so we've got comment author and post okay so this is going to be author post is right noise and then I think we just call that comment yeah my adult cat is trying to teach the kitten to be quiet during the Stream she's not yet winning that's right but she's trying I'll Focus no kittens or maybe we should focus the show maybe the kittens maybe we should do it we're doing a we've done some plant stuff maybe we should do some kitten stuff kittens are so great because they're like me they're they're like zero or a hundred like that's they live their life in like all the way or nothing all right oh so we've got those two comments okay let's post a new one this should be the third comment all right so we posted it this is all static so it shouldn't show up there but if I refresh we got another all right well the show's over let's let's wrap it up let's go home so that was posted a comment all right so now what we need to do is uh we actually go read that table for the data Dynamic so we're gonna have to go and uh look at that graphql that they're uh apis that they have and make our our own uh and I think I remember so let's look at composite composite data Brokers I think that one was like retrieve knowledge comments yes twice all right so it's got properties you pass it a an ID and then um yeah so what this is is this Json I believe is calling multiple data resources or data Brokers we renamed it to data resources at some point and things still say data brokers in some places so um so it looks like we're calling a graphql data resource that's grabbing it looks like maybe all of the root knowledge comments all the hot top level and then this one is grabbing all of the nested comments of that and then this last one is a transform so it's taking those and probably running some JavaScript to turn them into that Json blob that it can then pass to the so how much of this can we steal out yeah that's what I want to do so uh if I want to create a new one do I yeah I just have to pace in all the stuff so let's start so I'm going to start by grabbing the sys IDs so we know which uh which we're looking at so let's go uh data management yeah so let's look at graphql queries and we want the first one is we it's hard to not find the right thing when you're looking by Society fetch knowledge comments that makes sense that makes sense it does huh so this is using App knowledge query I think maybe this is a defined uh graphql query let's see if we can find one called app knowledge query so I'm going to grab everything in here paste it in tab 27 of my Json tabs that I have open so do we think there is a graphql API experience settings maybe is there anything in there um I am not sure who's that where's there to find this query is it so the other option is that we can we know what output we want to know where the data is so we can just run our own lookup records and then do a transform it would be nice if we could just change table names I feel like we should be able to just change table names why our data structure is so similar and what we want to do is similar where is app knowledge query where are you I just I don't I don't know what that is uh is the problem hmm we don't have another one called app knowledge do we yes maybe it's a shared uh Grumble grumble what yeah what's this table foreign so I think this is all experience settings this is all like stuff that maybe UI Builder is using not our specific experience and Phil says it's maybe a graphql schema uh yeah but I think the schemas are all related to the apis right so uh let's can we open up the schema table and just do a query there are we now I think the schema is a field on the API right oh yeah clearly okay so we are looking at these are all of the Olive related come let's see item get related articles it said articles and KB and I got it I got it feels excited it feels close because it gets knowledge-based articles that are related to a thing um let's query scheme let us query the graphql API table at the list view for well this is the schema yeah yeah this is the graphql the schema oh got it okay like in the yeah query there in the schema field uh uh comment or whatever whatever the name of the thing was really is is there's no come on you can't even field is that schema it's a is it just a script field oh it's a graphql schema type field of course it is of course it is and and they don't have set up that you can query against it because that would be too nice that's fine everything's fine um everything's fine all right well we'll build it ourselves it's fine Phil says to use nlq I I mean just punting and using an lq does sound fun but uh we'll build it ourselves let's build it ourselves so this is what we're gonna do um we know what we wanted what we what we need it to look like eventually uh and we can use a couple of data resources to get there and maybe we will be able to do this uh By the time the show is over so we want a look up records query yep so let's go ahead and add that you have to scroll all the way down quite the scrolled so this is not my favorite message I wish this didn't show up um right when this came up I don't know if Chris is watching this but uh uh okay so this is comments nope just comment we named it right and then comment we want it uh against the uh that we want post is oh you know what this bugs me this is what we what do we have to do uh I think we have to do I think we have to write a client script this also annoys me so this is what we have to we want we have to write a client script to put the post into something that we can retrieve it from in our we need an encoded query that says post equals the this sysid and when you do these um when you do these Dynamic data bindings it's only you're binding it to a whole value you can't say post equals okay data binding so in the client script we have to say so post equals and then that's this idea this is going to be the whole thing comment query that's kind of something and then we're gonna add a client script it says build comments all right and this is just going to be uh API dot set stay uh nope and it's uh comment query we're going to set it to post post equals and then and then it's uh what is that API dot uh uh it's a param Dot president import we need this guy yeah it's a required parameter called sysid and it's it's an import let's see Imports imports.ams paramps that's it and it and does it have the underscore because I oh it does not you're right I really don't like it when they do that to me this is actually what we want to do we're going to log this uh I want just to log import separency yeah well I just want import stuff Rams and see if it's there that seems reasonable just get the whole thing in uh see what's in there call this from somewhere build comment query uh this is what we're gonna do with this uh we're gonna add it to the like button [Laughter] uh this one that's the one okay why not first all right add it to the like button foreign refresh I really do love the parameters to the prettify the Json though that common null comma four is really nice put your like button no do whatever we wanted it worked but it didn't call my client script maybe there's nothing in there Imports oh I don't think param said important well let's just go let's just go here uh to Jace this is not for the like button we're adding comments and I have hijacked the like button uh in order to add a this could be done differently but this was the easiest way for me to there's a there's a three second Timeout on this and that still didn't work so is it working build comment query build comment query Imports put just put something before the Json like yeah hi Brad all right we are on the right page right yeah [Laughter] that didn't say hi it's happening uh what's wrong with this build comment Corey [Music] um uh let's uh it's the script before failing it's not because it's incrementing the likes uh so let's uh let's delete that out of there and we will add this hey so here's the thing this isn't a total loss um if you click on the body and you go to events you have all of these event handlers and this is what I should have done initially but I can add an event handler on the page ready event which is something probably will have to do it at some point and let's just do that on the page ready event so we don't have to worry about uh okay clicking a button or anything yeah yeah the page is ready because we refreshed got it refresh that client script should run nothing happens so let's this is definitely where you want to spend all your time in life cutting happy hour well debug kind of kind of so that so that you the audience member don't have to experience this pain we are experiencing it for you there we go so that was okay so something in that parsing is angry right uh Jason stringify so maybe Imports maybe there's no Imports and it's not working let's let's just log out API then okay let's see what's there we're looking for some some CIS ID so if we see a sys ID that's probably the post whoa whoa okay the API is extensive so API dot context dot products dot sysid is what we want all right uh that looks like yes that is the assist IDs API dot context props dots there it is there it is so hey when the thing you're looking for auto completes I'm so confident that you're gonna you're gonna go right to it I love it we're just gonna do it to it here and then I'm gonna get rid of there's no save button for the client script so you just click out of it and it always makes me nervous as as you know that would make me nervous they're they're legit is just no save button like you're clicking out like this is It's just saved all the time whenever you click out of it uh so all right that would freak me out I I don't I'm I'm I like Auto saving but I also don't like Auto saving there it is uh so this is actually what we wanted to do we wanted to build that that query when the page loads and then we want to use that query for the comments we do it's true so where were we so that that's like you said it's not a complete put it there we go uh so that is comment query query noise hey and this and this is why we have to pass the whole thing right it's because it just drops in here as a yeah it'd be great if we could say you know post equals but we can't do that it does not and I just I just made it Angry yeah uh but it's retrieving their comments it's retrieving we do need to give it uh so if I take a look at uh what what that expert here will do let's make you go away so here's let's put this up here all right so if we take a look that this is the Json that my comment is expecting um also working on my guidebook still it's all right uh so we want the sys ID of the comment when it was created uh the text and then some info about the user because it's going to use that Avatar um is reacted oh that's a good one and then any children here foreign Let's uh let's see if we can pass it just some of those things so we want the assist ID and then we want uh created oh you have to hit the down arrow to get it to autocomplete even when it is above the field it just it hurts my brain whenever I have to do it there we go and then we want some user info can I dot walk that's awesome oh because it's rendering in the yeah yeah like yeah I get that the down arrow should still come down from the top because it's a drop down it's not a drop up but it but you do want it to render on the page so return fields it doesn't look like I can do any dot walking hmm uh that makes sense oh you know what yeah and it's going to give me the value I just won't have the Avatar which is fine um I think that's it I think that's all we need so if I click out of that whoa nope nope um all right so row data yeah oh nice so for each of these records we have this field and then its value and display value created common author nice so then we would need to take this NH we don't have enough time to do this but what we would need to do is we would need to come in and create a transform data resource and actually let's let's see uh see what they're doing still have yeah let's see what that other one does I think I have it sysid foreign knowledge comments tree right and so this is basically taking that graphql from the two data resources and it is turning it it's using JavaScript and turning it into some Json and of course it is calling uh to include so we can't just copy it which is fine um so what we will need to do is we'll need to create our own transform data resource that grabs the data from our lookup records and then transforms it into a format that that our comments field expects our comments property uh expects and so what we would do is we just add another data resource and then we would bind the input property from that data resource to the output of this data resource yep or we could create our own composite data resource and then just call that so I think either way works sounds good you want to wrap it up here feels like a good wrapping up point it does feel like a good wrapping up point I think we're pretty much out of time anyway so yeah well you know we can always get longer but I think this is a good wrapping up that's true all right let's uh let's let's go back to our uh our post one more time and uh right so the goal is that after we created that transform data resource then we would have um we'd have you know dynamically pulled comments here and so when I added a comment I would add the comment then I'd do a refresh and it would come back and I'd have the other comment displayed here and then later on we could add some liking and reply and I guess so we can say the reason that I picked a Blog uh for this um for this session was because we kind of want to uh rebuild the developer blog and we thought hey it'd be good if we rebuilt this on now experience and this was kind of a starter for that so how do we get the blog going uh via UI Builder so maybe at some point later on this year you will see something that looks maybe a little bit like this except with some actual design resources applied to it rather than my CSS hackery uh but but that's kind of our overall goal is to you know we don't like to do just one-off things we wanted to build on each other so that's why we did a block all right so I'm going to go ahead and stop the share yeah and so as you said Brad we we really do like to you know get multiple uses out of the same effort which is which is why your Workshop is dealing with the blog is because we want we want to rebuild the blog and well also need to build some uh enablement content for now experiencing UI Builder and one of those things uh nicely aligned and and so uh Lisa put in the session on numbers into the chat but I will go and add the direct links to the sessions uh right after the show um but you can you can grab those if you're here right now live and if you're here later uh there'll be links that you could just click directly um that was really cool Brad um it was not as much of a we could just take it exactly uh uh is is I had dreamed of in my dreams but uh that was that was a lot of fun so uh to to to talk about what we did is uh we we looked at the knowledge comment component and the the infrastructure that's behind that so the graphql the transforms and and data Brokers that that backed that um and we figured out what we need to provide to that uh comment component uh so that so that we can leverage it for our different tables that are doing a similar commenting process um and and so that was a lot of fun um if there was like a good takeaway from this today what would you say that was Brad it's a good question I I think uh I think a good takeaway is probably well one of the big takeaways that I was going to drive home or try to drive home at the end no matter what it was you can kind of see from that comments component that it's really purpose built for knowledge comments we're we're kind of taking it and passing it some different things and probably can make it work for blog comments but blog comments are really similar to knowledge comments uh so that probably works but the overall takeaway there is that you know UI builder in Quebec is really good for uh for uh configuring CSM configurable workspace and uh and building uh workspace and portal experiences from AES it is not in a place yet where you can take an existing service portal and just convert it to no experience using UI Builder so you know I I think we can expect over the next you know number of releases there will be more components available for you know doing different things and you know I think we showed that some of the components that are available some of them have really specific purposes um and you know there are some that are more generic but and that's right now yeah if right now the scope is is kind of small uh it's there for some really specific things and for you to get familiar with it so that when you are ready to you know convert a service portal to UI Builder whenever that is uh you know you you can do that um so yeah that would be my big takeaway and one thing that potentially um I might have considered doing if I had architected it was I might have made the blogs knowledge articles thought about that the one if we went so just so I could steal all of the things that are so similar from knowledge articles the problem is that article page is very it's like one big article page component so I we could have used knowledge articles and then just come up with our own page uh but uh yeah that's it's definitely a thing we could have done yeah because one of the things I do know about the developer site which is a servicenow instance and most of it is leveraging uh now experience is most of the content on that site is actually stored in KB articles and then rendered with components to see how you see the site that's uh I might have done that just for the sheer uh over our architecture on the dev site itself and you understand why you didn't and I think it's the right move but uh but I might have just because I like to I like to to have a uh less everything options it's still an option um so that that was really cool so tell us Brad uh what is the rating of your beverage of choice today and remind us what it was this is the Avery Brewing uh annual Barrel Series uh tweak Stout um and um it's very good I've had it a few times it's it's kind of expensive for me I'm feeling like it's a four two five I'm gonna give it a four seven five it's it's probably my favorite beer that I've had like in the last year or two so yeah favorite beer you've had in the last year or two and it's still not a five yeah I need a five I have to like you know what is the beer I have to do to you it's not ready to give something a perfect score yet I don't know that I've found the perfect beer well in a in a you know in a well-gradiated system like this I guess 475 is plenty good uh when people are like yeah I can't use you know uh you know when your scale is only like one to four and people are like well I can't give it a four I'm like but when you're talking about you know 0.25 uh from from zero all the way up to five there's enough there's enough room there to leave Perfection on the table um but that that's a hilarious thing in numbering systems for me is is how much percentage-wise is reserved for a thing you can't obtain so my Barrel aged Porter and that's just its name it's just barreled age Porter uh is is so good it sounds really good that's so good it this is so I think last week uh was a 475 for the Norwegian Wood but it got it got some yeah compounding uh things with the name um and and so I think this is a I think this is almost almost as good might even be as good but it's a four five today nice uh so with that uh thank you everyone for joining us please go ahead and share us what you're drinking um you know when you watch the show put it in the comments let us know it could be water it could be a a nice tea uh coffee uh let us know and and everybody else what what uh what beverage of choice you are enjoying while you're enjoying our happy hour uh we thank you for joining us and we will see you uh next week for our next episode and you're certainly welcome to to watch any of our other content like on Tuesday we've got a Creator toolbox coming up I probably should have known what that was before I said there's a Creator toolbox on Tuesday but there is one it'll be here there is one we're gonna do it we're gonna do it about but it's a little early still four days before yeah it's still still four days before so with that have a great day whenever you're viewing this uh bye-bye everybody [Music] foreign [Music]