Coloring Elements in a Table based on a property

adam · November 14, 2018, 10:07pm

This is an example of how to create a table of services in UD and add a column with a cell that is colored based on the status of the service.

 New-UDTable -Title "Service Status" -Headers @('Name', 'Status') -Endpoint {
        Get-Service | ForEach-Object {

            $BgColor = 'green'
            $FontColor = 'white'
            if ($_.Status -ne 'Running') {
                $BgColor = 'red'
                $FontColor = 'white'
            }

            [PSCustomObject]@{
                Name = $_.DisplayName
                Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.Status.ToString() }
            }
        } | Out-UDTableData -Property @("Name", "Status")
    }

Cragdoo · November 28, 2018, 4:58pm

could I apply this to a New-UDGrid ?

adam · November 28, 2018, 4:59pm

Yep. This should work the same way in a UDGrid.

Cragdoo · November 28, 2018, 5:01pm

ok, that’s the next task …busy busy busy

Cragdoo · November 28, 2018, 5:45pm

me again

so my script is this

New-UDPage -Name 'VCSA' -Icon cloud -Content {

    New-UDRow {
            New-UDColumn -Size 6 -Content {
                New-UDGrid -Title "vMon services" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Key", "State") -Properties @("key","value.state") -AutoRefresh -RefreshInterval 60 -Endpoint {
                    (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value |  ForEach-Object {

                        $BgColor = 'green'
                        $FontColor = 'white'
                        if ($_.Status -ne 'Started') {
                            $BgColor = 'red'
                            $FontColor = 'white'
                        }

                        [PSCustomObject]@{
                            Name = $_.key
                            Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }


                    }
                    
                    
                    
                }
            } | Out-UDGridData

I’m make REST API calls for the grid data, is there any special format I need to consider when using the PScustomObject?

The output of the REST call is similar to

{
  "value": [
    {
      "value": {
        "name_key": "cis.analytics.ServiceName",
        "startup_type": "AUTOMATIC",
        "health_messages": [],
        "health": "HEALTHY",
        "description_key": "cis.analytics.ServiceDescription",
        "state": "STARTED"
      },
      "key": "analytics"
    },
    {
      "value": {
        "name_key": "cis.applmgmt.ServiceName",
        "startup_type": "AUTOMATIC",
        "health_messages": [],
        "health": "HEALTHY",
        "description_key": "cis.applmgmt.ServiceDescription",
        "state": "STARTED"
      },
      "key": "applmgmt"
    },
    {
      "value": {
        "name_key": "cis.cis-license.ServiceName",
        "startup_type": "AUTOMATIC",
        "health_messages": [
          {
            "args": [],
            "default_message": "The License Service is operational.",
            "id": "cis.license.health.ok"
          }
        ],
        "health": "HEALTHY",
        "description_key": "cis.cis-license.ServiceDescription",
        "state": "STARTED"
      },
      "key": "cis-license"
    }

So i want just the name of the service (key) and the state , then put them into conditional formatting as per the example above ,i…e Green for started , Red for Stopped

adam · November 28, 2018, 10:20pm

Yeah that looks like it should work. I noticed that you are using status instead of state:

 $BgColor = 'green'
                        $FontColor = 'white'
                        if ($_.State -ne 'Started') {
                            $BgColor = 'red'
                            $FontColor = 'white'
                        }

And are you looking to use name_key or just key?

Cragdoo · November 29, 2018, 10:06am

so I’ve cleaned up the code with what I think is the right values, but now I’m getting a malformed grid

Code is now

New-UDRow {
        New-UDColumn -Size 6 -Content { New-UDGrid -Title "vMon services" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Key", "State") -Properties @("key", "value.state") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value |  ForEach-Object {

                    $BgColor = 'green'
                    $FontColor = 'white'
                    if ($_.State -ne 'STARTED') {
                        $BgColor = 'red'
                        $FontColor = 'white'
                    }

                    [PSCustomObject]@{
                        Name   = $_.key
                        Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }
                    }   
                }
            } | Out-UDGridData
        }
    }

and the resultant grid is asa follows (highlighted in red)

Cragdoo · November 29, 2018, 10:18am

is the issue maybe the ForEach-object with the RESP API call ??

Cragdoo · November 29, 2018, 11:32am

no it isn’t that … the search goes on

psott · November 29, 2018, 12:04pm

-Properties @("key", "value.state")

and

[PSCustomObject]@{
Name   = $_.key
Status = New-U...
 }

ist not matching, it should also “Name,Status” as in the PSCustomObject

Cragdoo · November 29, 2018, 12:06pm

so I tried switching it to a New -UDTable …getting slightly further and I did pick up that mistake.

Cragdoo · November 29, 2018, 2:26pm

have tried to isolate the table into a stand alone dashboard, now I just get a blank screen, no content

$dashboard = New-UDDashboard -Title "Test" -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {


    New-UDTable -Title "Service Status" -Headers @('Name', 'Status') -Endpoint {
        (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value | ForEach-Object {

            $BgColor = 'green'
            $FontColor = 'white'
            if ($_.value.state -ne 'STARTED') {
                $BgColor = 'red'
                $FontColor = 'white'
            }

            [PSCustomObject] @{
                Name   = $_value.key
                Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }
            }
        }
    } | Out-UDTableData -Property @("Name", "Status")
}


Start-UDDashboard -Dashboard $Dashboard -name test -Port 8888 -AutoReload

aaaaargh

Jim · November 29, 2018, 2:56pm

I just noticed that you’re missing the dot operator in your code here (not sure if that’s the only issue, I didn’t test).

Jim · November 29, 2018, 3:09pm

I also noticed that you piped the Objects to Out-TableData outside of the Endpoint scriptblock. I believe you should move it up one level to to be piped directly from the ForEach-Object scriptblock. For example:

$dashboard = New-UDDashboard -Title "Test" -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {


    New-UDTable -Title "Service Status" -Headers @('Name', 'Status') -Endpoint {
        (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value | ForEach-Object {

            $BgColor = 'green'
            $FontColor = 'white'
            if ($_.value.state -ne 'STARTED') {
                $BgColor = 'red'
                $FontColor = 'white'
            }

            [PSCustomObject] @{
                Name   = $_.value.key
                Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }
            }
        } | Out-UDTableData -Property @("Name", "Status")
    } 
}


Start-UDDashboard -Dashboard $Dashboard -name test -Port 8888 -AutoReload

Cragdoo · November 29, 2018, 4:24pm

good spot …was getting lost in {} …nearly working , just need to figure out why i get “unauthorized” on my API call …but that’s another forum thanks

Cragdoo · November 29, 2018, 5:56pm

Yaaaas …got it. Thanks for your patience guys

manoj2994 · March 4, 2019, 3:00pm

Do UDGRid dont have colour options or is there any other way to do it ,i have tried the exact same way for UDGRID but in turn i got these error
t.hasOwnProperty is not a function

stevenbaert · April 11, 2019, 8:42am

Same here, UD looked really promising to me but formatting the output isn’t straight forward at all. Spending lots of time and wondering if it is worth the effort.

adegutis · April 11, 2019, 5:29pm

@manoj2994 @stevenbaert as far as I am aware, you can only apply color formatting to data in UDTable but not UDGrid. So you have to decide if you want to control the look of the output with custom code using UDTable or the benefits of pagination and filters in UDGrid.

wsl2001 · April 11, 2019, 8:02pm

Nice examples to try

Topic		Replies	Views
Conditional formatting New-UDCard Universal Dashboard Help	3	2497	December 4, 2018
New-UDGriD cells colouring Universal Dashboard Help	8	1467	March 6, 2019
Trying to colorize individual values on UDtable PowerShell Universal	2	273	December 19, 2022
New-UDTable Formatting PowerShell Universal	5	766	December 3, 2021
How can I use colored text in New-UDTable for UD V3 Universal Dashboard	5	1363	October 30, 2020

Coloring Elements in a Table based on a property

Related topics