[Music] you the hour for this fantastic May 13 20 20 in a special edition here for creator con I'm Andrew Barnes and let me go ahead and introduce the other host here today we'll start with Brad hey everybody Brad Tilton I'm a developer advocate here at the developer programs service now I've been doing ServiceNow development work for a while now and I'm excited to be a part of creator con through life code awesome thanks Brad let's go Andrew hey my name is Andrew obrador I am a developer MVP for this year and I've been working on the platform for about four years I work for an insurance company in Australia in Brisbane awesome and Jared hey good morning or afternoon wherever you're watching this is Jared Montz focus on platform internals integrations and security with finite partners awesome and I'm Andrew Barnes developer advocate at ServiceNow team with Brad here and I have been on the platform for over five years specialize in large-scale development teams managing their work efforts custom integrations and do a lot of stuff you know around flow designer and custom apps so this is live code happy hour what does that mean so this show is aired every Friday typically in 4:30 to 5:30 Eastern we typically show this on youtube and twitch will share the links to that so if you're watching in the knowledge digital experience platform I will share those there for you so you can join us our next show will be this Friday so two days from now and we don't do this is not a polished demo we completely do unscripted service now development work live so we don't pre-baked things we don't pull rabbits out of our hats we haven't practiced this stuff we haven't done it before we take a a real problem that we're having and we as a group says one of us will share their screen and we'll start solving that problem we'll run into weird and unusual errors and problems just as any other developer does and what we're trying to show is how even professional experience ServiceNow developers run into problems unexpected problems and expected problems and how they solve them so what are we doing today Brad well that's a great question I think we're gonna do the first part of a two-part two-part requirement today where we try to grab some Co vid data we're gonna grab it and pull it into service now and then the next part of it is going to be showing that data in a component awesome and so what's a component that's a great question a component is it's a building block of our new now experience UI framework that came out in Orlando the framework is made out of UI components that you can develop locally on your machine and then deploy into your instance there are a number of components that are available in Orlando by default and then you can create your own components so it's a it's a way to create your own UI awesome so that's what we're gonna get to today and typically on our show we also if it's a happy hour show so at least at least for us on that the East Coast in the US it's time and we typically do this on Fridays so this is how we get into their weekend as we do some drinking occasionally and ServiceNow development yeah you know especially Andrew he's just waking up he probably won't be drinking beverage with us but we all introduce what we're drinking sometimes that's water it doesn't matter what you're drinking just join in with us and share on there is a drink for crater cond this week tell us what that is before we introduce ours Brad well in fact that is what yours is so you can do it first I am drinking that this is the I have a weird glass for mine I think we're calling it the something dump the core dump that's alright thanks it is gin lime juice and simple syrup and I think you can find the recipe probably all over our social channels awesome and back in the same order for everyone else so Andrew you were right I am not drinking right now I had a few last night in yeah honor of the show this morning but I have a triple espresso iced coffee it's a local brand yeah that's that's what I'm drinking Jared very good I I took the official drink as inspiration I'm doing my own lime sparkling water this afternoon spindrift spindrift just lime awesome and I've got a blueberry boyfriend and it's a very fun graphic on this thing I've never had this before and so at the end of the show we hopefully are victorious and we would rate our beers and they they get ratings boosts for when we do well and they get sadness ratings when we don't so you know the ratings aren't always clearly tied to how good the beverage of choice is I see folks are sharing what they're joining in with us we've got black tea I saw de sekiz I saw some other things in the chat go ahead and share that with us it doesn't matter what you're doing just jor and let us know what you have so we are you ready to share Brad or you do we want to talk about the problem set a little bit more uh yeah let's talk about the problem a little more alright so we we have a desire on our landing page for our workspace to add in some information and when we looked we noticed that we didn't really have a way to consume the data that we wanted so we need to build a new component for that and so if you're not familiar in Orlando ServiceNow has released the now experience design system and part of that is component building and if you watch the creator con keynote that was highlighted on there Chris Hass showed how to do that and we are going to build an API to provide data to our component so we're not going to start with our component we're going to start with the consumption of some exterior api's and we're going to surface that inside the platform we kicked around some ideas on how to do that today and we're gonna dive in with what we think but will also adjust on the fly because again this is completely unscripted so if it looks like this is unpolished and unfinished it's because it is and that's the point of it so if you're looking for a beautiful perfect demo on how to do this this is not for you but if you want to learn how to get through a situation like that this is the place for you so to in order to provide that component data I think we talked about that we would use a scripted REST API and so we'll start with that and then we'll reach out to our exterior system and that's going to be a REST API that we're hitting so we're where we talked about will probably use flow designers action builder for that because it's a nice way to get up to integrations really fast and any questions about that plan did y'all see any caveats there that we need to worry about not without knowing more just the usual integration things of what kind of authentication do we have to deal with and tokens and status codes and usual things but now let's jump in all right well let's start the screen share then Brad alright I will go ahead and share this screen I got some cherry coke zeros out there and Starbucks and water and whiskey and oh thanks for sharing with us all right so hopefully you guys can see my screen all right I can see it on the YouTube so we're I'm gonna start on the developers on the developer portal here we have a lot of things on the developer portal this is where you can get an instance to play around with and if you have not visited the site yet you definitely should but if we if when we said things about components you were interested and didn't know anything about that yet you can learn more about components by clicking on the reference menu and clicking into now experience UI framework under api's we also have a library available but if you want to learn more about components you can click into that we're going to talk more about components on Friday but for today we're going to be really focused on building our integration and the reason you know we're gonna hopefully build a scripted REST API that calls a flow designer action that's gonna consume an external REST API and you may be asking I don't we just consume that external REST API from our component and it's because we want to massage the data a little bit before we give it to our component so we don't have to want to have to do all of that from within the component when ServiceNow provides flow designer integration of and our actions action designer for doing that sort of thing so where do we want to start with the action do we want to look at the the external API first where do you guys think we should start good to know what we're looking at I'd like to have a look at the API let's look at the API so I should I should grab that API sorry my mystery address no no that's where I wanted to start and then I realized that I don't have the API link handy but I believe this is it that is the endpoint that we looked at using today absolutely all right so I think we are going to consume this API and we're gonna pull in some Co vid related data into our instance so this is what we're gonna end up hitting all right yeah so let's start let's start should we start with our action or our scripted REST API let's start with this script address ap oh well let's start with the action actually let's start at the action that's just go in order of the data there we go the action will let us grab the data and then we can generate some code to use in our scripted REST API so what's the name of this is it's a weird name I'm just gonna call it Cova data I did create a an application earlier so we could just do all of this in a scoped application so go ahead and create this action you know in our action designer here we've got inputs and outputs and then I can I can hit the plus sign and we've got all of these different steps that we can use and I believe we're gonna use our rest step all right and then so we've got our rest up going here Andrew what should we do now Oh which Andrew am I talking to yeah either of you where should we go so in that external API I noticed earlier that they have a open API or swagger file as it used to be called under the API console I believe nope documentation maybe so I sent you yeah I sent you the swagger so I think you already have that don't don't let that I do already have it but this is this is what it looks like so I'm gonna grab the one that you had already sent me yeah hell how important is the difference between the API spec 2.0 and 3.0 and we're playing with this action I don't know I haven't tried it with the older so we have some chats that say maybe zoom out should we yeah we're we're having a little some zoomed in pretty fun I'm gonna zoom out one time and we'll see if that gets a little all right it's a it's the broadcast not the so you have opened flow designer and we're in the creating a new action and flow designer I'll talk through a little of it so that maybe we can give people enough context until we can get the aspect right and in action designer we added a step a rest step in with our rest steps in flow designer we can build integrations with external systems yeah zooming it like that isn't gonna be helpful bread we got a little more room so but if the external system has open API you can import that here under the request details area so instead of manually setting up our resource path and base URL etc we can use open api to import an open API so very cool feature I have the I have the API dump it looks like here I have not done an open API before what do I do the button trick that import method at the top at the top you're gonna want to paste it in there we go alright this looks promising let's click import see what happens here we are thinking you people in scan are saying we've had a stream crash oh cool yeah both YouTube and the event page say that they've lost live are we back orell says we're back maybe yep I think we should be on YouTube at least all right all right lots of confirmation that we are back so to recap we have used the open API spec to paste into the API source we picked this today cases API operation and what it did for us was gave us some query parameters and it up Auto populated this input variable which is like the coolest part of this to me because I always forget to create and put an output variables and then run into that at some point so we have country I wonder if we change this to maybe active cases as the same input variable here maybe the open API did break OBS will we'll see and then we've got the headers there so whoa what just happened so I'm going to save this and what what kind of what do we think it's wanting when it comes to country here if we try to test this Australia Australia yeah but I'll be looking for like a two character or three character ISO code or no justification type in USA USA I'm sure I'm sure yes looking for well let's see what happens if we test it it's been executed it did not like what we did there did you still have a connection alias picked I don't think we did actually yeah up the top use connection alias yep yeah and in the open AP aspect it gave us the do we still need to populate the base URL yeah I think it it's populated the resource path you can see down the bottom but it has he has the base you are okay so the base URL would be what do we think plug in one of those API yeah expedite though like the bottom one the fourth one run versioned HTTP let's try that with their default version and then do we need a credential alias no I don't think so alright so what is a connections and credentials alias while you while you run in that test what what do you find gentleman knows the answer to that right mm-hmm I quite like them they're the ability for you to set up different connections and credentials based on the environment that your flow is running in so you can set up a dev environment credential in your dev environment for ServiceNow and set up a production credential in your production instance and then you can test and test in dev and when you deploy it it will use the production credential which is yeah a really awesome feature of flow designer and integration hub nice I concur doctor well speaking of credentials looks like that is our issue with this we got an error minutes credentials for o1 authentications required yeah well with credentials i I I had thought that this endpoint didn't require credentials but clearly clearly I was wrong the most fun let's go see how what kind of office system requires all right well here we go about some document you require an access token to try the API please login and subscribe to the API okay well that was a step that I hadn't expected apologize a lot of coding happy yeah I thought I verified that this one didn't didn't require that all right well we've got some choices here we're still early enough to make these choices which is do we want to get an account here and deal with the access tokens or do we want to build the rest of the framework that we were going to do Andrew do you want to create an account and see if you can get us an access token and then at the same time we'll go ahead and set up the scripted REST API absolutely let's do it so I will go and see if I can get that done all right we're going to multitask here yeah we're multitasking so we're delegating right we're dividing and conquering well it's that ready so I think what we are wanting to do with this is we're gonna get some sort of data back in this rest step and then we'll probably pry parse it somehow but maybe for now we add a script step and we can just create an output and then we can take that output throw it in a scripted rest API or call this from a scripted REST API what what kind of outputs do we want from this rest step so let's let's look again at what we have available here I can't I don't remember exactly what our requirement is for getting Cova data so we've got what looks like about eight different possibilities here active cases maybe today's I think we wanted some some data around today's cases so maybe where we can grab you know how many cases our country has today and here we will just say outputs that today cases equals some number what do you guys think yeah that sounds good so we're going to pass in the input and output variables and just just for completions sake so from the rest step we'll want the response body into this script and then from the script will want the today cases so we haven't actually created those variables that's right yeah so I don't quite know what we get what we're getting out of that rest step and well every send to our just returns the response body so the script step that we're looking at will have to pass that response body all right so let's do that so we'll say let's just do something like then we have to that's fine Wow typing on live code today is it's been kind of rough so let's save and then all right we're gonna do some pasting value all right no capital are on that one yeah I was thinking label in the name mm-hmm so let's grab the response body from the rest step there we go so we are setting the input variable for this action to the response body from our rest step and then we're gonna grab it from right here and because I have learned this from Andrew I'm gonna copy paste and we will set that and then we're going to do something in between here but we will set some outputs outputs to today cases and then we also need to set that here this is where I wanted to make a friendly name I can't I just can't alright we want to make this a number I think we probably do can we not use camel case in our it looks like it highly recommends you use a lower case all right well I'm gonna use an underscore then okay so we'll save that I save a lot because when you don't save a lot you lose things and maybe I have lost some things before so we're going to put the output of our action is going to be today's cases and it's gonna be an integer it Brad could you get me could you go over to cadet connections and credentials and get me the callback URL for your instance all right so it's basically gonna be here instance name and then it's like redirects underscore OAuth something like that so actually the best place to go on yeah go to an existing one under not application registries I think that's the right place yeah for OAuth I don't think that's gonna give you so you want the and what the redirect URL and if you put that in the chat for me some anywhere you can get it to me I can slack it to you thank you sir now let's resume where you were at now finish getting our credentials okay so are we did we finish this do we need to map this script step to the outputs or did we do that already I think we need to be yeah there we go hey that looks great all right so we know that this is not going to work so we should not test it what we want to do is we want to kick it off from a scripted REST API didn't we manually set a number so it might work I don't think it'll authenticate the script step will work we're going around yeah so yeah I don't think it's gonna run we should be able to generate I know theoretically that we can generate some code that we can then use but I don't remember exactly yeah it's right there but you have to be in a published state to get to it um we can do that and so we're gonna be calling the action direct we're not calling a flow or is that flow or any other any other thing yeah I think we want to just call the action I'm not sure we need a flow for this so it's gonna give us some code to call the action we think we are gonna want to call it synchronously so I don't think we're enough to change this much but let's let's click the button I copied it already but let's click the button so we're gonna go and create a scripted rest API or a rappy if we want to say a shorthand so we're creating the scripted rest rest api because our components are going to communicate with ServiceNow through an HTTP effect and so they're gonna need a scripted REST API so I'm not very creative so let's just say we're gonna call this our kovat endpoint we don't need to give it a protection policy all right so it has been a little while since I have written a script addressed API but I think we're on the right track so what were we getting we're getting country totals today's today's cases will say today cases I'm gonna save that and then this is where we want to put the the code that we're a hit [Music] inputs country so we're going so we will probably want to use the request yes input ticket yeah so we say request country we'll have to define that yeah do we want up down here ask this in with a query string parameter or in the header or in the URL a good question what you guys think they skip the rest api's we can do just about anything and because we're controlling the the client side and the server side it's extra flexible how's that component gonna look are we going to have like a drop-down that we can pick the country that we want to check or we're just going to get them all that's and that's a good that's a good question I I think we will send a country from the component whether we I mean drop-down sounds nice but I think we probably want to want to give the component a way to specify a country right sure I mean my my first one is always the request body let's let's save here alright I think down the very bottom the related list query parameter associations yeah so these these get defined at the higher level across the whole script addressed API and you can reuse them in any or all of your various methods there we go so we go back and define one of these yeah and those I think are largely just so that the scripted REST API Explorer looks really good when you're in there using it you can do it completely in code - if you don't need to use that REST API Explorer feature I think most of our endpoints will ask for what country we're looking at so maybe it is a good idea to set up one of those alright alright I'm gonna go back to the beginning here and we'll define our query parameter I don't know what an example value is I'm backing up with that there should we have a quick look at the API and work out what um format it's expecting that's probably a good idea my money is on two character country code so today cases so we're in the API console here I think we were looking at today cases so hmm Oh string country here we go it's oh it looks like there's just a specific set of countries here and us is us interesting world I don't think Europe is a country so if we hit try it out does it on work there in the brown zone so let's did a highlight one what if we had a token so I have not successfully gotten the token loaded in our instance but I did generate you a token that you could just use if you just plop it right in your flow right so if you create a header to me I did I sent it to you and if you here in your header area add a authorization header you should be able to leverage that authorization token that's just gonna be authorization and then we'll what we have a prefix of bearer or yeah bear so it'll be the authorization and then bear and then what I sent you so that's an me that'll be in the valid the value yeah bearer and then what I sent you separated by a space will be in the value of all right so I got really close to getting there all done but I decided to just give you a token as long as the lifespan of this is not ten seconds will be granted all right so we know that US was us so let's see what happens here completed let's look at our steps and [Music] method failed invalid username password combo really look at the look at what it's sent and see if maybe I sent you something because I've got it I tried it out locally and it worked so if you could pull open the header and see what we sent them is this the header oh it is the life soda having a struggle seeing that means it's fine yeah it's not don't tweak your end line all right don't know if capital I would make any difference yeah capital a absolutely makes a difference well HTTP headers are very sensitive and bearer should also be capitalized sorry it's alright we get so used to in the ServiceNow space capitalization and it's more like a suggestion um crossing my fingers all right and hey ah hahaha 200 such every number everyone drink for success everybody by the way all right where's our response body hmm we actually didn't get anything hmm so he said he was happy but he didn't give us anything didn't yell at us did we pass in the query oh I don't know we may have yeah we janitors that country us today cases maybe we should try them total cases and maybe they haven't updated their data for today so we did today cases and we passed in let's validate it was us okay yeah let's yeah go ahead and try it out and see what they say you'll have to paste your token at the top yeah if you paste the token up there yes you should get a ballot so it's really nice when systems provide things like this so now you just need to hit try it out and we should hopefully get a valid response it's consistent it is consistent that is that's good though so maybe there just isn't any US data for today maybe yes he tried different countries see if it's different know what's and I know there's only an hour in the day time stamp on there it looks like it was 140 so just try cases all right like the top cases let's go world s as well oh I can multi-select okay we we've got some response Hey so now let's suggest that in our service now side and then we can pick up from there alright so we're changing this the nice thing is with having that open API we can just switch to I believe that's active cases total active cases yes so that's the act of cases collective cases think that affected anything it changed your header so removed that authorization mm-hmm of course it did sweet smelling errors or anything that's cool so I had a new one there is a capital B because I learned nice and then we save it and run it test what did we let's go world old I think that was one of the options all right and sweet response body Hey look at that nice 102 million 467 875 so now we've got a valid response from the server and where did y'all get with the script step for the so what format is the response party so I've got a little bit of getting OAuth stuff done where we at catch me up we did not know exactly what we were getting from the response body so we just used response body and then we didn't do anything with it okay now we know now we know we have an array of objects that looks like yeah so what do we want to do with it we've got you want to get ten minutes ten who thinks the JSON parser I tried for who hmm cerissa risky I did this for another endpoint that I was playing with about 6 times last week so I'm all over it [Music] there is no json parser it's just json dot pause in your script step no no there is one there's an XML parser I'm not crazy right I I thought there was one too I think I I think there is one in its new step in Orlando and you just haven't updated it in your in your instance there that's that's what I suspect let me see well but we could parse it in the script go ahead let's parse it in the script all right so our response body is an array of objects there's only one object in there well let's look at it so we want I think you could select multiples like remember when you drop down box and picked a whole bunch well let's go oh sure now it's empty hmm empty with a 200 that's um curious selected the country yeah let's go over Europe world that's right that's it that seems like a Y issue not the API was not accepting that alright it once I can hung up on it it once one and only one yeah but we saw the square brackets for the array and the curly brackets for the objects in theory there would be multiple curly braket objects inside but should we just assume we're gonna only have one that's a similar only gonna happen all right because we'll pass will only take in one and so we're gonna assume we only will do one so we didn't get it there let's let's see what its gonna look like did our header expire what's going on here we're still getting to hundreds all right weld again there we go so if we just look for data it looks like is where our number lies let's just grab the data because that's what we want I mean we could say just real dirty Dave Slusher has just jumped into chat and said you have the implicit JSON parser by making the output a complex object and then just passing the response pass the response the airplane yeah well that that's cool so variable down there we want to turn into an object and then we just put outputs if we wanted to output the whole object the whole object yeah I think in our case we only want the cases that's a good tip though if you didn't want the entire object mmm so let's just grab the cases so you want to Jay Jay you know JSON parser response body and then grab the cases yeah is it already naming stuff huh yeah how many how many bars do we want to name here in the show we want to call it country country object country obj country you know what that works for me yeah so ii don't work yeah that that looks good yeah and then one more and then just do the output today's cases equals very good it was just data right well it's an array bottom right so you go into item 0 first and today's cases it's named is in it's an integer and now we need two outputs to the output of the action unless you've already done that I think we've already we did that sweet yes sweet so let's test it world seems to be the world or best option mm-hm known working is a good good place to start from when you're adding new new things to Hey good nice and so already have the invocation of this action in our script addressed or did we just talk about that and not joy yet we would close we were close because this from the query or that old action I'm not sure if we need to breathe I don't think we need to redo it so puts in the outputs were the same names all right so we have our country we just needed to add it to the query parameters right so theoretically we should be able to consume this and we could go to the API Explorer and try that REST API Explorer so if you've never been there the service now provides sort of like you saw on the the API that we're visiting the external one they had an API sort of simulator there this is service nails and it's super useful when dealing with integrations to figure out the ServiceNow bit of it first internally inside this API Explorer so this is going to be under you're gonna need to change the namespace write the name space first and that's gonna be a yeah there we go I think chuck has just pointed out that from the REST API you can click straight to the API Explorer you can yes yes shows a button for that yes so what you didn't see what happens or oral in the chat has a good point I think we might need to tweak our script arrested API or or Appy to get that country code mapped properly over to the activity the action that's probably true but yeah I think we're at a relatively good part where we can talk about what we need to do next [Music] well nothing haha it's blank but we didn't get an error so stro drop over into integration hub and check out the executions for your action and then that'll be the last thing that we do in the screen share I do that from here right from your action you can drop into executions there executions and then we'll sort by created go to the last one and hopefully you know there was one just now sweet in progress serialization error they had to find value as the properties oh it's the same so in this probably was a scripted rest api air yeah country looks like blank we didn't pass him to the yeah action shouldn't look at it real quick oh that's right we did not okay request country and yeah and a request has a lot of different things underneath it yeah for the post body to the headers the query string so we'll need to put some more things in between repair request an in-country yep alright so let's stop the screen share and go back to video alright I will stop the screen share alright so one of the reasons that I wanted to use the API the scripted REST API here was that there's a couple of scenarios here for my component so in the design my component I wanted to be able to hit a consistent end point which is one of the reasons I wanted to do this so for example if the API that we're trying to consume changes I can change that in flow designer right so I can adjust that not only can we you know manipulate that data if we need it to from the response we were also intending on doing like two or three calls together to send them all at once to my component but if that endpoint changes or if that whole integration changes that's no problem I can just change out what my scripted a REST API is doing and but keeps that consistent I'm asking from this from the component and I'm providing this to the component and I can switch it out in the backend so that's one of the reasons I wanted to do that scripted REST API but again I'm sorry about the authentication I really thought there was an authentication for this but we got it worked out it wouldn't be a laugh code happy hour if we didn't run into unexpected errors we get expected errors and then there's unexpected errors so that was great Brad thanks for walking us through that we got pretty close to where we wanted to get to today we're gonna pick this back up on Friday so when we started about an hour ago 48 hours from that so 47 hours from now we'll pick back up again and we'll show will probably finish this part of it you know wiring up that rest the scripted REST API to the flow well the action from flow designer and getting our response and we'll start from the component building there so anything else that I didn't cover there that you guys wanted to share about that oh I you know thanks to thanks to everybody for sticking with us it's obvious that we did not script this thank you maybe we didn't know what we were gonna be doing today as a few hours ago maybe not us but yeah I'm Friday we'll be looking at the component side of this and I think we'll have this piece of it working by then hopefully I think it's a testament to how quickly you can get stuff done with flow designer and integration hub that even though we had a whole bunch of problems we've still got end point up and running and we're getting data from the web and if we work and you know using one of the already built spokes for example it would have been easier right so that's one of the things we as developers we build these spokes for folks to consume quickly in in flow designer and integration hub helps us build those quickly but also the pre-built ones pretty awesome so thank you everybody for participating in the chat come see us again on Friday we do the show almost every Friday and let's finish off with our ratings of our drinks bread how is your drink today so we used a five-point scale and quarter increments well my cord hotel was pretty good I used one of my favorite gins which is uncle Val so that's most of what was in there let's call it a four to five oh four to five awesome and how was your lovely morning beverage of choice Andrew it was good that was my triple espresso I would say probably 4.5 cuz I'm feeling pretty perky now nice and you Jared very good I'll get this this all at 4.0 for the awesome sparkling sparkling lon and my blueberry boyfriend with the very very interesting label it was good it I didn't know it was a sour when I was starting but it is it was a sour and I like a good sour so that it's a solid four for me so I hope you have enjoyed creator con this eek and continuing on if you're catching this later on that you're enjoying the on-demand content we're providing here and service now in this virtual knowledge and creator con week we have more things later on coming I know I wrapped up my workshop my first one today and in four weeks I'll have my second one which will be on component building and I want to thank Jared Andrew Brad and the audience for joining us today thanks everybody have a most wonderful and great knowledge 20 chairs the letters