Print this page

Best Practice for zIndex on Wave Dashboard Layouts

Knowledge Article Number 000233814


Dashboard widgets can be layered by defining the zIndex. This tells the engine how to handle overlapping components. Widgets with a relatively lower zIndex value will appear behind widgets with relatively higher zIndex values. When processing the layout for a dashboard, the entire structure is scanned for each layer from background to foreground. This means that the number of layers present (the zIndex range) will have a multiplying effect on the processing and load time for dashboards.
Performance characteristics work out approximately as follows:
range(zIndex) x numWidgets x numPages ~ running time

Practical example

The dashboard contains a box that contains two other boxes that each contain two widgets.
  • An inefficient zIndex range would be as follows:
MainBox: -5
InnerBox1: -4
InnerBox2: -3
Box1Widget1: -2
Box1Widget2: -1
Box2Widget1: 0
Box2Widget2: 1

zIndex range: 7
  • An efficient zIndex range would be like this:
MainBox: -2
InnerBox1: -1
InnerBox2: -1
Box1Widget1: 0
Box1Widget2: 0
Box2Widget1: 0
Box2Widget2: 0

​zIndex range: 3
It will take over twice as long to process the layout for the inefficient example.
User-added image Even if a layer doesn't contain any widgets, it will still be scanned during layout processing. This means if you arbitrarily set a zIndex to something like -50 or 120, it will significantly increase the processing time.

Best Practice

Keep your overall zIndex range small.

By default, widgets have a zIndex of 0. If you need a background, use -1 (or -2 if needed), but do not use an arbitrarily larger range.

promote demote