Formular

https://youtu.be/o8Bl1NsCc2Yyoutu.be

Formulare bieten eine Möglichkeit, Daten von Benutzern zu erfassen.

Formulare können jede Art von Steuerelement enthalten, die Sie möchten. So können Sie das Aussehen und Verhalten anpassen und beliebige Eingabesteuerelemente verwenden.

Über die Eingabesteuerelemente eingegebene Daten werden beim Absenden des Formulars an den OnSubmit-Skriptblock zurückgesendet. Innerhalb des OnSubmit-Event-Handlers haben Sie Zugriff auf die Variable $EventData, die Eigenschaften für jedes Feld im Formular enthält.

Wenn Sie beispielsweise zwei Felder haben, verfügen Sie über zwei Eigenschaften in $EventData.

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

Unterstützte Steuerelemente

Die folgenden Eingabesteuerelemente werden automatisch in ein Formular integriert. Die in diesen Steuerelementen festgelegten Werte werden während der Validierung und im OnSubmit-Event-Handler gesendet.

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

Einfaches Formular

Einfache Formulare können Eingaben wie Textfelder und Kontrollkästchen verwenden.

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

Formatieren eines Formulars

Da Formulare beliebige Komponenten verwenden können, können Sie innerhalb des Formulars die üblichen Formatierungskomponenten einsetzen.

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
}

Komponenten zurückgeben

Wenn ein Formular abgesendet wird, können Sie optional eine andere Komponente zurückgeben, die das Formular auf der Seite ersetzt. Sie können jede Universal Dashboard-Komponente zurückgeben. Sie müssen lediglich sicherstellen, dass die Komponente innerhalb des OnSubmit-Event-Handlers in die Pipeline geschrieben wird.

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

Ein Formular validieren

Die Formularvalidierung kann mithilfe des Skriptblock-Parameters OnValidate durchgeführt werden.

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
}

Ein Formular abbrechen

Sie können einen -OnCancel-Event-Handler definieren, der aufgerufen wird, wenn die Abbrechen-Schaltfläche gedrückt wird. Damit können Aktionen ausgeführt werden, wie zum Beispiel das Schließen eines Modals.

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
        }
    }
}

Ausgabe anzeigen, ohne das Formular zu ersetzen

Obwohl Sie Komponenten direkt aus einem Formular zurückgeben können, möchten Sie möglicherweise das Formular beibehalten, damit Benutzer erneut Daten eingeben können. Dazu können Sie Set-UDElement und ein Platzhalterelement verwenden, dessen Inhalt Sie festlegen können.

In diesem Beispiel haben wir ein leeres Formular, das beim Absenden das Element results mit einer UDCard aktualisiert.

New-UDForm -Content {

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

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

Schema-Formulare

Anstatt das gesamte Layout und die Logik für Formulare mit Cmdlets zu definieren, können Sie ein Formular auch anhand einer Hashtabelle mit Schema definieren. Diese Version von Formularen basiert auf react-jsonschema-form.

Felder

Sie definieren Felder, die die Typen string, number, integer, enum und boolean akzeptieren. Dies ändert den Typ der angezeigten Eingabe.

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

Erforderliche Eigenschaften

Sie können die Eigenschaft required verwenden, um eine Liste erforderlicher Eigenschaften festzulegen.

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

Beachten Sie, dass die Eigenschaften in Kleinbuchstaben angegeben werden müssen! Sie müssen zum Beispiel sicherstellen, dass die Schlüssel in Ihrer Eigenschaften-Hashtabelle klein geschrieben sind und dass die Liste der erforderlichen Eigenschaften ebenfalls klein geschrieben ist.

Reihenfolge

Sie können die Eigenschaft schemaUI verwenden, um die Reihenfolge der Felder zu ändern.

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
	}

Arrays

Sie können Formulare erstellen, die 0 bis viele Objekte akzeptieren. Der Benutzer kann Objekte zum Formular hinzufügen und daraus entfernen.

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
}

Skript-Formulare

Sie können automatisch Formulare basierend auf Skripten in Ihrer PowerShell Universal-Umgebung generieren. Skript-Formulare generieren Eingabekomponenten basierend auf dem param-Block. Skript-Formulare unterstützen automatisch Fortschritt und Rückmeldung.

Skript-Formulare unterstützen außerdem die Anzeige der Ausgabe als Text oder Tabelle.

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

API

• New-UDForm
• New-UDFormValidationResult