Display Data on Your Interface

So, we're now pulling in external data into our project via our collection, 0:00 but we want to now display this in our interface. 0:05 Well, that's exactly where bindings come in. 0:08 Now, bindings broadly fall under two brackets, 0:12 binding the repeating of items and binding single properties. 0:15 To showcase how we can now use our collection data, 0:19 I'll first go through the binding of repeating items. 0:22 So in generating the page, the AI nicely set up this list of tasks 0:25 where I can use my newly created collection. 0:29 And I can see the AI has automatically already set up the repeating of items. 0:32 So to adjust this, I just need to click to edit the formula. 0:36 And here it's been set to use a marketing tasks variable. 0:39 So I'll delete this. 0:43 I'll go into the collections tab. 0:44 And from here, I'll expand our marketing tasks 0:46 collection and bind it to the list of data. 0:48 And so what this now means is that since we have repeat items on 0:52 and in the items formula, we're passing in the list from our collection data. 0:55 It's going to create an item for every single element in our list of data. 1:00 And so when I close this now, we can see it's created five elements 1:05 because there was five items in our list of data. 1:08 And if you unsure at all 1:12 about where these cards are coming from if I go into the layout tree 1:13 and expand this task groups container which is where we found the items to 1:17 we can see we have this task group element And this is what being repeated. 1:21 It's repeating this task group element five times because there was five items 1:25 in our list of data. 1:29 Now, the beauty of repeating items is that inside of these repeated elements, 1:31 I can access the data of each respective item in the list. 1:35 In plain English, 1:39 what that means is that I could click into an element inside of this card. 1:39 So for example, this title. 1:43 And I can see the text content is already bound. 1:44 So if I open this, I can see here I have access to all of the data 1:47 of this item. 1:51 So since the title is already set up, let's say 1:53 I wanted to create a description. 1:55 So I can copy this text element. 1:57 I'll take it outside of this container. 1:59 I'll go into its binding, delete the title, and now pass 2:02 in the description. 2:06 Change its styling slightly. 2:07 And we can see now that each card has a description set up, and the description 2:11 that's being passed in aligns with the data of that respective item. 2:15 And if we open up our collection once more to see the data being pulled in, 2:19 we can see the data in our collection 2:24 aligns exactly with what's bound inside of our interface. 2:26 Now the other way to utilize bindings is the binding of a single property 2:30 So we just covered how to bind the repeating of items 2:34 but alongside being able to dynamically repeat items like this 2:37 we can bind almost any property we inside of WeWeb. 2:40 And any properties we can bind are marked by this plug icon. 2:44 And so when we press this plug icon, we're presented with the binding window, 2:48 where we can pass in whatever 2:51 data or formula we like to dynamically control this property. 2:53 So as an example, inside of my interface, I have this refresh icon, and on press 2:57 of this refresh icon, I have an action set up to refetch our collection. 3:02 And let's say whenever this collection is fetching, 3:06 I don't want to display this list. 3:09 I only want to display this list when the collection is fetched 3:11 and the data is ready to be displayed. 3:15 Well, what I can do is I can press the plug icon beside the display property. 3:17 I can expand the marketing tasks collection. 3:22 and here alongside having access to the data 3:24 I have access to different pieces of metadata about the collection 3:27 such as whether or not it's fetching, whether it's fetched, 3:31 the total number of items in the collection, 3:34 which is just different pieces of metadata that I can set up logic around. 3:36 Now in the case of the display property 3:40 it expects a true or false value to be returned. 3:42 If you're ever unsure 3:44 of what value is expected to be returned in the binding window 3:45 you can simply hover over this question mark 3:48 and it will tell you exactly what is expected to be returned. Here 3:51 it says a boolean or a string must be returned 3:54 and a boolean is just a fancy way of saying a true or false value 3:56 And so what this means for the display property 4:00 is that if I return true then it will show the element 4:02 and if I return false then it will hide the element. 4:05 And so what I can do here is I can pass in the isFetched value 4:07 and so isFetched will return true if the collection is fetched 4:11 and the data is ready to be displayed 4:14 and since it's returning true the element will be shown. 4:16 However if the data isn't fetched and it's not ready to be displayed, 4:19 then it will return false and the element won't be shown. 4:22 And so if I put this into preview mode, I can press the refresh icon, 4:25 and we should see the list disappear for a second while it fetches 4:29 and then reappear. 4:32 So when I press it, we can see the list disappeared for a moment, 4:33 and then reappeared when that collection was once again fetched. 4:36 So we've seen that we can bind the repeating of items to dynamically 4:40 display lists of data inside of our applications, 4:43 and we can also bind single properties to control certain pieces of logic 4:46 inside of our applications. 4:51 In this example, 4:52 showing the list of elements whenever the collection that it's using 4:54 is fetched and ready to be displayed and hiding the list 4:56 whenever the collection is still fetching and the data isn't ready to be displayed. 5:00 Now that we're pulling in our external data 5:03 and using it inside of our interface, we need a way for users to edit this data. 5:05 I'll see you in the next step to learn how we do this. 5:10

You need to sign up for Treehouse in order to set up Workspace

Sign up