Select multiple items and move them between two categories

Product: PowerShell Universal
Version: 1.4.6
Dashboard Framework: 3.4.4

We’re trying to implement a front-end for access reviews and want to have two categories, one on the left hand side that contains a list of selectable items, one on the right hand side containing selected items as shown below.

Is there a component that can be reused or does it need to be built from scratch?
If it needs to be built from scratch, how do I go about it?

Appreciate any help, thanks!

You can use a transfer list for this.

1 Like

Hey Adam, Thanks for your help!

We have created a dashboard that uses a UDTransferList. When we attempt to use $EventData to pass the results into a second UDTransferList, it fails. However, if we hardcode the input data to the second UDTransferList it populates the second UDTransferList.

Question:
How do we pass $eventData to the second UDTransferList?

Question:
How do we incorporate the 3 UDTextboxes pictured at the bottom of the image?

Question:
How do we collect the choices from the second UDTransferList and the 3 UDTextBoxes to store?


Here is a code snippet we are using to do this:

New-UDDashboard -Title ‘PowerShell Universal’ -Content {

New-UDForm -Content {
    New-UDTransferList -Item {
        Get-OwnedApp -User '<<user_objectId>>' | ForEach-Object { 
            New-UDTransferListItem -Name $_.displayName -Value $_.appId
        }
    }
} -OnSubmit {
    $Session:SelectedApps = $EventData
    Set-UDElement -Id 'results' -Content {
        New-UDForm -Content { 
            New-UDTransferList -Item {
                $Session:SelectedApps | ForEach-Object { 
                    #if this code is uncommented, then the the second transferlist 
                    #is populted with the groups from the app selected in 
                    #the first transferlist
                    #'<<applicationID>>' | ForEach-Object { 
                    #Get-GacAFAppAssignment -AppId $EventData["$($_)"] | ForEach-Object {
                    Get-AppAssignment -AppId $_.AppId | ForEach-Object {
                        New-UDTransferListItem -Name $_.principalDisplayName -Value $_.principalId
                    }
                }
            }
        } -OnSubmit {
            Show-UDToast -Duration 5000 ($EventData | ConvertTo-Json)
        }
        
    }
}
New-UDElement -Id 'results' -Tag 'div'

}

1 Like

We are making good progress!

New-UDDashboard -Title 'PowerShell Universal' -Content {
    New-UDForm -Content {
        New-UDTransferList -ID 't' -Item {
            Get-GacAFUserOwnedApp -User 'xxxxxxxxxxxxxxxxxx' | ForEach-Object {
                New-UDTransferListItem -Name $_.displayName -Value $_.appId
            }
        }
    } -OnSubmit {
        $Session:Hash = (@($EventData.t) |  ConvertTo-Json | ConvertFrom-Json -AsHashtable)
        Set-UDElement -Id 'results' -Content {
            New-UDForm -Content {
                New-UDTransferList -ID 'u' -Item {
                    @($Session:Hash) | ForEach-Object {
                        Get-GacAFAppAssignment -AppId $_.value | ForEach-Object {
                            New-UDTransferListItem -Name $_.PrincipalDisplayName -Value $_.PrincipalId
                        }
                    }
                }
            } -OnSubmit {
                Show-UDToast -Duration 5000 ($EventData.u | ConvertTo-Json)
                Set-UDElement -Id 'results2' -Content { New-UDAutocomplete -OnLoadOptions {
                        Get-GacAFUserDisplayNameTop -WordToComplete $Body -Top 5 | Select-Object -ExpandProperty DisplayName | ConvertTo-Json
                    } -OnChange {
                        Show-UDModal -Content {
                            New-UDGrid -Container -Content {
                                New-UDGrid -Item -MediumSize 4 -Content {
                                    New-UDTypography -Text ""
                                }
                                New-UDGrid -Item -MediumSize 4 -Content {

                                    New-UDTypography -Text "User Details" -Style @{
                                        "font-size" = "24px"
                                    }
                                }
                                New-UDGrid -Item -LargeSize 12 -Content {
                                    New-UDTextbox -Disabled -id 'userObjectID' -Label 'User Object ID' -Value (Get-GacAFUser -User $Body).Id | ConvertTo-Json
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    New-UDElement -Id 'results' -Tag 'div'
    New-UDElement -Id 'results2' -Tag 'div'
}

This can marked as Solved. We have created a new topic here: Getting EventData from Stepper Autocomplete