This blog post is to answer the question I received in my inbox as result of my previous System Information Web Apps using Node JS, PUG and PowerShell.

How to highlight table cells using PowerShell ? I wanted to show process information and if the handle is greater than 600, change the background as brown!

Yes, it’s possible in PowerShell but code may look bit cranky! Because we manipulate the data without the logic control. See the below sample code – Reference Link

foreach-Object {
    if ($_ -like "*<td>Running</td>*") {
        $_ -replace "<tr>", "<tr bgcolor=green>"
    }
    elseif ($_ -like "*<td>Stopped</td>*") {
        $_ -replace "<tr>", "<tr bgcolor=red>"}
    else {
        $_
    }
}

Hold on! We don’t do this trick. Instead, we apply the logical calculation using PUG and a hint is below.

        each process in results
            tr
                - if (process.Handles > 600)
                    td(style='background-color: brown; font-style: italic')=process.ProcessName
                    td(style='background-color: brown; font-style: italic')=process.Id 
                    td(style='background-color: brown; font-style: italic')=process.Handles
                - else 
                    td=process.ProcessName 
                    td=process.Id 
                    td=process.Handles

if (process.Handles > 600) // Is a simple way right?

We keep our PowerShell script clean and nifty as illustrated below

Get-Process | 
Select-Object ProcessName , Id , Handles -First 10 | 
ConvertTo-Json -Compress

Which ultimately gives you the JSON output!

[
    {
        "ProcessName": "AgentService",
        "Id": 3124,
        "Handles": 321
    },
    {
        "ProcessName": "ApplicationFrameHost",
        "Id": 27812,
        "Handles": 484
    },
    {
        "ProcessName": "atmgr",
        "Id": 4188,
        "Handles": 404
    },
    {
        "ProcessName": "atmgr",
        "Id": 21160,
        "Handles": 419
    },
    {
        "ProcessName": "CcmExec",
        "Id": 10520,
        "Handles": 1543
    },
    {
        "ProcessName": "chrome",
        "Id": 1152,
        "Handles": 417
    },
    {
        "ProcessName": "chrome",
        "Id": 3236,
        "Handles": 454
    },
    {
        "ProcessName": "chrome",
        "Id": 5516,
        "Handles": 340
    },
    {
        "ProcessName": "chrome",
        "Id": 6240,
        "Handles": 454
    },
    {
        "ProcessName": "chrome",
        "Id": 8224,
        "Handles": 3083
    }
]

Now, parse the JSON in JS – The below snippet will help for that!

app.get('/GetProcess', function (request, response) {
    ps.addCommand("./scripts/ProcessInformation.ps1")
    ps.invoke().then(output => {
        var process = JSON.parse(output)
        response.render('Process', {
            results: process
        })
    })
})

and style is yours! For a demo I used the below sample PUG (Works as expected)

doctype html
head
    style.
        #process {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
        }
        #process td,
        #process th {
        border: 1px solid #ddd;
        padding: 8px;
        }
        #process tr:nth-child(even) {
        background-color: #f2f2f2;
        }
        #process tr:hover {
        background-color: #ddd;
        }
        #process th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: olivedrab;
        color: white;
        }
        h1 {
        color: olivedrab;
        text-align: center
        }
h1 Get-Process

table#process
    tbody
        tr
            th(style="text-align: center") ProcessName 
            th(style="text-align: center") Id 
            th(style="text-align: center") Handles
        each process in results
            tr
                - if (process.Handles > 600)
                    td(style='background-color: brown; font-style: italic')=process.ProcessName
                    td(style='background-color: brown; font-style: italic')=process.Id 
                    td(style='background-color: brown; font-style: italic')=process.Handles
                - else 
                    td=process.ProcessName 
                    td=process.Id 
                    td=process.Handles

Output is illustrated below!

Do you know? we can display boolean result using PUG as well! Here is the tip. Just try it!

td(style='background-color: brown; font-style: italic')=process.Handles > 600

Enjoy PowerShell!