Formulaire

Composant de formulaire pour les applications universelles

Les formulaires permettent de collecter des données auprès des utilisateurs.

Les formulaires peuvent inclure n'importe quel type de contrôle. Cela vous permet de personnaliser l'apparence et d'utiliser n'importe quel contrôle de saisie.

Les données saisies via les contrôles de saisie seront renvoyées au bloc de script OnSubmit lorsque le formulaire est soumis. Dans le gestionnaire d'événements OnSubmit, vous aurez accès à la variable $EventData qui contiendra des propriétés pour chacun des champs du formulaire.

Par exemple, si vous avez deux champs, vous aurez deux propriétés sur $EventData.

New-UDForm -Content {
    New-UDTextbox -Id 'txtTextField'
    New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
    Show-UDToast -Message $EventData.txtTextField
    Show-UDToast -Message $EventData.chkCheckbox
}

Contrôles pris en charge

Les contrôles de saisie suivants s'intègrent automatiquement à un formulaire. Les valeurs définies dans ces contrôles seront envoyées lors de la validation et dans le gestionnaire d'événements OnSubmit.

• Autocomplete
• Checkbox
• Date Picker
• Radio
• Select
• Slider
• Switch
• Textbox
• Time Picker
• Transfer List
• Upload

Formulaire simple

Les formulaires simples peuvent utiliser des contrôles de saisie tels que des zones de texte et des cases à cocher.

New-UDForm -Content {
    New-UDTextbox -Id 'txtTextfield'
    New-UDCheckbox -Id 'chkCheckbox'
} -OnSubmit {
    Show-UDToast -Message $EventData.txtTextfield
    Show-UDToast -Message $EventData.chkCheckbox
}

Mise en forme d'un formulaire

Puisque les formulaires peuvent utiliser n'importe quel composant, vous pouvez utiliser des composants de mise en forme standard au sein du formulaire.

New-UDForm -Content {

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
            New-UDTextbox -Id 'txtFirstName' -Label 'First Name' 
        }
        New-UDColumn -SmallSize 6 -LargeSize 6 -Content {
            New-UDTextbox -Id 'txtLastName' -Label 'Last Name'
        }
    }

    New-UDTextbox -Id 'txtAddress' -Label 'Address'

    New-UDRow -Columns {
        New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
            New-UDTextbox -Id 'txtState' -Label 'State'
        }
        New-UDColumn -SmallSize 6 -LargeSize 6  -Content {
            New-UDTextbox -Id 'txtZipCode' -Label 'ZIP Code'
        }
    }

} -OnSubmit {
    Show-UDToast -Message $EventData.txtFirstName
    Show-UDToast -Message $EventData.txtLastName
}

Retour de composants

Lorsqu'un formulaire est soumis, vous pouvez éventuellement retourner un autre composant pour remplacer le formulaire sur la page. Vous pouvez retourner n'importe quel composant Universal Dashboard. Il vous suffit de vous assurer que le composant est écrit dans le pipeline au sein du gestionnaire d'événements OnSubmit.

New-UDForm -Content {
    New-UDTextbox -Id 'txtTextfield'
} -OnSubmit {
    New-UDTypography -Text $EventData.txtTextfield
}

Validation d'un formulaire

La validation d'un formulaire peut être accomplie en utilisant le paramètre de bloc de script OnValidate.

New-UDForm -Content {
    New-UDTextbox -Id 'txtValidateForm'
} -OnValidate {
    $FormContent = $EventData

    if ($FormContent.txtValidateForm -eq $null -or $FormContent.txtValidateForm -eq '') {
        New-UDFormValidationResult -ValidationError "txtValidateForm is required"
    } else {
        New-UDFormValidationResult -Valid
    }
} -OnSubmit {
    Show-UDToast -Message $Body
}

Annulation d'un formulaire

Vous pouvez définir un gestionnaire d'événements -OnCancel à invoquer lorsque le bouton d'annulation est pressé. Cela peut être utilisé pour effectuer des actions telles que fermer une fenêtre modale.

New-UDButton -Text 'On Form' -OnClick {
    Show-UDModal -Content {
        New-UDForm -Content {
            New-UDTextbox -Label 'Hello'
        } -OnSubmit {
            Show-UDToast -Message 'Submitted!'
            Hide-UDModal
        } -OnCancel {
            Hide-UDModal
        }
    }
}

Affichage de la sortie sans remplacer le formulaire

Bien que vous puissiez retourner des composants directement depuis un formulaire, vous souhaiterez peut-être conserver le formulaire afin que les utilisateurs puissent saisir à nouveau des données. Pour ce faire, vous pouvez utiliser Set-UDElement et un élément de remplacement dont vous pouvez définir le contenu.

Dans cet exemple, nous avons un formulaire vide qui, une fois soumis, met à jour l'élément results avec un UDCard.

New-UDForm -Content {

} -OnSubmit {
   Set-UDElement -Id 'results' -Content {
      New-UDCard -Content { "Hello " + (Get-Date) }
   }
}

New-UDElement -Id 'results' -Tag 'div'

Formulaires basés sur un schéma

Au lieu de définir toute la mise en page et la logique des formulaires à l'aide de cmdlets, vous pouvez également définir un formulaire basé sur une table de hachage de schéma. Cette version des formulaires est basée sur react-jsonschema-form.

Champs

Vous définissez des champs qui acceptent les types string, number, integer, enum et boolean. Cela modifie le type de saisie affiché.

New-UDForm -Schema @{
   title = "Test Form"
   type = "object"
   properties = @{
       name = @{
           type = "string"
       }
       age = @{
           type = "number"
       }
   }
} -OnSubmit {
   # $EventData.name
   # $EventData.age
}

Propriétés obligatoires

Vous pouvez utiliser la propriété required pour définir une liste de propriétés obligatoires.

New-UDForm -Schema @{
   title = "Test Form"
   type = "object"
   properties = @{
       name = @{
           type = "string"
       }
       age = @{
           type = "number"
       }
   }
   required = @('name')
} -OnSubmit {
   # $EventData.name
   # $EventData.age
}

Notez que les propriétés doivent être en minuscules ! Par exemple, vous devez vous assurer que les clés de votre table de hachage de propriétés sont en minuscules et que la liste des propriétés obligatoires l'est également.

Ordre

Vous pouvez utiliser la propriété schemaUI pour modifier l'ordre des champs.

New-UDForm -Schema @{
        title = "Test"
        type = "object"
        properties = @{
            hostname = @{
                title = "Hostname"
                type = "string"
                }
            ipaddress= @{
                title = "IP Address"
                type = "string"
                format = "ipv4"
                }
            description = @{
                title = "Server Description"
                type = "string"
                }
            servertype = @{
                title = "Server Type"
                type = "string"                            
                enum = "App","DB"
                }
            environment = @{
                title = "Environment"
                type = "string"
                enum = "Prod", "Dev" , "QA"
                }
            }
		required = @('hostname','ipaddress','description','servertype','environment')                    
	} -uiSchema @{
		"ui:order" = @('environment','hostname','ipaddress','description')
	} -OnSubmit {
		Show-UDModal -Content {                        
			New-UDTypography -Text $EventData
		} -Footer {
			New-UDButton -Text "Close" -OnClick {Hide-UDModal}
		} -Persistent
	}

Tableaux

Vous pouvez créer des formulaires qui acceptent de zéro à plusieurs objets. L'utilisateur pourra ajouter et supprimer des objets dans le formulaire.

New-UDForm -Schema @{
   title = "Test Form"
   type = "array"
   items = @{
      type = "object" 
       properties = @{
           name = @{
               type = "string"
           }
           age = @{
               type = "number"
           }
       }
   }
} -OnSubmit {
   # $EventData[0].name
   # $EventData[0].age
}

Formulaires basés sur des scripts

Vous pouvez générer automatiquement des formulaires à partir de scripts de votre environnement PowerShell Universal. Les formulaires basés sur des scripts génèrent des composants de saisie basés sur le bloc param. Ces formulaires prennent automatiquement en charge la progression et les retours d'information.

Les formulaires basés sur des scripts prennent également en charge l'affichage de la sortie sous forme de texte ou de tableau.

New-UDForm -Script "Script.ps1" -OutputType 'text'

API

• New-UDForm
• New-UDFormValidationResult