Building a Portal with UI Builder in Quebec - Live Coding Happy Hour for 2021-01-22

[Music] hello and welcome to live happy hour for this great january 22nd 2021 i'm your host andrew barnes and let's dive right in with our introductions today on this awesome day with brad hey everybody my name is brad tilton i am a developer advocate with a developer program here at servicenow i've been developing on the platform for about 12 years i'm pretty excited about today's episode as we get into some of the quebec features awesome and our special guest introduce yourself hello my name is maria gabriela ochoa perez-wechter i've been alive for about 12 years doing service now doing service now for about three or four it feels like an eternity um and i'm here to have some fun and learn awesome and i am andrew barnes also developer advocate here at servicenow and i've been in this role uh now for coming up on two and a half years at servicenow previously i've been an implementation partner and a customer a couple of times using servicenow with a history in teaching computer science and running enterprise application systems uh and i'm just so excited i want to get into the things but we're gonna finish with introducing our beverages of choice starting around the horn again with brad so i have an oscar blues tin fitty it is a barrel aged stout surprise uh i'm excited about this beer as well you make me jealous every week with a barrel aged this and uh imperial stout that and maria gabriella what do you have i have some very expensive wine it is a vintage 2020 about 1350 at the store it is called risada moscato diasti very fancy very famous hi amazing cup awesome and i have got a new flavor uh from uh something i've had on the show before which is uh the edmonds-os sour line and this one is a sour apple which will be the first time i have it and i've got a second new one for next time as well ah so if you're here you've probably heard that quebec went early access yesterday so our newest release uh in the servicenow family went available in the personal developer instances as well as you know in your customer instances uh to be available uh to be upgraded to quebec and today we're gonna we're gonna dive uh deep into some well not deep but we're definitely gonna dive into uh some quebec things um other announcements though is uh coming up uh you know in a couple of months we've got uh knowledge and creator con and the call for speakers has gone out today and i'll include that in the show's description um after the show is over but if you are watching live right now you can you can go find the the link pretty quickly uh now that you know that it's out there um but yeah if you'd like to present at creatorcon and show other developers like the other people watching this show um what you've done interesting um you know over the past year and share some of your learnings and insights with other developers that's the place to do it um we brad and i love creator cod and we always participate in that and uh gabby you have been there alongside us at uh previous knowledges um producing some of the most hilarious stickers i'm actually really excited i think uh paige and i are gonna try to do something with uh women now for this year's creatorcon oh awesome so uh why don't you tell us what that is of course so uh peyton i created womennow.dev as a blogging resource site to not only uh hi chuck how you doing um to not only uh try to bring more of a voice to women in the servicenbc women now.dev page and i have actually been talking about doing some uh ui some of uh ui builder stuff in the in the future so i'm actually editing her stuff right now so i'll include that uh in the description below as well so if you're watching this in the future you'll have quick access to those two links brad i know you have got something to remind us about don't you yes so uh quebec early availability is here we're gonna be uh you know uh presenting and and uh and uh making some content around uh now experience so that's ui builder components um the now design system uh and so we'll be doing something at least once a week until general availability and probably after on the developer blog or on this youtube channel uh starting with today's show uh so i'm excited about that uh and uh you know you can expect more content around that so in addition uh you said that there we're gonna have some content for the now experience every week but we'll also be featuring every week a different product area for developers on the devsite blog and here on our youtube every week as well awesome so with that today we're going to dive in and take a look at ui builder so if you've had a chance to look at ui builder before which was used to create landing pages for work agent workspace in previous versions so paris and orlando you are about to see something that's almost completely different like it's not even the same thing and so it will allow you to build workspaces and any experiences that you want on the platform not just uh what what we had before which was landing pages in workspace um in and to power that we've got a whole slew of components that are now available for you to leverage in ui builder that weren't there before and we're gonna we're gonna dive right into that is there anything else that we wanna discuss before we go into the share so i'm excited to see the share but do we have anything else all right well then brad you can go ahead and start us on the screen share and we'll dive right in all right let's go ahead and share that is not the right there we go all right we should be seeing my screen let me pull it in a little bit uh and andrew tell me if i need to move something around all right uh so this is uh this is an instance that um is cloned from uh the overall instance where we host our artifact manager and so we've talked about our artifact manager a lot on the show artifact manager is the way that we schedule and really automate how our content production works so all of our live streams everything gets automated through artifact manager uh our blogs and videos we're bringing in some of the stuff that chuck has done in a separate instance into artifact manager um so we have a lot of things in there one of the things that we've been asked for is an editorial calendar so that other people can see you know what it is that that we have coming up in terms of content and so we're going to get started today on a portal for the editorial calendar we uh we're going to try to do a few different things and we'll kind of see how it goes i on purpose have not practiced this too much so that hopefully we can run into some issues uh that you will run into uh in the real world um i will do this in that app so we're gonna start with ui builder uh so i can just go under now experience framework i can open up ui builder and we get this new uh ui builder uh built in the now experience framework uh so this is a different landing page than you're probably used to if you've used ui builder in the past and the first thing you'll notice is that we have this my experiences section here and this is where you would either you know this is where you would select an experience uh that you've created and experiences uh is really the you know an experience would be a portal or a workspace or something like that so the first thing that we have to do is we have to create a new experience and this process is a little bit tricky uh it is documented uh but uh there is uh kind of a tricky step here so when i hit new experience it's gonna put me into the platform here i'm going to hit new and we're just going to call this artifact manager portal okay and for the path i think i'm just going to call it and then i have to pick an app shell ui uh so we've got some different options here the app shell uh kind of controls um what i get along with uh this experience that i'm creating uh so a portal app shell will give me different things than a workspace app shell will so you know if you're familiar with agent workspace you have some um you know you've got the header of on the top and then you've got this left uh this bar on the left that has like i think inbox and some other things whereas if you click portal you just get a header you don't get this thing on the left so i think right now we have a few app shells i would expect to see more app shells that's that's not inside info or anything i just i think we'll see more of them through more releases but we're gonna choose the portal app shell and then the tricky part of this is this admin panel uh so i am going to uh select the document here and there will not be anything listed or oh actually i played around with this a little early there's a test portal but for most of you you will need to actually create a new document here so this is the tricky part and i'm going to create this new app configuration and really all you need to do here is name it so we're going to call this portal i'm going to hit submit i'll hit ok and then we will save this all right so if i come back into ui builder and refresh i should now have an experience and if i don't have an experience all right i was hoping we weren't going to run into our first issue here so i saw a question while i'm pouring my beer here i saw a question in the youtube chat about being able to edit previous agent workspaces and i believe the answer to that is is no is no except i think the csm i think csm may have shipped like a brand new workspace built on the new uh ui builder where i think right but that wouldn't be one of the old ones yeah that wouldn't be an old one so so i believe if you open up ui builder in one of your old workspaces it'll actually open up the old version of ui builder um i don't i don't i'm not i'm like 80 sure that's the way that behaves you you must have like some magic eyes because knowing that you said that that question's in there i can't even find it oh okay it was the last one that's why i was looking up and looking for it oh i just saw it yeah he was very fast about that i thought it was an older one that's why i yeah uh so that that's true um yeah the the existing workspaces from paris and previous are going to be uh referred to as legacy workspaces um and then new ones that are being built and being able to be configured by a ui builder will now be just workspaces versus legacy workspaces all right so we are in artifact man or we're in ui builder we're in our experience and the first thing i have to do is create a page so we're going to do that i'm going to create a new page but there are these page templates which are kind of nice if i selected a page template it would create a page for me that already has some sort of layout and um in component on it but we're gonna call this uh editorial calendar uh can i do that no we'll just call it uh editorial calendar without god i don't love that we're going to do it though create all right so the first thing that we see are these parameters so i can define some page parameters so that you know i can say whenever this page gets rendered if you pass something into the url we can use that parameter for something and i have required parameters and optional parameters which are fairly self-explanatory we're not going to set any on this page so for this page what i want to do at its core it's going to be a list of artifacts that are in the future and that are scheduled uh and then when you click on one of those we'll go to a form page so that's that's task number one for this afternoon and i think we will be able to do this can you can you uh for the the broader audience here brad just just give us like a couple of what these sections are yes on the screen before we dive into your task uh not you know just hit them at a high level like yeah what are we what are we seeing here yeah so this is uh we've got this bar on the left here and uh i got i have access to my pages and then uh the components so the component library and we'll click on that in a minute and then i have some things down at the bottom uh that i think we're gonna get to but this is basically we have a data resource pane we've got some client a client state pane where i can define these client state properties for my page and then manipulate them and you know do things based on those manipulations and then i've got a client script so i can define some scripting in my page and then i can call that based on some different events that my components dispatch then on the left here we've got kind of our page section here which will list you know pages and then it'll list my page variants we're not going to really get into page variants too much but basically a page variant is um it's a different you know layout for my page based on an audience basically so i could show you know one version of my page to one my audience and a different version to a different audience the same url can apply to different personas like the admin could have its own experience a manager could have their experience and then an end user could have their experience and they all are the same url and it determines by things you set which one you get and you as the designer get to design that page as differently of an experience as you need yeah yeah and so the nice thing about that is i don't have to define you know i don't have to put 50 things on a page and then hide a whole bunch of them based on different personas i can just define a page for a persona and then a different page for different persona and then down here is uh my page based on the content and layouts and as we add things to pages this will grow um but that's where i kind of see that tree of you know the the uh the dom of the page uh the middle is you know where i'm gonna drag components into uh and then on the right uh we've got some uh configurations per components here awesome thanks for that overview over here brad all right so let's get started the first what i want to do to start here is i'm just going to put a list on this page go ahead can i ask gabby what do you what are you thinking like this is your first time seeing this right so what are you thinking so the first thought is either you guys fired the old design team or everybody was excited to do something completely different because this does not look like service now the next part is i'm really feeling like this is almost like they went for an experience of like a default website builder it really feels like it's more towards the the less code side of things which i'm really excited about um and it looks like you guys simplified a lot and it looks i am so excited that you all have that css styles box in the bottom right that looks just it is beautiful to my heart it is just i'm just mesmerized right now i'm so excited yeah yeah it is really neat because there's a lot there's a lot that you'll be able to do in ui builder uh without like creating custom components and when i think about service portal like you could do a bit with just dragging widgets onto the page and changing things around but at a certain point if you want to do anything that's even a little bit custom you pretty much have to build your own custom widgets and so you go from this really low bar of entry to a pretty high bar of entry because you have to know angular and i think that i think we have a good middle ground here where you're not going to have to learn a whole new um you know language or anything and you'll be able to do a lot of stuff yeah the most important question and this is what will kill make or break ui builder for me is there jelly [Laughter] don't be chilly there is no jelly i'm in you got me there is no jelly all right so i'm going to start by uh defining a container here and then in that container i am going to add a component uh so we have a lot of component choices uh and uh i'm going to pause and hop over to ooh to one of my first places and i'm gonna go that's a reference component i've never seen it and then i'm gonna click quebec and then in the advanced search options i have this available in uib so we have a number of components that are available in npm that you can build your own components based off of but then we also have a selector for the ones that are available in uib now if i hit search i can see that uh here we have about 96 components uh they have uh you know varying levels of documentation here but if you are you know going in here if you're kind of wondering what com components to use and how you might use them this is a good place to start so i have a pretty good idea of what i want to use here i want to use a list and we have some different options and i want to use a simple list so i could use a list that has you know all the bells and whistles that servicenow lists have uh i don't really want to do that for this purpose this is on a portal i want to show something a little bit simpler uh you know my my users consuming this don't really need the the filter and all of those things so i add the list and by default i think it's pointing at task so we're going to go ahead and change some things in the config panel and i will how do i pull this over so that you guys can see the whole panel um yeah oh i can move it but all right that looks good got it all right so all active tasks we're going to say future artifacts and then this is going to be on the artifact table and then i'm going to add a filter to this so we want artifacts where the planned publish date is in the future uh where's my relative filter and the state is one of no i just want to go is not idea think this gets me what i want let's try it so i'm going to apply it i'm going to say max rose so it doesn't get me what i want i don't have anything in there but i want to show let's show like 30 rows and then for um for columns i think that's probably good for now so we're going to leave that and then i've got a lot of different options here where i can um you know i could hide uh the title and that goes away maybe if i wanted to you know drop a title above but we're just gonna leave that for now um those are some really awesome options yeah there's a lot there why state is not idea are all the future states ideas let's just take that out then all right so we have all sorts of ideas here yeah uh yeah they are all ideas so these are if it's an idea that means we're not committing to writing about it so just in case you're expecting some sort of uh blog on integration of licensing all right so i'm going to save this and go ahead might be getting ahead of us but will there be a different view of this when you go to preview it like in page builder page desire or is what i'm seeing what i'm getting so i'm going to hit this open button and it's going to be it's going to open the url and we refer to this as the run time and you can see that i've got this list on the page this is where my header will be i haven't done any header definition right now and i don't think we're going to get to that today but if you defined a header this is where it would show up so right now i don't think anything happens if i click so right now we're we are just you know retrieving the list of data from the database and displaying it so if i go in here and so i can do some styling to this as well i've got my styles panel i don't think we're going to do that but events is where it starts to get interesting um so this component by default has six different types go ahead and that first one looks like something that you know as a user when you presented me that list i was like you it's a it's a clearly a clickable thing why doesn't it do anything and it's because brad the developer hasn't told it what to do when you click that um but but as you can see there uh there there are already some pre-configured events that this component knows how to do something with and then you decide uh which of those you're actually leverage and and you know pass it the correct configuration for for that in this case row click uh it's the one that we want here yeah so the cool thing about this is you know if if we're talking about um you know service portal or even we'll go back to cms um you know if you put uh what is basically an out of the box list on a page uh you don't really have a lot of control over what happens when you click on something like you have some options so little can you kind of define like this is what the page looks like when it comes up but the cool thing about this is when the row is clicked i could do all sorts of things what we're going to do is we're going to link to a new page but maybe for this specific uk use case i want to show the form in a modal i could do that you know instead of linking to a new page so i have a lot more options here if i click on the new event handler we can see that i have some different options here like i could open or close a modal dialog we are eventually going to link to a destination uh i believe that is what we want here uh but the first thing that we need to do is we need to create a a destination so before we get to that we're going to create a new page so i'm going to i'm going to go get rid of that and we're going to come over here and we are going to create a new page and this is going to be called artifact uh so this is where we're going to display our artifact form so we actually do need some parameters for this page right because we need to take in at least the sys id of the artifact so i'm going to add a parameter that is artifact id so this is one of the things i really like is that it gives you some advice on how you should name things it's telling me i should use camelcase and so i'm going to do it like this artifact id is that advice or is it going to hold you to the fire uh that's a good i'm just treating it like advice and not like it's making me do something but i i don't know if we had just saved that uh what it would have looked like um all right so artifact idea is our required parameter uh you could make a more generic page and we could take in like the table name as well but we're just going to take in this artifact id uh okay and so we're going to look for a form component i'm going to put it in a container and i guess before we get there uh i've got some options with these containers uh like i could give it multiple columns yeah i could give it multiple columns and then i can also tell it where do i do this um i think i can tell it which way to lay out the components whether i want to stack them on top of each other or whether i want to stack them horizontally but i can't remember where i do that so we're going to make this a form i have some different form options let's just choose the one that says form so for the table we know we want artifact and then for the sys id this is where we get interesting most of the most of the options in the config for components have these three icons here so the first one i'm just hard coding something and then the second one is what we're going to use here and then the third one is actually a script so i could write a script that populates this field but we are going to use data binding and i'm going to say so i just hit the down arrow and i know i have this artifact id page property that we defined already so i'm going to click on that and then i'm just going to leave the rest of it blank like this and hit save and you'll notice that one of the things i can't open this because i have a required page parameter but if i wanted to test it i could let's do it let's grab an artifact let's grab an artifact i think you're about to kill me with this feature we've been so excited to share this uh that we just couldn't wait for uh anything past the requirement so yesterday was the first day we got to show quebec stuff and today we're showing this it didn't work uh so that's that's cool um well did you put anything in the form though um um it should show something artifact table we gave it a cis id this is an artifact right you do need to pick the field spread yeah [Music] oh because i didn't give it a view yeah do we need to give you got to do one of the other i think let me have it show something it doesn't add something well let's let's just give it a field that i know is there uh short description there we go that that should show us something so i said at the beginning i i tried not to practice this too much so that we would run into some of the uh some of the issues so i don't know what do we think nothing hmm we're not getting any errors or anything okay and you're sure we don't have to click plus and add like a form field on the actual form so i did hit this manage form configuration um so that's maybe default view will work here so i put in default and then this case showed up here so that may be what we were missing maybe it's thinking and man all right so what do we try here so when you hit plus in order what happens when you hit manage form configuration is that what popped up gives me yeah yeah okay what if you add plus because when you uh went to add the form i saw you could physically add form fields into it do you have to build the form on the actual ui designer yeah so we should have some fields already in the default view um so form field does nothing uh we're forced to plus right where it says no data to display oh here yes oh so this is in there so the pluses are adding components above or below this form component yes but there's a form field component oh a form so i think a form field component i can maybe specify the specific fields that looks like it works so the form component doesn't work but the form good call it works i'm sure it works and there's just something that we're doing that i don't know what it does so great call let's go take that and then instead of ess we'll go default and then instead of incident we'll say artifact and then let's save it oh i think this is going to work uh let's refresh hey all right it worked so that looks right so now what we need to do is we need to connect uh our two pages together so we have this page pulling from the sys id and we need to go back to our list page our editorial calendar page and say hey when i click on something show me that page so i think uh here we go all right event handler yay event handler oh it's been a while since i did this i believe we just need to do link to destination so let's hit select destination and then artifact looks right yeah and then we need to tell it which data we're going to send it yay i think we want to send it payload.sysid that that sounds right uh it's a sys id that feels awful close but it might be payload.row but i think it's i'm going with society first so i don't know title let's let's see if this works first yeah and the cool thing about this minimum viable you'll see i have this ad so i could add multiple events on the same click uh so if i want to do more than one thing you know i could do that on the same click here so let's hit save and then let's test this so here's my list let's see building a no code twitter integration and building a no code twitter integration that might have been the one we tested with so let's let's try a different one uh mobile branding and we get mobile branding all right yeah so we we have success on our first uh on our first video the first requirement is get a list and link it up to the form done uh so that was right brad you gotta take a drink all right um so that that was a great adventure right there so we got to see we created two different pages already which is awesome we've you know registered a an event handler which passes some data from one of our pages to the next page and that that's an adventure let's let's keep rolling all right so i think what we want to do next is uh i want to i want to show how we can use this data resource pane and i'm going to cheat a little bit on this one because i did some pre-work uh maybe if i can find where i did it all right it's okay to cheat a little for some data data resource uh so for this one this is where i can say hey when my page loads i want to fetch some data on the page load and then i want to make that available to all of the components on the page um so this is a this is a cool thing where you know if i was doing this in service portal i would do this like in a component uh and then i would you know have to broadcast or emit an event uh so that my other or i would do this in a widget and then i might yeah i was like widget widget widget component it's gonna we've converted you fully you're now in the now experience saying components all right uh so i think what we need to do is we're going to say add and at some point um i need to configure a new data do i go new this is what i want there we go uh so i am going to configure a graphql data broker here [Music] sounds shaky i am going to go over to my other window i mean i'm gonna do this from memory and type really really quickly and i don't have this list sorted already that's a fail all right so what we're going to do is we're going to have to create this graphql query basically that i will then be able to call that from the page so i'm not a graphql wizard uh although i did write a pretty long graphql blog post uh i don't remember a lot of it so i am going that's okay that's part of the reason why we do the videos and write the vlogs is so we can go back and read them too all right so i have this query that i uh that i um created on a different page and we're just going to modify it so i want to get let's let's say this query gets um blogs uh so let's call it get blog posts uh and it this may need to be more generic than this um to where i i know i can do like multiple queries in here but what we're going to do is we're going to define a table so my table is artifact manager artifact and then i need to define an encoded query here and i think my encoded query is just going to be blog posts that are in the future uh so let's say and and dates are really where uh encoded queries through the list uh really shine so we'll say after today i would say after yesterday i'm gonna run that and then i'm gonna copy that query and i'm gonna paste it in right here all right so this is my query and then my results uh so this is where i can get back um where i see what i get back uh we have sys id we're getting two fields back okay yeah i could get more fields back than that uh is this is this actually title or is it a short description it is short description so let's grab sis id and short description so wait a minute this is and and i'm this might be something everybody already knows but do you guys run the developer blog off of servicenow we do yes we do okay that's kind of cool we do it doesn't use uh the blog does not use the now experience framework yet but the rest of the site is actually built using now experience framework yeah all right um i think this is all i need for this graphql query i'm going to hit submit and then in ui builder i should have actually haven't used ui builder though for it so it tells me hey your data source has changed outside of uab sure let's update the page i don't know if that worked but let's see uh artifact manager workspace all right we do have something in there we have my get blog posts uh and is that do i have to hit new where is that maybe you click it and highlight it and then click off that's a good i hate it when it has a hidden scroll bar oh all right something went wrong that's not good you didn't add the right data source uh email client quick messages ah that is that is right so let's try again that's no no that's still there on the left column you need to pick the artifact manager but it shows right here you no you are right brad is officially cut off no more imperial stouts stouts for you sir it is a big beer but unfortunately i think that's just uh [Laughter] so let's get rid of this guy how do i get rid of a i have no idea we're all we're all like that's a good question all right so hopefully that doesn't mess anything up the cool thing about this is i added the data source to my page and it it has gotten me data already so i can look at this uh json that the graphql query returned and have an idea of you know what i'm going to get and what i can do something with so you can get another a little bit of space to expand to the right brad so you can you can drag yeah that's probably about it robert says there's a trash can icon next to the add resources up at the top uh-huh oh so select it and then hit trash there we go oh it's a really weird trick comments thanks hang on no wait i'll take all the credit nice thank you all right okay so now we're getting some data uh we should do something with it so there are there are a couple of things we can do with it maybe we'll maybe we'll do more than one thing all right so we're getting this data uh if we look at the structure i've got data glide record query artifact manager artifact and then i have this results array i believe that is going to come in handy and then in that array i've got looks like two objects all right so i'm going to minimize that and let's put something at the top here so let's say so i'm going to do a couple of things let's say we're going to put a rich text up here oh rich text and i'm going to edit this and say how many blocks are in the future so it's a fun question this is what people want to see when they come to a portal i think uh so let's add something underneath it we could definitely make this look nicer um but what other text options do i have rich text stylize text text links let's let's see what stylized text is uh all right you can instantly add tags and css from here yeah so i think stylized text basically just gives me some sort of tag and then i put some text inside of it and then i can style it and so rich test is html yeah what's under styles styles is okay it's just plain css oh okay so it's it's adding css to that component uh specifically yep i was just wondering if this was redundant in the styles tag but this way to display the uh html tag it's much better all right yeah so it's not redundant because the text has got css but the component itself has css so like if you want the component to have padding for example versus the text to have padding i see so all of the components are going to have a style choice but only selected components would have like this one does a css in that first configuration page all right so we're going to use this uh dynamic data binding and we're going to try to access our uh our data resource that we defined is that what that's called the data generic data binding dynamic data binding i said that because i saw the the pop over oh it's a lot obvious a lot of these terms have changed on us uh the past few months so i was like what's our new name i believe i am using the correct ones um so which is good we wanna you know we wanna get it right all right so we're gonna use this uh data get blog post output and uh this is not what we're going to want uh but if i just save it let's see what let's see what shows up there undefined so it doesn't it doesn't like this i need to do something with this json all right i love defined because that means at least i'm getting something we've got data and then glide record query remember this is how our uh so i'm just hitting uh i'm hitting the dot artifact manager artifact and then results so this is where our array comes in so what i want is i think i just want to count the results that is a lot of undefineds hey and we got a number that even looks like the right number from your list i believe it is let's go back um nine nine that was my that was my list so we you know we just used this to get a number obviously uh there are some components uh what we have eight minutes left uh so there are some components that might take in uh an array and display some things based on the array so i could have passed that to i think maybe like a card component um so you know i've got a little a lot of options there um what we have eight minutes left do we want to try to do something else or do we i kind of wanted a card component now all right let's uh i've not i i have not tested that one but let's try it uh what's something so i know a card um we do have a question about adding a label to that number uh so this may be uh so one of the things we can do is i cannot remember where um so so we can um we can put components in a row we could also split this container into columns to to make it look a little nicer um so yeah we've got all of those things yeah so they're all three of these are in the same container right now yeah we could break them up into other containers and do some layouts with the different containers yeah so we could add a container and yeah um so did we see so ben ben is watching he says the styles tab is global css for that component so you can't select something specific i remember we were talking about that earlier all right so are we able to easily access parameters from the url to pass in a custom component so that was the url was when we looked at that artifact we have those page parameters yep and we can define those right there absolutely yeah and the required and optional ones and then what we did for this one was we uh took that page parameters as a page property and defined it here um so i don't know uh can can we add uh some text in front of that data i think we can right so you can put more than one thing in that field for the text right i'm not sure let's let's try it i'm not sure we can i think we may need two separate components to do this or a or a script right so we could have defined a script maybe yeah return yeah so we we definitely could do it in a script but i don't think well let's see there we go oh yeah so it doesn't like that okay maybe uh oh yeah i guess i i i don't think it's uh oh [Laughter] hey stop stop trying this um so one thing that i that we can do real quick uh that may be helpful is let's say this always helped me in like angular to be able to do this but so we're going to put a put this input box in and then i want to define a client state parameter and we'll call this input box and we'll say it's a string and initial value is going to be hello and i don't know if i have to be saving all the time like this but that's just what i do we like to save things in builders [Laughter] so for events uh let's say [Music] how did i do this before what are you trying to do i was just gonna show kind of how you can write a value to a page property and then use that somewhere because that's a fairly helpful thing to do and now that i'm thinking that's helpful so this is how we would do it we would update the client state parameter and i defined that input box parameter okay and it's got this value can i state input box that's our parameter payload value looks right so that should be the value that we're passing from the input yeah and then we can just say uh what was that no where's my did i miss my rich text i didn't let's do another stylized text underneath and we'll bind this to the state property it says hello so if we test this page [Music] it did not like it why didn't i like my page give it a hard refresh the zoom window's on the way uh it did not like something that i just did is angry at you do you needs no input box string hello that wasn't it maybe i got to uh value do i have to bind the value to it what if i mess with it here no ah it's not going to like that we'll uh we'll fix that so i'm i'm going to write this episode up in a blog post uh that's going to come out next week as kind of an intro to ui builder and uh i will uh i'll make sure we get that figured out before then but well that was pretty exciting brad i think i think it's a good wrapping up point there all right that's a lot of fun thank you stop the share why are we not in the right spots there we go all right now we're in the right spots well that was so much fun brad and i i'm so excited we got to show uh quebec thanks and we are going to show a lot there are a lot of features in quebec for developers ui builder is going to be one that we as brad said at the the start of the show we're going to be focusing uh you know some content on um you know every week for the next eight weeks on ui builder because there's just so much to learn there but there is a lot of other exciting things in quebec and we'll be highlighting those over the the coming weeks and that was just too much fun and i don't know how long i'm going to be able to hold in my favorite one um but i'm not going to talk about it right now but i did record it on the podcast today that's going to be released in about 10 days um with uh chuck tomasi's breakpoint podcast um we recorded that this morning and i talked about my favorite uh new thing that wasn't ui builder in quebec pretty extensively there so and we'll have it on the show in the future um anything else that we need to remind the folks before we get into raiding our beers i'll just throw out another reminder to the creatorcon call for speakers we're gonna put that in the show notes uh but if you have a good idea for a session um you know we're doing some you know hopefully shorter sessions uh hopefully some some good live sessions uh with some q a so you know anything you have if you have a friend you guys want to do one together uh that'd be great so look for that let's fill it up cool um i didn't mention it but uh if you haven't noticed previous shows that you know you'll you'll see that i use the uh pictures from the city uh that the family releases and so yesterday i had a switch to my quebec rotation of uh pictures and uh this one's not actually uh from uh me in quebec and paris uh other than this one it was the first time i didn't have pictures of that i took from those cities because i've never been to paris i've been to france but not paris um but quebec is so exciting i'm i'm just so excited i i can't contain it all um even though i am wearing an orlando shirt i can add a little q like right there to make it q um that was awesome brad thank you so much for showing us that and we'll see more of this in the future but for now tell us how was your beer sir this was a good beer this is that uh tin fitting barrel age stout i'm gonna give it a solid four five uh it was really good nice and gabby how was your delicious super reserved wine it was amazing it was amazing 11 out of 10 tastes just like grape juice that is that is awesome and my sour apple um uh edmonds host it was quite good this is probably the second best one i've had from them oh this is a 475. wow that's serious then it's serious business when i when i go above a four it's serious business that this is really good man they're they're five i'll you know i could never get my hands on any of them but i mean this is good uh so that that was really great um well uh thank you everyone for joining us uh live and for those of you watching in the future we appreciate you coming and visiting us here and any of our other information um at the developer site and the developer blog let us know what you think you can put comments here on this you can come see us on the developer blog and put comments there you visit us in slack at the s and dev slack we hit us in twitter we like to hear from you the developer especially those that are watching this show you you uh are close to our hearts uh and we hope that you're doing well and with that i hope everyone has a great day and for those with us right now have a great weekend bye everybody ready

Channel: ServiceNow Dev Program

Views: 11,785

Rating: 4.8410597 out of 5

Keywords:

Id: xEb6-E0Xk1w

Length: 65min 42sec (3942 seconds)

Published: Sat Jan 23 2021