In this video, we’re going to build a new single screen. We’re going to build this page here that contains three different lists. It has a discs list, a genres list, and a moods list. It also has a series of components that we learned how to customize in previous videos.

It has sort buttons, a search function, and it also has a pagination element - that isn’t currently visible. We can also see a new component, a filter button. We’re not going to explore filter buttons in this video, we’ll have a look in a future video. So for now we’re just going to quickly build this structure.

As always, we’re going to hide this section here called finished page example and we’re going to view this section here called build your page here. We’re going to build this structure using the page elements. All we have to do is drag and drop. Let’s go.

Ok, the structure has been built, it was really easy. Now we’re going to link our main flex layout that will be linked to the releases collection. This collection here. I’m just going to show you. So this is what we’re going to list out now. We’re going to come here to the Bondlayer app and we’re going to select the flex layout - this one.

Ok, so we’ve got the image attribute here. We’re going to come to the data panel and down here in dynamic data and style in get image from releases we’re going to select the attribute called a cover. 

Now we're going to select this element here called P3, we’re going to go back to the data panel and in the exact same area in get text from releases we're going to now select the field called release date.

We’re also going to select the preferred format, in this case, I’m going to choose the month, day, and year.

Now we're going to select our element called H4, and I’m going to click through to the data panel and in the exact same place, in getting text from releases, I'm going to select the attribute album name. Now I'm going to select this element here called P3 and I’m going to go to the same data panel and in getting text from releases I’m going to select the artist name. 

Ok, that was really easy to do, and now we can visualize our list. Now I’m going to come here to define our sort buttons, as we saw in a previous video, this is super easy to do. So I’m going to select the component, come here to the data panel and in target, I’m going to select the list that I want to sort.

So in this case it's the list called f-grid. Now we’re going to select the attribute by which I want to sort, in this case, it’s going to be the release date. I’m going to leave this set to descending and I’m going to select the second sort button here. I’m going to select the exact same list, the same attribute, release date, and here I’m going to change this to ascending.

Now I’m going to do these two, I’m going to select this sort button, come here to target, and select the f-grid. I’m going to select another attribute, so in this case name. And I want to sort from a to z and from z to a. In this case, it’s going to be descending and we’re going to do the exact same for this sort button. When we come to target we’re going to select f-grid, we’re going to select the attribute name and here I’m going to select ascending.

I’m now going to link our search component. I’m going to select the search component here, and I’m going to go through to the data panel, and here in this options section, I’m going to select the search repeater. In this case, I want the search to be made based on the f-grid list. So I’m going to select our search input and I’m going to alter this placeholder.

Now that we’ve finished the search, I’m going to come to our flex layout. I’m going to select f-grid and in the data panel in the filter section, I’m going to create a filter. So I’m going to click add filter and I’m going to select the field that I want to be searched.

In this case, I want the user to search by the album name, so I’m going to select the name field. Over here in the condition, I’m going to select this third option, the text contains search query if present. This means that if the user types a word that matches an album name, corresponding search results will appear. 

So now we’re going to create this, ok it’s done. And now we’re going to customize our pagination just like we’ve done in a previous video. So we’re going to come here and select the pagination element - it’s also here.

And now we’re going to go to the data panel and we’re going to select the list that we want to paginate. In this case, it’s going to be the f-grid list. We’re going to enable this option to hide the pagination when it’s not being used. Ok, it’s disappeared here. Now to finish this pagination component we’re going to come back here to the flex layout called f-grid.

Here it is, we’re going to come here to the data panel to this pagination area and we’re going to enable this option. Now I’m going to define how many items per page. I’m going to type in nine, and now our pagination is working.

So now, we still need to link this two mood and genre lists. So we’re going to link these two collections here. To do this, I’m going to come here to the app and I’m going to do exactly the same by selecting the flex layout, the vertical list. And I’m going to come here to the data panel and I’m going to enable dynamic data. 

Now I’m going to select genres and this item is already appearing and it is repeated based on the number of entries that this collection has. I’m just going to widen the doc map. I’m now going to select our element, come here to the data panel, and in dynamic data and style in get text from genres I’m going to select the attribute name. As the name is what I want to show here. 

I’m going to do exactly the same thing down here, I’m going to select the flex layout, which is also called a vertical list. 

I’m going to come here to the data panel and I’m going to enable the dynamic data option. I’m going to come to the collection and select moods. And I’m going to select our element, I’m going to come here to the data panel, and here in dynamic data and style in get text from moods I'm going to select the attribute title.

Ok, our layout has now been built. So we can see that our sort buttons are functioning. Our search button is also functioning correctly, here it is, I’m just going to delete this.

We’ve got our pagination functioning correctly. And we have our filter buttons here that still hasn’t been defined - this is something that we’re going to look at in the next video. So as you can see it was easy to build this page.