Greetings!
We are trying to implement the stepper component and we need some help/guidance with the following aspects:
- Can we make components mandatory? For example: can we restrict the user from pressing Next until they’ve selected a an item form the shuttle list?
- Can we restricting the user from pressing Finish in the stepper until all the components are loaded? For example: In the screenshot below, the user should not be able to hit Finish[2] until the table [1] has loaded.
New-UDPage -Name 'Create application access reviews for the applications you own.' -Url appowners -Content {
$colors = Get-Colors
$common = $colors | Where-Object Mode -EQ common
$Session:ID = ($ClaimsPrincipal.Claims | Where-Object { $_.Type -eq 'http://schemas.microsoft.com/identity/claims/objectidentifier' }).value
$GacTestStorage = 'ConnetionString'
New-UDStyle -Style '
align: center;
text-align: center;
width: 80%;
padding: 40px;
.MuiPaper-root {
width: 100%;
}
.MuiList-root {
width: 100%;
align: center;
}
.MuiGrid-item {
width: 28%;
}
' -Content {
New-UDElement -Tag 'div' -Content {
New-UDRow -Columns {
New-UDColumn -Content {
New-UDCard -TitleAlignment 'center' -Content {
New-UDStepper -Steps {
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Select one or more apps" }
New-UDTransferList -Id 'OwnedApps' -ClassName 'transfer-list' -Item {
Get-GacAFUserOwnedApp -User $Session:ID | ForEach-Object {
New-UDTransferListItem -Name $_.displayName -Value $_.appId
}
}
} -Label "Step 1"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Select one or more groups" }
New-UDTransferList -Id 'OwnedGroups' -ClassName 'transfer-list' -Item {
@($EventData.Context.OwnedApps) | ForEach-Object {
Get-GacAFAppAssignment -AppId $_.value | ForEach-Object {
New-UDTransferListItem -Name $_.PrincipalDisplayName -Value $_.PrincipalId
}
}
}
$Session:App2GroupObject = @($EventData.Context.OwnedApps) | ForEach-Object {
$AppDisplayName = $_.name
$AppGuid = $_.value
Get-GacAFAppAssignment -AppId $_.value | ForEach-Object {
[pscustomobject]@{
App = $AppDisplayName
AppId = $AppGuid
Group = $_.PrincipalDisplayName
GroupId = $_.PrincipalId
}
}
}
} -Label "Step 2"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Choose Reviewer, Backup Reviewer, and Inactivity Duration" }
New-UDHtml -Markup "<br>"
New-UDAutocomplete -Label "Choose Primary Reviewer" -OnLoadOptions {
Get-GacAFUserDisplayNameTop -WordToComplete $Body -Top 5 | Select-Object -ExpandProperty DisplayName | ConvertTo-Json
} -Id 'PrimaryReviewer'
New-UDHtml -Markup "<br>"
New-UDAutocomplete -Label "Choose Backup Reviewer" -OnLoadOptions {
Get-GacAFUserDisplayNameTop -WordToComplete $Body -Top 5 | Select-Object -ExpandProperty DisplayName | ConvertTo-Json
} -Id 'BackupReviewer'
New-UDHtml -Markup "<br>"
New-UDSelect -Id 'InactivityDuration' -Option {
for ($i = 30; $i -lt 365; $i = $i + 30) {
New-UDSelectOption -Name $i -Value $i
}
} -Label 'Choose Inactive Duration'
} -Label "Step 3"
New-UDStep -OnLoad {
New-UDElement -Tag 'div' -Content { "Please confirm Access Review creation" }
$backupReviewer = Get-GacAFUser -User $EventData.Context.BackupReviewer
$reviewer = Get-GacAFUser -User $EventData.Context.PrimaryReviewer
$Data = foreach ($item in $Session:App2GroupObject) {
@{
'PartitionKey' = 'Part3'
'RowKey' = '{0}-{1}' -f $Item.AppId, $Item.groupId
'appDisplayName' = $Item.App
'groupDisplayName' = $Item.Group
'AppId' = $Item.AppId
'groupId' = $Item.GroupId
'inactivityDuration' = $EventData.Context.InactivityDuration
'reviewerDisplayName' = $EventData.Context.PrimaryReviewer
'reviewerEmail' = $reviewer.mail
'reviewerId' = $reviewer.Id
'backupReviewerDisplayName' = $EventData.Context.BackupReviewer
'backupReviewerEmail' = $backupReviewer.mail
'backupReviewerId' = $backupReviewer.Id
}
}
$Columns = @(
New-UDTableColumn -Property 'appDisplayName' -Title 'App' -IncludeInSearch -IncludeInExport
New-UDTableColumn -Property 'groupDisplayName' -Title 'Group' -IncludeInSearch -IncludeInExport
New-UDTableColumn -Property 'inactivityDuration' -Title 'Inactivity Duration' -IncludeInSearch -IncludeInExport
New-UDTableColumn -Property 'reviewerDisplayName' -Title 'Primary Reviewer' -IncludeInSearch -IncludeInExport
New-UDTableColumn -Property 'backupReviewerDisplayName' -Title 'Backup Reviewer' -IncludeInSearch -IncludeInExport
New-UDTableColumn -Property 'AppId' -Title 'AppId' -Hidden -IncludeInExport
New-UDTableColumn -Property 'groupId' -Title 'GroupId' -Hidden -IncludeInExport
)
New-UDTable -Id 'customColumnsTable' -Data $Data -Columns $Columns -ShowSort -ShowFilter -ShowSearch -ShowExport -PageSize 10 -ShowPagination
New-UDElement -Tag 'AzureTable' -Content {
try {
$splat = @{
TableName = 'apps'
Entity = $Data
ConnectionString = $GacTestStorage
Force = $true
CreateTableIfNotExists = $true
ErrorAction = 'Stop'
}
Add-AzDataTableEntity @splat
}
catch {
New-UDTypography -Variant h2 -Text ('{0}' -f $_.ToString())
}
}
} -Label 'Step 4'
} -OnFinish {
New-UDElement -Tag 'div' -Content { "Access Reviews have been created" }
}
}
}
}
}
}
}
Any help/advice would be greatly appreciated!
Thanks!
Product: PowerShell Universal
Version: 1.4.6
