How to :: create a view/report selector

Tip

💡 Did you know? This is optional, you can chose to not have any custom view available for your users.

view home

view home

What is a View?

A view is a way for the user to choose which figures will be displayed on the home. Each home will be specific to the choices made by the user.

You’ll be able to customize the KPI the user will see, as well has the number and type of viz you want to display on the home.

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

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

This means your home and stories can be adapted from this view/report selector.

view stories

You can also create a specific navigation for each view. Some chapters or stories can be only visible from some views and not from others.

This is what we call visibility.

Adding 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?

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.

Select the dataset containing your list of views and configure the view selector.

📝 In this example, we want to have a Global overview of our sales and to focus on countries. So I want a dropdown menu where I can select “Global” or “France” or “UK”.
view selector

view selector

Hierarchy

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

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

parent child
Europe France
Europe Spain
France Paris
Spain Madrid

and then just fill in the blanks 😄

hierarchy

Note

💡 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 😄

Using the View Selector in Your Application

The view/report selector creates a variable that can be used almost anywhere in the app with the parameter <%= appRequesters.report %>.

📖 Learn more on how to use this variable with the templating tutorial