Using Z-Order to “Hide” Visuals Targeted for Phone Layout in Power BI

One important but often overlooked design requirement for a report page
is whether it will be viewed in phones and not only in desktop devices. And even
when we are aware of such a requirement it might be a challenge to use visuals
that work well for both kinds of devices. This is because in Power BI the desktop
layout is the principal layout: the phone layout simply allows you to choose from the visuals already present and configured in the desktop layout. But sometimes we need visuals targeted for phone layout only.

Such a need may arise with “wide” visuals, such as a column chart with many categories in its X axis, a situation which I faced in a recent report that led me to write about this. The visual in question displays amounts by day number:

On a phone this visual will require heavy scrolling, which is quite inconvenient, as evidenced when viewed in phone layout:

A bar chart would be more suitable for a phone as there is “infinite” vertical space available.  In this image I chose to cap it at 24 days but could have gone the full 30:

So what to do?

Without layout independence one might think that an easy solution would be that a visual designed and configured specially for phone view might just be hidden (via the Selection Pane) in desktop layout and then selected in phone layout. However, while the visual may appear to be available when you switch to phone layout:

when you drag it onto the phone canvas it “disappears.”  This is what I see after dragging it to the top of the canvas:

My solution to this was to use the z-order setting for visuals to “hide” my phone visual behind the desktop visual (I also did this for a few other phone-only visuals):

The ideal situation would be to have more design independence on the phone layout rather than having to resort to such stratagems.

Please follow and like us:


Leave a Reply

Your email address will not be published. Required fields are marked *