Power BI Desktop not only allows you to design reports and dash­boards in a desktop lay­out view, but also in mobile. This fea­ture was imple­men­ted in Power BI a few years ago, as you can see in a pre­vi­ous blog post of ours. How­ever, Power BI Desktop’s Feb­ru­ary update goes even fur­ther, offer­ing a bet­ter-designed mobile-optim­ised report using the exist­ing visu­als from the desktop lay­out view.

Now these visu­als from the desktop lay­out view can be used in the mobile lay­out and changed within that lay­out without caus­ing any changes to the desktop lay­out. You can also change the order of the lay­ers in the mobile lay­out and no dif­fer­ence will be seen in the desktop version.

In this art­icle we are going to explain how we designed the mobile lay­out from an exist­ing report in Power BI Desktop, using the new fea­tures from the latest update. At the end of the art­icle you will also find a video about the mobile view report design.

Gen­eral Requirements

The first thing to be done before start­ing to make a report using the mobile lay­out view is to check that the Modify visu­als set­tings for mobile lay­out is switched on:

Fig­ure 1: Switch on the Modify visual set­tings for mobile lay­out by going to File > Options and set­tings > Options > Pre­view features.

This allows us to design the mobile view for a report into which some visu­als have been inser­ted. These visu­als appear in the Page visu­als pane on the right, as the fol­low­ing screen­shot shows:

Fig­ure 2: Mobile lay­out has to be selec­ted; on the right, the Page visu­als pane.

Use Case

We are going to use all these visu­als from this layout:

Fig­ure 3: The report we are using as our example for this article.

To design the fol­low­ing mobile view:

Fig­ure 4: Final mobile view designed report.

Pixel Pre­ci­sion Design

It is now pos­sible to insert a visual into an exact pos­i­tion in the mobile lay­out by chan­ging the Pos­i­tion para­met­ers in Gen­eral set­tings. This offers improved accur­acy if it is not pos­sible to pos­i­tion the visual cor­rectly with the mouse, or if you don’t want the visual inside the grid­lines.  Thanks to the latest update the grid­line squares are smal­ler, so now it is easier to place the visual in the desired position.

Fig­ure 5: We can fit the visual by manu­ally by chan­ging the pixel position.

Chan­ging the Visual’s Font Size

We used this new fea­ture to change the font size a lot in our design; in the fol­low­ing image you can see how to use this option and where to find the Text set­tings:

Fig­ure 6: The font size of a visual can be changed. When a change in a visual is made, a sym­bol appears.

Note that when a visual set­ting is changed in the mobile lay­out, a sym­bol appears to inform us that a change has been made, as shown in Fig­ure 6.

Although this update allows us to change most font sizes, the font size of a text box can­not be changed. One solu­tion to this lim­it­a­tion is to change all the text boxes in the report into rect­angles with text and without back­ground. This solu­tion should be con­sidered when we cre­ate a Power BI Desktop report and plan to optim­ise it for mobile consumption.

Fig­ure 7: Text can be added to a shape visual and you can change the Text set­tings by select­ing the shape and going to Format shape > Style > Text

Visual Shape Chan­ging in the Mobile Design

There is no need to use squares as the back­ground of a text because we are now using a rect­angle that can be filled with col­our. All the squares can be changed into dif­fer­ently shaped visu­als. In this example we have used them as lines which sep­ar­ate the dif­fer­ent graph­ics from the mobile view:

Fig­ure 8: The Shape of a visual shape can be changed in the mobile layout.

Fig­ure 9: A changed visual shape can be used as a sep­ar­ator, for example

Final Res­ult

The fol­low­ing video shows the final design of the report in the mobile lay­out view. Note that when the phone is turned on its side, the desktop view is shown:

At ClearPeaks, we are con­stantly learn­ing and innov­at­ing new ways to serve the unique needs of our cus­tom­ers. If you want to have a con­ver­sa­tion about how to best lever­age your invest­ment in Power BI and Microsoft, simply reach out to us and our cer­ti­fied con­sult­ants will be happy to help!