Form field

Renders a component according to the data type of a UI view property.

The attributes of the rendered component (label, default value, placeholder, format, ...), are automatically set according to the configuration of the property.

Condition	Rendered component(s)
Entity DataType = String	<textbox />
Entity DataType = Guid	<textbox />
Entity DataType = StringArray	<input-list />
Entity DataType = Boolean	<checkbox />
Entity DataType = Enum	<combobox />
Entity DataType = Color	<input-color />
Entity DataType = Date	<input-date />
Entity DataType = DateTime	<input-date-time />
Entity DataType = Decimal	<input-number />
Entity DataType = Integer	<input-number />
Entity DataType = AutoIncrementedInteger	<input-number />
Entity DataType = LocalizableString	<input-localizable-string />
Entity DataType = Image	<input-image />
Property has a lookup or the entity has an association through the property	<lookup />

Node name : form-field

Attributes

Attribute	Type	Required	Default value	Description
property-name	string	true		UI view property name
item	UI view	false	@DatasourceCurrent	Item to be bound to
label-position	string (top, left, right, hidden)	false	top	Input label position. The label displays the caption of the UI view property.
message-position	string (bottom, hidden)	false	bottom	Input message position.
focused	bool	false	false	Value indicating whether the component is focused.
alignment	string (left, right, center)	false	right	Horizontal alignment of the input value

It is not possible to add a specific attribute to the rendered component on the form-field component.

Note

The alignment attribute is only available for numeric data type properties.

Example

<vertical-layout>
  <!-- CustomerName (data type String) is displayed as a textbox without label -->
  <form-field property-name="CustomerName" label-position="hidden" />

  <!-- City  (data type String) is displayed as a textbox with its label positioned to the left -->
  <form-field property-name="Address" label-position="left"/>

  <!-- Status (data type Enum) displayed as a combobox that lists the captions of the members of the enumeration -->
  <form-field property-name="Status" />

  <!-- Age (data type Integer) is displayed as an input-number -->
  <form-field property-name="Age" alignment="center" />

  <!-- Birthday (data type Date) is displayed as an input-date -->
  <form-field property-name="Birthday" alignment="center" />
</vertical-layout>