good evening and welcome to phil goes deep this is episode 3 of quebec experience what i learned this week focusing on ui builder and tonight i'm pleased to say i'm joined by james neal the man who is responsible for the explore developer toolkit co-founder of share logic and also a titan of now so let me bring james in and let him introduce himself properly james you should be on the screen i believe lovely welcome thank you for the welcome i don't think i can follow that with a better intro mate that's uh that's it i've seen the service servicenow for 10 years been building integrations and apps for half well all of that time really running my little uh service company with my co-founder tim for the past five and a half years so yeah thanks for having me no thanks for joining me um so as i say to uh all my guests you're my third guest now uh apologies for any technical issues uh it's all my fault um i'm pretty new to this stuff but you've actually been live streaming yourself recently as well haven't you so uh i tuned into you on twitch and now you're on youtube and i'll link your channel i think it might even be in the description uh but how have you found live streaming um it's been a steep learning curve it's been good though i do i like the uh i like the interaction i like uh catching up with people and um sort of sharing some of the knowledge i guess that i've gained over the years that you don't doesn't normally come up every day but you're like you know what that's a good good little nugget of information there and go off on a tangent that's that's what i find fun so yeah i haven't done it for a couple of weeks because i've just been so busy but planning on more stuff to come soon so the last time i've watched it was you you were building the the test screen in portal for unify which is your bi-directional integration products from from share logic is it have i got that right what you want to say a bit more about what unify is yeah sure so unifies is our integration platform for servicenow it's specifically for e-bonding really ticket exchange it can do anything you like but uh you know it's just born out of building integrations in old service now um kind of and coming up against all the different kind of scenarios that enterprises have you know it's custom requirements all the time is stuff that just gets thrown at you at the last second that you then have to rebuild the whole thing to cater for and all of the other really really complex stuff around just general bi-directional ticket exchange where you know you've got inbound outbound and you've got all of the complexity for operations around that so unifi is kind of the takes care of all of that for you so you can build an integration to something in 10 minutes from completely custom code and but what we like to say there is that there's not really any if you've got a requirement that is completely out of this world unifi will be able to cater for it that is a very strong statement so what do you know about ui builder because that's what we're going to be talking about today so i saw you were doing stuff in service portal have you managed to play around with ui builder yet not properly no i think this is i've done i've watched some of the videos and i've watched the you know i've had a look at it and it all seems fairly really straightforward and that really really easy to use interface um you know that's so but i'm just excited to get in there we didn't get stuck in and see what we can do when you're doing a lot of things you don't have a lot of time to to make way for just playing anymore so this is one of those times it's kind of a luxury it's a nice thing to just get stuck in get an excuse to to have a look around yeah well it's taking me some getting used to um this is like i say third episode but i did something called how hard can it ui be um and there's just so many options so many areas and things to click on and it's like i guess if you if you think of it as like a toolbox if you're i don't know if you look at an expert at anything like i don't know a plumber or a mechanic they're going to have all these extra tools and you don't know when to use that specific tool so i think the more i use it the more i'm like okay i know to go there there's a bit of muscle memory i feel like i'm getting my way around it tonight we're going to talk about graphql because previously i did something on data trying to bring my data into the now experience and then feed an out of the box component so you know these components expect their data to be served up in a certain way and sometimes when you just pull data from a glide record it's it's not in the format that the component expects so we've got to kind of transform that data um and i managed to do that without graphql and i felt like this isn't really what what ui builder wants from me so yeah i played around a little bit in the last week um and i'm just going to walk through walk through that and see if we can figure it out and yeah see what's involved see what else we can do with it um there's a lot more information available in the community i'll just shout out the developer blog so developer.servicenow.com if you check out the ui builder tags um sne.com she is ashley is posting lots of stuff like glide model declarative actions things that i've not really got my head around yet i've seen some of the screenshots of of what she's building so there's people that are way ahead of what i'm doing but i'm just trying to kind of share my learning along the way servicenow ninjas as well they're going to start getting a bit deeper so you know lots of information out there and hopefully people can uh can enjoy this learning experience as well i'm going to try and switch from zoom into our browser now and share my screen and then we'll we'll work through um you know what i've built and see see how that goes so um but before we jump in right i've got to shout out harry pearson here angularjs 1.6 is better than web components so we'll we'll see you later then sorry all right hold on in the chat in the chat harry pearson right shout out to harry uh angularjs is better than webca do you know what that might be a good discussion to have uh james i'm i'm not precious about any of this technology um i don't know it very well i think that's probably what it is like angularjs i can fumble my way around um on i'm just just opening i realized i had to reboot the browser so i can fumble my way around in service portal but i don't know i i don't know is angularjs better than web components what do you think you know what i it's probably no i'm going to say no it's not better than web components just because i think i'll get uh some questionable comments next time i meet people um for me it's almost it's about you know does it do the job and uh angularjs gets a lot of slack obviously is a completely defunct um you know kind of way of building things now i don't know how many versions of angular there are after that but um you know it works it's not the prettiest necessarily but i've certainly building a lot of portals in it you get used to it and there's lots you can do a lot of cool stuff with it but you can also do a lot of stuff that's kind of difficult and i don't think that goes away with sorry you can kind of break things quite easily as well but i don't think that necessarily goes away with different um you know way methodologies in the sense of building things it's just a different way of doing things that make something easier makes more things complicated and you've got to admit developers love just a new toolkit so but they're just going to keep churning them out well i understand web components are supposed to be like the new the new way of doing things the new modern way of doing things and obviously when you're talking about things like react and i think graphql as well both came from facebook and that experience that one-page site experience you know back in the day you had to change page and maybe pass parameters in and so on but yeah ability to pass events around in ui builder it seems really straightforward i i didn't quite get my head around it important to be honest it definitely is i think so that that is kind of just a way of thinking about how you do things and i think um you know i still do that in portal it's just i have to code everything myself whereas obviously ui builder presents that to you in a layer that is just it makes it much more intuitive i think that's going to be really powerful it's just really nice to see that coming out and being much more readily available i guess as a design pattern that um you know people are going to be using all the time we're going to have much slicker interfaces it's going to be much faster uh you know we're not waiting for load times and all of that kind of stuff it's good sweet well um i'm hopefully harry enjoyed that um shout out to raph as well james for uh david wang's on so yeah we've got uh we've got a few of the crew uh locked in so um i've got by the way i've got ui builders saved as a favorite so um that's just popping straight up there what i'm gonna do james is just show something that i've been building and then work backwards a little bit and we can try and play with it so you probably know that i tend to stick with the kind of grc use cases there's a lot of um there's a lot of opportunity to connect data in grc and previously i was using the breadcrumb i was abusing the breadcrumb because you know breadcrumb is like getting from one page to the next page and how did i get here i've actually got here a breadcrumb let me open this and see the full experience i was using the breadcrumb here to trace back the relationships related to this so right now i'm in an issue okay so that issue there is related to that control okay it's that simple but how i'm doing it now when i showed this i think i think it was last week on the show with raph um i had produced that that json package with just standard script includes um you know javascript doing a glide record i'm now doing that with graphql so i've got to try and remember what i did how did i do this so if we look at the breadcrumb component and maybe we'll look around at some of the other components and see if we can manipulate our data accordingly but this breadcrumb component let me add in a brand new breadcrumb okay and then you'll see what it's expecting so i think there's over 100 components that came out of the box with with uh quebec and there's more to come i think there's stuff coming around theming and templates yeah there's lots of stuff that's going to make this stuff easier but yeah let's look at this so we've got an array of objects okay which is pretty standard i think for for a breadcrumb right you've got label you've got href you can pass in our icon and some other properties and then you've got the next one so obviously an array is an ordered list um with with the objects in there so i want to get my data into that format so what i've done up here is i'm passing in here so the at sign at data that's saying go to my data resources and down here i've got my data resources local data resource instances so once you've created a data resource you can then create an instance of that data resource with slightly different parameters so if we say add you can see in the scope here pgd1 these are things i've created if i want a new one i can create a new one here so what have i done here up up in that component data grc ql1 which i think is this that's a transform and you can also preview the data okay so that i'm actually passing a graphql object in from grc one output and that is getting data from get issue result number value so you know it it might seem like uh a bit of a you know a bit of a long thread there but effectively i've got you know a component that's consuming the data that's been served up and then processed transformed through these different resources but i've actually got some graphql that's going on so i guess we will get to that so get issue i think is yeah this is taking so get issue is a standard component no sorry standard data resource so if i go in here and say add data resource i clicked it yeah click it global uh server data lookup record okay so lookup record i specified the table and then context properties is my page is my page property there that's the parameter isn't it yeah so if i go to let's just check that it's a required parameter i don't think i've actually changed anything um yeah sys id so that's this id named there is my context properties cis id so i say with that sys id on this table get me a record which gives me a result item is it results oh okay so i've specified down here return field so this is another kind of graphql feature where you say what you want and you only get that back i was thinking that graphql was going to give us a lot of benefit for like a lot of performance improvements but i think that performance improvement is still only at the client side it's yeah i'm not really sure to be honest i think the the main benefit there is just you're able to you know i mean this is clearly a ui builder feature on top of that's generating a graphql and then you know um allowing you to work with that but uh just makes it easier to to work with and build your own data models that you need so you're not working with just the standard you know you're not building a custom web service to return this kind of model and you're not returning all of the data and all of the reference fields and all of the stuff if you were to do a full record query um from a you know an individual record yeah and i think like i say the performance is at the client level because behind the scenes and this caught me off is there's still a glide record query going on so this is like the server has been you know the database has said right give me that record the server's processed it and passed it again you know to this query but then we've said only bring these values into the client and i think that's where i think that's where the performance is is that the client so it will be faster on the server because just like for example you're looking at you know your profile there that's a reference field and it's the display values email so that you don't there's no record look up to email to actually go and figure out what the display value is oh sorry there is there but you're not doing that for every single field in the record okay so yeah this blows my mind some of this stuff so i i thought with ui build i keep thinking and i've said to rap a few times i'm flying now mate i'm flying and then i think we compared ourselves to sparrows you know baby sparrows where you think you're flying and then you feel the force of the ground hit you so where was i this data resource uh get issue right in here i say data get issue result dot number dot value so this query grc one is i think doing the graph ql so you can see then in here output.data dot etc so let's try and find that because if you create a brand new one so if i go add data resource here and then you know i look at it and go well i haven't got any i need create new and you select graphql that takes you to this table graph so assist ux data broker graphql yeah and then if you do new transform that takes you to sys ux data broker transform so obviously first thing we do then is go in here and go dot list and i think this is my queen so this is kind of almost a separation of concern kind of thing here you know it's we'll do we'll build the query in one place and we'll make it look like what we need it to look like in another so in theory that simplifying you know the management in the building and the maintenance of this kind of stuff and meaning that you can use it in different ways without having to build you know the same thing multiple times that's the bit that i'm struggling with is is how to make how to make your data schema or how to design your data schema effectively to make it reusable across multiple pages so when we look at ui builder these data resources belong to this page yeah so within my experience if i create another page you could be in danger of recreating stuff right and and then that could feel painful but i think if you if you know where you're trying to get to and you've got a bit kind of a practice there then next time you would say oh actually i'll do that differently so i'm trying to get to that point where i think right okay i know what i'm doing and i've i've built here um a data broker which is effectively if you go to graphql in the platform graphql has been available since paris graphql apis i think that's actually different so you know i'm still trying to yeah that's graphql api of course it is so that's the other bit so you need a schema and then this query here this data broker is a query and that's querying my schema so you see that pgd on test if we go in here and look under application namespace space yeah schema namespace query okay and schema's got query mutation is if you're doing um an update a create a delete etc queries like your you'll get mutation is like your post etc so query refers to an object called query so therefore we create an object called query this issue takes a an input you see the parenthesis there is the screen size okay yes for me it's fine yeah it looks okay okay so then the the colon issue you can see it's capitalized um yep that type is an issue this issue has got all of these things on it right all of these properties notice there's no comma there's no um semicolon it's all like line break similar to python i think if you mess around with python it doesn't care for things like semicolons but it does care for tabs and um and line breaks and so on so it seems similar in graphql but my name sorry my my property name is then followed by a colon and when we then say for instance opened by type is a user and this is where we start getting some reuse okay so user obviously um okay on this occasion this issue is a task by the way so open by assigned to you could actually do that now you could say in here assigned to assign to it's going to reuse that user object okay so yeah i don't need to define that user object i do need to change this parameter value there so i don't know what these things are called i've not studied graphql there's a lot of documentation available on it this source bit here tells us that it needs to be looked up so you can define your so this is the api or the schema otherwise known as sdl right then down here you've got your scripted resolvers so you can see there get user by id you then have a resolver mapping so because i've just added in assigned to i think yeah you see issue opened by i then need to create issue [Music] assigned to and my resolver will be get user by id so it's quite a bit of kind of leg work to get to a point where you've got some meaningful data that's displaying itself in in a way that's that's quite nice when you create these reference objects apologies for anyone that actually knows graphql and i'm using using the wrong terms of reference yeah i'll hold my hands up here as well i'm not experiencing this at all i've read up a little bit on it but it's you just when you're in service now we haven't needed it until this point really have always so no uh i've seen and you know what i thought i've got to go back i've got like figure this stuff out so i went online obviously youtube and i searched for graphql um i'll shout out ashutosh um he did something on paris on graphql which is very helpful and then there was a live code in happy hour in october and i was watching it thinking i remember this and then i watched the live chat and i was in the live chat asking questions i thought yeah but at the time i was watching it was so new and watching someone else do it and not having that application it was like okay that looks cool but like and i think brad was building an actual custom component so now i'm i don't want to build a custom component i've got loads of components i want to use them but i want my data in there that's that's the problem that i'm trying to solve now so traditionally if i was building this in a script includes it obviously well you did that but each one of these is essentially a function it's going to return me or method that's going to return me that data object so all we're doing is defining that and defining the way that that's going to be looked up and then you know it's going to be plumbed all together behind the scenes so we've got just a single entity that we work with that is is how we want it to be without having to kind of script it the traditional way yeah and it does give you some i don't know if like making it private is that is the right term but for instance here type item okay if i can get cis id number class name owner profile content i can't get anything else from that object even though that item has got other things on the glide record i can only get the things that have been um defined here in my query so if we look at my query you can see here query one of the things that keeps tripping me up okay so if remember i added assigned to as a user object yeah and and this is not a script field so the the formatting kind of throws me out so i know you're a sublime a sublime user i i'll use whatever i i'm using uh vs code kind of as standard but not not that well probably there's loads of tricks there is a graphql plugin but i've not installed it on this instance okay so i probably should have done because i can't format it unless it is graphql can i no but at least i can use tabs and stuff so yeah under here if i do assign to this is going to give me a funny error and this error has caught me out a number of times so if i save this now i've changed the data broker that means that in my ui builder it's telling me data resources have changed outside of uib okay so if i update page i'm expecting an error that's going to say something about sub i forget the error message it should say sub defined sub selection required sub selection required is about the object type okay because in my query assigned to is now an object so yeah i've got to specify within that object what items i want back name email and you can see sis id this id is a type called displayable string which i i stole from from uh i think brad's example on live coding happy hour and i'll just put value in there i'll have to copy that out and paste it back in but yeah you can get a graphql plugin for um vs code which allows you to do the command or alt alt and f and beautify it that's changed now so let's update the page and you see it's refreshing and now it's working and my assigned to obviously it's not but that's fine so that's one of the things that caught me out a number of times actually is hold on i'm pretty sure my query looks right and i'm pretty sure my schema looks right but it's i changed the schema yeah i changed it in here and made it right okay that's an object that's an object but then i didn't query that object correctly one of the things i'm going to struggle with is like how to handle recursiveness right so if you look at so item right i when i say item here it's a control pretty much it could be a risk so a control or a risk both have a content so you can see here content is an art is an object and parent is content so i thought i was being really clever here it's going right okay that gives me a sense of recursiveness because content references content but then i've still got to down here where are we content parent right i specified in parent look at that one parent right so then yeah so how far are you going to go yeah and this is where i'm like well i'm not making this reusable in the best way i know that can't be efficient because i might expect one level two levels three levels but that's where if i was and you know for that breadcrumb kind of scenario what i really want here is imagine that was the controls have you ever added the task breadcrumb to the form uh what understand a task yeah like standard you've got a ui format a parent breadcrumb right yep that's that's the thing i was trying to do here effectively yeah um that that's what i want i want it to go all the way back to the top so i'm just gonna google on the side here while we're on live stream and uh let's figure it out by the way i've got chat open everyone so if anyone knows how to help with this that'd be great yeah so i mean that that's just one aspect of graphql um so raph's saying that there's introspection right so introspection yeah i think i've turned it on on my instance you do have to have it enabled there's a graph is there let me check is it under rest apis api explorer i think um best api explorer i think graphql might be there as a rest api i'm not sure about this let me see api name or did i see this global no i have got graphic ql but then i struggled with the authentication yeah i've enabled it graphics i know it's false by default but um i've turned it on yeah i mean there's all sorts to learn okay so can you create query a graphql object within an object so in some ways i've done that harry i think within my schema so if you look here i've got um so the item let's just uh for anyone that's not using draw io and doesn't have uh you know a license for a premium option i've started using this since watching you used it it's brilliant it's a lot better i used to use it back in the day when it first came out and it was a little bit clunky it's really good now i only been using it for about a year maybe two years um i used to use lucidchart i think it's cool but lucidchart is amazing again it's premium this is like open source but it connects also to onedrive as well so you can work collaboratively collaboratively with it it does everything i need to do on a day-to-day basis so and and for white kind of whiteboarding um you know if you're sharing a screen with a customer or right now you know if you're in the office you you get the whiteboard you draw it and then you get your phone out you take a photo of it you don't want to lose that drawing well this way um you know it's is kept as well and kind of maintained so let's just draw this out for anyone who's not um not sure what the size is like there so you're saying about whiteboards i i have a whiteboard and i use it all the time but for me nothing beats just getting a pen and just sort of thinking and drawing and then i'll transfer it into this yeah a lot of people there yeah there's something about that physical kind of like pen drawing scribbling yeah scrubbing out i can get something wrong and remove it in like a tenth of a second and uh i don't know everyone has their own way of working don't they i just find for me that works works well especially if i'm sort of i don't really know where to start i can just sort of get ideas out and then you can go from there yeah and if you hopefully we can go back to the times where we're in the room properly you know you can look around the room and see kind of see people were whirling away see their thoughts and then try and eke it out of them a little bit you know and start drawing people kind of joining a little bit when you're sharing remotely it's a bit difficult to get that engagement um but draw io draw.io it changed its name to diagrams.net sorry that's not as catchy um my whiteboard i was going to say james my whiteboard i don't use it a lot i use it for more often now for playing hangman with the kids and then i've got a dartboard hanging on it as well so yeah nice i think that is probably why i'm using this more and more so what i was trying to draw here actually so let me get that let me call this control objective right so i've got a bit distracted there so control objective this is from a table that is called content this is from a table called item okay so a control i know these aren't crow's feet that's what we want so an issue can belong to a control which is an item and it can belong that control can belong to a control objective which is a content so i'm calling that entity which is a profile the control objective has got a parent field so that can just keep going and going all the way up yeah so it looks like we can use something called a fragment but i'm going to say this is too techy to go into right now don't fancy your chances there are ways of doing it yeah well that's good to know so fragment we'll park that take it away um so yeah and and that query within a query that harry's saying it's kind of like i'm doing that but it's so explicit within the query if i look at my query wherever that is okay i've got it on on here i am doing a query within a query because i'm saying parent and within that parent object i'm calling parent again i'm hard coding the number of relationships yeah um that can't be the best way of doing it there must be another way but yeah look you can build your own stuff displayable string that just stops that coming back as because i think every string comes back still with a value and a display value but this is still not how i'm actually getting this stuff so there's a i know it's in the transform it's in the transform so i've got a graphql api which is my schema my query is calling which is a data broker my graphql data broker and you've got properties here which you can pass in so i'm passing number in here number is specified with a dollar sign i don't know if the dollar sign is mandatory but it obviously denotes there that is a variable that number there and the string exclamation mark is mandatory then that number gets passed back down here for number okay so test issue number and then in my go back to my api you can see that number here is in my query so i'm specifying it with parenthesis here so that's me getting my data into graphql and you can see data.scope.namespace issue so that's my graphql data package so just just to touch very quickly back on the recursiveness just found out categorically it's not allowed apparently the the problem is that graphql has no way of actually confirming that the data it encounters is not infinitely recursive so as it explicitly just says you don't do it okay so if you think you might have 10 things you do you you manually say check for 10 items so i think that then is the use case for the transform okay because if you look at what the transform's doing here graphql1 right sorry grcql1 my naming convention is not great i know we've spoken about naming conventions before um they are typically using snake case which i think will appeal to your your eye i think you would prefer a snake case for variables it's all out the window with ui builder because it's all defined in kind of yeah for you yeah you can't you if i want to call this uh i think if i want to call this graph grc ql will it let me oh it will okay but it's certain things you can't do it so here we here we can i don't know if i'd care enough to be honest no it's like it's making work for yourself you don't need that but i think naming conventions does become important so have one whatever it is you know hang your hand on something uh so let me call this transform because then you know when you're binding your data up here it's easier to know which one you're dealing with would it do it would do that though if you did it on the label wouldn't it so rather than glcql1 on the label uh how do you mean so okay but so yeah does it do it does it update it if you change that no oh no when you first create it i think it does but yeah that's what i mean yeah so when you first create it it'll do automatically so just choose good labels from the outset yeah exactly meaningful right make them meaningful what are they and then that should kind of make sense afterwards but if it's starting to not not make sense go back and update them because you you might have seen that down here i changed the name up here i've i've got a binding to it and it did update all the references so that's nice you should also consider doing the same for your components you can see up here breadcrumbs one breadcrumbs two container one container two etc once you start building something out kind of for a bit of hygiene i'd suggest go back through and give them some good names once you've got a little bit of stability because referring to them later and especially if it's something that's going to go into um if something is going to go into production you know consider that um harry is being your future best friend isn't it making your life easier when you come back to it yeah for future me exactly uh that's an expression i've i've heard quite a bit of um i think harry's trying to trigger me here i'm not going to rise to it harry i'm not rising uh james you love a good gr variable i love a good gr yeah it's going to be it's just a running joke it's fine it's fine um so what's going on i've got transform i'm passing my graphql data into that transform what's happening with that so can anyone remember what the table name is for transforms it's sys ux data broker transform and let's grab that and do a dot list and that's when i realized that the it's just using javascript and script includes and it's not that different and and then i felt a lot more comfortable so let's take a look at this data broker server script this is okay so it's called a server script but it's called a data broker transform this is taking a property right so that's specified as graphql data field type it's just an object okay but we've just kind of labeled it in sorry the ui builder as graphql data so it's an object effectively it's just a a bunch of json and the same thing's happening with glide query have you messed with library glide query at all james not really i think it's uh just haven't had a use for at the moment um but i can see what they're doing they're sort of they've they've done they finally made a sort of proper api i guess for stuff that um our soldiers have kind of been building manually for a while it's good i think the the one thing that you know when i asked the question of some people that were quite keen on it and and you know really saw the benefits you know why should i change why should i start using this thing um and it's not to say that server is now recommending it yet i think it's more a case of here's something to try and see how it goes but the error checking on there seemed to be a lot better so if you add a query to a glide record then do a delete multiple and the field that you're querying on doesn't even exist you know let's say that i said on the task table um assigned to is not empty but i spelt a sign too wrong it returns everything you have pain a lot of pain right delete multiple all my tasks are gone um obviously you should never do that uh with glide query it will actually return an error and say that field doesn't exist and it won't it won't delete everything so that for me was like okay i can't argue with that that sounds like uh there's some value here so uh back to my server script so i've got my properties and i've got my script and now it's starting to give me a bit of a wysiwyg or no what do you call this ide view function transform input i don't know if this i think if you create a brand new one this is blank so i copied this from somewhere and then modified it so input is obviously the thing that's coming in here and i think it's the whole lot so if you've got multiple inputs then you can see here input dot graphql data that's input dot graphql data so my issue equals and then i'm not walking down my graphql i'm calling it a package but if i look at let's just see it again yeah data dot name space dot name space that's application namespace schema namespace.issue and then i'm in my graphql down here right so everything in here issue dot which way did i go this one yeah don't issue so the whole issue object is now in my local variable obviously if i don't have one i return a blank array result is going to be this is the input that i want for my breadcrumb so it needs to be an array so i'll just return well in fact here i mean i could return result there because i've defined results at the top um otherwise i've say like that that amount of dot walking kind of i i kind of take issue with in the fact that i'm so used to stuff like that breaking because any any one of those could be null like in traditional javascript and it will just throw an error and then the user's got no idea what's going on in this case i think it's really fine because you know it's a it's uh something that we can't tamper with or users can't tamper with but um i'd normally put a try catch around that or something or you know test it yeah i think that's that's yeah try catch probably the safest thing at least you've got a complete fail safe there you know this could change that's here yeah data dot this you know that's your that's your your application namespace and that's your schema namespace so this bit is fairly robust i think i'd i'd like to say i i think i put i can kind of tolerate it i'm sure servicenow will do some checking behind the scenes on like wrapping this so if it does throw an arrow it'll kind of tell you but um you're not you've got to engineer sort of a safe a failure point potentially that's right it'd be worth sort of checking that though wouldn't right so yeah i and i i didn't put any defensiveness in here i was just trying to get it working but yeah you're right now you look at it in a traditional object you would be testing that at each point look do what the funny thing i've seen this kind of stuff in business rules and it just blows up and then just throws you know dumps everything in syslog and it's like why are we not checking um so people yeah if you're building these kind of things don't ever assume that that object is always in play and even if that object is this might not be an object yeah so then this bit breaks and yeah that looks a bit sensitive now you've called it out i really i hadn't thought of that so i would probably suggest making it more defensive this is not production ready do not uh do not promote so it is working though right now it's working but i believe it will be a little bit delicate so something to test out we're actually breaking it not for now but you know in the different what happens if you do change that yeah what if you just take that away from your schema does it still does it fail gracefully or not i think probably is the question so i return items right i return an object with items that's got my result in it that i think like i said stolen the frame of this function and then just change it to my requirements yep so i think what the first thing sort of enters my mind here is why are you returning an object but i think it is it's good practice just for anyone that's looking at this because you could just return the result and just have an array and work with the array but by returning an object you have you're kind of future proofing your design here because if you ever wanted to add something else and return that you don't need you don't need to go and change anything you just add it and you can reuse that object elsewhere you have made me think though that if i don't have an issue then i'm actually returning an array here that is correct so that's bad so what yeah how can i make that just just initialize your result as um a result equals a yeah an object with an empty items array call that array so i would just do stupid result.items.push okay hold on hold on let me see this is another good point though because if if for some reason you introduce um an error in that declaration obviously because it's a you're defining it as a variable there that can just be kind of especially if you stack them that can be difficult to debug and you're fine on this but where did i is that what i've got okay and then it's just the bottom one line 23 you just want to return result yes yeah exactly so so i've changed that it's okay it's because when i was doing this before i kind of initialized my i initialized my breadcrumb with like a blank or a home kind of one yeah and then i looped through it but here i'm just accessing issue.number issue.item.number so you know this is not probably the best way to do it but effectively what you've got here in this script is your kind of native platform javascript this is not uh you know anything anything real different to what we're used to so if you want to loop through something if you want to do a glide record from here you can access all of the apis in the platform and yeah and you know do what you normally do but return it in a way that's being expected by your component and the other thing you may have noticed i've got a break point there so let's just demonstrate that script debugger i had a question last week from john he said can you use uh can you debug this in the platform um can you use explore so i don't know about the explore thing james but you're probably one of the best people to to answer that but at least from a script debugger perspective if i hit update page that should trigger the call which should give me a break point yes here so i'm actually in my uh data broker script my graphql transform your transformer but yeah it's in there so you can handle this and i'd imagine if this was actually calling a script include that's for me where explore would come in because i'd be using explore to work with my api make sure it's you know i'm passing these parameters in what am i getting back looking at my object but right now i don't know where explore fits into this kind of so where you'd use this is is what's interesting about this is and this is the first time i've seen this is the you know servicenow are wrapping this in um you know immediately executing function and passing in the graphql data as the input so what you could do is if you could get hold of that data you could then put this whole script in explore and run it that way so if you click on on global you've got the input on the right hand side can you copy that out anyway data so that's the same thing that's coming in here is it input it yeah um i'll tell you what i've got a question james something that oh it's not for you sorry i'm in script debugger you're not script debugger you're exploring sorry apologies so much about this uh script debugger though because i always struggle when you're dealing with a script include and you start messing with the prototype using this right yep it gets lost so i end up sometimes declaring a variable locally just so i can see it in because i know it's going to make my debugging more uh more friendly but this kind of disappears it's not relevant right now i apologize so i'm sitting on that query and i'm going to find a whiteboard yeah i don't think it would do because that is that's the actual scope so i don't i don't think that actually captures that and presents it because it's not a variable so yeah if you wanted to see the whole thing you would do that or you'd set your break point at a different um just when you defined when you called that script and then step into it from outside that troubles me sometimes in debugging but sorry so you've got what you what you said to me then you going back a bit you said what's interesting here is that they've declared this in um an immediately executing function so the function that we see in here right the data broker server script my transform it starts function but actually we can see that that's been wrapped in this function right where does it end that one yeah so that's the end of the function and it's passing in is this what you mean so this is what's coming in yeah this bit is so they're just passing in an object with graphql data uh as the the property coming in i don't think i when i'm debugging things i don't think i look around i i think i go right okay that's my break point and i don't look up here and i don't look down there so i i've never actually noticed this yeah it doesn't it doesn't really matter that much it's just it's it what we can see here is what you know the code that servicenow's actually running um on the back end so whilst you you know it's not whilst you are it is running your script they're actually they're wrapping it before they're running it yeah okay and and you can access that here but you can't copy that out right that's what you were asking is that is that available yeah you can't right click on that can you do anything with it no no see so just to sort of explain if you had this um i mean you could get it out of ui builder potentially didn't you from the from the output panel yes yeah yeah so if you if you copied that output you could put that into the json field within you um explore and then you can use that user data and pass that into this function so you could copy this function put that in explore and then you could just work completely independently because you don't you don't necessarily need to generate that data every time if you've got an example yeah okay um i think that what you said there about the json bit i know you showed this before and i don't think that's something i'm familiar with i just i just noticed maybe we should try it but i just noticed down here this console i think this is quite new yeah i was gonna say i've just seen that as well so be interesting to you can access your uh you can access and do things like actually manipulate your runtime so result.items.push imagine if i push in here um i want to push an object in here and i'll call it label phil href i'll just give that a pound sign hashtag whatever i think that might push into it it's a look up here it doesn't seem to have right now so that it's because so when where you'd written it was on line 16 so it that was the first element to be pushed in to the array so that's why your result was was one well i'd be interested to know can you do console.log input in there does it does it work is it in a traditional console log input like this yeah console's not different okay so so it doesn't have the traditional console stuff but yeah look here it's accesses is this yeah the scope is is that but i've not returned my result yet i'm wondering now do i get that extra property in my graphql um let's have a look uh transform yeah it's in there yeah excellent and it's pushed in at the top it's pushed in at the top so that's a bit about debugging i guess so i mean that's not that wasn't even on the agenda that's pretty cool what would happen if you just typed input can we run that again very quickly yeah of course so every time you make a call so you see that now that's got that data and it's there for preview probably the best way to do that again is to refresh my page and expect that to hang yeah so i'm in here so if i type if you just type input what is that it's an object so it's just going to give you the object stringify it do you think yep there we go there you go so now you could copy have you got explorer installed of course so if you if you copy that whole thing yeah and go to explore hey jase good to have you man and then on the user data tab on the on the right so you can now paste that in there right i've seen you do this and you know what yeah i didn't like it hold on so hopefully i'm having turned off copy no i think it's probably me using keyboard commands and you know sometimes when you do a keyboard shortcut and it's in the wrong yes uh i think that's what it is yes okay so so you can britify that if you want to okay there you go and then if you on the left hand side if you type user underscore data it tells you that let's see easily large strings using the variable use data so now if you run that you've now got an object that you can step through so now with your transform script you could copy your transform script in and then just run it through that edit transform script get it working see that your output's right okay let's let's take this as an example so yeah hey jace um excellent to have you on board and if we can now just do transform user data yes transform user data and i'll get my items there you go so and you can now step through it great so you then so you say right okay user data over here is like a local copy of my it's not my template data right so the same in ui builder you've got your preview over here so you know it's working and it's it's connected and it's all doing stuff but now you want to tweak it you don't want to keep going back through that loop exactly going to explore work on it kind of it's locally it's locally the right word it's almost like and and sorry in 4.8 it saves my last query uh does it save my last user data or if it certainly does mate yeah excellent so for instance if i close this now no harm done right i'll come back into explore and user data not in there where's it gone panicking come in here where is it there object object bug there you go oh excellent we've got a bug no worries not a problem i think it was if it was text it would work um that is actually on my to-do list so no worries uh i know you're busy and um i'm just happy you're here so i'm gonna i'm gonna double check that's in the background as well now that's a that's a p1 mate [Laughter] but it you know what's the harm i've got my data you know save it locally paste it in here i can now work on my transformation get it doing what i want it to do and then go and update back you know it's the kind of the workflow that you're that you're doing on the platform anyway if you've got explore you know get get things right then go in and save them you know it saves multiple versions we don't see versions down here i wonder let's just check if i configure my related lists edit this view in global i want to see versions on here you know i think versions should be just default on everything it's like so handy to go back through and update it should be on every column yeah pretty much uh is there anywhere where updated shouldn't be i it's the one thing i had i i was talking to somebody i think it was on slack or watching someone's conversation about can you add like you know working in different instances the ability to kind of have your standard ui lists and you know run a script or something that goes and puts updated on all of your tables that you access or when you access them it automatically adds them and stuff like that i mean you could get carried away i'm sure but there's certainly some user preference state that would be nice to you know after a close and everything yeah i mean if you customize all your i mean you could certainly do it from the fields perspective just by exporting your user preferences you just have to make sure that they're assigned to the right user or reassign them afterwards but yeah okay cool so what have we where are we up to i mean should we try and do something else i'm conscious we've kind of hit the hour mark which is you know sometimes more than enough but jace has just arrived um i've got a bit more energy my t's run out we're kind of obligated to just do a bit more for chase aren't we i think so yeah let's not just uh oh jace is here wrap it up um yeah so what what have we got we've got a transform did it so is it kind of for you james i think you're relatively new to ui builder not played around with it seen kind of the potential maybe is this making sense to you like you feel like from this that you could go into ui builder and hang your data together you could make it start happening yeah totally um i think there's that there's some i think as as with everything when you put it into an interface um for me i'm kind of in this i like efficiency and there's a lot of stuff in here that i'm like i could potentially write this in five lines of code where i'm having to spend 10 minutes building it but um the benefit is that then i'm not the only one that knows how to do it so there is i can definitely see you know the benefits of this i think that the key thing for me the bit i've been struggling with and i feel like i've got to it now is okay so my experience i've got my issue page but actually the way issue is dealing with things you know if i navigate from issue and navigate to my control guess what my data isn't that different so you know that graphql kind of layer i don't know if this is this is not really an api is it um what one would you use for for that i just use squares for most things yes and then and then you know oh is raph's still on i don't know for wraps raph zombie he won't be happy if i don't change the style to sketch yeah i think and it feels like we're on a whiteboard then um why is the whole thing not changed style sketch there we go yeah i mean it does look a bit nicer but yeah you've got your kind of graph ql api here yeah and from for me that's the bit that was not i wasn't quite getting that this page you know assume this is a page as well let's change that i like to have the straight lines on here um you know obviously in this page i might be asking a slightly different question but what i'm asking it of should be common and that's the bit that i'm kind of like oh right now it's clicking together the graphql obviously has got just a query you've got then that's calling the api you've got a transformation which is a bit more where i'm comfortable but that commonality and that ability to reuse data i think comes down at this level between pages that's the bit that's kind of making sense to me so i think i i don't know if i would i think you could break it down that way um for me though the api is about being um [Music] kind of restrictive deliberately you know it's it's there's a point here where you you know it's good not to create that dependency from two things and actually have your control item just have a separate api you know even though it yes it's inheriting um and in theory you could do that so let's just take a look at some simplicity and duplication is kind of thing so look here i've got these so you know you've got this connection so if you think about control right an issue it's got a relationship to an item can we maximize this a little bit it's got a relationship to an item so my query up here is where i get the reuse i i feel so the question i'm going to ask it is going to be so i might say in here item and i'll probably pass in the id to be honest but let's stick with number just for consistency but then that becomes item so i'm reusing item if i ask for item yep but if i ask for issue then i get issue but issue can reuse items so that does that make sense that it's still one api but my queries then i think it's a server script no here's my query here i'm asking for issue yep so my schema namespace application namespace schema namespace let me see if i'm getting this right uh shrink that yeah application namespace schema namespace test obviously that's a beautiful name test dot issue in here graphql test dot issue why not test dot test yes nested that would then be i might have another data broker that passes in rather than passing in number it might pass in um yeah item id and i would call this and then after that i would say item yep so i think that's that is definitely where you can go down the reuse perspective but it it really depends on you've almost got to start at the beginning and just be like what is my data model what am i going to be using this for you know if you want to go down the route of well i have no idea what anyone's going to be using for but this is what i want to publish and you can definitely go down that route can't you um i guess if you if if you are going if you want to have to have two different items you know so one eye one item call is returning one set of values another item calls we're taking another you could in theory put that in the same graphql thing um you know api but are you overloading it at that point are you making it more difficult to maintain i don't know i'm not good fqlx but it's just you know this is it you can't make those design decisions effectively like at this stage of it like i'm a complete novice here and just the fact that i've figured out this thing is here for me i was like wow take a drink um then i think we start to probably be able to ask the right questions is that the right way to do it should i be putting those things in there um you know i don't know but the fact i can i feel like there's there's got to be a bit of benefit of using this thing you know i've seen these things get quite large yeah i think it's only when you call them that it's using it i i don't know so um you're essentially defining you know that api for your whole app put in one place so it's it's sort of in the one sec in one sense it makes it easier because there's only one place you've got to go and edit anything so if you're using you know this api across your app you've only got to update it in one place and everything gets updated but the question is do you want that yeah do you want to have that kind of break everything with one little change as well yeah i mean whether it would or not i don't know because it's if you're removing something then maybe but um adding probably wouldn't be an issue but then i don't know if i'd want to go through and create recreate all the resolvers and mappings every time either so it does it's definitely much more design heavy at the front end i mean you could try and figure it out but i don't know what the best practice would be on this no i don't know that there is one yet i think we've got we've got to fail at it a few times and go okay that you know maybe i should be honest differently if it works it's good enough isn't it for now for me for now yes when stuff starts trickling down from the actual product or the platform you know release more and more examples then i think we can start looking at okay that's how they're doing it there does that feel does that fit for me do i want to do it that way or you know i think probably got to understand graphql like you just said about the recursiveness it deliberately doesn't let you be recursive you know is that should we try and make in here um well explore so for that you just need to pick kind of well how many parents am i going to expect you know you just need to take a decision on that if the the likelihood is you're not going to go more than five really are you so if you build your it's not that much extra effort just to copy paste a few times and say i've got five levels and then from what i can see you know you can use fragments to make those objects a bit easier to reuse um yeah so looking at this as a transform script it's not the right place to do it either because i've already got my data at this point i think i might need to take that one away and mull it over a bit is there anything else um james you think we should have a little poke around on um sorry you were just about to say something um all i was going to say was i think just uh with you know with with all of this kind of stuff it really is don't try and perfect it you know if you've got something that works run with it and because you could be here literally for months and years on end refactoring to make it as efficient as possible and then you find out that only one person uses it you know refactor when you need to and when it demands it um don't overthink it because you'll learn it soon enough yeah and you for me the way to learn this stuff so far has been to um have a go at it realize what i don't know go and learn that thing come back like i said i've said to raf several times i'm flying mate i'm flying on this i'm literally thought i was then i stumble and go right okay actually i don't know that thing go away and learn it and come back so i feel that is what makes it fun though i mean i've learned a heck of a lot tonight so uh it's been great absolutely there's one thing i didn't mention uh that is important is your acls so and i think this is a benefit right for security purposes every one of your data brokers when you first define them i think it's at a data broker level it might be i don't know if it's at the transform level but you have to provide and execute acl for that data broker okay and you might may have noticed on one of them i think it was my transform uh no it's my api i've turned off authentication just because it was easier um obviously that's not good um yeah probably i'm going to turn it back on you know just in case anyone's seen my uh see my pdi url uh and start hitting that um yeah so you've got authorization at the api level like you'd expect with with rest etc but then at your data brokers the cis id of this has an acl so i think that's beneficial for you know if you were talking about this on a like glide ajax should have an acl but it doesn't enforce it this says sorry you haven't got one i'm i'm i can't proceed that that is the default now and i think that is it's a good approach i mean obviously they brought that in with the high security kind of stuff as well um you know default is you have no access unless it's explicitly given just makes it safer it's too many times that you sort of you log into an instance and find you can do anything because it wasn't it wasn't set to be restricted by default yeah secure not so much now but yeah and yeah it's totally balanced and yeah so i don't think we've achieved so much here james it's very very much been a walk through um unless there's anything else i think maybe we should switch it back we've gone i think respectfully over the hour let's see if i can do this last time i ended up being in two places so how do i switch this one i think it's this one if i say stop sharing and cut that way we're back are we both on the screen i think so yes it should be right i'm always i'm looking over here that's my obs window over there cameras over here um you know i was on a with a customer recently who said are you okay um i said yeah i'm taking notes in the office in the other monitor honestly like i'm listening to you and i reported you know this is everything i've written down i am listening honestly so uh yeah i think sometimes the camera angles aren't favorable for for streaming um so what have we learned today james too much yeah you could use explore as well for you know to john's question can you use explore of course you can it's complicated what was the most complicated bit i think it's just it's understanding that structure from you know you've got to build your api you've got the transform coming out the back of it uh you've got you know sort of that four level hierarchy i guess in terms of um what you can just how to get that actual initial data out you know that you you have to start from somewhere if you went in and started from scratch you'd be there a little while i think on you i've i have been there a little while yeah it's working right let me tell someone um and then try and remember how did i get here and that's why i forgot at the end oh yeah there was an acl so when you first go to do it it will tell you and you're like thankfully i've seen it and been down that sort of path before and was like okay i know what i'm doing here so there's quite a few places to kind of trip yeah but i would suggest to people get on uh quebec get get your pdi on to quebec have have a go at it and see see how you get on um that's all i can say for ui builder check out the blogs like i say i'll link them developer.servicenow.com of course but also um some of the other community uh people are are doing a lot of the hard work yeah there's lots of good content out there now it's coming thick and fast i think people have been excited about this for a long time haven't they so well what else are you excited about on on quebec anything that you've seen in the kind of the stuff that's out there that you're looking forward to messing around with not at the moment to be honest it's uh um just you just getting into ui builder making use of use of this is probably there for me there's a lot of good stuff coming out um but i don't have anything specific right now i think the other thing that i've lost focus on entirely is instant scan um that's something i was like right i want to do something on this but i won't be this week anyway um live coding happy hour on friday is doing something on instant scan um that looks like it's gonna you might get caught with your gr variables yeah you definitely will i don't know if that's a check yet but that's something i think will improve the quality of of life in the development cycle over time once it starts to get bedded in now it's native on the platform yeah i think it's something that will be of benefit definitely it's been a long time coming yeah um there's a few other options out there but this is now in all the same and you can build your own checks as well so james thanks for joining me tonight is there anything you want to shout out uh any any kind of uh you know shameless plugs or people or anything have we got anything on the chat that we've missed anything to summarize oh david says you've got a nice looking microphone so uh we had a quick chat about that at the start didn't we so what are you yeah what are you rocking there uh it's the shaw sm7b very decent microphone yeah i bought i actually bought all my kit about five years ago i think in a failed attempt at a youtube career well the kick started now again yeah yeah i thought about it to use so that's one kickstarter that again yeah even the stand looks good mate even the stand is uh it looks so robust it's fine i got it all i got the whole all my kit as um a set off someone who'd done who bought it all bring brand new and then just never used it so it was like yeah i can't pass that out i'm a bit of an audio file myself so i'd like to say i was but you you've seen my my mic i'm not going to go into it but just take that off it works it's fine camera my green screen actually is uh was the so it's like a uh it's two lighting tripods and then i bought them ages ago for like photography like a good seven odd years ago i've got a canon 350d like the first digital camera um and the problem with that is the battery so i don't get you know by the time you've charged it and then if you do start messing around with it it's unreliable on the battery now even with the replacements i've bought so i had these tripods kicking around um and then recently i just bought a bar that joins them up just plugs into the spigot and then like it's green muslin so um you know it's nice to have when you've bought that kit and then you think oh actually i've got something there that will that will help with that so definitely um but yeah so i'll link i think your channel is in the description um i'll make sure that that's available uh what do we have to say like subscribe hit the notification bell i'm too high but it's it's pointing down there isn't it doing over there i don't know where i don't know where they are yeah thanks uh james for joining me tonight thanks to everyone who's uh who's tuned in um yeah stay tuned see what's happening next and i'll try and fade us out uh with as much grace as we uh came in with so thanks everyone stay safe and see you soon fantastic thanks everyone