Formulaire

https://youtu.be/o8Bl1NsCc2Yyoutu.be

Les formulaires offrent un moyen de recueillir des données auprès des utilisateurs.

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

Les données saisies au moyen des contrôles de saisie seront renvoyées au bloc de script OnSubmit lorsque le formulaire est soumis. Dans le gestionnaire d'événement 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énement OnSubmit.

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

Formulaire simple

Les formulaires simples peuvent utiliser des entrées comme 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 les composants de mise en forme standards dans le 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
}

Retourner des 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. Tout ce que vous avez à faire est de vous assurer que le composant est écrit dans le pipeline dans le gestionnaire d'événement OnSubmit.

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

Valider un formulaire

La validation d'un formulaire peut être réalisée 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
}

Annuler un formulaire

Vous pouvez définir un gestionnaire d'événement -OnCancel à invoquer lorsque le bouton d'annulation est enfoncé. Cela peut être utilisé pour effectuer des actions comme 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
        }
    }
}

Afficher la sortie sans remplacer le formulaire

Même si vous pouvez retourner des composants directement à partir d'un formulaire, vous voudrez peut-être conserver le formulaire pour que les utilisateurs puissent saisir des données à nouveau. Pour ce faire, vous pouvez utiliser Set-UDElement et un élément d'espace réservé auquel vous pouvez définir le contenu.

Dans cet exemple, nous avons un formulaire vide qui, lorsqu'il est soumis, mettra à 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 de schéma

Au lieu de définir toute la disposition et la logique des formulaires à l'aide d'applets de commande, 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 d'entrée affiché.

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

Propriétés requises

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

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 dans votre table de hachage de propriétés sont en minuscules et que la liste des propriétés requises est également en minuscules.

Ordonnancement

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 0 à plusieurs objets. L'utilisateur pourra ajouter et retirer des objets du 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 de script

Vous pouvez générer automatiquement des formulaires basés sur les scripts de votre environnement PowerShell Universal. Les formulaires de script généreront des composants de saisie basés sur le bloc param. Les formulaires de script prennent automatiquement en charge la progression et la rétroaction.

Les formulaires de script 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