Controls: Rendering Fields Dynamically

When a form is rendered in the UI by the dynamic <ae-form> component it will use the parsed formdown to structure the html actually being displayed. As part of the rendering visible fields inside the form, are usually rendered using the <ae-control> component. They use certain lookup logic to determine which control to use based on the field type and styling present in the formdown.

Controls are dynamic components that render fields in forms or documents. They:

• Adapt based on the field type and cardinality.
• Can access metadata from the form field definition, including tags and conditions.
• Have access to the entire document, allowing complex rendering logic.

Example: Rendering a Field with a Control

By default the <ae-control> component will use the type of the field to lookup a matching control as the system is guaranteed to have a default control for each field type.

By default this would render the fallback address control for example.

[Address][address]

[address]: address

But we can add a custom control to the formdown to render a custom control for the address field.

{map}[Address][address]

[address]: address

Which would try to find a control named map to render the address field.

TIP

The control name is case-insensitive and can be preceded by a namespace my-app:map to avoid conflicts with other controls.

Showing Fields Twice

You can even show a field twice using two controls, both linked to the same field.

[Address][address]

{map}[Address][address]

[address]: address

If the map control supports watching the field for changes, it will update a graphical map when the address field changes.

Hidding Fields dynamically

You can hide fields dynamically by adding a condition to the field definition.

[Has Address][has_address]

[has_address]: switch

{hidden if has_address}
[Address][address]

Adding Tags to Fields

Tags can be added to fields to add additional functionality to fields. For example, a <sensitive> tag could be used to mark a field as sensitive, which would hide the field from users who do not have the necessary permissions.

[Address][address]

[address]: address <sensitive>

Most tags are used to add additional functionality to fields, but some tags can be used to change the way a field is rendered. For example, the <optional> tag can be used to allow fields to be undefined in the data model.