How to :: create a view/report selector

What is a View?

A view is a way for the users to choose what story to tell.

With a view selector, users will choose which figures to display in the app. The user chooses the focus of his/her analysis.

With the views you create a custom data story telling!

For example :

• I’d like to customize the home for each country where I’m selling my products
• I’d like to have a view for each of my agents, their manager and the country manager
• I’d like to have some indicators for the Marketing team and others for the Finance team
• I’d like a global overview of my sales, then a global overview for each of my brands
• Some stories can only be accessible to specific users

This view selector can be available from the home and from the stories.

How it works ?

Create a custom data storytelling in your application can be done in 2 steps :

• Create your view selector
• Connect your view selector
  • in queries : to adapt data
  • in visibility : to adapt navigation

Create a view selector

It’s very important to understand your users’ needs before starting.

Ask yourself the good questions to understand who are your users:

• What are my categories of users?
• What are the main points I need to display from my data?
• What level of detail do my users need access to?
• …

Note

💡 Write down your user stories and validate them with your team.

“As [this user] I need to see …”

This is the skeleton of your small-app that will define navigation for your users.

There are 3 types of view you can create :

Simple :

• Let your users choose the focus of their storytelling from a simple dropdown
• “I can choose between France or USA”

Hierarchy :

• Let your users choose the focus of their story telling from different levels.
• “I can choose between France or USA”
• “I can choose between Europe (France + other countries) or North America (USA + other countries)”

Multiple Views:

• Let your users choose the focus of their storytelling from different categories that are independent.
• “I can choose France for all my products”
• “I can choose USA for product 1 only”
• “I can choose product 1 across all my countries”

The main difference will be the user interface available in the app.

The type of view selector also influences the structure of the data you need in your app.

Don’t rush in, make the right choice as it’s the backbone of your application.

Warning

If you change your mind about the type of view you’d like, you’ll have to recreate the view selector from scratch

Simple view

Let your users choose from a list the point of view of their application, of their data story telling.

• Choose between countries
• Choose between departments
• Choose between products
• …

What ever your point of views are, users need to select from a simple list.

Mandatory parameters

You first need to choose a dataset that contains the list users can choose from.

Then, just select the column containing that list in the views labels parameters.

That’s all you need to create a simple view selector.

Optional parameters

There many other options you can use to customize the experience with the simple view selector :

• SHOW VIEW SELECTOR IN STORIES HEADER : allow user to change views from the stories
• DEFAULT VIEW : choose a default view for users to land on when they arrive on the app
• HIDE SELECTION FROM MENU : hide the selected view from the list users can choose from
• DESCRIPTION
• DESCRIPTION : Use this to overwrite the default value in the view search bar. It’s basically a sentence that invites the user to use the view selector
• SHOW DESCRIPTION IN HOME SEARCHBAR: will display the description on the home page
• SHOW DESCRIPTION IN THE STORIES HEADER SEARCHBAR : will display the description in the stories
• MAKE ALL COLUMNS AVAILABLE : use this for templating purposes, when you want to connect your view selector to your queries. See the templating doc below for more info
• GROUPS : use it to create visual groupings within your list. It won’t be selectable by your user, it will just ease the lecture of the view list
• ORDER : choose the order of the views within the list users can choose from
• URL REPORT ID : (ADVANCED - available in code mode only) use it to change the requester id in the app url

Hierarchy view

Create a drill down experience for your end-users. Allow view selection from a hierarchy structure.

Mandatory parameters

You first need to choose a dataset that contains the list users can choose from.

You need a parent/child dataset that looks like this :

parent	child
Europe	France
Europe	Spain
France	Paris
Spain	Madrid

From this dataset users can choose : Europe > France or Spain and select a city in theses specific countries.

Once you’ve selected your dataset, you need to setup the two following parameters :

• HIERARCHY : This is where you define the structure of the drill in your dataset
• CHILD : which column contains the child info
• PARENT : which column contains the parent info
• TOP PARENT : the highest value of the hierarchy
• VIEW LABELS : it’s the list users will choose from

That’s all you need to create a hierarchy view selector.

Optional parameters

There many other options you can use to customize the experience with the simple view selector :

• SHOW VIEW SELECTOR IN STORIES HEADER : allow user to change views from the stories
• DEFAULT VIEW : choose a default view for users to land on when they arrive on the app
• HIDE SELECTION FROM MENU : hide the selected view from the list users can choose from
• DESCRIPTION
• DESCRIPTION : Use this to overwrite the default value in the view searchbar. It’s basically a sentence that invite the user to use the view selector
• SHOW DESCRIPTION IN HOME SEARCHBAR: will display the description on the home page
• SHOW DESCRIPTION IN THE STORIES HEADER SEARCHBAR : will display the description in the stories
• MAKE ALL COLUMNS AVAILABLE : use this for templating purposes, when you want to connect your view
• ORDER : choose the order of the views within the list users can choose from
• URL REPORT ID : (ADVANCED - available in code mode only) use it to change the requester id in the app url

Note on default configuration

💡 For the default configuration, you don’t need to use the whole label. If France is the default view in your app, you can either:

• Precisely describe the hierarchy, by writing Europe>>France in your default field.
• Just write last hierarchy value: by writing France in your default field.

In our example, both of these configuration will setup “France” as the default view. Writing a precise hierarchy has 2 advantages:

• If you have multiple child levels named France (for example: NATO>>France EU>>France), the first result found in the hierarchy will be used. To ensure which level will be the default, you will have to explicitly define the default value.
• If you have a lot of elements in your hierarchy, the app will need to look up a lot of elements to find the default value. Explicitly setting up the default value can reduce that searching time.

When in doubt, you can go to the view home page in production and check the url. You’ll see a view parameter in the url, copy paste the value after it 😄

Multiple views

Let your user choose views from different categories.

• I can choose a country for all my products
• I can choose a country for one product
• I can choose a product across all my countries

Mandatory parameters

You first need to choose a dataset that contains the list users can choose from.

Then you need to setup the CATEGORIES parameters. You choose here the columns of your dataset users can select views from.

Optional parameters

There many other options you can use to customize the experience with the multiple views selector :

• SHOW VIEW SELECTOR IN STORIES HEADER : allow user to change views from the stories
• DEFAULT VIEW : choose a default view for users to land on when they arrive on the app
• DESCRIPTION
• DESCRIPTION : Use this to overwrite the default value in the view searchbar. It’s basically a sentence that invite the user to use the view selector
• SHOW DESCRIPTION IN HOME SEARCHBAR: will display the description on the home page
• SHOW DESCRIPTION IN THE STORIES HEADER SEARCHBAR : will display the description in the stories
• HIDE SELECTION FROM MENU : hide the selected view from the list users can choose from
• SHOW EXPANDED GROUPS : to have an expanded list

Connect the view selector

Once you have created your view selector, you can use it to create a custom data storytelling experience

Use it to manage navigation :

• Select how tiles and stories will appear based on the view selected
• 📖 Learn more on how to use visibility with this tutorial Use it to adapt queries :
• The view/report selector creates a variable that can be used almost anywhere in the app with the parameter
• 📖 Learn more on how to use this variable with the templating tutorial