Custom tab order in Row/Column UDForm

Product: PowerShell Universal
Version: 2.3.0

Looking for a way to set custom tabbing order in New-UDForm with custom formatting. “Tabbing order” as in the next field that’s focused on when you press tab on the keyboard. I’m re-creating a form we use. Trying to keep it formatted similarly so it’s familiar to the end-user and make the tabbing order intuitive for them. Here’s a screenshot of a little proof of concept I started. Red is the actual tabbing order and green is the desired tabbing order.





And here’s the code:

New-UDForm -Content {
    # Row 1 district, date, serviceMapLocation
    New-UDRow -Columns {
        # Column 1.1 district
        New-UDColumn -SmallSize 4 -LargeSize 4 -Content {
            New-UDSelect -Id 'district' -Label 'District' -Option {
                New-UDSelectOption -Name 'Please select a district' -Value 'none'
            }
        }# End column 1.1

        # Column 1.2 date
        New-UDColumn -SmallSize 4 -LargeSize 4 -Content {
            New-UDDatePicker -Id 'date' -Label 'Date'
        }# End column 1.1

        New-UDColumn -SmallSize 4 -LargeSize 4 -Content {
            # Column 1.3 serviceMapLocation
            New-UDCheckbox -Id 'serviceMapLocationNew' -Label 'New'
            New-UDCheckbox -Id 'serviceMapLocationExisting' -Label 'Existing'
            New-UDTextbox -FullWidth -Id 'serviceMapLocation' -Placeholder 'Service Map Location'
        }
    }# End row 1

    # Row 2 completedBy, member, legalDescription
    New-UDRow -Columns {
        # Column 2.1 completedBy
        New-UDColumn -SmallSize 4 -LargeSize 4 -Content {
            New-UDTextbox -FullWidth -Id 'completedBy' -Placeholder 'Completed By'
        }# End Column 2.1

        # Column 2.2 member
        New-UDColumn -SmallSize 4 -LargeSize 4 -Content {
            New-UDTextbox -FullWidth -Id 'member' -Placeholder 'Member'
        }# End Column 2.2

        # Column 2.3 legalDescription
        New-UDColumn -SmallSize 4 -LargeSize 4 -Content {
            New-UDTextbox -FullWidth -Id 'legalDescription' -Placeholder 'Legal Description'
        }# End Column 2.3
    }# End Row 2

} -OnSubmit {
    show-udtoast -duration 30000 -Message $EventData
}

Thanks in advance!

Was able to get this by rewriting it with Grids

New-UDForm -Content {
    New-UDGrid -Container -Content {
        # Section 1 - district, completedBy, workOrder
        New-UDGrid -Item -ExtraSmallSize 4 -Content {
            # district
            New-UDSelect -Id 'district' -Label 'District' -Option {
                New-UDSelectOption -Name 'Please select a district' -Value 'none'
            }

            # completedBy
            New-UDTextbox -FullWidth -Id 'completedBy' -Placeholder 'Completed By'

            # workOrder
            New-UDTextbox -FullWidth -Id 'workOrder' -Placeholder 'Work Order #'
        }# End Section 1

        # Section 2 - date, member, billingAddress, cityStateZip, phoneNbr
        New-UDGrid -Item -ExtraSmallSize 4 -Content {
            # date
            New-UDDatePicker -Id 'date' -Label 'Date'
            New-UDElement -Tag br
            New-UDElement -Tag br

            # member 
            New-UDTextbox -FullWidth -Id 'member' -Placeholder 'Member'

            # billingAddress
            New-UDTextbox -FullWidth -Id 'billingAddress' -Placeholder 'Billing Address'

            # cityStateZip
            New-UDTextbox -FullWidth -Id 'cityStateZip' -Placeholder 'City/State/Zip'

            # phoneNbr
            New-UDTextbox -FullWidth -Id 'phoneNbr' -Placeholder 'Phone #'
        }# End Section 2

        # Section 3 - serviceMapLocation, legalDescription, serviceAddress, serviceDescription, county
        New-UDGrid -Item -ExtraSmallSize 4 -Content {
            # serviceMapLocation
            New-UDCheckBox -Id 'serviceMapLocationNew' -Label 'New'
            New-UDCheckBox -Id 'serviceMapLocationExisting' -Label 'Existing'
            New-UDTextbox -FullWidth -Id 'serviceMapLocation' -Placeholder 'Service Map Location'
    
            # legalDescription
            New-UDTextbox -FullWidth -Id 'legalDescription' -Placeholder 'Legal Description'

            # serviceAddress
            New-UDTextbox -FullWidth -Id 'serviceAddress' -Placeholder 'Service Address'

            # serviceDescription
            New-UDTextbox -FullWidth -Id 'serviceDescription' -Placeholder 'Service Description'

            # county
            New-UDSelect -Id 'county' -Label 'County' -Option {
                New-UDSelectOption -Name 'Please select a county' -Value 'none'
            }
        }# End Section 3
    }# End container

} -OnSubmit {
    Show-UDToast -Duration 30000 -Message $EventData
}

2 Likes