Layers and groups
- See also
Layers and groups give you a way to manage and organize elements on your dashboard, report or other view as a collective unit. You can then show or hide them either when editing or when viewing.
Related video: Group and Layers
The editor for dashboards and other views lets you group multiple elements on the canvas together. Once grouped, you can easily apply operations to the set of elements as a whole, such as dragging the group to a new location.
If you have related items such as a chart, its title label, and a legend, you may want to group the elements together so they always appear side-by-side no matter where you move the group on the canvas.
To group two or more elements, first select them on the canvas by dragging a selection rectangle around all of the elements. If you're on a desktop, you can also press the CTRL key while clicking each of the elements in turn.
Once you've made the selection, go to the toolbar, click Arrange, and then click Group.
The grouped set of elements appears with a light blue background. You can move the group around the canvas by dragging it. You can even delete the group (and all of its elements) as a whole.
2.2. Show or hide a group
A group has its own set of properties, just like any individual element on the canvas.
Select a group on the canvas, and then open the Properties window to see the properties of the group.
Check or uncheck the Hidden property to hide or show the group.
To ungroup a set of elements, first select the group on the canvas.
Then go to the toolbar, click Arrange, and then click Ungroup.
The group is removed and you can access the elements individually again.
Whenever you add an element to the canvas, the element is slotted into the current layer. You also have the ability to add new layers and insert elements into the new layers as you like.
One reason for separating elements into different layers is when you have a complex dashboard with overlapping elements. As you're designing, you can hide layers that are completed and show just the layers you are actively working on. Layers can also be locked to prevent accidental modification (such as moving a chart out of position by mistake).
Another reason for using layers is to support dashboard implementation scenarios where viewers should be able to show or hide some content through an interaction. For example, a common case is to create a help overlay using layers for your dashboard, which is displayed when the viewer hovers over or clicks on a help button.
Use the Layers window to see and manage the layers and the elements within them.
Layer 1 is automatically added and selected when the view is created.
A very useful feature in the Layers window is the ability to see a list of all elements in the view grouped by layer. This includes visualizations, components, groups, scripts, and hidden items.
In addition, the icon for a layer contains a small preview of elements within the layer.
To view the elements for a specific layer, click the + button below the name of the layer. You can also search for an element by its name.
The elements are listed. Hover over an item to highlight the corresponding element on the canvas. Also, select one or more items on the canvas to highlight them in the Layers window.
If you select an item, it will also be selected the same as if you clicked on it, and you can switch to the Properties window for the element. Double-click an item on the list to center your screen on it.
Right-click an item to access common options such as renaming, showing & hiding, or locking/unlocking.
Groups are also listed, even if they are hidden. If you want to add components to the group, simply drag them overtop it.
If an item in the list besides a group has an expander arrow, it has an interaction or script assigned to it. Click the expander to view the list of actions, each with its associated event in parentheses. Click a script to open it in the Script Editor.
3.2. Show or hide a layer
To show or hide a layer, toggle the 'eye' icon beside the layer in the Layers window.
To show or hide all layers in one operation, click the corresponding button at the top of the Layers window.
3.3. Lock or unlock a layer
Layers can be locked to prevent accidental modification (e.g., moving a chart out of position by mistake).
To lock or unlock a layer, toggle the 'lock' icon beside the layer in the Layers window.
To lock or unlock all layers in one operation, click the corresponding button at the top of the Layers window.
3.4. Rename a layer
Click the name of a layer in order to change it.
You can also rename a layer from its context menu or Properties window.
3.5. Add a new layer
In the Layers window, click Add in the toolbar and then select the type of layer to add.
The menu layer consists of a single template cell allowing you to keep components on this layer separate from the main template grid. An example of where a menu layer can be used is when designing a dashboard with menu navigation. For more information about using the menu layer, see the Using menu layers article.
When added, the new layer will be positioned above existing layers in terms of z-order. It will also be set as the new current layer as indicated by its blue selection border.
3.6. Reorder the list of layers
In the Layers window, you can drag a layer and move it above another layer in the list. This will change the z-order of the layers. The elements from a layer that is at the top of the list (e.g., Layer 2) will always appear on top of elements from a layer that is lower in the list (e.g., Layer 1).
3.7. Set the current layer
The current layer is selected in the Layers window (appearing in blue). Any elements that you add to the canvas will go into this current layer.
To change the current layer, simply click to select the layer you want in the Layers window.
3.8. Delete a layer
To delete a layer (and all of its contained elements), select the layer in the Layers window and then click Delete in the toolbar.
3.9. Move an element from one layer to another
In the Layers window, if you view the elements for one layer and another layer, you can move an element between the two layers using drag-and-drop.
To modify the properties of a layer, go to the Layers window. Expand the layer you want (by clicking its + button) and select the layer in the tree view.
Go to Properties to view or modify the properties of the layer, including its Script Name.
4. See also
- Video: Group and Layers
- Design overview
- Using dockable windows
- Using interactions
- Create a help overlay using layers
- Create a dashboard template
- Using a template grid for resizing