Create a home

Introduction

What makes a home good?

The home is the first thing your user will see. Sometimes, it can also be the only thing they’ll have time to see.

Imagine your manager going into a meeting, and in the elevator he/she wants to see the latest numbers.

Think of the top indicators that will make your user a rock star in any situation.

Here are a few tips for you to keep in mind when building a home page :

  • Understand you user need before you start
  • A home page is not exhaustive
  • Choose meaningful indicators that tell a story
  • A home page can change, and be updated
  • One indicator = one message
home

home

Step 1: Give your home a title

Give your home a title, let your user know what this is all about.

Are you doing some “Retail monitoring”, some “Brand management”?
name home

name home

Step 2: Create a view

Tip

💡 Did you know? This is an optional option, 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. Based on what the user will select, the home will be specific to the selection made.

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.

📖 Learn more on how to custom your story from the Create a story page

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 others.

📖 Learn more on how to use visbility to custom your small-app. (tutorial to come)

Add 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 of view of the data I need to display?
  • What level of detail do my user need access?

Write down your users stories and validate them with your team.

As [this user] I need to see …

This is the skeleton of your small-app, it will define the whole navigation for your user.

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 focus on countries. So I want a dropdown menu where I can select “Global” or “France” or “UK”.
view selector

view selector

Warning

Groups and granularity are not yet available, please refer to advanced tutorials to switch to the old home and configure these options.

Step 3: Add a background

Default background

Customize the background of your small-app, in just a few clicks.

You’re telling a story, to keep your user interested, personalize it as much as you can.

By default, you small-app will use the Toucan Toco background, called bg-1.

From the asset menu you can change this image, by clicking on it and uploading your own background.

edit background

edit background

📖 Learn more about the asset menu right here.

You can also use just change the name of the asset to use your custom named asset.

Customized background per view

You can also customized the background for each views by switching to the advanced configuration.

Warning

Your asset name should include the prefix bg-. For example: bg-france.jpeg

Choose from wich requester you want to customize the background. This mean you’re choosing where the variable is coming from.

  • Is it from the view? I want to have a background for each country
  • Is it from the date? I want to have a background for each month
custom background

custom background

Tip

💡 Your asset don’t have the prefix bg-? Don’t worry, switch back to the basic mode and delete the prefix bg-, you should now just have <%= appRequesters.report %>

Add a background overlay

You can add a background overlay. By default, it takes the brand color

If you want another color, you can specify it

background\_overlay

background_overlay

Step 4: Create a category

To be readable and understandable by all, your home page should be organized.

Use categories as a reading grid to help your user better navigate through all the indicators at his/her disposal.

📝 In this example, I want to have a general view, then a focus by brands and by stores.
new category

new category

Step 5: Create a tile

What is a tile?

A tile is a small box containing data you want to display. See it as a mini viz/chart with limited options.

Tiles are not only figures, but can also be media or editorial content like text, images or videos.

Why limited options?

Several indicators are presented on the homepage. As a consequence, the homepage needs to be as clear and concise as possible to catch the user’s attention. Therefore, you cannot use regular charts here like you would in stories, which requires more space. We’ve crafted a set of small visualizations specially designed to be overseen and yet understood in a glimpse: we’ve called them tiles.

Tiles are a much more limited than regular charts, to make sure you keep your home as light as possible.

tiles

tiles

Dataset editor

This is where you select the data you want to use in your tile. From this interface you can select a dataset from your available datasources.

📝 I want to show the evolution of my revenue, what is the dataset containing this information?

Get a clear overview of your data and proceed to small adjustments to help your user understand what he/she’s looking at.

📝 Is my revenue in $ or M$? Is it worst or better than last month?

From the interface you can configure:

Use the dataset viewer window to see live the results of your configuration.

Tip

💡 Did you know? You can use Toucan Toco to adjust and enrich your data? Need to add calculations to your existing dataset? Want to add evolution to a specific metric? Merge datasources? 📖 Check out the data section of our documentation.

dataset editor

dataset editor

Customize the tiles from the view

If you have created a view, you may want to use it to filter the data you’re showing.

📝 In this example, I want the France view to only have access to France data. As the french manager I will only get access to the revenue trend of France

By creating views, you have generated variables that can be used anywhere in your app. Tiles, widget, asset customization etc…

This variable can be used with the parameter <%= appRequesters.report %>.

📝 In this example, if I’m on the France view, the result of <%= appRequesters.report %> is france

Warning

The result of the variable is coming from the view datasource you have defined earlier. Pay attention to spelling, caps and trailling space. This result should match exatcly the view’s datasource and other datasources you will match with it.

This parameter can be used in the dataset editor to customize your dataset and create specific queries.

This variable should be applied to a column from your tile datasource that contains a way to identify data specificly for your user’s view.

view requester

view requester

Tile parameters

This is where you chose which chart you want to use.

📖 Learn More about all tiles options from the reference.

Start by selecting a type of tile from the dropdown menu

Then follow the placeholders to enter charts parameters. Don’t forget to use the preview window to check your changes live.

tiles menu

tiles menu

Mandatory parameters

These are parameters required for the chart to show up.

  • For example, you can not create a chart without a value column. value is the column containing the data.
  • The line tile will not show up without a date parameter

Optional parameters

These are, well, optional parameters you can configure to enhance your chart.

  • For example, in the linechart I can choose to configure a ticksFormat parameters in order to choose how to display the date. Do I want the month? the year with 4 digits? etc..

Other tiles options

Strategic place to be on the home page! Use tiles to customize your navigation thru your story. 📖 Learn more about linkTo from this tutorial.

Last update date can be different based on your views? On the indicator? 📖 Learn more about dynamic sources from this tutorial.

Want to convert a value into a star rating? 📖 Learn more about adding stars to your tile’s title from this tutorial.

Date selector

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.

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”.
date selector

date selector

Warning

Groups and granularity are not yet available, please refer to advanced tutorials to switch to the old home and configure these options.

Customize the tiles from the date selector

If you have created a date selector, you may want to use it to filter the data you’re showing.

📝 In this example, if I select January, I only want to display January’s data

By creating a date selector, you have generated a date variable that can be used anywhere in your app. Tiles, widget, source etc…

This variable can be used with the parameter <%= appRequesters.date %>.

📝 In this example, if I’m on the January view, the result of <%= appRequesters.date %> is January

Warning

The result of the variable is coming from the view datasource you have defined earlier. Pay attention to the date format! This result should match exatcly the view’s datasource and other datasources you will match with it.

This parameter can be used in the dataset editor to customize your dataset and create specific queries.

This variable should be applied to a column from your tile’s datasource that contains a way to identify data specificly for your user’s date selection.

Send home by email

Now that you have build and customize your home page, what about sharing it?

You want to print it for your records? You’d like to send it to one of your colleague who doesn’t have access to the app?

Simple, just click at the bottom of your home, on the Send PDF by mail.

Just type in an email address and the home will be shortly in the inbox.

send pdf email

send pdf email

Your contact will receive a mail with a pdf attached and a link to access the home page.

📖 Learn more about how to customize email notifications.