How to refresh UDGrid data

Product: PowerShell Universal
Version: 2.6.2

I have two buttons that need to refresh a UDGrid based on the button that was selected. What is the best way to refresh the grid? I have tried adding a tag and using the “Sync-UDElement” cmdlet but that was not refreshing the grid.

New-UDButton -text "My Sites" -OnClick {  
   $global:AllData = @()
   $MySites = @("AT", "LSKR")

   ForEach ($Site in $MySites)
   {
       $SingleData = Invoke-SqliteQuery -DataSource "C:\sqlite3\Citrix.SQLite" -Query "SELECT * FROM MONITORING WHERE Site = `"$($Site)`" "
       $global:AllData = $global:AllData + $SingleData
   }

   Sync-UDElement -Id 'Grid1'
}

 New-UDButton -text "ALL Sites" -OnClick {  
    $global:AllData = Invoke-SqliteQuery -DataSource "C:\sqlite3\Citrix.SQLite" -Query "SELECT * FROM MONITORING"
                
    Sync-UDElement -Id 'Grid1'
}

# Start Grid Here
New-UDDynamic -Id 'Grid1' -Content {
   New-UDGrid -Container -Content {
      ForEach ($item in $global:AllData)
      {
          New-UDGrid -Item -content {
             New-UDElement -Tag 'div' -Attributes @{
                onClick = $OnClick
                style = @{
                   'cursor' = 'pointer'
                }
            } -Content {
               New-UDCard -Style @{width = 100; height= 100; "background-color"= $backgroundColor;} -Content { 
               New-UDElement -Tag 'div' -Attributes @{style=@{width = "100%"; height = "100%"; "text-align"="center"; "margin-top" = "5px" }} -Content { New-UDTypography -Text "$($Item.Site)" -Variant h6 
   } 
               }
            }
         }
      }
   }
}

It looks like you need to add a New-UDDynamic area

I actually had that in my code already and it still wasn’t working. I’ve added that to the original post.

Inside of the UDButton, I’m setting $global:AllData to a new value, but it doesn’t look like that variable is getting passed when running the “refresh”. Is there a way to pass the updated value of the variable into the UDDynamic content?

I was able to figure out that I needed to place the code that gathers the data inside of the udgrid (see “GATHER DATA” section). By doing this, the variable that stores the data for the UDGrid (in my case, $ALLData) will be updated whenever I call the Sync-UDElement (see “SWITCH” section). It will gather the appropriate data based upon whether the switch is “on” or “off” (see “GATHER DATA” section).

Below is the final code:

$Pages += New-UDPage -Name 'GridView' -Content `
{
    # Display all sites on initial load
    $global:AllData = Invoke-SqliteQuery -DataSource "C:\sqlite3\Citrix.SQLite" -Query "SELECT * FROM MONITORING"
    $global:AllData = $global:AllData | Sort-Object Site
    
    #region  <########## --- SWITCH --- ##########>
        New-UDTypography -Text "My Sites "

        New-UDSwitch -Id 'switch' -Checked $true -OnChange {                    
            Sync-UDElement -Id 'GridToUpdate'
            Sync-UDElement -Id 'CountToUpdate'
        }

        New-UDTypography -Text "All Sites "
    #endregion

    New-UDParagraph -Text "Site Count: $($AllData.Count) "


    <####################
            GRID
    ####################>

    New-UDDynamic -Id 'GridToUpdate' -Content {

        #region <########## --- GATHER DATA --- ##########>
        IF ( (Get-UDElement -Id 'switch').checked )
        {            
            $global:AllData = Invoke-SqliteQuery -DataSource "C:\sqlite3\Citrix.SQLite" -Query "SELECT * FROM MONITORING"
            $global:AllData = $global:AllData | Sort-Object Site
        }

        ELSE
        {
            # "My Sites" is selected. This will eventually query a separte database table that contains a list of the current user's sites.
            $global:AllData = Invoke-SqliteQuery -DataSource "C:\sqlite3\Citrix.SQLite" -Query "SELECT * FROM MONITORING WHERE Site = `"AT`" "
        }
        #endregion


        New-UDGrid -Container -Content {
            ForEach ($item in $global:AllData)
            {        
                New-UDGrid -Item -content {
                    IF     ( $($Item.OverallHealth) -eq "HEALTHY" )   {$backgroundColor = '#a1e8a1'}
                    ELSEIF ( $($Item.OverallHealth) -eq "WARNING" )   {$backgroundColor = '#FFFDA3'}
                    ELSEIF ( $($Item.OverallHealth) -eq "URGENT" )    {$backgroundColor = '#ffcb96'}
                    ELSEIF ( $($Item.OverallHealth) -eq "CRITICAL" )  {$backgroundColor = '#ffaeae'}
                    ELSE                                               {$backgroundColor = '#E0E0E0'}

                    $OnClick = {
                        Show-UDModal -Header {New-UDHeading -Size 1 -Text "$($Item.Site)"} -Content `
                        {
                            $Check_icon     = New-UDIcon -Icon 'check' -Size '2x' -Color 'green'
                            $Warning_icon   = New-UDIcon -Icon 'exclamation' -Size '2x' -Color 'orange'
                            $Critical_icon  = New-UDIcon -Icon 'times' -Size '2x' -Color 'red'
                            $info_icon      = New-UDIcon -Icon 'info' -Size 'lg'

                            IF ( $Item.OverallHealth -eq "DataUnavailable")
                            {
                                New-UDTypography -Variant h6 -Text "Data Unavailable" -Style @{color = 'red'}
                            }
                            
                            ELSE
                            {
                                New-UDTypography -Variant h4 -Text "Overview" -Style @{color = 'purple'}
                                New-UDParagraph -Text "Build: $($Item.Build) "
                                New-UDElement -Tag 'br'
                                New-UDElement -Tag 'br'
                                
                                <# ----- Hypervisor Hosts ----- #>
                                    New-UDTypography -Variant h4 -Text "Hypervisor Hosts" -Style @{color = 'purple'}
                                    New-UDParagraph -Content {
                                        IF ( $Item.Hosts_SCVMMAgent -eq "Running")
                                        {
                                            $Check_icon
                                        }
                                        
                                        ELSEIF ( $Item.Hosts_SCVMMAgent -eq "Stopped")
                                        {
                                            $Critical_icon
                                        }
                                        
                                        ELSEIF ( $null -eq $Item.Hosts_SCVMMAgent ) { }
                                        
                                        "Host SCVMMAgent services: $($Item.Hosts_SCVMMAgent) "
                                    }
                                    New-UDElement -Tag 'br'
                                    New-UDElement -Tag 'br'
                            
                            
                            <# ----- Virtual Machine Manager ----- #>
                                New-UDTypography -Variant h4 -Text "Virtual Machine Manager" -Style @{color = 'purple'} 
                                New-UDParagraph -Content {
                                    IF ( $Item.VMM_SCVMMAgent -eq "Running")
                                    {
                                        $Check_icon
                                    }
                                        ELSEIF ( $Item.VMM_SCVMMAgent -eq "Stopped")
                                    {
                                        $Critical_icon
                                    }
                                        ELSEIF ( $null -eq $Item.VMM_SCVMMAgent )
                                    {
                                        
                                    }
                                        "SCVMMAgent service: $($Item.VMM_SCVMMAgent) "
                                }
                                
                                New-UDParagraph -Content {
                                    IF ( [int]$Item.CAIRvmsInBadState_FINAL -eq 0 )
                                    {
                                        $Check_icon    
                                    }
                                        ELSEIF ( ( [int]$Item.CAIRvmsInBadState_FINAL -gt 0 ) -and ( [int]$Item.CAIRvmsInBadState_FINAL -lt 10 ) )
                                    {
                                        $Warning_icon
                                    }
                                        ELSEIF ( [int]$Item.CAIRvmsInBadState_FINAL -gt 9 )
                                    {
                                        $Critical_icon
                                    }
                                    
                                        "CAIR VMs in bad state: $($Item.CAIRvmsInBadState_FINAL) "
                                }
                                
                                New-UDParagraph -Content {
                                    $info_icon
                                    "$($Item.Site)-VMM01 last bootup: $($Item.VMM_LastBootUpTime)"
                                }
                                
                                New-UDElement -Tag 'br'
                                New-UDElement -Tag 'br'

                            <# ----- Citrix Studio ----- #>   
                                New-UDTypography -Variant h4 -Text "Citrix Studio" -Style @{color = 'purple'}
                                New-UDParagraph -Content {
                                                            IF ( $null -eq $Item.XD_BrokerService )
                                                            {
                                                                
                                                            }
                                                                ELSEIF ( $Item.XD_BrokerService -eq "Running")
                                                            {
                                                                $Check_icon
                                                            }
                                                                ELSEIF ( $Item.XD_BrokerService -eq "Stopped")
                                                            {
                                                                $Critical_icon
                                                            }
                                                                "Citrix Broker service: $($Item.XD_BrokerService) "
                                }
                                
                                New-UDParagraph -Content {
                                                            IF ( $null -eq $Item.XD_MCSService )
                                                            {
                                                                
                                                            }
                                                                ELSEIF ( $Item.XD_MCSService -eq "Running")
                                                            {
                                                                $Check_icon
                                                            }
                                                                ELSEIF ( $Item.XD_MCSService -eq "Stopped")
                                                            {
                                                                $Critical_icon
                                                            }
                                                            
                                                            "Citrix MCS service:  $($Item.XD_MCSService) "
                                                        }
                            
                                New-UDParagraph -Content {
                                    IF ( $Item.XD_DesktopsAvailable / $Item.XD_DesktopsTotal -gt .1)
                                    {
                                        $Check_icon    
                                    }
                                        ELSEIF ( ( $Item.XD_DesktopsAvailable / $Item.XD_DesktopsTotal -lt .1 ) -and ( $Item.XD_DesktopsAvailable / $Item.XD_DesktopsTotal -gt 0 ) )
                                    {
                                        $Warning_icon
                                    }
                                        ELSE
                                    {
                                        $Critical_icon
                                    }
                                        "Desktops Available: $($Item.XD_DesktopsAvailable) / $($Item.XD_DesktopsTotal)"
                                }
                                
                                New-UDParagraph -Content {
                                    IF ( [int]$Item.XD_DesktopsFaulted -eq 0 )
                                    {
                                        $Check_icon    
                                    }
                                        ELSEIF ( ( [int]$Item.XD_DesktopsFaulted -gt 0 ) -and ( [int]$Item.XD_DesktopsFaulted -lt 6 ) )
                                    {
                                        $Warning_icon
                                    }
                                        ELSEIF ( [int]$Item.XD_DesktopsFaulted -ge 6 )
                                    {
                                        $Critical_icon
                                    }
                                    "Faulted Desktops: $($Item.XD_DesktopsFaulted) "
                                }
                                
                                New-UDParagraph -Content {
                                    $info_icon
                                    "Sessions: $($Item.XD_Sessions) "
                                }
                                
                                New-UDParagraph -Content {
                                    $info_icon
                                    " $($Item.Site)-XD01 last bootup: $($Item.XD_LastBootUpTime)"
                                }
                                New-UDElement -Tag 'br'
                                New-UDElement -Tag 'br'
                        
                            }
                        }
                    }
        
                    New-UDElement -Tag 'div' -Attributes @{
                        onClick = $OnClick
                        style = @{
                            'cursor' = 'pointer'
                        }
                    } -Content {
                        New-UDCard -Style @{width = 100; height= 100; "background-color"= $backgroundColor;} -Content { 
                            New-UDElement -Tag 'div' -Attributes @{style=@{width = "100%"; height = "100%"; "text-align"="center"; "margin-top" = "5px" }} -Content {
                                New-UDTypography -Text "$($Item.Site)" -Variant h6
                            } 
                        }
                    }
                }
            }
        }
    }


    New-UDElement -Tag 'br'
    New-UDElement -Tag 'br'
    New-UDElement -Tag 'br'
    New-UDElement -Tag 'br'
} 

#endregion GridViewPage
1 Like

Is there a way to use the above example to create a line chart, but have no fill on the data? I just want the three lines on the chart with no fill to avoid the overlap.

Drew

To display the line with NO FILL, use a null background color:

New-UDChartJSDataset -DataProperty Property1 -Label ‘Property1’ -BorderColor ‘black’ -BackgroundColor ’ ’