Courses

C. Articles List
Search
Search

In this video, we’re going to learn how to configure the search component when we use a search element in our layout, page, or another project. 

Lesson transcript

In this video, we’re going to learn how to configure the search component for when we use a search element in our layout, or page or another project. So all you have to do is come here to UI objects, to the data area and you’ll see the search element. We’re going to have to place a text input element and a submit button to the search element.


So this is what we need. I’m now going to close this panel.


In this case, we’ve changed the name of these elements. So now I’m going to select the search element, I’m going to come here to the data panel, and I’m going to select one of these two options.


I want to see the search results on a separate page, so I’ve created a separate page and I made sure this page didn’t have a slug as this could complicate things. And so now I’m going to select this page. 


We can place flex layouts and repeaters on this page which would be the search target. In this case, I’m going to select this option here called search repeater. I’m going to select this option as I want to search in a single repeater, this flex layout here. I want to have all of my search results on this page where I have my search component. 


So all I have to do is select this flex layout called e-grid. Ok, this is done now, we can also configure this placeholder text here. All we have to do is come here in the data panel and modify the text to whatever we want. 


And now all we have to do is create a filter for the list. So we have to select the first element, the flex layout here, and then come to the data panel, and down here we can see the filters. We’re going to add a filter. We want the user to search by the article name so that the value they input into this field matches up with the values the content manager has used to populate the collection articles title field. 


So to do this we’re going to need to select the flex layout, come here to the data panel and here in filters we’re going to select add a filter. Let’s select this. The attribute we’re going to select in this case is the title - as we want the user to search by title. 


The condition is going to be text contains the search query if present. So if the user searches for words that are contained within the title of the article's collection, they’ll get search results. All you have to do is hit create and now it’s done. 


We can now have a quick look and check that this is functioning correctly by entering the preview mode. I’m going to search for the word most, and as we can see this is working. So as you can see it’s really easy to add and customize the search functionality.

Back

Search

In this video, we’re going to learn how to configure the search component when we use a search element in our layout, page, or another project.