New UDGrid with Multiple UDCards

PowerShell Universal
1 
Product: PowerShell Universal
Version: 2.5.4

What is the best method to create a grid of 100 UDCards that will wrap as the web browser window is resized and not allow them to be moveable?

Looking for something similar to the image in this post VMware Active Disk Monitoring Page (PowerCLI/POSH) but this method is using the older cmdlets and older version of PSU.

So far I have the following that displays the grids, but need to add some responsive design for when the web browser size is changed. Cards overlap when size is modified

$AllData  #This stores all my data from the SQL table. Contains multiple rows and columns

New-UDGrid -Container -Content {
   ForEach ($Item in $AllData)
   {
      New-UDGrid -Item -ExtraSmallSize 2 -Content {
         $OnClick = { #Contains code for when UDCard is clicked}

         New-UDElement -Tag 'div' -Attributes @{
            onClick = $OnClick
            Style = @{'cursor' = 'pointer'}
         } -Content {
            New-UDCard -Style @{width = 200; height = 200;} -Content {
               New-UDTypography -Text "$($Item.ComputerName)" -Variant h6
            }
         }
      }
   }
}
2

You’ll want to include sizes for each breakpoint.

For example:

New-UDGrid -Item -ExtraSmallSize 12 -SmallSize 8 -MediumSize 4 -LargeSize 2 -ExtraLargeSize 1

This creates a card that takes up the entire width on extra small screens, 2/3 on small screens, 1/3 on medium screen, 1/6 on large screens and 1/12 on extra large screens.

You’ll likely have to play around with it a bit

3

Thanks for elaborating on those parameters @adam. That gives me a better understanding of their use.

Strangely enough, I removed all of those parameters and the result is exactly what I was looking for: as the window enlarges, the UDCards wrap around automatically and displays very cleanly! I like the responsive design in this fashion, in that the rows and columns for the UDCards don’t change at all and the transitions look clean because the cards are in the same spot, but just replaced with another card.

Finished code is below:

$AllData  #This stores all my data from the SQL table. Contains multiple rows and columns

New-UDGrid -Container -Content {
   ForEach ($Item in $AllData)
   {
      New-UDGrid -Item -Content {
         $OnClick = { 
                       # Contains code for when UDCard is clicked
                    }

         New-UDElement -Tag 'div' -Attributes @{
            onClick = $OnClick
            Style = @{'cursor' = 'pointer'}
         } -Content {
            New-UDCard -Style @{width = 100; height = 100; "background-color"= "green"} -Content {      
               New-UDelement -Tag 'div' -Attributes @{style=@{width = "100%"; height = "100%"; "text-align" = "center"; "margin-top" = "5px"}} -Content {
                  New-UDTypography -Text "$($Item.ComputerName)" -Variant h6
               }               
            }
         }
      }
   }
}
1 Like