Responsive Layout for UDTables: Columns / Rows to show

PowerShell Universal
1 
Product: PowerShell Universal
Version: 1.6.0b3

Dear all

We’re currently trying to build an easy to use dashboard for our HelpDesk Dept and for those who have on standby support in the evenings and weekends.

We successfuly build a nice looking interface which for example displays the currently locked AD accounts. In the UDTable with the Query Results I’m showing a couple of columns with user related info. However imagine that the users will be using the dashboard from their mobile phones during a night call. Obviously even if PSU is responsive, the columns that are shown are “pressed” into something not really nice looking… :grin:

So my very simple question is:
Is it somehow possible to make some sort of an “if / else” to verify if the displaysize is small (mobile phone) and if yes, show a more simplistic UDtable with just minimal information including the “Unlock” button but if the display is big (PC / Laptop) then show the integral UDTable?

That would be great!

Thanks in advance for your help!

A very good start in the new week to all of you,
Don

2

Hello everybody! :smiley:

…so no one has an idea on how to achieve this or is my question too dumb? :grin:
I’m more than happy to any comment and suggestion on how to solve this dilemma… maybe the use of the table is not ideal? So how do others implement things in a good / proper way for both the desktop and mobile world?

Thanks a lot to anybody willing to contribute! :blush:

Best,
Don

3

This seems like a good use of the Hidden component. Can you check this out and let me know if that’s what you’re looking for? We could implement this in UD.

4

Hey @adam
This is EXACTLY what I’m looking for!! :smiley: Would be really great if this feature could make it in a next PSU release! It would make things so much nicer on mobile device without having to create separate dashboards. :smiley:

… in the meantime is there a way to retrieve the client’s current width? I suppose that the answer is no, right?

Thanks,
Don

5

You can probably accomplish it with New-UDStyle and CSS media queries.

Here’s a good blog post about UDStyle: Bring more styles with UDStyle | Powershell Blog

It would look something like this (untested). This example should hide the content if the width of the screen is greatere than 480px.

New-UDStyle -Style '
@media screen and (max-width: 480px) {
   display: none;
}' -Content {
     "My Content" 
}
6

This was added in 1.5.19 - Hidden - PowerShell Universal

2 Likes