Form Layout Help
Product: PowerShell Universal Version: 5.6.11
Looking for help with making the layout of my form mobile friendly.
Currently on desktop the form looks like:
When on mobile however the fields get smooshed together and you cant read everything or edit fields very well and it just looks really bad. I was wondering if there is a way I set this up so the fields show as two fields in a row on desktop but when on a small screen or mobile all fields become vertically stacked.
If this isnt somehow automatically possible is it possible to determine the size of the screen viewing the app?
I can provide a sample of my code if that helps answer the question I have
1a2066209213ca527d95584951fce67efef02704.png
All Comments (5)
is it not what -Largesize and -Smallsize parameters are for in UDColumn command ?
I have those parameters setup but they will not change the fields to being vertically stacked when the screen size is small. Here I have the extrasmallsize parameter set to the largest (12) and the fields get messy and cut off
a4228ef9de85f024202a2e31dad1bb57ea742a3e.png
it should, sometimes its tricky to know which size to use (maybe -smallsize ?)
a small portion of app code would be helpful
So I was trying to make a dynamic custom form function that you feed an array of fields to to create the form. I understand that new-udform has something similar but I wasnt a fan of the lack of visual customization. Here is my function right now:
function New-PSUAppRequestForm {
param(
[parameter(Mandatory)]
$FieldArray,
[parameter()]
$FormName
)
New-UDGrid -Container -Content {
New-UDGrid -Item -ExtraSmallSize 4 -ExtraLargeSize 3 -Content {}
New-UDGrid -Item -ExtraSmallSize 12 -ExtraLargeSize 6 -Content {
New-UDCard -Title $FormName -Content {
New-UDForm -Content {
$ContentScriptBlock = {
if ([bool]$field.helpMessage) {
New-UDTypography -Text "ℹ️ $($field.helpMessage)" -Variant overline
New-UDHtml -Markup "<nobr>"
}
else {
New-UDTypography -Text " " -Variant overline
New-UDHtml -Markup "<nobr>"
}
if ([bool]$field.Required) {
New-UDTypography -Text "âť—Required" -Style @{
color = '#e81e1e'
} -Variant overline
New-UDHtml -Markup "<nobr>"
}
else {
New-UDTypography -Text " " -Variant overline
New-UDHtml -Markup "<nobr>"
}
switch ($field.fieldType) {
"AutoComplete" {
$Options = @()
foreach ($option in $field.fieldOptions) {
$Options += New-UDAutocompleteOption -Name $option.option -Value $option.value
}
New-UDAutocomplete -Options $options -FullWidth -Id $field.fieldId -Label $field.fieldName
}
"Select" {
New-UDSelect -FullWidth -Option {
foreach ($option in $field.fieldOptions) {
New-UDSelectOption -Name $option -Value $option
}
} -Id $field.fieldId -Label $field.fieldName
}
"Multiline" {
New-UDTextbox -Multiline -Rows $field.fieldRows -Variant $field.fieldVarient -FullWidth -Id $field.fieldId -Label $field.fieldName
}
"Checkbox" {
New-UDCheckBox -Id $field.fieldId -Label $field.fieldName
}
"Textbox" {
New-UDTextbox -Variant $field.fieldVarient -FullWidth -Id $field.fieldId -Label $field.fieldName
}
"TinyMCE" {
New-UDTinyMCE -OnEditorChange {
$Page:Textvalue = $EventData
Set-UDElement -Id $field.fieldId -Properties @{
value = $Page:Textvalue
}
} -Init $Field.init
New-UDTransition -Content {
New-UDTextbox -Id $field.fieldId
} -Fade -Timeout 1000
}
}
}
if ([bool]$FieldArray.row) {
$TotalRows = $FieldArray.row | sort-object -unique | select -last 1
foreach ($row in $($FieldArray.row | sort-object -unique)) {
New-UDStack -Content {
foreach ($field in $($FieldArray | where { $_.row -eq $row })) {
New-UDGrid -Item -ExtraSmallSize 12 -ExtraLargeSize 12 -Content {
Invoke-Command -ScriptBlock $ContentScriptBlock
}
}
} -JustifyContent center -FullWidth -AlignItems center -Direction row -Spacing 2
if ($Row -ne $TotalRows) {
if ($FieldArray.row -contains 2) {
New-UDHtml -Markup "<br>"
}
}
}
}
foreach ($field in $($FieldArray | where { ![bool]$_.row })) {
New-UDGrid -Item -ExtraSmallSize 12 -ExtraLargeSize 12 -Content {
Invoke-Command -ScriptBlock $ContentScriptBlock
}
}
} -ButtonVariant contained -OnSubmit {
$formContent = New-Object -TypeName psobject
foreach ($field in $FieldArray) {
switch ($field.fieldType) {
"Checkbox" {
$FieldValue = $(Get-UDElement -Id $field.fieldID).checked
}
default {
$FieldValue = $(Get-UDElement -Id $field.fieldID).value
}
}
$formContent | Add-Member -MemberType NoteProperty -Name $field.fieldValueName -Value $FieldValue
}
Invoke-PSUScript -Name "ProjectHandOff_SubmitActions.ps1" -Parameters @{formContent = $formContent } -Integrated
New-UDTypography -Text "Project Submitted" -Variant h5
} -OnProcessing {
New-UDTypography -Text "Submitting Project Form, Please Wait..." -Variant h5
New-UDSkeleton -Animation wave
} -OnValidate {
$Valid = $true
foreach ($field in $FieldArray) {
if ($field.validationRequired) {
switch ($field.validationType) {
"Value Exists" {
switch ($field.fieldType) {
"AutoComplete" {
$FieldValue = $(Get-UDElement -Id $Field.fieldId).value
if (![bool]$FieldValue) {
$valid = $false
}
}
"Textbox" {
$FieldValue = $(Get-UDElement -Id $Field.fieldId).value
if (![bool]$FieldValue) {
$valid = $false
}
}
"TinyMCE" {
$FieldValue = $(Get-UDElement -Id $Field.fieldId).value
if (![bool]$FieldValue) {
$valid = $false
}
}
}
}
}
}
}
if ($Valid) {
New-UDFormValidationResult -Valid
}
else {
New-UDFormValidationResult -ValidationError "Please fill out required fields"
}
} # end of ud form
}
}
} # end of ud container
}
And here is an example of using the function:
$FieldArray = @(
@{
fieldName = "Opportunity Number"
fieldValueName = "opportunityNumber"
row = 1
fieldType = "TextBox"
fieldVarient = "filled"
fieldID = $(New-Guid | select -expand guid)
icon = "Hashtag"
required = $true
validationRequired = $true
validationType = "Value Exists"
}
)
New-PSUAppRequestForm -FieldArray $FieldArray -FormName "đź“ť Project Handoff"...
that’s very individual approach to create an PSU APP
very innovative but also very not easy to debug
And i have no idea why its not working