Coloring Elements in a Table based on a property

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

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

Yep. Should work the same.

How to apply this with theme. If I use any theme for say default theme “darkrounded” on dashboard this get override.

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

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

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