UDTable change on btn click

PowerShell Universal Universal Dashboard
1

Good morning everyone,

Not sure if this is possible but am trying to accomplish the following:

  1. have a table that display latest logged error
  2. have two buttons above the table section where if on is clicked, table section should now change/update to display last 7 days

Unfortunately, Iā€™m not able to accomplish this and get two tables instead of one. Screenshot below and code snippet. Hopefully any of you have an idea :slight_smile:

Thank you in advanced.

New-UDColumn -LargeSize 6 -Content {
        New-UDButton -Text "View"
        New-UDButton -Id 'btnLast7' -Text "Last 7 Days" -OnClick {
            Sync-UDElement -Id 'dynlast7'
        }

        New-UDDynamic -Id 'dynlast7' -Content {
            #$dyn = Get-UDElement -Id 'btnLast7'
            $webcfgcomplast7 = $sqltskresult | Where-Object {$_.Task -notin ('This is a task ') -and $_.Status -eq "FAIL" -and $_.StartDate -gt $today.AddDays(-7) -and $_.StartDate -lt $today.AddDays(-1)} | Sort-Object ID -Descending
            #if(-not($webcfgcomplast7 -eq $null)){
                $ErrorsGridColumns = @(
                    New-UDTableColumn -Property ID -Title " " -Render {
                        if(-not($EventData.Note -eq $null -or $EventData.Note -eq "")){
                            New-UDButton -Id "btn$($EventData.ID)" -Text "View" -OnClick {
                                Show-UDModal -Content {
                                    $preHTML = $($($EventData.Note) -replace "`n","<br>")
                                    New-UDHtml -Markup "<div>$preHTML</div>"
                                } -Footer {
                                    New-UDButton -Text "Close" -OnClick {Hide-UDModal}
                                }
                            }
                        }
                        else{""}
                    }
                    
                    New-UDTableColumn -Property Task
                    New-UDTableColumn -Property Status
                    New-UDTableColumn -Property StartDate
                    New-UDTableColumn -Property EndDate
                )
                
                New-UDStyle -Style '.MuiTableCell-head { font-weight: bold !important; }' -Content {
                    New-UDTable -Id 'errors' -Data $webcfgcomplast7 -Columns $ErrorsGridColumns -Title 'Last 7 Days Errors' -ShowPagination -Dense -PageSize 3 #-PageSizeOption @(5,10,20)
                }
            #}
            #else{
            #    New-UDTypography -Text "No script errors found for today!" -Variant h4 -Align Center -Style @{color = 'green'}
            #    # Add btn here to change table dyn to view prev day and other way around
            #}
        }

        if(-not($webcfgcomplatest -eq $null)){
            $ErrorsGridColumns = @(
                New-UDTableColumn -Property ID -Title " " -Render {
                    if(-not($EventData.Note -eq $null -or $EventData.Note -eq "")){
                        New-UDButton -Id "btn$($EventData.ID)" -Text "View" -OnClick {
                            Show-UDModal -Content {
                                $preHTML = $($($EventData.Note) -replace "`n","<br>")
                                New-UDHtml -Markup "<div>$preHTML</div>"
                            } -Footer {
                                New-UDButton -Text "Close" -OnClick {Hide-UDModal}
                            }
                        }
                    }
                    else{""}
                }
                
                New-UDTableColumn -Property Task
                New-UDTableColumn -Property Status
                New-UDTableColumn -Property StartDate
                New-UDTableColumn -Property EndDate
            )
            
            New-UDStyle -Style '.MuiTableCell-head { font-weight: bold !important; }' -Content {
                New-UDTable -Id 'errors' -Data $webcfgcomplatest -Columns $ErrorsGridColumns -Title 'Latest Error' -ShowPagination -Dense -PageSize 3 #-PageSizeOption @(5,10,20)
            }
        }
        else{
            New-UDTypography -Text "No script errors found for today!" -Variant h4 -Align Center -Style @{color = 'green'}
            # Add btn here to change table dyn to view prev day and other way around
        }
    }

psu_tables
psu_tables943Ɨ628 28.6 KB 

Product: PowerShell Universal
Version: 1.5.16
2

Ok!

After exploding my head, I able to accomplish it. Ended up using SWITCH case within UDDynamic to test against $Session:btnclicked. Iā€™m not saying this is the most appropriate and cleanest way to do it but if you have or know a better/cleaner way to it, please feel free :slight_smile:

New-UDColumn -LargeSize 6 -Content {
        New-UDButton -Id 'btnLastest' -Text "Latest" -OnClick {
            Sync-UDElement -Id 'dynTbl'
            $Session:btnclicked = "btnLatest"
        }
        New-UDButton -Id 'btnLast7' -Text "Last 7 Days" -OnClick {
            Sync-UDElement -Id 'dynTbl'
            $Session:btnclicked = "btnLast7"
        }

        New-UDDynamic -Id 'dynTbl' -Content {
            #$dyn = Get-UDElement -Id 'btnLast7'
            
            switch ($Session:btnclicked) {
                "btnLast7" { 
                    $Data = $sqltskresult | Where-Object {$_.Task -notin ('This is a task ') -and $_.Status -eq "FAIL" -and $_.StartDate -gt $today.AddDays(-7) -and $_.StartDate -lt $today.AddDays(-1)} | Sort-Object ID -Descending
                    $tbltitle = "Last 7 Days Errors"
                 }
                 "btnLastest" {
                    $Data = $webcfgcomplatest
                    $tbltitle = "Latest Error"
                }
                Default {
                    $Data = $webcfgcomplatest
                    $tbltitle = "Latest Error"
                }
            }
            if(-not($Data -eq $null)){
                $ErrorsGridColumns = @(
                    New-UDTableColumn -Property ID -Title " " -Render {
                        if(-not($EventData.Note -eq $null -or $EventData.Note -eq "")){
                            New-UDButton -Id "btn$($EventData.ID)" -Text "View" -OnClick {
                                Show-UDModal -Content {
                                    $preHTML = $($($EventData.Note) -replace "`n","<br>")
                                    New-UDHtml -Markup "<div>$preHTML</div>"
                                } -Footer {
                                    New-UDButton -Text "Close" -OnClick {Hide-UDModal}
                                }
                            }
                        }
                        else{""}
                    }
                    
                    New-UDTableColumn -Property Task
                    New-UDTableColumn -Property Status
                    New-UDTableColumn -Property StartDate
                    New-UDTableColumn -Property EndDate
                )
                
                New-UDStyle -Style '.MuiTableCell-head { font-weight: bold !important; }' -Content {
                    New-UDTable -Id 'errors' -Data $Data -Columns $ErrorsGridColumns -Title $tbltitle -ShowPagination -Dense -PageSize 3 #-PageSizeOption @(5,10,20)
                }
            }
            else{
                New-UDTypography -Text "No script errors found!" -Variant h4 -Align Center -Style @{color = 'green'}
                # Add btn here to change table dyn to view prev day and other way around
            }
        } -LoadingComponent {"Refreshing"}
    }
2 Likes