Create apps using a drag and drop 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') } }