How to :: create a date selector

Note

This is optional, you can chose to not have any custom date selector available for your users.

What is a date selector?

A date selector is a way for the user to choose a specific time period for wich the data will be shown.

Based on what the user will select, the home can be specific to the date selected.

You’ll be able to customize the KPI the user will see.

For example :

  • I’d like to see weekly and monthly data
  • I’d like to see the cumulated quarter as well as a specific quarter

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

Which means you can adapt both your home and your stories from this date selector.

date

date

Add a date selector

Select the dataset containing your list of dates and configure the date selector.

📝 In this example, we want to have a monthly overview of our sales, and a quarter selection. So I want a dropdown menu where I can select “January” or “February” or “Q1”.

Configure granularity

Let say your end-users have access to February data. For the current month, but also cumulated, and for 2019, 2018, etc…

This complex drill in the data can be easily done with the Granularity option.

Configure the granularity option to activate a nice build-in UX for your end user. They’ll be able to select a first level of dates and then select from there a specific date.

Date granularity accepts many levels, but try not to make it too confusing for your users.

Use the date selector in your application

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

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