[Input Element] Question - Sort Order List / Drag Drop - Transfer List

PowerShell Universal
1

Hi There,

I hope I’m posting in the right category! I’ve recently installed PowerShell Universal (in our Company) and I must say, I’m a huge fan of the entire product. I thoroughly enjoy diving deep into it!

Until now, I’ve always been able to find an answer or solution to my questions in this Forum. However, this is the first time I’ve encountered a situation where I’m unsure if my workaround is necessary or if there might be a better approach.

I’m looking for an input element that allows sorting, such as a drag-and-drop feature or a list with buttons to move entries up and down. Surprisingly, I haven’t found such a feature in the product or similar requests in the forum.

I’m currently working on a dashboard/app where one can filter AD objects, display them, export, or perform other actions. I’ve already written a function to dynamically generate the Get-ADObject Filter using “Add Column” input fields, and it’s working well.

My potential workaround involves scripting a display that shows all content with “Move Up” and “Move Down” buttons, storing the input dynamically using $Page or $Session variables.

Given the variety of cool UD-Elements (Input) available, I’m curious why there isn’t an option for sortable inputs. Does anyone have any insights or suggestions on how to implement this feature or if it exists in some form?

Thank you for your help!

Product: PowerShell Universal
Version: 4.2.12
2

Coded something Casual


Function getSortIndex {
    param (
        [System.Collections.ArrayList]$List,
        [int]$CurrentID
    )
    for ($i = 0; $i -lt $List.Count; $i++) {
        if ($List[$i].SortID -eq $CurrentID) {
            return $i
        }
    }
    return -1
}

Function moveItemUp {
    param (
        [System.Collections.ArrayList]$List, [int]$CurrentID
    )

    $index = getSortIndex -List $List -CurrentID $CurrentID
    if ($index -gt 0) {
        $tempName = $List[$index]['Name']
        $List[$index]['Name'] = $List[$index - 1]['Name']
        $List[$index - 1]['Name'] = $tempName
    }
}

Function moveItemDown {
    param (
        [System.Collections.ArrayList]$List, [int]$CurrentID
    )

    $index = getSortIndex -List $List -CurrentID $CurrentID
    if ($index -ne -1 -and $index -lt $List.Count - 1) {
        $tempName = $List[$index]['Name']
        $List[$index]['Name'] = $List[$index + 1]['Name']
        $List[$index + 1]['Name'] = $tempName
    }
}

New-UDApp -Title 'Sort-Example' -Content {
    New-UDCard -Title "Sort" -Content {

        $Style = "
        .MuiTableCell-root {
            margin: 0px;
            padding: 0px;
            font-size: 14px; 
        }
        .SortButton{
            width: 40px !important;
        }"

        $Properties = @(
            @{ Name = "A-Example"; SortID = 1},
            @{ Name = "B-Example"; SortID = 2},
            @{ Name = "C-Example"; SortID = 3},
            @{ Name = "Example3"; SortID = 4},
            @{ Name = "Example2"; SortID = 5},
            @{ Name = "Example1"; SortID = 6}
        )
        
        $Page:sortedItems = $Properties | Sort-Object SortID

        New-UDStyle -Style $Style -Content {
            New-UDDynamic -id "RefreshArea_SortProperties" -Content {
                New-UDGrid -Container -Content {
                    New-UDHtml -Markup "<h3>Order</h3>"
                    $Columns = @(
                        New-UDTableColumn -Property 'SortID' -Title 'ID'
                        New-UDTableColumn -Property 'Name' -Title 'Name'
                        New-UDTableColumn -Property 'DUMMY' -Title 'Up' -Render {
                            if ($EventData.SortID -ne 1) {
                                New-UDButton -Icon (New-UDIcon -Icon 'SortUp') -ClassName "SortButton SortButtonUp"-OnClick {
                                    moveItemUp -List $Page:sortedItems -CurrentID $EventData.SortID
                                    Sync-UDElement -id "RefreshArea_SortProperties"
                                }
                            }
                        }
                        New-UDTableColumn -Property 'DUMMY2' -Title 'Down' -Render {
                            if ($EventData.SortID -ne $Page:sortedItems.Count) {
                                New-UDButton -Icon (New-UDIcon -Icon 'SortDown') -ClassName "SortButton SortButtonDown" -OnClick {
                                    moveItemDown -List $Page:sortedItems -CurrentID $EventData.SortID
                                    Sync-UDElement -id "RefreshArea_SortProperties"
                                }
                            }
                        }
                    )
                    New-UDTable -Data $Page:sortedItems -Columns $Columns
                }
            }
            New-UDButton -Text "Show" -OnClick {
                Show-UDToast -Message ($Page:sortedItems | ConvertTo-Json -Depth 2) -Persistent
            }
        }
    }
}