Create a home

It’s time to get started, let’s create a home page.

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, it can change, and be updated
  • Choose meaningful indicators that tell a story
  • One indicator = one message
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”?

.

✏️📓 Trial Scenario :: To dos

Give your app a title, let say “My Trial Scenario”

Step 2: 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.

.

✏️📓 Trial Scenario :: To dos

Create a category called “General Overview”

Step 3: Create a tile

You create tiles in 2 steps:

  • Choosing data
  • Configuring your tile

Before we start building our own tiles, let’s understand what is a tile and then review the process.


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 that will be displayed on the home page.

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

How to create a tile?

✏️📓 Trial Scenario :: To dos

Nothing to do yet, just read the information below before getting your hands dirty

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, click on the column header to configure:

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

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

But just so you know, this is not available from the Trial Scenario 🙂

dataset editor

dataset editor

Tile parameters

This is where you chose which chart you want to use. 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..

📖 Learn More about all tiles options from the reference.

Let’s create some tiles

✏️📓 Trial Scenario :: To dos

Let’s create 3 tiles together that you’ll be able to customize with your own data later on.

Create a trend tile

Click on Add a tile.

After clicking on Pick some data select the tile-trend dataset.

Then go to the Tile’s parameters to configure a line tile (select line from the dropdown menu)

  • Add a title like “Revenue Trend” for example
  • Leave the dataset set on “my_dataset”
  • For value, select the column of the dataset containing the line value; value
  • For date, select the column of the dataset containing the line dates; label
  • Check out the preview and Save when you’re done!

It should look like this:

tile line

tile line

Create a video tile

Click on Add a tile.

No need for a dataset to build this type of tile, go directly to the Tile’s parameters.

  • Select a video tile from the dropdown menu
  • Choose Youtube as a video provider
  • Copy paste this video id to add a nice Toucan video to your app: fM6356ZAdM4. Note that the id of a video can be found in the video’s url, right after the equal sign: https://www.youtube.com/watch?v=fM6356ZAdM4
  • Check out the preview and Save when you’re done!

It should look like this:

tile video

tile video

Create a text tile

Click on Add a tile.

No need for a dataset to build this type of tile, go directly to the Tile’s parameters.

  • Select a text tile from the dropdown menu
  • Add a title like “Monthly newsletter” for example
  • Add a text to display, something like this for example: “This will can be a lovely newsletter written by your team! Amazing!”
  • Check out the preview and Save when you’re done!

It should look like this:

tile text

tile text

So far, your home should look like below. Keep the good work!

trial home

Step 4: Be proud of your home!

Congrats!!! You just created your first Toucan home page. What an accomplishment! And see how easy it was?

Want to make someone jealous? Checkout below on how to do so…

Publish your changes

First, make your changes available on production.

From the toolbar, click on the spanner and select Publish.

publish

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.

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