Imaged within UDTable

Hi guys,

First I want to say what a great product you have develop for the powershell community. Thank you!!

For my question. I’ve been looking around including this forum to see if there’s a way to display icon or images within a table row. I tried using published folder but seems not work.

Hopefully this makes sense. Any assistance is very much appreciated.

2020-11-19_13-52-38

Product: PowerShell Universal
Version: 1.4.6

Can you share your table code? We should be able to help.

Sure. Please see below. I also added screenshot of my published folder.

   $dt = New-Object System.Data.DataTable
        
        $dt.Columns.Add("Device")
        $sensorrows = $prtgdatas.sensors | Where {$_.group -eq "PROD SERVICES"}
        foreach($sensorrow in $sensorrows)
        {
            if (!($dt.Columns.Contains($sensorrow.sensor)))
            {
                $dt.Columns.Add("$($sensorrow.sensor)")
            }
        }

        $devices = $prtgdatas.sensors | Where-Object {$_.group -eq "PROD SERVICES"} 
        foreach ($device in $devices)
        {
            $dr = $dt.NewRow()
            $dr["Device"] = $device.device
            $devicedatas = $prtgdatas.sensors | Where {$_.group -eq "PROD SERVICES" -and $_.device -eq $device.device }

            if (!($dt.Select("Device = '" + $device.device + "'")))
            {
                foreach ($devicedata in $devicedatas)
                {
                    switch ($devicedata.sensor)
                    {
                        "Ping"
                        {
                            $dr["Ping"] = if($devicedata.status -eq "Up")
                            {
                                "/img/up.png"
                            } if($devicedata.status -eq "Down")
                            {
                                "/img/down.png"
                            } if($devicedata.status -eq "Warning")
                            {
                                "/img/warning.png"
                            } if($devicedata.status -like "Pause*")
                            {
                                "/img/pause.png"
                            }
                            break
                        }
                        "Https"
                        {
                            $dr["HTTPS"] = if($devicedata.status -eq "Up")
                            {
                                "/img/up.png"
                            } if($devicedata.status -eq "Down")
                            {
                                "/img/down.png"
                            } if($devicedata.status -eq "Warning")
                            {
                                "/img/warning.png"
                            } if($devicedata.status -like "Pause*")
                            {
                                "/img/pause.png"
                            }
                            break
                        }
                        "Http Advanced"
                        {
                            $dr["http advanced"] = if($devicedata.status -eq "Up")
                            {
                                "/img/up.png"
                            } if($devicedata.status -eq "Down")
                            {
                                "/img/down.png"
                            } if($devicedata.status -eq "Warning")
                            {
                                "/img/warning.png"
                            } if($devicedata.status -like "Pause*")
                            {
                                "/img/pause.png"
                            }
                            break
                        }
                    }
                }
            $dt.Rows.Add($dr)
            }
        }
        $Data = try { $dt | select-object * } catch {}
        $Columns = @(
            foreach ($col in $dt.Columns)
            {
                New-UDTableColumn -Property $col.ColumnName
            }
        )
        New-UDTable -Id 'prodsrvs' -Data $Data -Columns $Columns -Title 'Prod Services' -ShowSearch -ShowPagination -PageSizeOption @(5,10,20)

Thanks

If images are not possible, how can I then manipulate the text within the cell based on value for example if UP then change color to green or background to green.

Hey @irortiz,

You can certainly do images. For the columns you’d like images in, do something like this.

New-UDTableColumn -Property "myColumn" -Render {
    New-UDImage -Url $EventData.myColumn
}

@adam That’s kool but I does not work in my scenario. New-UDImage as you showed in the example takes the column and insert a pic to each which is awesome. But when I try to use it to only apply if the status of the is “UP”, it still attempt to apply the image to every single cell. Below is a screenshot and snippet:

$Data = try { $dt | select-object * } catch {}

        $Columns = @(

            foreach ($col in $dt.Columns)

            {

                New-UDTableColumn -Property $col.ColumnName -Render {

                    New-UDImage -Url {

                        foreach ($r in $dt.Rows)

                        {

                            if($r[1] -eq "Up")

                            {

                                "https://img.icons8.com/cotton/64/000000/checkmark.png"

                            }

                        }

                    }

                }

            }

        )

        New-UDTable -Id 'prodsrvs' -Data $Data -Columns $Columns -Title 'Prod Services' -ShowSearch -ShowPagination -PageSizeOption @(5,10,20)

@adam I was able to get the data to display in the table but for some reason the New-UDImage does not load the image when I use variable. Below is snippet and screenshot:

$Columns = @(

            New-UDTableColumn -Property Device -Title Service

            New-UDTableColumn -Property Ping -Render {

                New-UDImage -Url $dt.Ping

            }

        )

        New-UDTable -Id 'prodsrvs' -Data $Data -Columns $Columns -Title 'Prod Services'

** Update snippet code

Thanks

I also took a screenshot of the rendered HTML and CSS from chrome:

Never mind. I finally understood.

I was thinking the variable you provided was an example and not an actual variable. Was not looking clearly.

I apologize. Thanks for the help.