Creating a Data table with Remove buttons for Rows

PowerShell Universal
1 
Product: PowerShell Universal
Version: 3.8.5

Hello all,

Been trying to get this working today, but seem to find conflicting information on how to actually get it working…

Purpose is to have a Table that displays 3 columns, 2 data columns and 1 column with a remove button… I’ve gotten display to work correctly, but can’t seem to find the correct syntax to get the buttons to perform the actual removal of the Row.

Code below.

$tabledata= @(
    @{
        'Effort' = 'Effort 1'
        'Use Case' = 'Account Type 1'
        'Remove' = '1'
    },
    @{
        'Effort' = 'Effort 2'
        'Use Case' = 'Account Type 1'
        'Remove' = '2'
    }
)

New-UDDashboard -Title "LDIFF Creation" -Content {
    New-UDForm -Content {
        New-UDSelect -label "Account Type" -Multiple -Option { foreach($line in $DropDownItems){New-UDSelectOption -Name $line.name -Value $line.value}}
         New-UDSelect -label "Effort" -Multiple -Option { foreach($line in $DropDownSubTypes){New-UDSelectOption -Name $line.name -Value $line.value}} 
        New-UDTextbox -Id 'txtTextField_num' -label "Quantity" -Mask "/^[1-9]$|^0[1-9]$|^1[0-9]$|^20$/" -Unmask
       
    } -OnSubmit {
        # Step 4: Define the submit button action
        $Page:TestDynamic = $true
        $Quantity = $Eventdata.txtTextField_num
        $EffortName = $Eventdata.DropdownSubTypes
        $AccountType = $EventData.DropdownItems
     

   
         Sync-UDElement -Id "TestTable"
    }
   New-UDDynamic -id 'TestTable'   -Content {
    if($Page:TestDynamic)
    {
     New-UDTable -Id "dataTable" -Data $TableData -Columns @(
        New-UDTableColumn -Property "Effort" -Title "IGA Effort"
        New-UDTableColumn -Property "Use Case" -Title "Use Case"
        New-UDTableColumn  -property 'Remove' -Title "Remove" -Render {
            $rowdata = $body | ConvertFrom-Json
            $ItemID = $rowdata.Remove
            Show-UDToast -Message $ItemID
            New-UDButton -Text "Remove" -OnClick {
                
                $tabledata = $TableData| Where-Object { $_.Remove -ne $ItemID }
                Sync-UDElement -Id "TestTable"
            }
        }
    ) 
    }
    }
}
2

You need to provide some sort of scope for the variable. For example, this uses the global cache scope. You could also use session scope if that makes more sense for your implementation.


$cache:tabledata= @(
    @{
        'Effort' = 'Effort 1'
        'Use Case' = 'Account Type 1'
        'Remove' = '1'
    },
    @{
        'Effort' = 'Effort 2'
        'Use Case' = 'Account Type 1'
        'Remove' = '2'
    }
)

New-UDDashboard -Title "LDIFF Creation" -Content {
    New-UDForm -Content {
        New-UDSelect -label "Account Type" -Multiple -Option { foreach($line in $DropDownItems){New-UDSelectOption -Name $line.name -Value $line.value}}
         New-UDSelect -label "Effort" -Multiple -Option { foreach($line in $DropDownSubTypes){New-UDSelectOption -Name $line.name -Value $line.value}} 
        New-UDTextbox -Id 'txtTextField_num' -label "Quantity" -Mask "/^[1-9]$|^0[1-9]$|^1[0-9]$|^20$/" -Unmask
       
    } -OnSubmit {
        # Step 4: Define the submit button action
        $Page:TestDynamic = $true
        $Quantity = $Eventdata.txtTextField_num
        $EffortName = $Eventdata.DropdownSubTypes
        $AccountType = $EventData.DropdownItems
     

   
         Sync-UDElement -Id "TestTable"
    }
   New-UDDynamic -id 'TestTable'   -Content {
    if($Page:TestDynamic)
    {
     New-UDTable -Id "dataTable" -Data $cache:TableData -Columns @(
        New-UDTableColumn -Property "Effort" -Title "IGA Effort"
        New-UDTableColumn -Property "Use Case" -Title "Use Case"
        New-UDTableColumn  -property 'Remove' -Title "Remove" -Render {
            $ItemID = $EventData.Remove
            Show-UDToast -Message $ItemID
            New-UDButton -Text "Remove" -OnClick {
                
                $cache:tabledata = $cache:TableData| Where-Object { $_.Remove -ne $ItemID }
                Sync-UDElement -Id "TestTable"
            }
        }
    ) 
    }
    }
}
3

Thanks Adam, that did it. Could you comment a little on why the scope for this variable is needed? Don’t want to put a foot in my mouth when I am describing to my colleagues how some of these dashboards work.

4

The problem is that although the variable you are using is available, the state is not maintained outside of the scope of the -Render. Using the cache (or sessions scope) allows the variable state to flow between all event handlers within the PSU dashboard.

1 Like
5

Thanks for explaining that Adam! That instantly fixed 2 dashboard errors, that i have had :slight_smile: