Making Numbers Transparent Without Clutter
In this tutorial, you’ll learn how to create interactive, single-page reports using layout containers and variables to reveal detailed data with just one click.
Instead of overwhelming users with large tables or forcing them to manually filter data, you’ll build dashboards that show high-level KPIs while keeping underlying details instantly accessible on demand.
In most reporting environments, users see only the final figures – even when those values are the product of complex calculations or extensive data tables. While summaries are useful, they can leave decision‑makers wondering what drives the numbers behind the scenes.
Instead of manually filtering large tables to find answers, interactive report design offers a better way. By using layout containers and variables, underlying data can be displayed directly within the same report — accessible with a single click. This provides full transparency without overwhelming the main dashboard.
What are the benefits of this approach?
- Clear, transparent data sources and filters
- Reduced manual data requests and repetitive reporting
- Clean, visually streamlined dashboards
- Faster access to the context behind KPIs
Some use cases:
Employee turnover report
Drill down from high‑level turnover rates to individual employee records or department trends.
Weekly maintenance work orders, hours, and capacity report
Review overall productivity, access the specific jobs, hours logged, and utilisation directly from the same page
Single-page reporting is an ideal format for presenting key performance indicators (KPIs) and figures because it balances high-level overviews with functional depth. While these reports typically present users with final, complex calculations at a glance, they can also provide immediate access to the underlying data.
How can this be done?
The concept is simple: place all relevant objects inside a Layout Container and control their visibility using a variable.
Within the Layout Container, elements can be layered on top of each other by adjusting their stacking order. Add all required components — including the Details section — into this container so their visibility can be centrally managed.
Step-by-Step Setup
Create a Variable
Define a variable with a default value of0.Set the Show/Hide Condition
Configure the Details Table to display only when the variable equals1.Because the default value is
0, the Details Table remains hidden initially.
Control Visibility with Buttons
Use buttons to update the variable’s value:Details Button → Set the variable to
1
→ The condition is met, and the Details Table becomes visible.Close Button → Set the variable back to
0
→ The condition is no longer met, and the Details Table is hidden again.
Result
By combining a Layout Container with a simple variable-based condition, you can easily control show/hide behavior without complex logic.
