Dashboard cards are a great way to group related data and make key information more accessible. The flexibility of Excel and XLCubed means there are a number of ways you might choose the incorporate a card-based design into your dashboards. In this blog we will consider one way to do this using XLCubed dashboard sheets and paged viewports.
This will be the final result:
Each of the cards in the dashboard is a combination of viewports and overlays within a paged viewport in order to utilise the control’s dynamic sizing, background colour and border properties.
Step-by-Step: Adding Card Designs to Your Dashboards with XLCubed
Consider the card below:
The data is first brought on to a standard Excel sheet through an XLCubed grid. Any charts, visualisations or formatting can also be created here. Then, on the dashboard sheet, create a paged viewport which will bring through the relevant information on to the dashboard.
Firstly, on the “viewports” tab, add a new viewport which displays the relevant chart.
Set the top and left layout properties of this viewport as needed. This will give a fixed top and left padding with the chart filling the remaining space (i.e. it will resize dynamically with screen size whilst keeping a fixed size for text to remain readable).
On the “overlays” tab, create two overlays which will display a label referencing a cell range on the data sheet. Dashboard labels provide great flexibility in terms of formatting and layout, and using text from a Excel range means that the dashboard remains dynamic.
These overlays can then be moved to a fixed top/middle/bottom position as needed.
Under the “properties” tab of the paged viewport, set the background colour to white and apply a grey border. This fills any empty space with a solid colour and gives a slight contrasting border, giving the overall effect of a card.
The viewport will display the title and quantity in a fixed position (in this example, top and bottom respectively with left alignment) with the chart dynamically filling the remaining space.
Similar principles can be applied to the other cards such as KPIs, grids, and custom displays.
.jpg)
