Grouping Content

Purple Experience

In the Purple Experience Builder, with adding filters you may narrow the content of a content data source to display only a subset of the available data.

There are multiple options to filter and you also are able to apply conditionals to react to the users' interaction with the page.

We want to create a navigational element which allows users to display content based on its attributes, it should display all available content on the first load.

To create a static list controlled in the Purple Experience, add a JSON file, in this example, we name it topics.json, with your desired values to your Experience folder. (note: you may want to create a mapping here to decouple frontend and backend) i.e.

Then, in your views.json, create a section, that contains a list which displays Buttons in a horizontal template and with the earlier created JSON as JSON-Datasource. We access the JSONs information through the context and display the name according to the JSON:

Now, to react to what a user might choose, we add a tap action to the buttons to store the navigational value. For that we are using the "topic" from our json, to decouple data structure and frontend labelling:

To check if this works as expected, we can inspect the context in the preview. We'll see that userAttributes is empty upon page load and gets data set after pressing a Button.

Add a filter to your desired list that filters for parameters according to the navigational value. (note: Set your initial value in a way that you can disable the filter completely - with that approach you can display all elements at the start and also remove the filter later in the process. Do some thinking about where you want to store the selected parameter: Using userAttribute as in the example above will persist the value in local storage until the storage is cleared.