> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/de/apps/components/inputs/form.md).

# Formular

{% embed url="<https://youtu.be/o8Bl1NsCc2Y>" %}

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`.

```powershell
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](/powershell-universal/de/apps/components/inputs/automcomplete.md)
* [Checkbox](/powershell-universal/de/apps/components/inputs/checkbox.md)
* [Date Picker](/powershell-universal/de/apps/components/inputs/date-picker.md)
* [Radio](/powershell-universal/de/apps/components/inputs/radio.md)
* [Select](/powershell-universal/de/apps/components/inputs/select.md)
* [Slider](/powershell-universal/de/apps/components/inputs/slider.md)
* [Switch](/powershell-universal/de/apps/components/inputs/switch.md)
* [Textbox](/powershell-universal/de/apps/components/inputs/textbox.md)
* [Time Picker](/powershell-universal/de/apps/components/inputs/time-picker.md)
* [Transfer List](/powershell-universal/de/apps/components/inputs/transfer-list.md)
* [Upload](/powershell-universal/de/apps/components/inputs/upload.md)

## Einfaches Formular

![](/files/xMa1cwAGASAwqMLVMgcW)

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

```powershell
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

![](/files/1TTuga4A9FmaaBOAcisb)

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

```powershell
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.

```powershell
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.

```powershell
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.

```powershell
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.

```powershell
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](https://rjsf-team.github.io/react-jsonschema-form/docs/).

### Felder

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

```powershell
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.

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

{% hint style="warning" %}
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.
{% endhint %}

### Reihenfolge

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

```powershell
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.

```powershell
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.

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

## API

* [New-UDForm](/powershell-universal/de/powershell-befehle/new-udform.md)
* [New-UDFormValidationResult](/powershell-universal/de/powershell-befehle/new-udvalidationresult.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/de/apps/components/inputs/form.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.