In the Grouping the canvas components recipe in Chapter 1, Staying in Control, we discussed how grouping multiple components works. This solution is a good option when a limited number of components are involved. But if you are building a dashboard with a lot of overlapping layers in combination with the Dynamic Visibility functionality, you are recommended to use the Canvas Container component.
- Drag a Canvas Container component found in the Containers category into the canvas.
- Resize the Canvas Container component to almost half the same size of the canvas.
- Drag a Line Chart component directly into the Canvas Container:
- Take a look at the Object Browser. You will notice that the Line Chart component is placed one level below the Canvas Container component. This indicates that the Line Chart component is now part of Canvas Container:
- Select Canvas Container and drag it to the far right of the canvas. As you will see, the Line Chart component also moves along with Canvas Container.
- Now drag a Pie Chart component directly into Canvas Container.
- Resize the Canvas Container so that only one chart remains fully visible. A scroll bar will show up on the right side of the Canvas Container component:
- Preview the dashboard and check out how this looks in runtime.
The Canvas Container component looks a lot like the grouping of multiple components as we saw earlier in the recipe in Chapter 1, Staying in Control called Grouping the canvas components. But with this component, we also have the option to include horizontal or vertical scroll bars. In the properties pane, you can determine whether the Canvas Container will show these scroll bars or not. By default, the Auto option is selected, which means that scroll bars are only shown if a component that is part of the Canvas Container component lies (partly) outside Canvas Container. This was explained in step 7 of this recipe.
The gray background of Canvas Container is only shown in design mode. If you run the dashboard, only the possible scroll bars are visible. In addition, one of the biggest benefits of using Canvas Container is that you do not have to ungroup the components when you want to resize or move the grouped components around.