logo

NJP

UI Builder - Using a data resource

Import · Mar 11, 2021 · video

in this video we're going to take a look at data resources in ui builder we're going to leverage an existing data resource to grab some data from the database and show it on our page here so our use case is that i've got a list of to-do's here and this is nice but i want to call out what my next to-do is so the next to do with a due date i want to call out here in this case it's going to be this publish a blog to do which occurs before the other ones and so i'm going to want this just to say publish a blog and we can do this without writing any code pretty easily using data resources so i'm going to click on the data icon here and it's going to bring up my data resource pane so i'm going to start by going to add and you'll notice that there's a lot of options here i think most people are going to want to use this global data resource they're organized by application so this is the application that the data resource lives in not necessarily the application you're working in and in this case definitely not the application i'm working in so global is going to be the most common uh it's got a server uh a server data category where i can do a lot of different querying it has operations where i can create write and delete to records transform which we'll talk about in a subsequent video and some client-side data resources but what i want i want to look up some records and grab the next one with the next due date so i'm going to hit look up records the nice thing is it gives me a preview of the different properties that this data resource has that i can that i can add some input to and that will configure that data resource similar to a component how a component has properties so i'm going to hit add and then in this middle pane this is where i'm going to configure the data resource and then on the right is the preview so this is a really nice feature it's if i do this successfully it'll tell me what data i'm getting back you know before i bind it to anything so i can make sure this data resource works and then move on to my next step so right now there's an error because i'm trying to query no table so let's change this to my to-do table so simple to do so right now it's going to grab everything from that table it's going to give me data about the row and the display value so number is the display field on that table so that's what it's giving me i want to give it some conditions where i want the due date to be in the future so i'm going to say after yesterday because that's how i roll and then i want the i want the user to be me so let's apply that all right so that looks right i think all of these are already me and they're all in the future and then return fields i want to add a return field so right now it's just returning number i want the name because i'm going to want to show the name up here in the statics text so now we can see that i'm showing the name they're not in the right order yet all right because i'm going to want this first one publish a blog and right now the first one is publish another blog so let's order by the due date field and we are going to want to order by ascending and so let's see what that gives me that does give me the right one so publish a blog so i think we have what we want here i don't need in fact let's let's limit this to one because i only want the first result and and i think we're ready to go ahead and use the data from this data resource so i'm going to click into my static text component here this is what i want to bind my data to so instead of static text i'm going to click on dynamic data bonding click into that and then i have some different options here i've got some page properties but if you scroll down the data resource properties are down here at the bottom i can see that my data resource id is this look up records one i can change that if i want to i'm not going to here but here we have lookup records one results so let's click on that uh it's not going to really give me anything good yet because right now we're we're at the the top level so if i hit dot it's going to ask me you know do you want the first element in your array yep that's what i want let's hit that again so now we're into what kind of data do i want i want the name and then i'm going to have to go one more step and i want the display value so let's do that and i think that is the right display value for publish a blog so let's save it and then we'll test and then i think we'll be done so drum roll we got it so my next to do publish a blog publish a blog is here and we have now you know bound this component to some data from the back end you know obviously this is a really simple use case for this you could you know get a lot more complex with it uh and different components may expect different things to where um you know i could have uh you know maybe i have a component that's expecting you know some sort of array of objects and i could pass that to the component instead of a single you know element in that object

View original source

https://www.youtube.com/watch?v=otX50211pv4