Form Component | X4Documentation

Eine Form Component eignet sich ideal, um einfache Formulare zu erstellen oder Daten ohne komplexe Formularkonfiguration auf einfachen Seiten darzustellen. Dazu werden Informationen aus einer .viewmodel-Datei in einem strukturierten Format abgebildet. Sie können das Formular im X4 Designer konfigurieren, oder Sie können das Formular im Forms Editor öffnen und dort bearbeiten. Die generierten Formulare lassen sich in eine Web App oder einen BPM-Prozess einbinden.

Hinweise zur Verwendung

Zulässige Layouts

In einer Form Component können Sie folgende Layouts einbinden:

Flow-Layout
Responsive-Layout

Zulässige Controls

In einer Form Component können Sie folgende Controls einbinden:

<Accordion>
<Button> (beschränkt auf <CustomAction>)
<Card>
<Checkbox>
<ComboBox >
<CustomControl>
<DateTimePicker>
<FileLink>
<FileUpload>
<Header>
<Label>
<Link>
<ListView>
<PasswordBox>
<RadioButtonGroup>
<TextBox>

Form Component definieren

Eine Form Component wird innerhalb einer eigenen Definitionsdatei <FormName>.form deklariert. Diese wird im Projektordner Components angelegt.

So legen Sie eine neue Definitionsdatei an:

Wählen Sie den Ordner Components aus, und wählen Sie in der Symbolleiste

> Add <gewünschte Komponente>.
Alternativ lässt sich die Datei auch über das Kontextmenü New > Add <gewünschte Komponente> anlegen.
Wählen Sie die gewünschte Definitionsdatei aus.

=> Das Dialogfenster File Creation Wizard wird geöffnet.
Geben Sie im Feld File name den Namen der Definitionsdatei ein.
Wählen Sie Finish aus.
Eine neue Definitionsdatei mit einer vordefinierten Struktur wird angelegt.

Die Form Component wird über das Element <FormComponent> erzeugt und kann außer mit den Standardattributen für Components mit folgenden Attributen deklariert werden.

Attribut	Beschreibung
`foreground`	Definiert eine Farbe für den Vordergrund (Texte usw.). Mögliche Werte: Farbwert aus dem Theme (z. B. `A50`, `A400` oder `09`, siehe Theming) Hexadezimaler Farbwert Wenn im Data-Binding-Ausdruck ein `#`-Zeichen verwendet werden soll, muss dieses maskiert werden. Als Maskierungszeichen dient der Backslash (`\`). Ausdruck für Data Binding (Color)
`iconColor`	Definiert die Farbe des Icons der Component. Data Binding (Color) möglich Hinweis: Diese Einstellung überschreibt die Standardfarbe des Farbschemas. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`iconURL`	Pfad zu einer Grafikdatei oder Angabe eines Material Icons, das als Icon der Component verwendet wird. Hinweis: Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Das Material Icon muss mit dem Präfix `icon`, z. B. `icon:<MaterialIconName>` angegeben werden. Mögliche Werte: Zeichenkette (URI), z. B. `clock.png` `icon:<MaterialIconName>`, z. B. `icon:extension` Mit Strg+Leertaste erhalten Sie eine Übersicht der verfügbaren Icons. Eine weitere Übersicht ist auch online verfügbar. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen.
`process`	Erforderlich Pfad zur `.wrf`-Datei, die die Daten für die Component liefert. Der Technical Process muss im Ordner `Services/Processes` enthalten sein. Pfadangabe relativ zum Ordner `Services/Processes`. Mögliche Werte: Zeichenkette (URI)
`viewmodel`	Pfad zu einer `.viewmodel`-Datei, in der Entitäten mit Eigenschaften aus einem Data Model Project referenziert sind. Weitere Informationen zu Data Model Projects finden Sie unter Data Model in einer Web App nutzen. Die `.viewmodel`-Datei muss im Ordner `ViewModels` enthalten sein. Pfadangabe relativ zum Ordner `ViewModels`. Mögliche Werte: Zeichenkette (URI)

Beispiel

XML

<?xml version="1.0" encoding="UTF-8"?>
<FormComponent xmlns="http://softproject.de/webapp/1.0 "
	viewmodel="TennisPlayer.viewmodel" process="Load.wrf">
	<FlowLayout>
		<Card icon="25_Jahre_SP.png"
			title="Anmeldung zum Firmenjubiläum">
			<FlowLayout>
				<TextBox value="#firstname" displayName="Vorname"></TextBox>
				<TextBox value="#lastname" displayName="Nachname"></TextBox>
				<TextBox value="#city" displayName="Ort"></TextBox>
				<TextBox value="#zipcode" displayName="Postleitzahl"></TextBox>
				<TextBox value="#street" displayName="Straße"></TextBox>
				<ComboBox value="#diet" displayName="Haben Sie besondere Ernährungswünsche oder Unverträglichkeiten?">
					<Option displayName="Vegetarisch" />
					<Option displayName="Vegan" />
					<Option displayName="Glutenfrei" />
					<Option displayName="Laktosefrei" />
				</ComboBox>
				<Checkbox horizontalAlign="left" checked="#secondperson"
					displayName="Ich bringe eine Begleitperson mit."></Checkbox>
			</FlowLayout>
		</Card>
		<Button>
			<CustomAction displayName="Anmelden"></CustomAction>
		</Button>
	</FlowLayout>
</FormComponent>

Output-Format des Prozesses

Der im Beispiel genannte Technical Process load.wrf generiert folgenden Output:

XML

<Ok>
   <firstname>Karl</firstname>
   <lastname>Kunde</lastname>
   <city>Ettlingen</city>
   <zipcode>76275</zipcode>
   <street>Am Erlengraben</street>
   <diet>Vegetarisch</diet>
   <secondperson>true</secondperson>
</Ok>