Building a Purple Experience
Grouping Content
4min
purple experience introduction 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 example 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 \[ { "name" "category1 nav", "topic" "cat1" }, { "name" "category2 nav", "topic" "cat2" }, { "name" "all categories nav", "topic" "all" } ] you may freely choose the exact path and name according to your needs 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 views 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 views json 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