Is it possible to have multiple Modals or go to a previous one?

PowerShell Universal
1 
Product: PowerShell Universal
Version: 2.1.1

Trying to see if there’s a way to keep more then 1 modal open or go back to a previous modal.

What I have is a PS function that will get the M365 licenses assigned to users and returns the SKUs, one of the columns has button to open up the service plans to see what is enabled on the account. Once you open up the service plans the previous modal is removed so you cannot go back to the list of users and need to start again.

The service plan list can be >46 lines so displaying that in the user table would be a bit messy.

I’ve been trying with *-UDElement but cannot get it to work and may be barking up the wrong tree.

$Columns = @(
        New-UDTableColumn -Property Identity -Title SKU -IncludeInExport -IncludeInSearch -DefaultSortColumn
        New-UDTableColumn -Property SKU -Title SKU -IncludeInExport -IncludeInSearch
        New-UDTableColumn -Title 'ServicePlans' -property ServicePlans -Render {

            New-UDButton -Id "btnServicePlans" -Text "ServicePlans" -OnClick {
                [array]$ServicePlanTable = $UserSKUTable.ServicePlans | ForEach-Object {
                    $SKUName = $psitem.SKU

                    $psitem.ServicePlan | ForEach-Object -Process {
                        $output = [pscustomobject]@{
                            SKU             = $SKUName
                            ServicePlanName = $psitem.servicePlanName
                            Status          = $psitem.provisioningStatus
                        }
                        Write-Output $output
                    }
                }
                Show-UDModal -Content {
                    $Columns = @(
                        New-UDTableColumn -Property SKU -Title SKU -IncludeInExport -IncludeInSearch -DefaultSortColumn -SortType alphanumeric
                        New-UDTableColumn -Property ServicePlanName -Title ServicePlanName -IncludeInExport -IncludeInSearch
                        New-UDTableColumn -Property Status -Title Status -IncludeInExport -IncludeInSearch
                    )
                    New-UDTable -Data $ServicePlanTable -Title ServicePlans -Columns $Columns -ShowPagination -ShowSelection -Export -ShowSearch -showSort
                    New-UDButton -Id "HideModal" -Text "Close" -OnClick { Hide-UDModal }
                }
            }
        }
    )
    #Present Table Data
    Show-UDModal -Content {
          New-UDTable -Data $UserSKUTable -Title 'User SKU List' -ShowPagination -ShowSelection -Export -ShowSearch -showSort -Columns $columns
          New-UDButton -Id "HideModal" -Text "Close" -OnClick { Hide-UDModal }
    }
2

There are few implementation that I can think of.

Create multiple functions that calls UDmodal. In each modal, have a back button added in the header. So, when a user click the back button, it will load a different UDmodal - as if clicking the back button.

Or, if you want to use the same UDmodal - add similar back button in the header and in the UDmodal content body, add a UDDynamic - under this UDdynamic, you add your logic on how to display the data meeting certain condition from the functions. So, when a user click the back button, it will load some function and sync the UDelement of the UDDynamic and it will display in the UDmodal.

3

Thanks, pointed me towards something. Still needing to learn how the data persists and moves around.

Ended up using New/Set-UDElement cmdlets, code is a little messy but still playing with it.

    $Columns = @(
        New-UDTableColumn -Property Identity -Title SKU -IncludeInExport -IncludeInSearch -DefaultSortColumn
        New-UDTableColumn -Property SKU -Title SKU -IncludeInExport -IncludeInSearch
        New-UDTableColumn -Title 'ServicePlans' -property ServicePlans -Render {

            New-UDButton -Id "btnServicePlans" -Text "ServicePlans" -OnClick {
                [array]$ServicePlanTable = $UserSKUTable.ServicePlans | ForEach-Object {
                    $SKUName = $psitem.SKU

                    $psitem.ServicePlan | ForEach-Object -Process {
                        $output = [pscustomobject]@{
                            SKU             = $SKUName
                            ServicePlanName = $psitem.servicePlanName
                            Status          = $psitem.provisioningStatus
                        }
                        Write-Output $output
                    }
                }
                Set-UDElement -Id 'TableDisplay' -Content {
                    $SPColumns = @(
                        New-UDTableColumn -Property SKU -Title SKU -IncludeInExport -IncludeInSearch -DefaultSortColumn -SortType alphanumeric
                        New-UDTableColumn -Property ServicePlanName -Title ServicePlanName -IncludeInExport -IncludeInSearch
                        New-UDTableColumn -Property Status -Title Status -IncludeInExport -IncludeInSearch
                    )
                    New-UDTable -Data $ServicePlanTable -Title ServicePlans -Columns $SPColumns -ShowPagination -ShowSelection -Export -ShowSearch -showSort
                    New-UDButton -Text 'Back' -OnClick {
                        Set-UDElement -Id 'TableDisplay' -Content {
                            New-UDTable -Data $UserSKUTable -Title 'User SKU List' -ShowPagination -ShowSelection -Export -ShowSearch -showSort -Columns $columns
                            New-UDButton -Id "HideModal" -Text "Close" -OnClick { Hide-UDModal }
                        }
                    }
                }
            }
        }
    )
    #Present Table Data
    Show-UDModal -Content {
        New-UDElement -Id 'TableDisplay' -Tag 'div' -Content {
            New-UDTable -Data $UserSKUTable -Title 'User SKU List' -ShowPagination -ShowSelection -Export -ShowSearch -showSort -Columns $columns
            New-UDButton -Id "HideModal" -Text "Close" -OnClick { Hide-UDModal }
        }

        } -persistent