Coloring Elements in a Table based on a property

Universal Dashboard Cookbook
21

Here an example of a colored grid:

  New-UDCard -Title "Services" -Endpoint {

    $serverobjects = Get-service | ForEach-Object {

      if ($_.Status -eq "Stopped") {
    
        $BackgroundColor = "Red"
        $ForegroundColor = "White"
    
    
      }
      [PSCustomObject]@{
    
        Background = $BackgroundColor
        Foreground = $ForegroundColor
        Name       = $_.Name
        Status     = $_.Status
        Machine    = $_.MachineName
        Display    = $_.DisplayName
    
    
      }
    }
    New-UDGrid -Headers @("Status", "Name", "Details", "Machine") -Properties @("Status", "Name", "Details", "Machine")  -Endpoint {
      $serverobjects| ForEach-Object {
    
        [PSCustomObject]@{
          Status  = if ($_.Background) {
            New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $_.Background; 'color' = $_.Foreground}  } -Content { $_.Status }
          }
          else {
            New-UDElement -Tag 'div' -Content { $_.Status }
          }
          Name    = $_.Name
    
          Details = $_.Display
          Machine = $_.Machine
    
        } } | Out-UDGridData
    }
  }
1 Like
22

Does this also work with UDTable objects and Out-UDTableData ?

23

Yep. Should work the same.

24

How to apply this with theme. If I use any theme for say default theme ā€œdarkroundedā€ on dashboard this get override.

25

Hi @Abhijit I do not believe you would be able to create this as a theme as you are building a custom table and changing the colour of the cell depending if it is stopped or running. CSS would apply to the whole table not one column of a table. Hope this helps clarify things? Unless @BoSen29 has a magic trick for this? Iā€™m saying no. Peace

1 Like
26

Morning lads, @psDevUK and @Abhijit,

This is the issue with using ā€œ!importantā€ in your CSS files. Iā€™ve learned to only use it as a ā€œhotfixā€ as it overrides stuff down the line.
Iā€™ve been wanting to redo the themes myself, but due to the testing demands and etc I havenā€™t gotten to it.
If you want to do it with theme, Iā€™d recommend going with a class on the relevant elements and then targeting said class with CSS and utilizing the ā€œ!importantā€. Make sure to put it on the end of your theme, in order to overwrite anything else thatā€™s being specified for the element.
If you have any issues, hit me up with some code and iā€™ll be happy to help :slight_smile:

Until then: happy hunting!

2 Likes
28

Sorry I think my question was not clear. I meant to use this within my code along with default theme not within theme.

Turns out my IF condition was wrong. I was passing two properties in foreach to apply color. I was using {(_.State -ne "Running") -and (_.StartMode -ne ā€œDisabledā€)} in my IF condition. After removing second variable and putting it in where-object, I am getting color elements in table along with default themes available.

New-UDColumn -Size 3 -Endpoint {

            $BgColor = 'Green'
            $FontColor = 'Black'
            $Icon = 'smile'
            if ($Stop_SQL -ne 0) {
                $BgColor = 'red'
                $FontColor = 'black'
                $Icon = 'frown'
            }
            New-UDCard -Title "SQL Services" -BackgroundColor $BgColor -FontColor $FontColor -Endpoint {
                New-UDIconButton -Icon (New-UDIcon -Icon $Icon -Size 3x -Style @{ color = '#000000'}) -OnClick {
                    Show-UDModal -Header {
                        New-UDHeading -Size 4 -Text "SQL Service Status"
                    } -Content {
                        New-UDTable -Headers @("ComputerName","DisplayName","StartupServiceAccount","State","StartMode") -Endpoint {
                            $SQLstatus = Read-SqlTableData -ServerInstance "PGB0DBA012" -DatabaseName "Dashboard" -SchemaName "dbo" -TableName "Dash_SQLServiceStatus" |  Where-Object {($_.State -ne "Running") -and ($_.StartMode -ne "Disabled")} | Select-Object "ComputerName","DisplayName","StartupServiceAccount","State","StartMode"
                            $SQLStatus | ForEach-Object {
            
                                $BgColor = 'Green'
                                $FontColor = 'White'
                                if ($_.State -ne "Running") {
                                    $BgColor = 'red'
                                    $FontColor = 'White'
                                }
                    
                                [PSCustomObject]@{
                                    ComputerName   = $_.ComputerName.ToString()
                                    DisplayName   = $_.DisplayName.ToString()
                                    StartupServiceAccount   = $_.StartupServiceAccount.ToString()
                                    State         = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.State.ToString() }
                                    StartMode         = $_.StartMode.ToString()
                                }
                            } | Out-UDTableData -Property @("ComputerName","DisplayName","StartupServiceAccount","State","StartMode")
                        } -Style highlight
                        New-UDButton -Text 'Close' -OnClick {
                            Hide-UDModal
                        }
                    } -Persistent -BottomSheet
                } 
            } -TextAlignment center -Reveal {
                if ($Stop_SQL -ne 0) {
                    "$Stop_SQL SQL Services out of $Total_SQL are not in healthy state" 
                }
                else {
                    "All SQL services are in healthy state"
                }
                } -Watermark $Icon
        } #-AutoRefresh -RefreshInterval 5
1 Like
29

So, 6 years later :sweat_smile:. Do you happen to have a new example for this?
This one no longer seems to work.

30

UDTable now has OnRowStyle. I took this from the live docs.

$Data = @(
     @{Dessert = 'Frozen yoghurt'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
     @{Dessert = 'Ice cream sandwich'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
     @{Dessert = 'Eclair'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
     @{Dessert = 'Cupcake'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
     @{Dessert = 'Gingerbread'; Calories = 159; Fat = 6.0; Carbs = 24; Protein = 4.0 }
 )
 
 New-UDTable -Data $Data -OnRowStyle {
     if ($EventData.Dessert -eq 'Frozen yoghurt')
     {
         @{
             backgroundColor = "red"
         }
     } else {
         @{}
     }
 } -Id 'table12'

image
image493Ɨ423 4.92 KB