[Music] so [Music] so [Music] hello and welcome to a special live coding happy hour uh i'm andrew bond your host along with my co-host brad tilton and we're gonna skip right past introductions and uh just give you a couple of updates on the hackathon and then we're gonna get back to working on our app so uh if you don't know today is our annual hackathon for knowledge the conference and we are the organizers for the hackathon and we're also building an app to manage hackathons on servicenow we're we're reimagining that app today we worked on it for i don't know four hours earlier today and we're going to continue work on on it if you are participating in the hackathon please continue to use the community or the guru office hours to ask your questions we may not get to all of your questions in the chat here and we're really not paying attention to the chat for that purpose so please ask your questions about the hackathon in the community space um to get to get assistance and uh with that brad did you want to screen share first or did you want me to because i think both of us are ready to pick back up where we were yeah it's up to you i'm i'm good either way all right well then i will start my screen share and we'll we'll go from there and i will tell this that i'm doing that too probably want to do something like that there we go so i'm in flow designer and opening up the plug-in activation flow that i started a little bit earlier and so i had a flow that looked up a bunch of plugins and then iterated through each one to connect to a remote instance to tell it to activate and we decided that we want to improve upon that logic um and send it all of those at once so i'll open up that flow show it to you real quick and then show you how we're going to improve on that so here is the prior flow that works is this is functional flow there's nothing really wrong with it it's fine but i also want to do it better so this flow looks up all of the plugins that we want um it updates our record to tell us that we're in progress and then it reaches out to that remote instance and activates the plugin and checks to see if it is successful or not and updates our operation record as a result of that so over here in our new flow we're going to use the same table as a trigger so the instance operation table oh i can smell my pork belly burnt ends coming through the window oh it smells good brad am i gonna sound good pick my table no no no tables for me you fixed it though all right we're gonna we're gonna be sneaky brad we're gonna copy this flow batch install let's see if that's happy if it's not we're gonna hot swap pretty darn fast over to brad so we're gonna get rid of most of this boop bye and we could probably leave that no yeah we can get rid of this too bye friend okay so uh let's save let us open up subflows to ci cd spoke and scroll down here for batch install and see what it needs to take as inputs so we've got wait for completion we've got batch plan which we need to send to this we need to select a credential alias so that'll be from our trigger record instance operations instance and then credentials and the instance url will similarly come from our trigger record instance operations instance url and now we need to craft a batch plan so let us create a new action for that batch plan look up records hmm actually not sure i want to look up records i don't know how to iterate over those in here so let's just script it let's get rid of this lookup records so a script step let us start with a oh there's no syntax macro completion uh so let's name this uh this is going to be our plugins [Music] is new glide record we'll go grab that plug-in table let's go to our hackathon app open up in studio our [Music] plugin table so one thing i advise to folks when they're building a script is visit the list view of that table grab the encoded query and then visit your query here add encoded query and you can paste that right in there obviously active equals true is not that tricky but if it was trickier it would be helpful to have that available so let's get our tables name then we'll perform our query and let's throw that in a while loop this not being the regular script uh editor is annoying so um what we need to do is go grab um in fact i have got somewhere where do i have that i've got an example of a batch plan let me grab that so we need to craft a batch plan and it needs to look something like this chuck wants you to make a constance uh script include chuck can join the show and make a constant script include any time he wants uh so here is uh what a batch plan looks like and you can see i've got the different scenarios for the different types application is slightly different than plug-in which makes sense uh because they have slightly different inputs needed for them so but the main thing we need for plugins here is id and whether or not we want to load demo data i think the answer is yes but let's go ahead and put that in our table does that make sense it does load load demo data and let's just make that a nice true false feel and let's default that to true because i want it most of the time and you have to tell me if you don't want it let's get that field name so that we make sure we reference it correctly close it and then open it again so i'll add column name to my view here which is something that i always end up doing and then right here boop did i really wow that's that's worth nuking and doing again what'd you do data with two a's i have it on my little monitor i didn't catch that i'm sure someone in the chat was going but no don't do it andrew data so let's nuke that let's hit update over here we're gonna want that name let's make sure it's saved and happy okay that looks good so we need the uh id field right uh right we need id that's the name of the field isn't it i think it was very simple yes id we need to know if we're getting demo data and that's it that's really all we have to pass and type plugin is going to be assumed for these but if i want to install apps i think we can do them all in the same table and just specify which one it is so let's add a type does that make sense yeah i mean there are a lot of tables in this app already so i like it so why add a choice table let's go ahead and update that and give it some choices and the choices right now will be application or plug-in we're going to ignore that we'll need versions if we do applications just ignoring that for now let's get some choices new application is application oh we can probably capitalize the label and plug in [Music] seriously plug in and plug in his plugin insert yes we should have our two choices yay we've got our choices so we need to craft this and it does look like a two tier setup so that means we probably need to script it because the the builder i don't think can handle this this tier all right so with that uh we know the things that we're going to need are plugins dot load demo data and i know this is not a structure or anything valid yet but i just want to get down which things i need and i need type and that's it that's what i need those are the three things i need i'm also going to need to set notes is optional so i don't have to pass that and that's about it so i will craft this into a nice json builder here and i get rolling and so i'm going to probably pause here for a minute if you're ready to pick up brad brad stepped away that's fine i'm back are you ready to take over for a minute um sure i think uh we got to a nice uh pause point here and i'm going to go check on my uh barbecue cooking and uh be back and then we can switch back over and and finish building this uh json object for the batch plan i have a quick question for you before i have questions uh so what we're gonna do is we're going to create um we need a table to manage basically people having issues so i thought about naming it the issue table but i think we may also just want to extend tasks and use it to also manage things like password resets plug-in activation just do it all through the same table instead of having like request type and incident type tables uh i'm struggling with what to name it uh all of the things that you've listed so far are instance operations so they will go into the instance operation so we'll open one of those from a an issue if somebody okay yeah yeah so i'm i'm gonna name it issue any anything there's an issue and we might you know automate creating a instance operation from those but the i think issue is fine all right that was it all right i'll let you take over the share oh yeah i should go ahead and do that then this will stop others screen sharing that's my app engine studio there we go can you see that yes i can all right all right so what we need is uh the goal of this little part of our scheduled programming is for me to create an issue table then we're going to create a record producer that creates the issues and then we want to expose that on our event uh home page and oh there's like a fun url thing that i want to do through that we'll we'll see if it's possible so the first thing we're going to do is go ahead and create a table for issues uh we're going to i'm going to extend task you could make an argument for extending incident but there are some licensing implications for extending incident so we're going to extend task we're going to call this oh it's we're just going to call it issue not issues even though that's what i wanted to call it uh and uh i want to call like hack-ish you know and we'll just call it issue all right yeah kevin my my fun url thing is that uh on my page uh i'm gonna have this event page and then i'm gonna want this record producer in the event page but i want the record producer to know what event i'm opening it against and i'm not sure like i know in ui builder i can really easily grab um like the event id from the page parameter or first from somewhere else on the page but i'm not sure i can put that into my record producer so we'll see don't call it tissues i i i will not i think i named it correctly so we'll edit the table one of the things i appreciate in ui builder is how this left side deal goes away when you get into something like uh the table creator where you want all the horizontal space um it's just like a little ux touch that they added to it that i appreciate um i should tell that to that team and not forget so i'm trying to think if we need anything special i think we want i just talked about we want an event field uh so let's say event we've been having a lot of fun with the name event so there we go this is going to be a i always forget this table builder works differently than other table builders so if i go enter there we go no enter tab down arrow there we go so this is hacker event are we sure all right oh i got this i'm trying to use only the keyboard to do this and it is not the easiest thing in the world uh okay so we've got number that's already going to be the display field um we're going to need a user field right or do we have a do we have a user ref i can't show matching come on all right let's save i guess i can use opened by i think that will do what i want it to do you know i also want a team i want to know what the team is that's asking this because uh who the team and the team captain is matters so we'll call it team it's going to reference the [Music] uh oh they're looking good i didn't take a picture but i'll remember next time i gotta go wrap them up in 30 minutes they're looking good i'll take a picture before that all right so i've extended from the task table for issues i've added fields for event and team i'm trying to think if there's anything else we really need um i don't think so i mean we'll know the instance from the team from the user and if there's something like the kind of problem they have that we want to present in a catalog that'll be a variable yes um yeah unless on the back end we want to do something with that but we'll we'll see we'll start here yep sounds good so uh we have that table created um one of the things i miss or can we do that here can i create a advanced view what is this is this the old version of the table it is and this is what i wanted so i want to tell it add to service catalog that is such a glorious button i love that button it's so good it's off it off overlooked but it's so good oh i want to create a quick catalog for the hackathon service catalogs oh that was the wrong one come on what is the maintain catalogs there we go it's been a while since i've done service catalog work by choice uh hackathon oh that looks fine so let's create category hackathon let's call this help all right so name uh uh report an issue um get help with something related to the hacker help all right so the nice thing about this is that i can say uh give me some of these fields um open by event so i was saying earlier before you got on we're going to have a fun because i want to pre-populate the event uh based on the event it's created from so we're going to have a fun getting that from ui builder into the catalog item oh it'd be really cool if this catalog item component has like some sort of input where you could pass it values um and it may be cool but that would be an awesome but we don't know if it does so we'll see uh what else what else do i want i have what team go uh short description i think i want uh and we're gonna pre-populate all that stuff i guess maybe we'll put it up here and then ah let's start there come on builder dev there we go state checked out it has been a while for me what are those fields um so we get variables this is the best part creating variables uh is we'll just say it's not my favorite thing to do um so i think for now i am okay with this uh i do remember back from the days where i did a lot of catalog that one of the most important things you can do for your catalog items is to give them good descriptions but i'm i'm going to violate that and not not do it here i could use catalog builder for this if i want to do more of it but i'm just going to take the society and we're going to open ui builder and i think i'm not even going to have to build a catalog item page so so we might experience a short interruption i'm going to switch screens real quick and see if we could maybe not drop zoom but we might so hold one second time out and we're back sorry so it should be good now all right so when i created my portal from app engine studio one of the pages it created for me was this catalog item page i do not have a lot of experience with this page in that this is maybe the first time i've opened it for more than 10 seconds so let's see i'm going to give it my record producer's value here and uh let's see what that looks like all right so it renders i have a submit button andrew got dropped from the zoom uh it's all going according to plan no i'm kidding all right so uh i can't populate opened by um what about me that's me all right event is going to end up being this event or the hackathon event we've got the team short description description so let's just see if this works and then what happens when you submit submitted uh we got an issue what happens if i try to look at it wow it has a thing for me already i like this i don't have to build out this page myself uh so this is a win for me um um andrew joined and it kicked out the other andrew i think that i think that is what happened there can only be one right uh i think sadly wait requested for id what is this oh because there's a new there's a it's not new but there's a requested four thing on catalog items all right so it looks like this is going to work where um [Music] where we can link to a record producer and submit it my question is how can i populate values into this record producer from uh values in ui builder i can see that this component does have some inputs uh where it's taking in the sys id of the of the catalog item itself which makes sense and then the requested for id so you know if you ever need to grab the logged in user assist id and ui builder this is how you get it you you know use dynamic data binding and grab it from the session uh so this is the logged in user session uh i guess this is gonna toggle whether the header is there request four header i don't know oh it's got a thing to show request for at the header okay uh he's back andrew we decided uh that uh upside down andrew joined then i kicked you out he's not on audio yet uh submiss submissions what's up we decided that uh upside down and upside down andrew joined and it kicked you out because there can only be one andrew there can be only one injury um so we have proven that this uh record producer works in ui builder we didn't have to build a page for it or anything uh which was oh my goodness it just works it just works oh i love magic i love it the problem is that it does not have our input that i was hoping it did to pass it values uh so i'm not quite sure how we will pass at values so we we can do something on the back end like you know the way that we are grabbing uh data as we're saying we're kind of assuming that a user can only be um a user participating in one hackathon at any one moment yeah so that's a it's a reasonable assumption if if the thing is going to be related to one hackathon yes so i wonder we could just use uh uh we could do that on the back end yeah i don't think we're even going to expose these variables then we'll just ask for a short description and description which i i think fewer variables the better anyway all right the fewer things i have to ask a user the better absolutely sure description is the only one that's going to be mandatory so let's go and uh i don't know let's see let's edit this in catalog builder uh i haven't used catalog builder too much but when in rome absolutely let's give it a roll what is this item yeah linda makes a good point could be registered for more than one so one of the things we're looking at is uh the hackathon events have a field on them that's a state field and we are looking specifically uh for events that are in progress so we kind of assumed that you cannot participate in more than one event like they can't overlap um you're too much the only person that i could think that could pull that off would probably be drove and i think he could probably do it but other than that i think i've seen him on multiple meetups at the same time uh this looks okay destination we already did this catalogs questions um i'm gonna kill these questions what are the what is this edit oh ui policies okay team and event uh settings what does settings do hide uh no i think those are good actually we want to make a short description mandatory define new behavior mandatory yes always [Laughter] always always all right that was a more pleasant way to create a ui action i like it yeah that was nice and smooth access for uh is andrew really not coming back did he leave i don't know andrew you still here other andrew he's not in this review and submit i guess submit yeah all right publishing oh does it have an approval uh i shall approve it then oh there we go they figured out who i was and so it approved it that seems reasonable oh except now i can't [Music] how new is the uh this check-in checkout on [Music] catalog stuff i have no idea oh there it is now i can write to it um andrew's dealing with kids my my my kids ipads are parenting them right now uh so that's that's what we're doing at the moment so we're gonna pre-populate some stuff we want the event and the team and the open buy open buy is easy uh and then for event i'm gonna have to write a glide record query that grabs the current event so we're gonna have to do that right now okay okay but i want to i want to do more ui builder stuff that's why i don't want to bother with writing glide record queries on the on the show i'm all for it let's do it save and continue event oh yeah we didn't do any of this yet so i've got this container too container one main i think i want to make this main styles no body i want to change this to be like this completely override i think this is going to be okay yeah sure um kind of kind of [Laughter] we lost my pretty formatting but we can get that back uh here let's just not reload let's go main and grab the styling one of the things i like about this is when you change the styling with the the fields here it's reflected in the css styles so you can do it either way but the nice part about that is if we're going to have it all wiped out i can just copy the css and then copy it back and not have to change every field so we'll go back to row one and now it looks like it did before that's a brad tilton uib hack right there i like it that's right the css styles the other fun thing about ui builder that i really like is that the whole page [Music] before you get into adding like data resources and client state parameters and client scripts uh it's just a big json blob so if you want to like share a page layout with someone you can do that really easy with just this json blob that you put in a in a macroponent um so it's it's kind of nice so why do we have spacing between so this is what we want to do oh we're going to have to we're going to have to use some evam i think maybe you're doing that i'm going to work on my json batch plan real quick all right so i'll be paying attention but you know only halfsies actually what i want to do is i want to make this report issue button uh point to that i want to make it point to um the record producer that we created i have no idea how to do that but we're going to figure it out here so [Music] my guess is that it is somewhere in the theming i mean maybe no idea is too strong i have some ideas i've got you know a high school educated guest that's what is what brad said uh so let's say hackathon event portal every every like three minutes or so a nice breeze comes through the right way to bring the smoker uh right up right up in my sunroom it's nice uh theme assets configurations where's the json for the maybe back too far oh where is the what i'm going to do is i'm going to look up how to change the header menu and i am going to do that by looking at my creatorcon session guidebook and i know i figured it out for creator time nice so quick plug uh it looks like you want to work in a lab session oh that's fine uh there are two ui builder uh creatorcon labs uh that are um they're free to take they're not behind the the paywall and one of them is ui builder workspace the other is ui builder portal um lisa holdenstein built the workspace one i built the portal one and you start with a blogging app and you build the author experience and workspace and then you build uh the consumer experience in a portal so what we do we do some theming in both of them but i am looking for what i do in the portal you can just search uh killer in the uh on the knowledge site that's it's such a great query just there's lots of ways to search you could just search killer to find brad and lisa's that's right it finds the sessions it's not a people search all [Laughter] right oh i'm too good uh where is it theme the portal there we go where do i say paste this big json blob in oh navigation and menus all right we go here and then header oh this is where we want to be uh so right now in ui builder there are still a lot of things that are configured through these big beautiful json blobs but you know as is the case most of the time in service now i expect that these will be more configurable with like fields and pushing buttons and things in the future but there's a lot you can do it's very powerful but you do have to kind of look through this json and figure out what it's doing so global tools i'm kind of looking for something that says issue in here and it's not there so let's try here all right do we see anything in here that says oh this is the report issue so we have all sorts of things route it's routing to the catalog page which we want to keep oh and we just want to change the sys id this is getting better and better where did i have that society it was here so let's change this cis id and then let's go to the home page no we want uh event i think yeah so if i hit report issue oh that is sad is this my the racist id let's uh i pasted that somewhere else oh i can just paste it here no that was the old one maybe it's a cash thing all right let's do a hard refresh and this time it's still not working oh i can't see this why so are we updating the right thing let's let's find that out let's see uh um if we make the button more angry i don't think we are updating this button oh no why not let's close out some things and make sure that we're on the right portal all right so if i do that we don't get our exclamation point so i don't think this it's either not the right place to update that so what else do we have we've got menu all sorts of things and all of this is configured through the uh through the ah this is where it is so these are two different buttons now now we're now we're getting somewhere all right so this is the one i changed and that works so we want to find where the other one is there's more than one issue so there we had that one oh come on jump to it i was a little uh curious at the beginning because it was first in in this but how many times do we say issue here so there's two of them where's the other one well let's put you in something else uh the screen just went darker there we go that's like what screen all my screens don't seem dark what's going on all i did was hit save and flow designer on my screen ah so what is what is actually happening is this chrome menu is only configuring this menu it is not configuring this button so we need to figure out where that button is that button is so or be the button go back to our experience settings navigation and menus uh anything else you have to set as part of your header so we have an issue in here we do not so i don't think it's this one i think we need to go to [Music] our uh ux app configuration and look at some of the it's not in here is it i wonder if it's in the uh that doesn't make sense and the app shell we have issue anywhere no i'm looking for oh i think maybe it's on my experience record but we already looked at that hackathon portal ux page properties hey is this the one we already looked at board issue action oh that looks like the right one it's still pointing at the old one chrome menu actions interesting all right let's go back and grab my sis id again where are you and let's go home report an issue come on there we go i did uh did a hard refresh and it looked like it worked yay cash issues all around all right so we had to find that uh i went to the this is the experience record itself and it's got some of these page properties and this is currently how you can how you can do some things like tell it some how you want to handle the header differently on different pages uh so you can see like we're doing something different on the landing page than we are on the login page um and so like on the login page we have some different values in the header where we're setting a whole bunch of things as false because they're not logged in so this is just one of those places to come look while you are doing development so i think we got where we wanted to go with this for the most part uh do you have something you want to show i do have another we can do some evam uh unless you are ready to to do something i'm ready to fix the problem i have all right so do you want to do that by showing yeah let's do that i'll share my screen and maybe uh someone who's not been going uh as hard as i have today can help i swear every time i'm trying to build a freaking json object and in flow designer my ability to do so breaks my brain like if i'm not if i'm not in flow designer it's no problem what's whatever but whenever i'm in flow design and i have to script to do json i'm running it into trouble so i have been working on our little script to query our package table which will get all our plugins that are active it's going to loop through those um it's going to set the id load demo data and type into our plugin object and then shove that plug-in object into our package array and then take that package array and the name for our package uh for our batch and uh throw those in the batch json like string well object and then try and encode that and i'm getting in error so i'm doing something wrong but i don't know you know where it's erroring it doesn't tell me so i was just about to go to the logs do you want to uh i i this may not matter um but the the packages property on the object do you need to declare it as an array before you set it to an array probably not where was i where like if you added a line after line 15 and said batch.json.packages equals like an empty array i don't think you have to do that i but packages is an array yeah it's already the value is an array uh yeah andrew says try stringifying instead of encoding but uh what if you run this from so stringify here instead of encode i think that's what he's saying can you just run this from sure you have any absolutely nope yeah if we don't do that last line and just set it to a prince we can run this in background no problem then maybe we'll get a better error message that is a good point it'll tell us what line we screwed up on and if we just uh you know like throw this in a gs.info yeah that's that's it that's all i need to do to run this over here and sure go angry here what the trust json in code is angry well i think can you json stringify instead of sounding good no no oh don't you don't need to it's not new json right it's just json. come on really i think right all right no parents ah it doesn't look right to me i don't like it yeah look at that oh okay no errors no errors and this looks like what i want it to look like mostly i want values in here but why don't i have values i've got the field names there are so many times you've got two and they don't have the values yeah i have two in the array which is what i want but it doesn't have the let's uh do get values on these uh yeah you may be running into the while loop pointer issue although that should just mean they're this should just be the same ones then so maybe the first one [Music] is empty i know i need to get value don't yell at me look at that okay well this is this is what i needed help with thank you all right that was that's great uh let's pick up from there uh so instead of we'll take this and put it here i'll be honest i don't know what the difference between stringify and encode is i mean i can google it but i can google it too i can be an expert on it in about five minutes but yeah and i have been an expert on it before i think i have known what the difference was and i will again in the future not be an expert on it and be an expert on it um so uh to recap what we're doing here is we are querying our plugin table we're getting all of the ones that are active we're getting some values from that and we're crafting a batch plan which is what the input of our flow needs so let's uh publish this sucker and uh start using this in our flow so over here this flow batch install flow the subflow that we want to use which is the batch install needs a batch plan as an input so let's see it wants a batch plan so prior to this step we shall craft the batch plan and so the output of that batch plan action is going to be a batch that we drop into our batch plan area we choose our credentials from our instance and we choose our url from our instance should give us a batch install and then the output of the batch install is going to contain a result id which we can call so we've got two options we can wait for completion here which will let this subflow hold on which is i think what we want to do but let's take a look at it and see so let's collapse these inputs and outputs perform a batch install and then follow a tracker until we know what it's doing yeah let's wait for completion so we'll close out all these others we wait for action we will get if we have an error so let's do something based off of if we have an error or not get a little flow logic and we'll say if we have an error from our prior step error is not empty so it's not null we shall update our record and we'll update our instance operation record and we shall update that with state is closed incomplete we're going to put a work node in there to say batch add error and let's put in the error message and else need to drop down here for an else we'll update our record and again this will be our instance operation record which is the same as our trigger record and we will say state completed successfully and throw a little work note in there batch plan installed success fully so let's save this and test it out now this might take a minute uh to run but we'll see what it looks like we'll tell it to run in the background and then we'll follow its status so we'll run this test against that single instance operation we have we'll tell it to run in the background and then in about four or five seconds we will get our link to our flow operation oh bad request invalid pat values past the api record is mandatory it must be filled in where did we drop the ball ah update record the very first step we were supposed to set it to state in progress work in progress throw in a little work note batch install has been requested done save welcome back brad thank you let's see how this test goes and then i'm gonna go wrap some uh some oh nice and then put them back in for longer they got they've got to get wrapped and a little little uh brown sugar concoction i got to spread on it i'll take a picture before i pull them out though so let's refresh this so this will take a second but we'll refresh this and is this the same error or a different i think that's a person from the last time you can do it flow designer i have faith in you so we're waiting on batch install let's open up that subflow context and see how it's going so we haven't failed yet looks like it completed and looks like we have completed it let's take a look at our record update record let's open up that record see what it says batch plan installed successfully so that means to me that we should be able to go look at our hackathon plug-in table and view the two active ones and see that those are now installed in our target instance and uh integration hub enterprise was the addition there so let's go see that that's installed because we know awa is installed because we did that earlier with the early connection let's get that name which was he where's our plug-in oh studio let's get this sucker we'll visit that list now i can just view this in the instance operation panel i don't have to go to the instance for it but you know since i'm proving it out uh you know we'll actually go look at it and make sure that it's happy and this should be active no we're not i don't understand hmm where's our integration hub so for some reason not that plug-in isn't listed here because that's a maintenance plug-in that makes sense actually that's a maintenance plug-in that makes sense so it makes sense it's there though we could go open up flow designer uh but we're just gonna have to take it on faith now because i don't want to hop in and view it so with that i think our batch installer flow is actually pretty ready we're updating our instance operation record we're doing some error handling um we can install you know applications or plugins i think we're we're good to go on multiple installs with one rest call uh to a to another instance brad so i'm gonna have to move on to the next step uh in my plans uh but would you like to do some ui builder as your next step sure i know i know you need to go uh i gotta i gotta go i gotta wrap them up before they get too crispy they're burnt ends but they shouldn't be like dead ends i've been having some fire issues in my smoker that's why i keep leaving because [Laughter] the fire keeps falling over and not not being hot enough uh but i think we're good now you can grab the share from me sir i will take it ready let's uh get all my screens going change my resolution all right you should be able to share my screen sorry i had a little one come in and ask me some questions it looks good sir i'll be back in a moment all right uh this is ui builder so uh i think what i want to do i just saw the canning blueberry preserves uh that sounds wonderful um what we're going to do here is i want to add a we're going to add basically a list of knowledge articles i think is what i want to do on the homepage here um that's probably well i think that makes sense to do right now uh so i want uh a either a list or cards of knowledge articles that i can show uh on the home page we already wrote one knowledge article which was our rules uh so i know we have some data in there but we have if we look at it here there are a couple uh so we have these list components that show uh like a servicenow list of something uh i don't i don't think that's exactly what i want uh so if we look at one of those list components like the simple list it's still a little um this is not like portaly enough for me i i don't know if uh that makes sense but this still uh seems maybe they're like there's too much going on here to be in a portal so i like the way the cards look better so i want to use cards so we're going to delete that so i can use the the data set component but what i have to do is i have to feed it in evam and that is the entity view action mapper so we have to create one of those first and evam is not specific to ui builder although it is i think the main place that we're consuming it now i know like service portal search results uh you can use an evam to configure the uh the cards on that uh so we're going to create an evam and we're going to call it hackathon knowledge and i'm going to save uh and then we are going to create a data source so the cool thing about evam is that you can define a number of data sources they can be different tables uh so you're basically pulling this data in and then you're defining this view config and the view config is saying uh this is how i want to display that data so it's basically like what goes where on your cards that are being displayed but the cool thing is is you can configure uh view config rules and we'll kind of get to that where for different types of data you can display it differently but you can still show all of the cards in the same grid or list on a portal and that's i think what we're doing with the search actually i haven't actually looked at the service portal search it's only got the one data source and the one view config bundle my tasks my requests popular articles about this one still one so not a good not a good example yet but but we're only going to use one i just want to show knowledge here uh so we are you know just going to show knowledge but you know i think what i want to do is i want to look at popular articles and see what this data source is actually doing okay cool so it's just looking at all articles and then the view config you can also do some filtering in the view config so we'll probably use use this especially this view template all right so let's go ahead and configure this so first thing i need to do is create a data source so i need to tell it this is where the data comes in uh so we're just gonna call this uh hackathon [Music] kb data source and i want knowledge and [Music] we want where the knowledge base is hackathon i want to sort by i really want to sort by popularity um but let's sort by updated so i will submit uh oh you know what did i just we we want it to be uh published articles probably right uh as a workflow is published uh and then our view config bundle we're gonna create a new one of these the view config bundle is basically a collection of view config records i'm not quite sure why you know the i guess you could use different bundles and different events so sure that this makes sense i'll stop complaining about it uh hackathon kb view view config bundle i'll submit it i'll click into it and then this is where we're going to create some some different view convey well we're only going to create one but uh let's call this uh hackathon kb can you guess what i'm going to call it you can pick uh table is going to be uh knowledge uh it's kb knowledge right yeah um i don't think i need a filter at this point because we're already filtering on the back end but i don't know what the what the heck we'll add a filter anyway knowledge base is hackathon and workflow is published sure so one of the important things i need to do here is i need to tell it the fields that i want and let's do this let's look at this one and see what fields they got and just do the same thing so short description author avatar and name description view count rating so a short description author avatar and name that avatar is kind of important in evam i've found because the cards all uh do um they all have like an avatar spot most of them so it's a nice thing to populate because it makes the card look a little nicer so description view count rating description view count rating all right so that looks good um let's save it and then the one last thing we have to do we have to do a couple more things but we have to create a new view template you know i could use the popular articles view template but we may want to change ours a little bit so i'm just going to steal the json so the view template this is one of those things that's still in json i could see really easily how this could could use the mobile card builder because this is basically building a card so maybe that'll happen at some point yeah i i don't expect this to remain json forever but this is uh this is what we have now so we're gonna use that and say um hackathon kb view template so we're gonna show uh views the avatar the rating and then uh we've got all of these things these are all like title label this is the the property name that you have to use in these mappings and then these are all fields that you're mapping to it and then here i think these are keys views so these are the labels on the bottom that you're gonna see along the bottom so that looks good to me uh let's go in here and save and then we need to create a view config action assignment in m2m uh so nice short table name we're gonna call it navigation so this is uh how we're telling uh the evam cards when i click on one of you uh you need to uh to do a navigation action so i think we have configured an evam here so this should show us all of our knowledge articles in the hackathon knowledge base that are published so i'm going to come back into ui builder i'm i've got this other row i'm going to add a container component i almost never just add a add a component directly in a slot here it's just easy to start with a container because it gives you more options later on and it's kind of hard to move them around so we'll do that and then we're going to go to a data set component so i have a lot of options in this dataset component but there's a thing that i forgot to do and that is we need an evam data resource um i'm back all right pork belly is wrapped up and uh ready to to finalize it's melting that's mine oh we're looking good all right so evm data resource i just have to give it an email definition which is hackathon knowledge already defined uh and we should get that on the right here so we just have the one knowledge article so that looks right page size 20 sure oh man brad your your chuck roast is looking good oh did you see that that picture yeah you know that was uh that was a couple hours ago it's it's wrapped in and sitting in some uh beef stock right now i'm about to upload mine uh the current state of mind in there so why don't you pull that channel off for all of all of the folks who want to be jealous of the smoking we got rolling today let's let me finish my evam and then we can pull that up okay so data set i'm going to we have this data i could just hard code a bunch of json in here that doesn't sound like a lot of fun so let's connect it to our evam data resource which is this one and hey i got uh i got an article in here so there's some options with this data set component let's say it's called this hackathon knowledge so we get that up here i kind of don't want people to toggle between a grid and a list i always want to show it in a grid i don't have enough data in each of these to show in a list although i don't like that this is cut off it's a long name now max cards per row i want to go 6 actually but that makes it shorter i don't care [Laughter] i'm going to want to show a lot of them um all right what if i if i change the height does that no it doesn't give me much it just makes it so i can't see as much uh the filter uh i haven't figured out how to work even filtering yet so maybe i'll figure that out at some point this is what i all right i don't get distracted so one thing that i need to do is i need to create a page event for my navigation so let's create a handled page event this is going to be open kb article uh and i need a payload field and we'll just call it kbid so i have this handled page event so whenever this event is consumed i am going to want to link to a destination which is going to be my article page and the sys id is going to be the payload of the thing that sent me here which is the kbid that we just created uh i don't need any of this so let's hit add and then the last thing that i need to do is i need to declare the event mapping in open kb and this is the payload.sys id so we'll save that and hit done and then we'll save and i think my page is going to work even though it's going to look funny and we're going to fix that in just a second [Music] no margins kills me no majin all right it worked so i clicked on it and it worked i want to do one thing uh where i want to change i think i put these styles in the row [Music] this padding i'm going to get rid of that i think i can put that on the body maybe i can't fine nope oh so let's go i think it was like 56. it's 56 i think it's what you had in that point uh zero i don't need any vertical padding there we go and we'll do the same thing in this other row say oh much better and now brad is happier mmm everything is i still don't like the same except for the menu the menu is but not the lettering in the menu i'll have to look at what the landing page looks like um actually let's see because the landing page looks like yeah it's the how the landing page works we had like professional designers design this landing page so if my page looks like the landing page it's fine and good enough all right ooh i do like that the text is not black uh it clashes a little less but we'll fix that at some point awesome so yeah that's uh that is some victory here that is some victory let's take a look at uh the pictures oh yeah let's look at that and see who's who's streaming uh i think i need to stop share and then share the whole desktop there there we go that was only sharing chrome so these are our uh chuck roasts here or this is my check roast uh it looks a lot blacker than this right now uh which is good it's got a nice bark on it when i first put it in that that looks oh looks like it's going to be pretty good brad it went on uh about 10 hours ago and then here are some nice looking burn ends so the pork belly the the the bacon the bacon zone cubed instead of sliced let's see is anyone's stream it looks like earl is streaming and that's it all right let's drop in on earl do you have his let me grab it um if you don't know happy to share it uh oh it's something nope team mavericks is in so we got two all right i'm happy to share if you'd like brad uh go ahead i need to find the thing all right i've got i've got them open so what a share screen [Music] bam oh i didn't do share audio i'm bad sure sound there we go but why should we start with this testing yeah there's also kind of a buzzing can i don't know it's not the most terrible echo because it just feels like you're in a huge space what's your feeling let's take a look at pause raid what does that mean tell us what you're doing oh hi everyone how many people are watching this i don't know what's happening uh so what is happening here is i am creating a game within virtual agent um specifically the idea of taking a known component within servicenow this is what i like to do every year at hackathon you take a known component of servicenow and you stretch it to its max way outside of the box that's what i'm trying to do with uh the servicenow components and so what i'm doing here is i'm designing the virtual agent box to be usable by anybody so you would go to virtual this virtual agent and then it throws you into a game show basically and um each game show has multiple different kinds of games that it picks randomly like mini games that throw you into think think mario party and stuff like that but the fun thing about that is you're actually playing these games at the same time as other people playing it and so as it doesn't like a game show exactly um so whoever is participating in that episode uh you could be playing with them for like games like trivia or um stealing points from each other or uh figuring out who has the funniest answer to something else like that and winners who will be able to post messages that other people will see as they join the chat too um and so it's kind of like a uh a game host while also having the users themselves supply some of the games too um but that's what i'm making in here and i know um it's kind of out probably different than a lot of people are working on um in terms of product and stuff like that but uh i like having fun with this and i think it's always interesting that we can um stretch servicenow stuff way past uh what you'd normally think it would be as long as you're creative so that's what i'm working on here uh thanks for dropping by i don't know who else is watching awesome i like the sn gaming division that's my team name uh servicenow gaming division i have a dumb question oh um uh gabby do you have any other kind of questions [Laughter] so for those who don't know this is the fourth consecutive uh oh well oh well oh well oh well not echoey anymore i'm not i was hearing the echo myself even that super weird yeah so brad uh i can pick up some more instance automation but i'm also ready for a break are you ready for a break yeah i think i have to go get to start kind of getting all of the parts of dinner around uh and then i have to then i get to go to yet another soccer game after dinner so the the life of uh yeah summertime child having uh soccer appearances yeah is all the games with all the tournaments and uh so one of your children is doing a tournament which basically is all day games yeah what are they playing three four games today they played they gotta buy the first round and then it was the second round if they won they played two more games if they lost they were done so they they're in they lost the semi-final game just now and they're they're going to play kind of the the runners-up game and find out who's third place awesome yeah so i think we've checked in on all the people that are live streaming i i checked all the ones that i knew about and which is just earl is the only one live streaming at the moment uh we'll check in with uh phil and dhruv and maria gabriella when they're streaming again in the future i'm gonna take a little break if you have questions about the hackathon if you're participating please head over to the community ask your questions there or join one of the guru hour sessions they've been good so far and let us know how it's going and post to social media if you're out there watching and are enjoying it we we're having a ton of fun uh i think it's gonna uh be some really cool innovations coming from these teams based off the questions they've had so far and uh so that that's my favorite is seeing what all the innovations are at the end because people build things that i just can't even dream of that that it may you know in the platform because you really can build nearly whatever you want on this platform and do so rapidly so that's a lot of fun and with that uh we'll say ado for now and uh we'll potentially be back later this evening we're not guaranteeing it because we might be busy but uh i right now i'm feeling like i'll be back later so thanks everybody all right thanks everybody thanks for joining us you