[Music] well hello and welcome to tech now the web series for servicenow administrators developers and builders of all skill levels we have we have a wide variety of servicenow topics and very pleased to have a guest with us today we'll get to that in just a moment let's do our quick introductions and he'll bring up his as well my name is chuck tomasi senior developer evangelist at service now been here for a little over 10 years and a customer for a couple years before that lots of experience on the platform custom applications integrations you get the idea do some other videos that you may have watched thank you very much for that and a number of hobbies though happy to share with you some other time but i want to keep this tight so we can get right to our topic and oh i forgot to say the technorama band is back so this is panorama i'll be doing backing vocals and percussion so introducing the man on the loot craig's tab that's me let me tell you it takes years to practice to get good at the loot anyway so i'm the program manager of cloud labs and i handle all the infrastructure for our training and certification the department uh where when we spin up classes and you get to get your own instance for that class that's where my work comes in i specialize in the cloud automation i did orchestration and things of that nature before um i started getting into the cloud labs and i've been here for six years i've been here from since 2014 uh to now at least at least to today we'll see what happens tomorrow i'm just kidding hopefully i'll be here for a while but i've been i've enjoyed it i've been a co-host of tech now with chuck for um since 2016. so now on to mr duncan hey folks jeremy duncan here platform architect on our solution innovation team and also a guitar player on our band our tech now band so um last week i think i was the base you know at least that was the air base so uh so i've i've been on the servicenow platform since pre-aspen so about nine years now um started as a customer and was a customer for five years um and then uh worked for a partner for three and now here at servicenow so don't quite have the time that these other guys do at servicenow but definitely on the platform 16 years of it experience and been heading you know to knowledge since 2013 was a speaker at knowledge13 and then just a little personal information i was a volunteer police officer for the city of hendersonville where i live for seven years and then i enjoy camping with my wife and kids without further ado pass it over to today's guest speaker wolfgang thank you so hi i'm wolfgang or just wolf i'd normally play bass in a band but today i guess my role is going to be more like a lead singer for this group i've been a developer at servicenow for two years i've actually spent my entire career at servicenow working on the now experience ui framework is which is what i'm going to be presenting about today so i'm really excited about that um i've also presented at knowledge before this year on the same topic i encourage you to watch that video it's pretty compressed and condensed i'm going to get a chance to go into more detail here which i'm looking forward to um yeah so let's uh move it right along so wolfgang also has i got a i got to promote your other the you have the barely functional developer youtube channel right right i by the way we were planning to go into that in our upcoming podcast appearance right yes yes we will and uh i just want to promote if you're not watching that's there's some really good stuff i mean it seems fundamental at the beginning but you want to build a base to get that going so please go over to youtube and find this podcast i think we'll we'll have a link in here somewhere uh we also want to promote that we've got a link to that session you did at knowledge in the resource so if you're watching live on 24 go to the resource panel you can find a whole bunch of great information in there our agenda today we're going to give you a little bit of now experience background actually wolf is going to do that i'm going to sit quietly in the background learn along with the rest of you and then we'll get into building that component out we'll we'll do some q a along the way but most of it will be at the end and again if we don't get to your question it's not because we don't love you because we very much do we do want to manage our time appropriately rather than be here for six hours because i know you guys are gonna have a lot of great questions and answers we will answer that in the community and post that back you'll get an email with a link directly to your question and answer in the next couple of days so give us some time to do some post production on that and we'll get started on that uh want to make sure that you uh also know that we are still accepting um nominations i don't know if that's even more entries for tell us about your app go to the link you see on the bottom there bitly tell us about your app and we will donate 50 for every application you contribute you don't have to upload anything just tell us what you've built on the now platform and how it's benefited somebody real quick q a and up to 250 so submit up to five times if you want to do more that's great but you know our budget will run out of 250 dollars to help the unkovit 19 response and recovery fund thank you very much for all of you that have done that so far and quick reminder break point podcast launched earlier in august is now officially out we will have another episode a day after we record this tech now so encourage you to subscribe go to the bitly link there you see a theme here we use bitly a lot in this group bitly slash sn dash break dash point breakpoint is the developer podcast where we're going to be talking to people like wolfgang and dave slusher and lots of other internal people as well as external people we want to talk customers and even old-timers from servicenow get some great stories so audio only no demos no power points no update sets yes craigslist i was just listening to it this morning with brad tilton who's good all right thank you very much for everybody who subscribed to that quick reminder a lot of developers on here of also levels we want to remind you go over to developer.service.com to get your free personal developer instance you can try some of these things that we do on this podcast and webcast and and all the other properties as well totally free outside of your organization's development stack so if you experiment turn on a plug-in try something and if it works great you've got a proof of concept if it doesn't you move on and z boot it and start over and do it again like i do every six months or so like well that was fun but it's getting to be kind of messy it's your sandbox to play in all of the apis we've got are documented on developer.servicenow free learning plans that you can go and learn in the the community events uh if you want to find out what podcasts and webinars are coming up it's under connect events so there's our schedule of stuff that's coming up lots more blog i can't even tell you all the stuff that's on there because it's a great resource for developers whether you're just starting out or you've got lots of experience on another platform and you're new to servicenow or you've been around the block for a dozen years like i have i still use a lot of information off of developer.servicenow.com and invite you to as well so with that i'm going to turn it over to our lead singer we'll and bassist away all right thank you for that chuck uh we're going to be talking today about building now experience ui components and first of all let me just lay some groundwork by talking about what we mean when we say components so if you take a page something like workspace they're composed of these individual pieces that encapsulate functionality and the whole idea here is to build reusable chunks of ui that you can configure for different purposes so that you are able to iterate quickly and that you can like build larger applications faster and so we're going to be talking about how to build any of those little boxes that we have here in this diagram and let's see here so next let me introduce what we mean when we say the now experience i think some of you might be familiar with this but it's important to understand that there's some building blocks that we have here in order to make this dream a reality we have uh we have the now cli so this is the set of tools that we tried to scaffold out those components to build the components and then eventually deploy those components to your instance so that you can actually make use of them in your uis uh so the next piece is the one i'll be focusing mostly on which is the actual now experience ui framework this provides the building blocks for actually providing those components building up the functionality so that they can have the uis and they can talk to the apis where you need to get data in and out of your instance and then the last piece is known as the now experience ui builder and so this is the graphical drag and drop interface once you have those components on your instance you can add them to various pieces of your uis you can add them to landing pages which is what i'm going to be using for the demonstration here but there's other places you can use ui builder as well um and there's a whole world of technol a whole world of information about that um you can go to our developer site for more information about that i'm not going to be going real deep into the ui builder part of things next slide so here is how to get started you're going to need to start by having the now cli installed so i've already done that i'm not going to bore you with showing that installation process but it's available from public npm you just have to install it globally with the right command which we have here at the top next thing you're going to need to do is log into the instance that you're using the second command here this is something i've also already done for the demo instance we're using here you just give it the url your username and your password and you're good to go and that'll that'll apply in a couple different areas that i'll point out as i'm going through the demo so that'll proxy your local development to the same data the instance is using and that'll also deploy to that instance when you're ready to deploy your components the last step to get started is to create your local project so you can start actually building components and so for that there's a command where you just give it uh the name you want for the project and a description and then it'll build out a bunch of files i'll show you what those files look like in a minute and then we'll get building with it all right so i think so next i'm gonna go over just a little bit of the fundamentals by the way these slides are very similar to what i already covered in my theater session for knowledge so if i uh you know if you want to refer back to that there might be some details that get filled in by that or feel free to ask you know questions as we go along and we'll answer them for you so there's four fundamental building blocks that you need to understand in order to use the ui framework there's the state everything starts from each component having its own state that's encapsulated for it and that state is an immutable value if you're familiar with some other frameworks that make use of that so react redux there's a couple others out there that use that sort of pattern of state as a persistent immutable value which is used to derive the view which is the next step in the process the view is what we show to the users in the ui expressed through markup by the developer and then once the view is represented once the view is shown to the user the next step is the user interacts with that ui and once the user interacts with it this produces what we call actions in our framework and so actions are the eventing model of how we connect wire up basically when events happen to actions to do updates occurring basically and so those updates all the business logic occurs in what we refer to as action handlers and the action handlers is where the side effects occur in the application it's also where you communicate with the servers those types of things happen in action handlers another thing the action handlers can do is they can perform immutable state updates they can produce new values of state and then that's restarts this whole process over again by showing a new view users interacting and then actions occurring again okay um i'm gonna go forward to actually i think that's that's a good point for me to um talk about this this is this is something i'm going to mention a little bit later on when we get to the point of deploying but just for your edification ui builder has this interface where once you've configured the component with the right metadata we can add it to any landing page which is what i'm going to be demonstrating here so this is like just the last piece of fundamental knowledge which i'll be going over again but this is just a quick introduction to what you need to know about ui builder at this point and i think at that point we are ready to deploy it uh there's going to be a command one more command with the now cli that uh does the deploy by building the component putting all the metadata into your instance and then the last step is for you to drag and drop it into your actual landing page so i believe with that we're ready for the demo now so i'm going to start by giving a brief overview of what we're going to be building here today so this is going to be a knowledge-based article search i'm starting with a pre-filled in value here of email but i could put in something else it will send a request get back some articles give me the short sorry short description of them and then each one of them i can click on a button and i can open up and read the full details of that pretty straightforward but it at least shows a little bit of interactivity and also the fact that we're going to be making some api calls that sort of thing so just to motivate you like where we're headed towards with this okay now i'm going to switch to my editor and what i'm going to do is i'm going to stop that dev server that was running and i'm also going to go ahead and switch back to my starting point so what i have here is a scaffolded out component this was created through the now cli and i went ahead and added some dependencies that i'm going to need i'm going to go through the various files we started out with so basically the only change i've made to this since the now cli instantiating this component is i've added some dependencies those are for some of our experience components the components we provide out of the box that you can use so they'll look the same as the components we provide already for all the workspace experiences all the other experiences uh button card icon there's tons of them available so i went ahead and added those dependencies i added one more dependency which allows me to talk to the http servers and i installed all the dependencies but other than that this is stock this is what you get out of the box right now so you get um like like i just showed you you get the package json with some metadata pre-filled in for you there's a few other files you get you get a now cli.json this file you actually don't need to mess with for the most part unless you want to change what instance your proxy server is talking to when you're working locally so by default whatever you're logged into is what instance you'll be getting data from and uh so i've already logged into the instance i need so i don't need to change this file at all there's the now ui json file i'll be working with this later when we actually deploy to ui builder this is going to provide the metadata that i talked about a little bit ago for that all right and then so the next important things we have are folders we have an example folder and the example folder basically just creates an instance of our component that we right now i call it kb search and it added the vendor prefix in front of it for orb so this is just basically going to when i run my local development server this is going to instantiate an instance of the component and this here if i needed to pass it any properties or configure it in any way i could edit this page for the example but i'm going to leave that stock the next thing we have is we have the source folder i'm going to close this stuff so in our source folder we have an index file and this basically is this is going to be organized by the various components we have so it's created one scaffolding created one out of the box for my kb search component and it created an index file and so this here is your basic uh component that's sort of like hello world in a way we have the create custom element function here that came from our ui core library we have the rendering technology we're using which is a library called snapdom out of the box and we have a separate file for all of our sas css type stuff the next thing we have is the view that i talked about a little bit ago it takes in the state and it also takes in some functions that we can use for helpers like updating that state which i'll use in a little bit and then you just return the markup you want to see okay and then the last thing you do is you call that create custom element with the name of the tag you're going to use so if you remember from the example that's what you use here and then you just pass it a few configuration parameters like the view that we showed and the styles that are imported from the other file let me go ahead and start up the now cli oops so there's a command now cli develop and that's going to start my dev server locally you'll see that it's going to proxy to this demo instance that we're using here which is what i logged into earlier okay and so once it starts up i'm going to go ahead and open up the page here and you'll see it's pretty boring right now because i've taken it back to the place where there's no content so let me go ahead and plug in something here and i'm going to go ahead and do a little window management here all right and so there we have it we have a hello world um so what i'm going to do now is i'm going to start showing how to build just uh i'm going to start i'm going to build this in a few different phases i'm going to start from just building a very static page i'm going to add interactivity one step at a time and let me know if there's questions as we go along too just in case we have opportunities to answer them so the first thing i want to start from is that state that i mentioned the way you do the state in your component is you start by defining an initial state and so for this particular component what we're going to do is we're going to start with the state for that search text that was in the top box that i showed so i'm going to define search text i'm going to start with email just since i know it has a few results when we get to the point we're talking to the api okay so next step is i need to use that in my view so let me just start by showing if i reference it now what i'll get is x there okay so that's not real exciting yet i'm gonna go ahead and start putting in some more interesting markups so let's say i want a uh header and in my header i want to have an input right for that and then below that i want to use a component from the library of components we already shipped which is the now card now this would be the point where if i hadn't previously installed the component what i would do is i would look to our sorry our documentation on what components are available so hold on let me go to reference here so there's under developer.servicenow.com we have a component library and in this case i was looking for a card so it gives me some information about the card the api all that sort of stuff so if i hadn't already installed it this would be the point where i would add that dependency but i've already done that so i'm going to skip that step right now and jump right to using it all i have to do here is add an import for it and there we go that's the one i wanted so next step here is i want the value of my text input at the top to be from the search text and i want to show my search results below it i'm just going to put a placeholder oops wow autocomplete doesn't always help so much okay so it's going to take a little longer to build this time since i added new componentry to it but the incremental build should be a little faster out of that okay so now we have this static view where i have the value in my input at the top and then i'm going to show the results below it this isn't dynamic yet so let me go ahead and fix that by i i need to at some point i need to do an immutable update on the state search text here so the way i do that is by responding to an event from the view and in this case i want the input event to be what changes that so there's an event called on input and the way you define a handler for the event is it receives the event and what i'm going to do is i'm going to use this helper that i helped that got filled in for me to update the state and this works similar to if you're familiar with react how set state works within that world what you do is you pass it an object and within that object you provide all the keys to the state that you want to be updated in the next value for state so in this case i want search text to become the event target target value so now when i save that you change the value and now it'll reflect in the bottom there so that's a good start in terms of functionality but this is not looking amazing so i'm going to go ahead and throw in some sass here sort of clean that up a little bit all right there we go so now we got it centered we got the display looking like that okay so one more thing i want to do just a finishing touch to make this look a little nicer is i want to add that little icon for making it clear this is for search at the top there so i'm just going to add a component called now icon i'm going to give it the icon for that magnifying glass look and now i'm just going to add the i the icon import save that and there it go cool uh so this is my first checkpoint i was going to pause briefly and see if there's any questions or anything we want to go over before i move on to the next step which is going to be adding the capability to actually do the searching and querying the data and all that sort of thing uh well if we've got a couple that are forward-looking i don't know how much you can divulge about our future plans but maybe in a general sense uh things like do we have plans to build this on platform rather than having to install npm et cetera the case that was given was i've got a chromebook i can't do a whole lot of the component building off platform so are there plans to integrate this or will it always be a separate process um what i can say is that the the ui builder features the drag and drop ones that allow you to build from components that already exist are it's going to get more and more sophisticated over time and you'll be able to do more and more advanced things with it i can't speak to any specific guidance on what features are coming and when though okay no that's fair that's fair uh let's see the other one that i've got is how do we know what events are available aha that is well so that that's one that um i would recommend going to uh mbn because one one thing one thing we didn't mention when we talked a little bit about i think we haven't talked too much about how the evolution of this happened like the background behind how we got to the point where we built a framework in the first place and one of the reasons that we ended up doing that i don't know if you want to provide some of the background chuck but um sure was to have control over the apis that we're exposing to our users and as much as possible we want to use standard web apis and so in this case there's standard browser events that are already uh provided by the the various standards that browsers implement and so the names of what you can do on dash are all documented in those web standards you want to beautiful fill in any more yeah a little historical context for you the original ui was built around jelly it was an apache framework that was template based we used it for the forms and lists that most of you see in the standard ui when you log in and you you're going down the side menu bar and you see a form and a list that's all rendered with jelly has been for the last 15 years however jelly became a little old for technology it was hard to find skill set for employees you couldn't just you know walk into any you know resource agency and say i need a jelly programmer they're like what uh so that's when along about 2013-14 we set our vision on a newer technology angularjs has just come out with from google and built the service portal technology around that many of you are familiar with service portal and angularjs and i just did a video on that on last thursday it's been wildly popular and the however couple of years down the road google said nah we're going to drop that so we're left holding the bag on another technology but all right we fool me twice shame on me kind of thing what can we do to insulate our customers so they don't have to keep re-implementing a portal re-implementing the user interface so we came up with this middle layer of web components called now experience and that way if the underlying technology changes you're not aware of it you're protected against that technical debt the components you build today will in all likelihood still be valid and you can find a skill set for them 10 years from now it's not proprietary because it's based on those web standards and as you just saw wolf pointing out on the mdn the standard events from the browser all this good stuff that protects you against the technical debt so that's the vision for the future is let's stop reinventing and reacting no pun intended to every new technology comes out every two years we're going hey we should be using this and well what about version 20 of that slowed out because it wouldn't make sense for us as an organization to try and implement all of that and you to try and re-implement a lot of that and the standards are a wonderful thing we just gotta hang on to them for a little longer than a few years so hopefully that sets the tone awesome uh anything else we want to go over i should move on to the next step let's let's go on to the next step we'll save some other questions thanks all right cool so the first thing i want to do as part of the next step is i want to start showing how to use multiple components together and how they communicate with each other so for this what i'm going to go ahead and do is make it a little bit easier myself i'm going to copy and paste the same component here and i'm going to rename this from this name to search results okay and i'm going to do a little bit of cleanup in this file here so i'm not gonna need the contents of this right now and i'm gonna change the name of the tag okay so in order to do my little refactor what i want to do is i basically want to move this placeholder from my results from in the same component down into here let's do that okay and so now i don't need that state there anymore hey don't you need a bracket around that return which were trends that went over and over don't you need prints around it the the now cards uh you actually don't in this case okay all right you can't you can it's optional but it's not required if you want i can add them for you though man i thought i had you on something i will actually my formatter removes them if i had them so apparently it decided that they don't need to be there i anyway anyway so the next thing i want to do is i need to import that from inside here search results and i'm going to use that tag in my first component put it right below the header here okay and when i save that what i should see is yeah so it kind of worked but kind of not at the same time right uh get this weird look here uh so there's a couple reasons for that so first of all i i'm not passing the search text that i need the other thing is that my my sas is kind of let me remove that until i do that okay so now it at least looks similar but in order to make it functionally more equivalent i need to get the search text it's not part of the state here anymore so i need to provide it from the first component to the second component the way that we pass data is what's called properties so in order to do that the first thing i need to do is define configuration for properties and the way properties works is each of the keys in here is the name of a property and then the value is going to be a config object which i'll show you in a moment we are going to have search text as a property and inside here we can do a couple different things i'm going to specify a default value let's see here give it some value here and then the way we use properties within the view is they're actually included as part of state i used to state that properties instead of state dot search now because i've defined a default for this property i'm going to get the value something here if i want to provide the value to the component instead of using the default value the way i do that is i go back to this component here and i pass it in to the tag right here so i give search text oops text equals then i get that value from state search text like i had been using when i was just showing some static text there so this is now functionally equivalent but using two different components instead of one so now what i can do is i can focus on that search results component leave the first one alone and now i can start filling in some actual functionality here let me get rid of that all right so first thing i need to do here is i'm going to provide the state that i'm going to need two pieces of state i'm going to want for now so there's that loading indicator that you might have remembered i show as the data is coming in from the server so i'm going to have a show loading and it's going to initially be loading and then the other piece of state i'm going to need is what my current search results are that i fetch so i'm going to add search results and i'm going to default that to an empty array okay and so now i'm going to replace this placeholder content here with something that oops something that actually uses that state okay so what i've got here is oh one more thing i need to do is in my view you'll see that in addition to the card i'm using a loader component so i need to import that okay so what should happen now is because it starts out loading it should be forever loading because i'm never changing it but what i'm going to do in the view is if it is loading i'm going to show that loader if it's not i'm going to show a list of results based on the number of results so if there's um if there are any results if the length is greater than zero then i'll show each of them on a new list item if not i'll show no matches found so let me show you those different states right now so if i had uh not loading but i have my search results is empty array i'll see this no match is found and if i had results in here what it's going to do with each of the results is it's going to show you the short description so let me fake that right now by having a short description right there and so this should show that cool and then if i had maybe more than one just to show it and what we're gonna get here is both of these in the list okay so that works but it doesn't look the way i want it to so this is where i'm going to go back to the sas plug in just a little bit of cleanup on that make the list look the way i wanted to cool that's good enough for that purpose okay so now let me go back to no search results good and let me go back to start out loading cool so now the state looks like it's good to go the view is good to go the only thing i'm missing is the actual fetching of data so in order to do that there's a couple things i'm going to need i'm going to add an import for there's a special export that's provided by the core and this provides some actions that we can use that are part of the life cycle of the component and i'll be hooking into those in order to do the fetching logic and then the last thing i'm going to need to add is i'm going to need that library that we use in order to talk to the hdp all right and for that i'm going to import a function called create http effect okay so the next step here is i'm going to start filling in how to handle those actions that i'm going to need to handle for that in my component config i add a property called act handlers okay and i'm going to save a little bit of typing with a snippet here but i'm going to go carefully over everything that's happening in it so let me plug this in first so the first action handler i'm going to add is i'm going to use that action types that i imported from the library and i'm going to say when your component initially loads and that life cycle is called component connected there's a bunch of other ones that are all part of our documentation um for there's a disc there's a corresponding disconnect when the component unmounts as well that's going to use a helper function that i haven't defined yet but i'll get to in a second and that that helper function is going to create an action that will contain a data based on the state of my component to make the request i want to make okay and that's going to be reusable because i'm going to actually that later on for another purpose the next action is a custom one i defined and this one is going to actually make the http call so it's using the helper i imported from the library create http effect so the first thing i give that is the url i want to talk to and that can have path params for placeholders so i'm using the table api here and i tell it that i'm going to provide a path parameter for which table to communicate to i also say that i'm going to provide a query parameter which i'm going to use to add the query and that's going to give me just the results i want the next action i give is when the request starts there's another action you can hook into if you want to do any updates then which i will and then the last one i'm using is on completion when the when the request finishes what will happen is another action will get dispatched and this is generally how all the wiring of different things happens together in the ui framework is that you have these chunks where actions feed into them and then actions get dispatched back out of them if you want to hook into other events that happen later on and so for each of those we make small state updates for the start we make sure to always show the loading indicator using our helper for the update state immutable updates and when we get the results fetched this is where we take the the data from the action the payload and we stick that into search results and then we clear or we you know set the loading to no longer loading so there's one more thing i need in order for this to work which is that helper the request search results that i mentioned plug that in here real quick and so what this is going to do is it's going to look to make sure that we have search text provided to our component and if we do it's going to dispatch that action that's going to actually kick off the http request and it's going to provide some data about okay i want to get knowledge articles from the kb knowledge table and i want the short description to be like the text that i have for my search text okay so when i save that and this reloads what will happen is we'll get it'll load and it'll so it'll use the initial value of that property for email but what you'll notice here is this doesn't update um and the reason why is because we're only making that request initially when the component connects and so what i'm going to do now is i'm going to add one more line so that it will update as your values update so what i'm going to do here is i'm going to duplicate that and i'm going to add one more life cycle here so in addition to component connected we have a we have a component property changed oops and my syntax is off because i created a character there so what i should be able to do here now is i should be able to type in a different value so you might have noticed that it worked but something weird happened as i was typing it was making multiple queries and showing the updates multiple times so this is where something helpful to add something like a d-bounce to it and that can be any kind really i'm going to use the one from low dash but you know there's plenty of other libraries i can handle this sort of thing and what i'm going to do in order to use something like a d bounce is i'm going to wrap this function here d bounce and i'm going to give it a wait time of let's say 250 milliseconds that feels pretty good when you're typing i think so what will happen now is it won't start fetching until i've finished typing for at least a quarter of a second okay so that was the next step i was going to take in this and i covered a lot of things here so i'm going to take a brief pause and see if there's any questions i should cover oh yeah we got tons of questions some were pretty deep cuts too um yeah give me a simple one can we deploy react based component of service now um that uh yeah that's um i think that i think that that that's one that um i might have to get back on i know like i i know that there's there's like technical ways to make it happen but whether they are allowed ways is what i can't answer right now sure well that kind of gets into um another question how can we deploy the component from one instance to another i don't know if that functionality currently exists i i'd have and i know a lot of things are being worked on i don't want to speak to what's in the pipeline at this point um but right now the workflow i'm going to be going over is deploying locally to an instance okay and would you have to use the now cli to deploy that into subprime as well as prod or is it captured by some update that that you or or scope that you could put in repo how would you get that too from subprime effectively okay yeah so i should say that each of these components is going to be deployed as a scoped app when i get to that step and so i haven't tested this but i think if there's an existing process for migrating those between instances that should work but i don't want to speak out of turn or with things i haven't tested yet okay is there a defined list of servicenow supported libraries uh supported means what in this case well you just pulled in the one from lowdash correct to do the debounce right yeah i mean so the the tools that i'm using here will be able to bundle any library so i mean it really just comes down to what you're legally allowed to include and will work in the environment and by work i mean play you know because the only caveats i would say is that there are some older libraries that weren't built with the newest web standards in mind and aren't always compatible with them with like web components and shadow dom are the two main technologies that um not every library is built to accommodate necessarily yeah yeah so i would say generally have to be newer libraries for it to work okay all right did you have any more demo to finish up yeah i did have one one more piece here if we got time for it go for it all right cool so the last piece was to be able to show the um details or the the you know the i guess the the full values of each of them so for that what i'm going to do is i'm going to add one more piece of state which is to be able to have a selected result and that's going to initially be null and the next updates are going to be in the view so what i'm going to do here is i'm going to add so if there is a selected result i'm going to use another component called now modal and it's going to show another component called now rich text i'm basically just plugging up different components that are already provided out of the box which is nice do all this and let me import those modal and next okay and then the last thing i need is i need something to open up these or select the search result and so what i'm going to do is i'm going to add in each of the list items for the search results add a little button before each of them that has that info icon and that's going to set the search res the selected result state that i added earlier so i just need to add an import for oh i guess the button does actually come along with one of the other ones because they contain buttons but i'm going to be a good citizen and i'm going to import it separately just so i get proper dependency management here all right and so what i should see now is when i click on one of these i get the full details of it and this is a responsive ui so if i were to make the browser bigger instead of taking over the full screen the modal is looks like a regular modal that you might be used to here okay so that's all the functionality the next piece i want to show is how do we get this into ui builder and on used on an instance so for that what i'm going to do is one more update and close that and oh i'm showing showing showing ahead already let me do the local update first okay so the last piece i need for that is the metadata that we talked about earlier in my now ui json i have a placeholder for my component already here and it has an empty inner components but what i want to add is a couple pieces of data here so there's a ui builder section and this tells us like where it's allowed to be used what label to show what icon to show when we use it in ui builder that sort of stuff and then some metadata about what other components we need to use with this so i'm going to add that there and the last step to get it into ui builder is to do now cli and that got messed up again hold on sorry i think it's because i resized all this stuff here open this all right so now i'm going to do a deploy from the now cli so what this is going to do is it's going to deploy to that same instance that i already logged in earlier for the demo the first step is it's going to make a build of the component all the resources that it's going to need and then once that build finishes it's going to start adding all that metadata it's going to create a scope on my instance for it it's going to add resources that are needed for ui builder and it was successful so let me show you how i use that now uh let's see here so first off this is uh the instance that i just deployed to i just want to start by showing you uh the home page landing page for asian workspace is basically out of the box now i'm going to open up this is what ui builder looks like and i don't have time to go over all the features of it but basically you've got your landing pages here on the left to select you've got your canvas for dragging components into you'll notice that when i go to add component my search is available there now so let me go ahead and create a new page for it and i'll call it kb search just to be exciting here oops not cancel sorry all right create and let's add it so what i do is i just literally drag it drop it here and then it gives me a preview of what this will look like when it's actually running so i'm just going to activate it like so go back to the home page and refresh and if everything worked out we should see our component awesome so i can use it just like i'd be using in the demo i mean it looks a little bit different in here um in the environment that it's running in but other other than a couple of style changes because of the difference between how it gets deployed and how it gets actually rendered you've got all the same functionality that you built locally and that's it for my demo now i can answer whatever questions we have in the little bit of time we have left so from a generalization standpoint disaster we do have plans to deploy this further than landing pages there's more places in the workspace where you'll be with components we've got you'd be able to build an entire portal this way in the not too distant future so look forward to a lot more on the road map this is our strategic ui direction so i'm that's i thank you for demystifying a lot of the nuances in there that was that was huge i've already got requests in the q a for where will this be posted as a video i want to go re-watch it this is going to get a lot of life after this looking forward yeah actually i was going to stop screen sharing but the one last thing i wanted to mention that we should probably put in the resources is this is heavily based off of an existing example that's already on our public github which i can show real quick right now so we have this repo that has some now experienced component examples and so what i'm showing is uh very similar to the agent assist example for showing knowledge based articles it's just been slightly tweaked and modified to make it easier to show the building of it but the code for what i showed is very similar to that example that was the last thing i wanted to share on that um should i stop sharing or did you want me to keep that going i think we gotta we can run running up against the clock and i don't want to let's see if we can get one more in here we asked about that um how do we find the ui how do we find the ui builder in our developer instance yes so if well so i can i can show you how to open landing pages in ui builder there's yeah there's all those other places that uh we talked about but on your instance if you if you look up one of the landing pages then there is an option to open it in ui builder in terms of how to access the other parts of it i would have to defer to someone who's more familiar with ui builder all right good stuff do you want me to demo right there for that no we should be good with that we've got oops i think i switched our slide so take us to the takeaways all right there we go okay cool yeah so hopefully i've shown that it's you know rel there was no real magic other than the the npm install commands that i ran in order to get started with building components and deploying them into workspace so i want to you know make it clear that like there's no real secret sauce going on here we're using the same tools um that a lot of other front-end developer communities are already familiar with so i hope you take advantage of that and get started um i also want to you know encourage you to learn the fundamentals of the framework and for that i would encourage you to go to developer servicenow.com and read the rest of the documentation we have on the ui framework we've been improving that a lot and putting a lot of our uh you know like fundamentals philosophy those sorts of things that you should understand because i only was able to cover a small portion of it in the time i had today and yeah that's that's my last takeaway already basically is that go go to the go to the developer site for all that you know information that i wasn't able to provide excellent thank you again well that was awesome information um quick promo the uh i'm definitely going to go watch it again because i was manning questions and answers in the background and want to get more familiar with that but next month tech now we'll be doing a way to make your upgrades even easier so simplify your next upgrade we've got another special guest jiven john cower will be joining us and she is on the product team that's been working on the paris upgrade center you saw a little bit of this if you watched live coding happy hour a couple of weeks ago where andrew went through the post upgrade process on one of our sub prod instances we're going to be going in even deeper with that discussion so you can already register for that our crack team of campaign people making links and cool cover art like this is is helping us out this is a team effort it's not just something that you know craig and jeremy and i think of last night and go hey let's talk about this that was that was andrew and me in 2013. now there's actually a thought process that goes on behind that so invite you to go and register for that as soon as possible put that on your calendar and we will see you september 15th to talk about upgrades again a lot of information was presented here and you can find more of it at docs and developer and community for your questions we've been doing this for a long time we're at episode 78 it's hard to believe and craig's been around for about 60 of those so i think you're my longest running co-host now craig thanks oh good hey by the way i got some news for i'm just kidding [Laughter] i'll be here next time there were a lot of great questions in there and some of these would be great community questions and we will be answering them offline getting them posted back to the community and you'll get a message with how to find that link with the answer in a couple of days give us just a couple days answer the questions and get the video processed and we'll have that on youtube as well so that takes us about to the top of the hour thank you very much for joining us and uh we look forward to talking to you again wolf in a few minutes and we'll have that on the breakpoint podcast in a couple of weeks so it's a busy time around here and happy to share thank you wolf thank you jeremy and thank you craig for joining us today and the entire team behind the scenes that helps put this together my name is chuck tomasi and i will be talking to you again real soon about lots of other cool servicenow technical stuff so till then everybody take care be safe and be kind to each other bye you