good evening and welcome to phil goes deep and tonight we're going to be doing quit experience what i learned this week focusing on quebec ui builder and tonight i'm pleased to let you know that i've got the man like rafael cardoso joining me and we're going to be looking at some of the data side of ui builder and i'm going to bring raf in to to the screen so should be on the screen now raph so do you want to introduce yourself to everyone jesus i always struggle to introduce myself but i think no one can into this better than i do right um it's okay let's go um goodnight everyone my name is raf i'm currently working at brangu i'm over eight years experience i started with itsm and business intelligence i now focus on grc i think i am a technology enthusiast before i could even code now i'm helping phil on this journey and try to explore a little bit the new ui components um try to give away the approach that we used to have on the service puzzle and try to learn um about now experience and about the new components as well excellent so phil thanks for thanks for joining me tonight raf uh you're my second ever guest so last week i had brad tilton developer advocate and also responsible for lots of the blogs around ui builder some of the feedback i had so shout to rj for giving me feedback i appreciate it uh that we didn't do intros last week but um i think brad maybe needs no introduction uh but he also commented that i didn't introduce ui builder either so i just assumed that you know anyone who knows quebec no service now uh understands what ui builder was all about but um i didn't touch on that at all we just went straight into it so yeah i guess apologies to to brad for not giving him that space and ui builder for me is is really going to i think change the game for customers to fix up their their experience on the platform um all the limitations that we seem to have encountered in the past around uh the the kind of the ui the user interface being able to pull things together give the the personas the information that they need to to kind of make their workflow for me that seems to be going away with ui builder but we've got a long way to go in terms of learning how to actually mobilize it so is there anything you want to kind of comment on ui builder what you're kind of really looking forward to with it or anything you've you've learned since quebec come out um so we started so i don't know this um this part of the the queue back have been kind of a hot topic on the last uh two years so this started i don't know last year with um i don't know with the within initial versions that we struggle to understand our servicenow was looking to them to this whole new um experience um probably last year we we started to build something on the visual studio to build the component but now we started we almost we are starting to see things becoming like into a complete puzzle um i think this is going to change a lot the way we approach everything uh this is going to change the way so at the moment i think people are they are questioning themselves if they are going to take the the path of the service bottle of or if they should pick um the react components which works completely different um there is some pros and cons of course but based on on every feedback on all the communities they say they they say that it's faster it's easier um and if servicenow is have pointers towards this path we need to assume that this is going to help us a lot in the future now and i think this is quite simple i can build a portal in less than 10 minutes and it's easy even like you don't need to be a pro approach to make like a nice and lovely portal um but i think that there is a lot of things to learn um a lot of documentation to be published everything is is unknown we are literally exploring digging around this stuff because we are waiting servicenow to release uh some posts release some youtube videos on on the live coding and so on i think by the end of the year we might have a clue what the ui builder is is waiting for us i'm hoping a little bit sooner by the then by the end of the year there's a lot of content coming out so there's uh there's blogs hopefully in the youtube description that you can see uh links to the developer blog um there's all sorts going on of of people sharing information so hopefully we're part of that people can learn with us so yeah let's um let's try and get into it uh raph so again this is uh this is a bit of a new new experience for me hold on i've disappeared let me here we are right okay so i'm down in the bottom right you're up here yeah so this is a bit of a new experience having a guest on the show um you're going to be helping a little bit with with the chat and also helping me uh yeah four eyes are better than better than two right uh shout to james i saw him in the chat he said that's why you're not on call of duty so uh you've been busted mate uh right let's get uh ui builder so one of the things i was on uh live coding happy hour uh like watching live coding happy hour last week on the friday and i was asking some questions about the data side of things and i think this is the bit that's caught me out is like how do i get my data in how do i manipulate the data and then i started messing around i went back over some of uh the blogs that the brad's posted he has done one on on data resource but i think i haven't followed the steps through in it that's what i find at the moment i've got to try something fail go back to the docs read that bit and and then try again so i've got something in another instance that i pulled together and i'm just going to see if we can we can build something um in here so if i uh create a page i'm in the pgd1 scope so i was kind of going in from it from a an issue perspective right um so if i just say issue so obviously focusing on grc something we know inside out um for issue i'm going to want the sys id okay so if this is in the singular i'm going to add in a page parameter for sys id okay so that gives me my page and i've got a a parameter in here to get hold of the specific issue that i want to look at one of the things i was able to to do is again if i'm adding a component before i do that i add a container that seems to give me i think a bit more flexibility and control over layouts a bit later so i'll kind of add some containers and then you can nest containers within containers so they i think they're just basically diff developments um let's see where i've got raf if i put you down here well how about you go there i can i can go to the left corner now you well the thing no no i don't want you in the left corner ralph because uh guess what that's where the data resources are oh yeah yeah it's very important on the ui builder there's so much to click in here if not if if you've not used ui builder don't be afraid to click stuff um it's all starting to make sense to me you've got little icons that are really doing lots of things um that's the visibility yeah visibility eddie but down here you've got data resources uh client state parameters which is like your client scratch pad and then you've got client scripts data resources is where we're going to mess around i'm going to plug in here a form um i think why is that not letting me in here yet so if i put a form in here form fields form template i don't know the difference between each of these although they probably are documented my sys id i'm going to bind to my context props so that means my property coming in at the top if i just go to issue um issues you need to select the table right as well oh yes i will yes uh so in here table thank you so and you know you can be a bit typing table you can be a bit more dynamic um but this is the issue page so it's always going to be issue but my sys id i'm going to catch through there if i just grab a sis id so i know it's valid um and i'll put that in my kind of test up here if i save this save often okay that's one thing that i think is uh is clearly best practice save often um you don't need do you need to um add the view or fields i think so i think so you need this i didn't not this view you could oh yeah okay that's a good point so um one thing i've seen is if you try and configure if you try and use one of the page templates the you know if let's go back to ui builder if we go to create page from here and we use a page template and i call record record expects it to be a type of task okay you can't just use a record on any record record there is really a task record because it's looking for things like activity stream um some of the ribbons some of the actions so on record expects it to be a task record but then you need to have the workspace view defined okay but in here i wonder if this will just let's open it let's just see if that works right now try to try to write default and it's called view let's see what happens when we just open it so that no data to display so you're saying in here right default default let's go view oh default underscore view is that the name of it i thought default view didn't have a name i thought the name of default was blank so if we go to this issue it's actually for some reason called new is this because you were testing me on display value recently now okay um so if i configure this view configure form layout and view name oh you have you have you have views there yeah i've got some but um okay let's try that let's put in there w-r-i-r-m something i was messing with does that no that's not a problem that's not a problem let me give it right here we shouldn't be uh we shouldn't be failing at this early stage um now try to select individual the fields try to just to give a try hold on i'm gonna i'm gonna create a workspace view because sometimes this is this has tripped me up in the past let me just save that and then if i take view out of this for now does it assume workspace for you i didn't save sorry now i think you need to um loading's good though loading normally means something positive now otherwise it would be pre-loaded on the ui builder okay so this is the thing i try something i fail at it and then i take that away and try and understand why it failed who we got on the chat john's in editing eighties here workspace view yeah that's what i was trying anarag auto set her fingers crossed auto save comes soon um it brings a low code reusable components to new build interfaces yeah and james you know it's going to get even it's going to get even easier what raph was saying about you know some of the hurdles we've gone through i believe it's all going to get a little bit easier soon so watch this space some stuff's coming this month that is going i think it's been announced actually if you look for tech now episode 85 app engine studio they're the key words um yeah tech now episode um 85 is going to talk about how this thing can be made even easier because obviously this is still a little bit technical this is not low code even though we're not writing scripts right now i really want to get into the scripts we can't even get the data showing on the screen so uh yeah we've got we've got john is there debugging built into this so you can easily follow through your work can you use explore uh there there is some debugging uh on the client side at least on the servicenow ninja set of posts they've episode 18 for servicenow ninjas is about debugging but his his client side um and yeah shout to shout to kevin yeah loading nothingness um so this is a bit of a fail to start with right now i've got in a different route to what i was doing the other day but it really shouldn't be that difficult let me just see if i force a workspace view name i've not messed around with workspace uh sorry with with views here um but i have you know if i take this component out of it um so i tried to right click so used to right clicking there's there's another component that i did get working before this seems to have a bit of latency add component there we go use form field component exactly yes thanks james but it it doesn't look great um oh okay yeah it does this there should be a way to use the other one so let me put my issue table in my sis id i'm going to bind it to my property um which is is that yeah you click there sysprops yeah yeah context okay that's good you can specify the view i'm going to just not have a view for now and see if it picks up my workspace view excellent so okay nice it's still this is still a bit ugly for me this this is not the right component that i want i'm happy to get some some stuff on on the page of course is it in the views listing views table uh not sure what you mean kevin so in the views table well i've got a workspace view which i have specified let me just specify it explicitly here save that and just see i'm just close some tabs i don't think you can see my browser window my address bar um by the way we're celebrating tonight people we've hit a hundred subscribers on um on phil goes deep so i've got a beer and this is from aldi a denver lager which looks like a heineken but it's very very refreshing so that's a little bit better this is definitely my workspace view because i didn't specify any form sections or anything this will do for now this will do what i wanted to show is trying to get into the data side of things interesting it's got workspace id hard coded down there with an assist id that i haven't used but nice that we can pass in the view name i really like that ability to consume views through the experience and i had a good conversation on on slack about this i'm talking to customers about views as well trying to protect the preserve the default view and keep things upgrade safe but i don't think there's a clean-cut solution to this stuff so try to create a simple view without tabs and related lists that's effectively what i've got uh here james if we look at my issue um if i go to workspace view which i just set up for this table it might have yeah it's got nothing okay it's got related lists actually but this will do for now i'm not focusing on the form i've got the data on the screen what i wanted to do was show you so if i've got breadcrumbs right breadcrumbs is quite a nice component a lot nicer than the one on the portal this is looking here for an array of objects okay we've got an array of objects in here so i'm going to bind this to the record i've got so the way to do this is to create a new data resource and basically the the problem i've had with ui builder and kind of trying to have control of my data if we look at global look we've got server data operations and some transform stuff in here and then client data server data is great for looking up records looking up user preferences and i think you know if you look into the evan blogs which is entity view action mapper that's going to be something i really want to get into but i wasn't able to get over this hurdle myself because this is great if i want to look up a record you can see what we're passing in here right i can pass a query i want to do something a bit more than that i want to manipulate that data so under data resources you click new if i click transform this is going to create on the sys ux data broker transform table um i'm going to call this pgd issue chrome okay this is giving me a bit more power right i can do a bit more with this and i've copied some properties that i've already set up so in the properties when we look at our configuration for that data resource all of this is handled by the json property in here so issue id this will do let me just save this for now i'm going to also create a script include right so i'm going i'm going back to kind of my standard approach if if i was building something today in the application i would have an api or a bunch of apis in the form of script includes it's talking about how to handle my data i'll just make sure that it's accessible from all scopes i don't want to lock this down i'm going to call this data resource right and i'm going to do a glide record query in here now i don't think that's the right thing to be doing in the long run because if you look at even gra glide query and if you look at graphql graphql is almost like a whole new world for me it's very much well it's a new language but or a new way of using the language it seems to be a lot more performant it's only bringing back the columns that we need if you get a glide record it's bringing back every single column on that table and you only probably need two three maybe ten whatever you don't need all of them all the time so graphql is a way of being a bit more explicit i just don't know enough about graphql to start with that right now so i'm going to create a standard kind of script include i'm just going to call this get issue all right function i'm going to pass in id quite see the keyboard here and sorry i'm going to pass in array as well because array equals array or define it as an array okay so basically i'm going to create a recursive function i'm not sure that this is the uh necessarily the best way to do it but this is what i got working the other day and i am i'm rewriting this um i don't want to copy and paste it because i've got some stuff in here that doesn't need to come over in fact i can what i can do is take those things out of it let me do that you don't need to see me typing all the hard work so if i grab this function nothing in there yeah so i have done a little bit of blue peter here um i'm not sure if everyone who's tuned in knows what blue peter is raf do you know what blue peter is a blue blue peter do you know what blue pizza is no never heard of blue pizza no that's a british thing right i think so um anyone on the chat knows uh blue peter here's one i made earlier you never built you never built a tracy island raft no pizza tracy island thunderbirds oh a blue pizza okay i know what you mean you haven't got blue peter badge then no no i mean either man okay so this is let me reload this and then i'll type in so this function the main thing for me here is i'm taking a parameter i'm passing it to my processing script and then i'm returning a value that meets the format requirements that my components need okay so my what's my url when i look at my when i access here i've got x two three blah blah blah i want this and again this is hard coding stuff it's just to make things work so that's that i believe and then down here we're going to pass in [Music] issue okay but what do you expect in the end um so do you want to use this function on on the try to call this function on the ui builder yes that's it okay yeah so this function if you look what it's doing it's called get issue guess what it's getting an issue but it's probably not that's not true that's getting issue breadcrumb right that's that's what it's doing it's getting an issue breadcrumb so i'm going to pass it the idea of the issue um and it's going to return me an array of objects and each of those objects is going to have a label and a href okay so if we go back to ui builder and just remember what we were trying to bind to in here we've got an array of objects with label href you could pass icon as well if you want hide label you can pass some other parameters in here and i assume it's all documented but each object minimum label href so the data resources have changed outside of uib this is important okay so i'll just update the page i don't need this right now but what that should mean it should update itself if i go add and now i'll go to data resources transform no sorry it should be in there uh why why is my scope not showing up it's not updating the page let me let me save and reload the whole thing anything going on on in the chat ref uh let me just take a look yeah we have kevin and uh 80 what's kevin during he's firing up his pdi last time i checked okay so so the thing is you are going to use the scripted property value to call that function to generate breadcrumbs dynamically yeah exactly and if you think about this is just a this is just a starting point for me but if i want to look at an issue we know that an issue is going to come from either an item right and it's going to belong to a control or a risk but it could also come from um a profile right an entity sorry um the control could come from a control objective from that control objective it could become to a library so for me it's about how do i bring that context to the record i'm looking at that's that's the kind of the driver behind what i was thinking about here so okay um notice for my transform data resource now i've got a description i haven't given it a description but my configuration is defined in here okay and this is all from my property so description why is that that should be defined then no description available uh i've got an extra s where's that extra s come from so description output okay output scheme has not been defined and i'm not actually calling i'm not calling my my function yet so what i need to do is call my data resource and my input okay so in here i'm going to ah so i need function transfer i'm not sure why this wasn't pre-populated transform input okay and return new data resource dot get issue breadcrumb did i call it yep get issue breadcrumb and i'm gonna pass in input dot issue id okay and you can see that here oh that's why so i've got name in that name object i wonder if i have another object called description i haven't looked at the docs here but let me just see if description does this show up and let's read the curly brace so get issue breadcrumb i'm making a call to my script include i'm passing in a parameter that's coming from my data resource so let me just save this i've corrected that typo with the extra s in issue it should tell me that data resources changed from outside like update page that should update my data resource it knows that something has changed and basically we need to refresh so under here that's corrected nice didn't update my issue oh yeah look it's here does this show up interesting okay i know why that's coming through as a name but let's add this so i've got yeah that's wrong there so it thinks that's an input so let me just get rid of that because it's confusing so each of these is an input object oh is this a description here here is my description if it's that easy then that's beautiful i haven't done an acl okay yes remember your acl so you set up a new data broker if i copy this sys id and of course i need to elevate my roles okay you need to create an acl for your data brokers oh to execute right yes exactly and by the way if people don't know this you should always create an acl for your client callable script includes right your ajax scripts and i think even your ui pages that's going to start getting picked up in instance scans now or any kind of scripted recipe eyes if you want yes exactly security right so the good news is here it says you haven't got an acl you can't have it whereas in the past it went you haven't got an acl everyone can have it so that's i think a benefit but could trip you up so what you should see in here i think for type if i put now is execute execute operation operations execute that's a proper okay that's that's a new one yeah ux data data broker operation execute and then obviously these look beautiful right 32 character sys ids okay so that's new type data broker operation execute and did you know about this little bit here i did i only just found this out watching the video the other day you click that and you can type and paste in the cis id okay that's new now okay cool is it is it new or we just never seen it i don't know now it's new it's new okay so that you can then switch it back and it turns the field structure back on okay that should that should work so if i look in here look at my acl failed my selected issue id i'm going to bind it down context threads context.props.cis id look at that it's pulling in and now we've got some stuff we've got some stuff new is the display name of my issue email is the name of my profile let's just go and validate this back against my issue record and i've for some reason my i changed the display value of this table let's let's configure the dictionary let's make this the display value i was messing around at some point just switch scope because it just looks weird let's make uh this records in the default view [Music] oh yeah okay have i put it in here sng rc issue override display value let's do that that should do it so if i access here i should have a breadcrumb at the top did i save i don't think i saved let me see oh i haven't bound i'm getting myself what do i need to do ref okay right so now you just need to configure the the breadcrumb right exactly i need to bind the breadcrumb to my data resource which is pgt yeah cycle output look at that email ipt save so my display value has been corrected um kevin's saying right i'm it's going to be colorful balls reference uh i don't get that kevin colorful balls but uh i just found out about that a few days ago yeah create so is that new kevin do you think that's new as well i've never seen it before ralph saying it's new i've never needed it before so there's also that no because we for example on a one of our clients we are working in orlando and we don't have that that arrow as well so i think it's quite new or it's in paris or it's in quebec never seen that before so i'm going to switch my form here back to i'm going to get rid of view workspace just because by the way you can i i was checking one thing you can replace the first item and add an icon and i'd um the label as well so you have like a home yeah icon you can change that if you want i've got it there okay but if you try to refresh the page yeah it's going to disappear man because you now you're using um the text oh i see yes yeah yeah okay so yeah uh anarag uh is asking at asking here what are we expecting well notice my control risk is empty so up here that's empty okay um this doesn't make logical sense right from a breadcrumb perspective it doesn't go issue entity control blah blah blah there's there's like different it's like a it's like a web yeah it goes in different directions i just wanted to take an out of the box component and pass my data into it and imagine maybe we would have different breadcrumbs maybe one breadcrumb could be your kind of control framework going back up to control objective your other one could be your entity you know we can what i'm proving here is that we can kind of configure our data and pass it in raph if you've got any sound effects i can put some sound effects not like music and definitely nothing definitely nothing copyrighted no no no no no no um so next next time we stream i i make sure that i i will try to have some kind of sound effects the drums yeah i think i i don't know john reckons we should have drum rolls every time i make a joke i don't even know have i even made a joke i don't i don't remember doing that she is is on the time uh so what do you what do you reckon so you know we've got some data right this is this is my point is like okay the component that i've chosen isn't necessarily the right component but we could just as easily get a stylized text component um and and draw it out but you wouldn't be able to click it you know we wouldn't be able to pass the html and i looked at the breadcrumb and said uh you know i can click that well if i click it it's taking me to profile forward slash um you know i don't have the page set up if i had a page set up let's see how quickly we can do this edit page create page i called it profile save and continue because that was the field name right it's not really the right name for it nowadays create a page parameter will be sys id uh have i changed skype yeah you tend to scope for yeah it didn't refresh up here and yeah okay didn't save yeah well it did i changed it in the background here and i didn't refresh so and james is right so for example um the breadcrumbs should always lead you back to your previous pages are we doing this phil can you just check no we're not um i'm abusing the breadcrumb here um absolutely i'm abusing it uh i i need to i created the page in the wrong scope so now i need to change the scope to go and delete this page and create the page in the right scope now i'm abusing the breadcrumb here um i'm not trying to [Music] how can i edit page settings delete this way okay um yeah i'm i'm just saying well if i look at a breadcrumb it gives me a root back as a breadcrumb yes it's like handsome and gretel right that's where it comes from in my mind that's where it comes from it's about the story of hansel and gretel that dropped breadcrumbs in the forest and we certainly need breadcrumbs sometimes because we go too deep into the forest and forget where we came from so this is our route back but i saw breadcrumb it's a component that gives me a um a href it gives me a label it gives me a nice ordering that it kind of made sense that if i want to just be able to get hold of some data and pass it to the page it was a quick a quick win but yeah it's not the right thing to be doing am i in the right scope now to create a profile page ah so i hope that makes sense what i'm saying there okay if there's a if there's another component that you think we can use to just pass some data into to give us some linkages around um you know i'm more than willing to look at that i probably should have gone for page let me just pass in forms here uh form fields i'll do that again this phil we have nine people watching the stream at moment okay and are they what how's the what's the sentiment like i don't know uh at kevin john james they are quite active on the shot hey hey god john [Laughter] so just to be clear though as john's saying there it's a good visual to show where you are i know you got there i'm i'm 100 behind breadcrumbs and i really hated working with them in portal i found them painful uh they weren't fun in any way shape or form this i'll pass that in the wrong place this is the way to like the breadcrumb here is beautiful right i don't know how we're gonna handle the breadcrumb i guess it's through client state parameter something like that if you're actually trying to build your breadcrumb and show where you are and where you came from i'm not trying to focus on it as a breadcrumb i'm trying to just get some nested data somehow that's literally what i'm doing so looking here i've got a a an issue an issue and if i click here email it's probably going to tell me the form is not configured breadcrumb where's my breadcrumb gone have i broken it no it's now it's still there man but it's empty you only have om take take a look take a look on the screen yeah yeah you only have wondering why why is it broken what did i do yeah it's broken it's connected look at my data resource down here home oh i've lost my binding how did that happen okay great so in here build a new now experience component diane james what do you reckon raph building building custom components how good are we at that at the moment it's a long curve man it's a long curve let's uh let's just see what happens here if i click email yes it took me to a page it's gonna not be configured i'm sure for there we go so i've got the entity i know the journey is not right but yes a component for a tree structure exactly and i was i've got a few things in my head that i struggled to get out um but yeah if you so a tree structure is great if you're going just one direction but how would you go if you think about an issue it can go that way to the control or the risk and from the control to the objective from the objective the policies from the objective to the citations to the authority documents it could be a risk it could go to your risk framework and up through its parent structure and actually control objective can go parent parent parent um where else can an issue go to your entity to your cmdb your entity might have hierarchy you you know that relationship is not like a single branch i don't know how to represent that so what do we do here shall we try how long have we got how long have we gone 15 minutes i was just trying to show here the fact that you know my kind of default position is create a script include and i know how to build a script include i know how to receive input parameters in my functions and return values and now i know how to do that in ui builder but i'm probably doing this very inefficiently because my script include is just using a glide record right it gets that record so at the point that it's done get i've got everything i need oh sorry i've got everything on that row but much more than i need if we look at the graphql api framework it tells you on here there's one line that i noticed on here like yeah graphql is a web query language optimized for client-side development and that's that's the key word there for me is optimized when if we build this up this experience and enrich it with all the data that's relevant to me at the point that i'm trying to work an issue we're going to be hitting that database we don't with you know operations we don't need pulling back values we don't need so graphql is seems to be the right way to do it i just don't know i don't know enough about it so can we do it in like can you build like a script include can you build an api for graphql i believe you can i've seen it done in when we were looking at custom components but that's the that's the bit that i'm not sure about um right now how to do and i'm trying to keep this stream to an hour because i feel like that's that's a better thing to do rather than keep going for well how long you got ref i scared brad last week when i told him i'll go for three hours [Laughter] i don't know man it's um it's so cold um we can try to we can try to fix the breadcrumb if you want or we can try to dig a little bit around the graph graphql um so i'm not trying to fix the breadcrumb what do you mean fix it because i i it's not broken i'm not making it properly i'm not trying yeah i'm not trying to do it properly because if i looked at an issue oh i wonder how how did i get to that issue and my breadcrumbs should be my journey through what page was i at or like a navigation tool so i don't think i need to fix the breadcrumb i know i've i know i've botched i've bodged that in do you think we can do a graphql data resource yeah i think i think we can we can give a try um before you start i think you need to to create a schema a graphql schema so you can grab them so you can go in here and go new graphql and that creates a data broker graph that's broken i don't know man can you try to take a look on if there is any uh record there on this table on the cgy that's a broker graphql yeah just take a look if we take if we can't take any example that's the classic right you don't know something in service now voila just have a look right so fetch evam data a lot of these are probably probably some of the things we've configured glide record queries yeah that looks interesting let's give a try okay query dot append record query so these are properties these are input parameters query try to copy paste um all the properties or try to clone this the this graphql let's try to run it to see if we can query a glide um record or not perform a glide record query to look up a record that meets the search criterion yeah yeah so that's that's a bit flat though i want to do i want to be able to run like i don't know i mean maybe a graphql with the query i've done i'm accessing only a single record and i'm returning only those single single values so i think in that one math i don't necessarily okay if i just go in here look up sorry server look up record yeah but then we need to trans we still need to transform it so if we get our data so i could come in here look and add this in it's another um it's called lookup record let's give it a nice name okay let's call this um get issue and i'll call this get underscore issue yeah i think naming conventions always come up well this is type composite that's interesting so my table is going to be sngrc issue again it doesn't seem to like square brackets in ui builder and i think that's going to take some people getting used to we've now gone to just standard parenthesis can we find this yeah you see that there now try to pass the id i can guys misbehave in itself context dot props dot sys id so what yes it's got my number right now it's got a different one there it's got a different one return field so i would have thought in here you this is where i could go profile item uh content that doesn't seem to want to bind there we go 2011 why are you not getting my return fields okay try to uh try to use um semicolon profile semicolon oh no it's got you select them oh okay so entity oh wow oh okay it's pills okay nice yeah so what did i want control risk and content which is control objective what's it called is it not populated on here that's the content i don't think so content you can get priority status top parent documents document no it's not document you sure control objectives a content field there we are control objective if statement okay so look i specified those fields so it pulls them back items okay label doesn't have href in there so can i bind that here to a different one does it need to be formatted sometimes kevin that would just be too much to ask i think right of course control objective is going to be right at the bottom it begins with c get issues items okay keeps us guessing does that solve it or not number profile item content okay for the return fields i'll return yes exactly p s w r that i wonder what order that's in i don't know i'll play to the bike raise it back uh crit on updated one yeah something like that because it's not the other it's almost arbitrary yeah so you basically so i've got a data resource here and i need a transform to do something else with it right i need to take that and put it into a format so you need to have some sort of transformation so data driven can you just open data driven you have something for data driven it's not that data driven i want the global yeah i think it is later go by yeah transform okay go down down down down a little bit i'll transform it data driven items data driven tabs yeah so these all predefined they from what i could tell they don't ever quite do what we want it to do so you then go create transform and apparently if you're always doing the same graphql to transform thing you can create a composite and that makes that makes that a bit easier but yeah this is well this is what i've still got some learning to do like how to handle this data i've got the data i want but how do i transform it effectively into um to be consumed in the right format that my components expect so i think james might have nailed it you know we need to build our own components um we should schedule like a four hour stream or something ralph yeah to try to deep dive on this uh james jump on we'll do a we'll do like a live hackathon or something um i'm not confident uh with custom components yet i'm trying to work out how to consume the out of the box components it feels like to me custom components is still i mean maybe it would help us learn how to use ui builder better yep but that's actually a good idea man if you can have like a kind of racket on where like you just need to check the link if they want to be part of it it's fine uh just join the party try to crack the components um and probably in two hours three hours you can get something results it's ambitious um let's uh well let's i think ralph let's i'll stop sharing and we'll go back to if i stop sharing to you and your back oh but i'm down at the bottom hold on a second [Laughter] i want to do this yes right we're back so i said we'll keep it to an hour i know you're busy you've got call of duty to play no no not tonight who was winning man what was that actually i thought actually we end like in uh last five games win like on top five so it was a good good game man what are you playing you know i haven't played i was playing with james and a few people uh um chest wire zone man hagler why zone yeah i've not played it man i'm worried if i go down that road um i'm not gonna uh there's no way to go back man yeah okay so uh any final thoughts for for ui builder raf working with data you can see we've still got a long way to go i've still got a long way to go i mean i don't know about yourself has it been useful it is it is but i think it's uh that's a long way i mean we need to um we need to spend more time probably on the background uh try to deep dive on the stuff and um yeah but we literally during this episode we have built um a breadcrumb we have uh worked with those kind of rest calls and that's the beginning of the graphic um graphql probably next time we can explore a little bit offline the graphql and try to bring something new into the into the stream i would say um but yeah it's it's it's a long way man it's um until we get all the information that we need to build something proper we need to to continue to crack we'll keep trying we'll keep bashing away it but i think yeah so much more to do but we just keep sharing keep looking out for blogs i'll keep sharing what i come across there's lots of people doing this stuff uh yeah this is for me one of the top of the top of the list of things to to get my head around but raph thanks for thanks for tonight thanks for coming on um what will we do we need to sign out of this and say goodbye to all the all the listeners watchers cheers thanks for joining and subscribe like hit the bell all of those things that we have to say if we're doing stuff on youtube yeah um thank you so much everyone thanks raf and we'll see you soon thank you mate you