CONTAINERS | A STEP-BY-STEP GUIDE
If you have stumbled across this blog today, you’ve probably reached the point in your project where you’ve prepared all your sheets and now, you’re trying to figure out how to get them to look good on your dashboard… Am I right? Well, lucky for you, I can help you with that.
Using containers to create your dashboard allows you to have more control over the placement of your sheets. They allow you to group several sheets together, that will stay in that position if you decide to move the container somewhere else on the dashboard.
You would use horizontal containers to drop sheets side by side, and vertical containers to drop sheets on top of each other. Which container you use depends on how you want your dashboard to look.
The dashboard we are going to create today is the following:
For a clean and uniform look, every sheet has a border and equal blank spaces between them. The title has been separated from the rest of the dashboard with a thin line which draws attention to the title and guides the viewer to the beginning of the dashboard.
STEPS
Step 1| Creating the base: The first thing we want to do is add a container that is the same size as our dashboard. Hold ‘shift’ on your keyboard and drag a vertical container into your view from the dashboard pane. In the layout pane, change the X and Y axis to 0, and change the width and height of your container to match that of the dashboard. In this case, the width is 1000 and height is 800. Then drag a blank container into the view. The blank container will fill the dashboard, but will then allow us to see the space remaining on the rest of our dashboard as we start adding to it.
Step 2| Title: Drag a text box to the top of the dashboard, you should see a shadowed area. This indicates where we are placing the text box. Every time we drag a new object into the view, we will see a shadowed area that will show where the object will be placed. This is a great way to make sure sheets are going in the correct place.
Drag a blank object directly under the title. The shadowed area in this case has a dotted blue line going through it. This means we are placing this blank object between two other objects. In this instance, we are placing a blank object between the text box and another blank object.
In the layout pane, colour the background dark grey. Change the outer padding to '0'. On the drop down menu on the blank container, choose edit height and change the height to 2 ( you can play around with this depending on the height you prefer). This creates a thin coloured line to seperate the title from the rest of the dashboard.
Step 3| Adding Sheets: Add a horizontal container because we want to add the first two sheets side by side. Insert the first two sheets in this container. Add a second horizontal container directly underneath this, and insert two sheets into this container.
At this point we will see the blank container at the bottom of the dashboard. As we no longer need it, it can be deleted by clicking on the 'X' on the option menu to the right of the container. We will also see our legends pop up around the dashboard. These fall under 'Tiles' in the layout pane and can also be removed by right clicking on 'Tiled' in the layout pane and 'Remove from dashboard'.
For the third sheet, we will need a vertical container because we need to stack the title and paramater on top and the bar chart underneath it. Vertical containers stack sheets on top of each other. Using the handle, move the parameter into the container.
Add a text box to the right of the parameter and add the title 'Top 5 Employees By <parameter>'. With the 'Insert' button on the top right of the text box, you are able to insert the parameter. This will enable the product type in the title to change depending on which one you choose in the parameter. Add a blank container between the title and the bar chart below it and create a thin coloured line as we did under the title of the dashboard.
Step 4| Formatting: Now that we have everything we need on our dashboard, we want to format it to look more uniform and neat. In the layout pane, click on 'Horizontal', this will highlight the main container holding our grouped sheets. In the drop down of the container, choose 'Distribute contents evenly' to give each sheet an equal amount of space. And edit height to your desired height. In this case, the first horizontal container is at a height of 276. For each sheet start off by adding a thin border in light grey. Set the background to none. Set the inner and outer padding to 10 for all sides.
Because we want an equal amount of white space between each sheet, the sides where the sheets meet need to be equal. To do this, we need to change the Outer Padding to 5 on those sides. In the first image, the arrows show us where each sheet meets another. In the outer padding, uncheck 'All sides equal' and change the sides that meet to 5. Do this for all sheets.
Step 5| Double Check: Once we have formatted the dashboard, we want to double check that the placement and formatting of each sheet is correct, titles are correct and all the tiles that we don't need have been removed. In this case, our last step is to change the title of our Parameter to Category. You can do this by double clicking on the title.
And there you have it! A step-by-step guide on how to use containers in your dashboard.