To create visually appealing and relevant dashboards, Harmoni has customizable containers that enable dashboard Creators to create, edit and manage the components of a dashboard. Learn about the process to add containers and the general settings available across all container types.
In this article
1. Add a Container to your Dashboard
To add a container to your dashboard page, ensure you are in edit mode. You can find the edit icon at the top right corner of the dashboard page.
Clicking this icon opens the editing pane. At the top of the editing panel are the different container type options to use in your dashboard.
Harmoni dashboards provide different types of containers for organizing your content: Text, Image, Chart, Embed, and Selector.
- In the edit mode select a container type.
- Clicking a container type icon adds a container to the dashboard canvas.
- Remember to save the dashboard after making changes.
Any change you make to your dashboard page must be saved for it to be retained.
2. Container General Settings
After choosing a container type, the General settings menu becomes available. You can use these settings to adjust the content, titles, size and position, padding, arrangement, background color, and to add links.
This menu is context-sensitive. Customization options will differ depending on the container type you are using.
- When selecting different container types, different options are available in the settings panel.
- Use the + to expand and the - to collapse each section.
Dashboard container settings are "sticky," so changes made to one container automatically apply to new containers added to the same dashboard. This streamlines the design process.
Many of the container settings are shared across the container types. Review the table below to understand these general settings.
To learn more about each container type and specific settings, use the links below to view the articles for each container type:
General Settings
| Settings | Options |
Size and Position |
You can drag and resize containers using the mouse pointer, but using the size and position options allows for the precise placement of your container.
Lock Display Size For Text and Single Number chart containers, there is an additional option to lock the display size. This option locks the size dimensions of the containers that hold the text and single number items. When a user changes the screen size or adjusts browser scaling, the alignment and overall design aesthetic remains as intended. Tables in dashboards can be limiting as they only display within the maximum confines of their container. Lock display size lets you resize the box while retaining the columns and/or rows you want to display. The table will 'shrink' to fit the box size you select. Please note that the font's readability is affected the smaller you go, so beware of maintaining a readable size. |
Padding |
Padding clears an area around a container's content (inside the border). You can select a container's Top, Bottom, Left, and Right padding. |
Arrange |
Containers within a dashboard can be stacked in layers.
Learn more about layering containers. |
Background |
Set a background color as well as change the opacity. Opacity controls the transparency and obscures or reveals the layer below.
When using transparency, be careful on graphs that allow zoom. |
Link |
Custom Link allows you to link to other items.
|
3. Adjust the Container
When working with any container type on the canvas, you can adjust the size and position manually by dragging out the corners of the container and clicking on and moving the container.
To help position items, make use of the grid guides on the canvas. If you prefer not to see these, uncheck the Show Guides option at the bottom of the settings panel.
Containers are easily deleted by using the trash can icon at the top right of each container.
- Drag the corner of a container to resize it
- Click on and move the container to reposition it
- Hide or show the grid guides
- Delete a container
Container Layering
When creating a dashboard with many containers, you'll need to consider the order of the layers carefully. It may also be necessary to consider chart containers that zoom on the dashboard and how they interact with other items. To learn more about working with layers, review the Dashboards - Layering Containers article.
Lock Display
Lock display allows you to lock and maintain the size proportions of containers within your dashboard. This ensures that when the screen size changes or the scaling of the browser is adjusted, the alignment and overall design aesthetics remain as intended.
Once you are happy with the size and position of the container, use Lock Display Size on the container to enable appropriate scaling.
Learn more about how to use Lock Display when adding single numbers to your Dashboard.
Where to from here?
Learn more about each container type: