Form Component | X4Documentation

A Form Component is ideal for creating simple forms or for displaying data on simple pages without complex form configuration. To do this, information from a .viewmodel file is displayed in a structured format. You can configure the form in the X4 Designer, or you can open and edit the form in the Forms Editor. The generated forms can be integrated into a Web App or BPM process.

Instructions for use

Allowed layouts

You can include the following layouts in a Form Component:

Flow layout
Responsive layout

Allowed controls

You can integrate the following controls in a form component:

<Accordion>
<Button> (limited to <CustomAction>)
<Card>
<Checkbox>
<ComboBox >
<CustomControl>
<DateTimePicker>
<FileLink>
<FileUpload>
<Header>
<Label>
<Link>
<ListView>
<PasswordBox>
<RadioButtonGroup>
<TextBox>

Defining the Form Component

A Form Component is declared within its own <form_name>.form definition file. This file is created in the Components project folder.

How to create a new definition file:

Select the Components folder and in the toolbar, select

> Add <desired_Component> .
Alternatively, the file can also be created via the context menu New > Add <desired_Component>.
Select the desired definition file.

=> The Project Creation Wizard dialog opens.
In the File name field, enter the name of the definition file.
Select Finish.
A new definition file with a predefined structure is created.

The Form Component is created via the <FormComponent> element and can be declared except with the standard attributes for Components with the following attributes.

Attribute	Description
`foreground`	Defines a color for the foreground (text, etc.). Possible values: Color value from the theme (e.g. `A50`, `A400` or `09`, see Theming) Hexadecimal color value If a `#` character is to be used in the data binding expression, it must be masked. The backslash (`\`) is used as the masking character. Expression for data binding (color)
`iconColor`	Defines the color of the icon of the Component. Data binding (color) is possible Note: This setting overrides the default color of the color scheme. Possible values: Hexadecimal color value, e.g. `ff5a00` Note: Do not use a hash before the color value. Do not use an abbreviated notation of the color value. Color code from the color palette of the Web App (cf. Theming), e.g. `A200`
`iconUrl`	Path to a graphic file or specification of a material icon that is used as icon of the Component. Note: The graphic file must be located in the `Resources` folder just below the Web App Project. The path is specified relative to the `Resources` folder. The Material Icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. Possible values: String (URI), e.g. `clock.png` `icon:<MaterialIconName>`, e.g. `icon:extension` With Ctrl+Space, you get an overview of the available icons. Another overview is also available online. The selection may differ from the actual available Material Icons.
`process`	Required Path to the `.wrf` file that supplies the data for the Component. The Technical Process must be in the `Services/Processes` folder. The path is specified relative to the `Services/Processes` folder. Possible values: String (URI)
`viewmodel`	Path to a `.viewmodel` file that references entities with properties from a Data Model Project. For more information on Data Model Projects, see Using a Data Model in an X4 Web App. The `.viewmodel` file must be in the `ViewModels` folder. The path is specified relative to the `ViewModels` folder. Possible values: String (URI)

Example

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 of the process

The Technical Process load.wrf mentioned in the example generates the following 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>