Custom Components
Build custom components.
Components in PowerShell Universal apps are exposed as functions. You can combine built in components to produce your own custom components.
You can include your custom components as part of a module to allow for the designer to present them in the component picker. Parameters will automatically be displayed as properties in the component properties drawer.
Here's an example component the creats a textbox with a red border. It's required to include the
Component attribute so that PowerShell Universal treats this function as an app component. The first parameter is the display name and the second is a description of the component. function New-UDRedbox {
[Component("Redbox", "A textbox with a red border.")]
param(
[Parameter()]
[string]$Id
)
New-UDStyle -style "border: 2px solid red" -Content {
New-UDTextbox -Id $Id
}
}
The component will now be available within the designer. Once added, you can adjust the parameters are desired.
Custom Component in Designer
People Picker
The below example creates a
New-UDPeoplePicker component from existing app components. You can use the New-UDPeoplePicker component in your apps. This function can either be defined within your app directly or within a Module.This example users a published folder of avatars.
function Get-User {
1..100 | ForEach-Object {
[PSCustomObject]@{
UserName = "User$_"
First = "Bill"
Last = $_
Avatar = (Get-ChildItem "$Repository\Avatars" | Get-Random).Name
}
}
}
function New-UDPeoplePicker {
$Session:Users = [System.Collections.Generic.List[object]]::new()
New-UDAutocomplete -OnLoadOptions {
Get-User | Where-Object { $_.UserName -like "*$UserName*" } | Select-Object -First 5 -ExpandProperty 'UserName' | ConvertTo-Json
} -OnChange {
$Session:Users.Add((Get-User | Where-Object { $_.UserName -eq $EventData })) | Out-Null
Sync-UDElement -Id 'users'
}
New-UDDynamic -Id 'users' -Content {
New-UDList -Children {
$Session:Users | ForEach-Object {
New-UDListItem -Label $_.UserName -SubTitle "$($_.First) $($_.Last)" -AvatarType 'Avatar' -SecondaryAction {
$UserName = $_.UserName
New-UDIconButton -Icon (New-UDIcon -Icon 'Trash') -OnClick {
$RemoveUser = $Session:Users | Where-Object { $_.UserName -eq $UserName }
$Session:Users.Remove($RemoveUser)
Sync-UDElement -Id 'users'
}
} -Source "/avatars/$($_.Avatar)"
}
}
}
}
New-UDApp -Title 'PowerShell Universal' -Content {
New-UDPeoplePicker
}
Last modified 1mo ago