10.1 Dashboard Layout, Devices & Visibility

10.1 Dashboard Layout, Devices & Visibility

A dashboard combines worksheets and objects on a shared canvas. Good architecture makes layout behavior predictable across screen sizes and interaction states. Begin with information hierarchy and target devices, then select tiled or floating placement, containers, sizing, and visibility controls.

Tiled and floating objects

Tiled objects participate in the dashboard's layout hierarchy. Neighboring tiled objects take available space as the dashboard or a container changes. This reduces overlap and is usually appropriate for the main grid. Floating objects use explicit x, y, width, and height values and can overlap other objects. They are useful for deliberate overlays, compact controls, or annotations, but require testing at every supported size.

Tiled does not guarantee that labels will never collide or that a view will remain readable. Worksheet fit settings, minimum sizes, text wrapping, and device width still matter. Floating does not inherently improve or degrade query performance; its main tradeoff is positional maintenance.

Layout containers

A horizontal container arranges direct children from left to right. A vertical container stacks them from top to bottom. Nest containers to create a deliberate tree—for example, an outer vertical container with a header row, KPI row, and chart row.

Distribute Contents Evenly applies to sibling objects in the same layout container. Four standalone tiled worksheets cannot be evenly distributed through one worksheet's menu; place them as direct children of a horizontal container, select the container, and distribute its contents. Use the Layout pane's item hierarchy to confirm nesting when drop zones are ambiguous.

Avoid excessive nesting. Deep trees make resizing and selection difficult. Use blank objects or padding for modest spacing, not layers of empty containers.

Padding, borders, and size

Outer padding creates space outside an object's border and background. Inner padding creates space between the border and the content. Increase outer padding to separate neighboring cards and inner padding to keep text or marks away from the border. Use consistent values rather than manually offsetting every object.

Dashboard size options include fixed, automatic, and range. Fixed size provides a predictable canvas but can produce scrollbars on smaller screens and unused space on larger screens. Automatic fills the available browser area but can stretch charts or change label behavior. Range provides minimum and maximum bounds while responding within them. None of these choices guarantees better cache performance; choose according to supported devices and visual stability.

Worksheet Fit options—Standard, Fit Width, Fit Height, and Entire View—control rendering inside the allotted zone. Fitting an enormous crosstab to Entire View may make text unreadable. Scrollbars can be preferable when exact lookup is the goal.

Device layouts

Device Preview shows how a dashboard appears for desktop, tablet, and phone ranges. Add a device layout when the default design is not appropriate for that class. A custom phone layout can rearrange objects and remove an object from that layout without deleting the worksheet from the workbook or default layout.

Removing from a custom device layout is different from deleting the underlying dashboard object or worksheet. Test orientation, touch targets, filter-card modes, legends, and scrolling on representative widths. A mobile layout often benefits from a single vertical flow, fewer simultaneous charts, and compact filters, but preserve the information required for the task.

Show/hide buttons

A show/hide button lets the viewer toggle a target dashboard item such as a filter container. Configure distinct shown and hidden labels or images and useful tooltip text. When a tiled target is hidden, sibling objects may fill its space depending on the layout hierarchy. Hiding a floating target reveals whatever is beneath it. Test both states rather than assuming the surrounding layout will reflow.

Dynamic zone visibility

Dynamic zone visibility shows or hides a zone from a supported Boolean or single-value field or parameter. The controlling field must produce one independent value for the zone's state. This enables patterns such as showing a chart only for a selected metric, revealing instructions until a selection is made, or switching between summary and detail containers.

Dynamic zone visibility is state-driven, while a show/hide button is a direct viewer toggle. It works with tiled and floating zones. A worksheet using dynamic zone visibility does not behave that way when it is placed in a Story. Validate that hidden zones, titles, padding, and neighboring objects produce the intended layout.

Design workflow

1. Define the decisions the dashboard supports and rank the content.
2. Select target viewport ranges and a fixed, automatic, or ranged canvas.
3. Build a shallow container hierarchy for the primary grid.
4. Use floating placement only for deliberate overlays or controls.
5. Apply consistent padding and inspect the item hierarchy.
6. Create custom device layouts where the default cannot remain usable.
7. Add show/hide or dynamic visibility only when it reduces clutter without hiding essential context.
8. Test empty filters, long labels, large values, tooltips, downloads, and keyboard focus at representative sizes.

Layout quality is not measured by pixel control alone. It is the ability to preserve hierarchy, legibility, and interaction across the states viewers will actually encounter.