Examples of Mobile Dashboard

1

I am curious how difficult it is to take an existing PSU dashboard and convert it into a mobile friendly dashboard and also how the site runs on mobile. I have yet to find any examples online, but would be curious to see screenshots if anybody is willing to share. I am just trying to figure out if it is worth taking the time to do.

2

You can use the various size parameters of UDGrid to format a dashboard for smaller screens.

New-UDRow -Columns {
    New-UDColumn -SmallSize 12 -MediumSize 6 -LargeSize 4 -Content {
        New-UDPaper -Content { "xs-12" } -Elevation 2
    }
    New-UDColumn -SmallSize 12 -MediumSize 6 -LargeSize 4 -Content {
        New-UDPaper -Content { "xs-12" } -Elevation 2
    }
}

It uses page size breakpoints to adjust the layout based on the screen size. So in the above example, small screens will take up the full width, medium screens will take up 1/2 the width and large screens will take up 1/3 the width.

3

If you have a wide table how is that treated? I am going to try testing today with chrome dev tools, but when I looked the other day it crammed everything together. I was not using what you mentioned though.

4

It might still cram the table together. Would you expect scrollbars to show up on mobile in that case?

5

I believe so yes. I am trying to display sp_WhoIsActive results in a table, which is an open-source SQL proc showing server activity. I created this same functionality in Power BI’s Streaming Dataset to push data every 60 seconds. On mobile for Power BI, you can tap the visual once and it focuses on it and then you can scroll left/right with your finger.

Not sure how difficult it would be to replicate, but adding a scrollbar for anything that goes off the page would be nice.

Also, is it possible to setup a mobile dashboard for horizontal/landscape view versus vertical?

6

You could use media queries to adjust this but I don’t think it’s built into the UD style sheet automatically.