Designer

In this lecture, we go through how to use the PowerShell Universal app designer. We also look at how to create a custom component to display in the designer.

Generated output

New-UDPage -Url "/Home" -Name "Home" -Content {
    New-UDTypography -Text 'Home' -Id 'homeText' -Align 'center'
    New-UDButton -Id 'ae657b62-d361-4ade-9e44-ffeae1a61b68' -OnClick {
        Show-UDToast "Goodbye!!!!"
    } -FullWidth  -Text 'This is a button' -Variant 'outlined'
    New-UDAlert -Id 'af9cc5a1-1a94-46df-96f5-e5f517ef4c30' -Severity 'error'
    New-UDCustomButton -Id '957d12a7-0bf9-421e-a504-0a448416e08a' -Text 'Test'
} -Generated -Layout (
    New-UDPageLayout -Large @(
        New-UDItemLayout -Id 'homeText' -Row 0 -Column 0 -RowSpan 5 -ColumnSpan 7
        New-UDItemLayout -Id 'ae657b62-d361-4ade-9e44-ffeae1a61b68' -Row 0 -Column 7 -RowSpan 6 -ColumnSpan 8
        New-UDItemLayout -Id 'af9cc5a1-1a94-46df-96f5-e5f517ef4c30' -Row 0 -Column 15 -RowSpan 6 -ColumnSpan 4
        New-UDItemLayout -Id '957d12a7-0bf9-421e-a504-0a448416e08a' -Row 0 -Column 19 -RowSpan 3 -ColumnSpan 4
    ) -Medium @(
    ) -Small @(
    ) -ExtraSmall @(
    ) -ExtraExtraSmall @(
    )
)

Custom Component

function New-UDCustomButton {
    [Category("app/component")]
    [Description("A custom button to show in the UI.")]
    [DisplayName("Custom Button")]
    param
    (
        [Parameter (Position = 0)]
        [string]$Text = "",
        [Parameter()]
        [string]$Id = [Guid]::NewGuid()
    )

    End {

        New-UDButton -Text $Text -Id $Id -Icon (New-UDIcon -Icon 'User')

    }
}