Text component text-adaptive-forms-core-component

In an Adaptive Form, text refers to the content that is displayed on the form for the user to read. This can include the text that is used to label a group of form elements, such as text fields, as well as any additional instructions or information that is provided to the user.

This can also help divide a form’s structure into logical sections, making it easier for users to understand and complete the form. Additionally, it could be used for accessibility purpose to give a brief description of the element it is associated with. Such text field is typically displayed near the form components, such as before or after it.

Example

example of text

Usage reasons-to-use-text-label

There are several reasons to use text in a form:

  • Provide instructions: Text can be used to provide instructions on how to fill out the form or what information is required.

  • Provide context: Text can be used to provide context for the form, such as explaining the purpose of the form or the organization collecting the information.

  • Divide the form into logical sections: Text can be used to divide a form into logical sections, making it easier for users to understand and complete the form.

  • Branding and identity: Text can be used for branding and identity purposes, such as including the organization’s name in the form.

Version and Compatibility version-and-compatibility

The Adaptive Forms Accordion Core Component was released in Feb 2023 as part of the Core Components 2.0.4 for Cloud Service and Core Components 1.1.12 for AEM 6.5.16.0 Forms or later. Here’s a table showing all supported versions, AEM compatibility, and links to corresponding documentation:

Component Version
AEM as a Cloud Service
AEM 6.5.16.0 Forms or later
v1
Compatible with
release 2.0.4 and later
Compatible with
release 1.1.12 and later but less than 2.0.0.

For information on Core Component versions and releases, refer to the Core Components Versions document.

Technical Details technical-details

Get the latest information on the Adaptive Forms Text Core Component in the technical documentation on GitHub. For more on developing Core Components, check out the Core Components developer documentation.

Configure Dialog configure-dialog

You can easily customize your text experience for visitors with the Configure Dialog. You can also define text options with ease for a seamless user experience.

Basic tab

  • Name - You can identify a form component easily with its unique name both in the form and in the rule editor, but the name must not contain spaces or special characters.

  • Bind Reference - A bind reference is a reference to a data element that is stored in an external data source and used in a form. The bind reference allows you to dynamically bind data to form fields, so that the form can display the most up-to-date data from the data source. For example, a bind reference can be used to display a customer’s name and address in a form, based on the customer’s ID entered into the form. The bind reference can also be used to update the data source with data entered into the form. In this way, AEM Forms enables you to create forms that interact with external data sources, providing a seamless user experience for collecting and managing data.

  • Mark as Unbound Form Element: Select the option to configure a form field not linked to any schema. This option allows you to save data without updating the data source. It also enables you to handle data in a custom way, separate from standard database integration.

  • Hide Component - Select the option to hide the component from the form. The component remains accessible for other purposes, such as using it for calculations in the Rule Editor. This is useful when you need to store information that doesn’t need to be seen or directly changed by the user.

Design Dialog design-dialog

Design Dialog is used to define and manage CSS styles for the Text component.

Styles Tab styles-tab

The tab is used to define and manage CSS styles for a component. The Adaptive Forms Text Core Component supports the AEM Style System.

Design Dialog

  • Default CSS Classes: You can provide a default CSS class for the Adaptive Forms Text Core Component.

  • Allowed Styles: You can define styles by providing a name and the CSS class that represents the style. For example, you can create a style named “bold text” and provide the CSS class “font-weight: bold”. You can use or apply these styles to an Adaptive Form in Adaptive Forms editor. To apply a style, in Adaptive Forms editor, select the component you want to apply the style to, navigate to the properties dialog, and select the desired style from the Styles drop-down list. If you need to update or modify the styles, simply return to the Design Dialog, update the styles in the styles tab, and save the changes.

Custom Properties

Custom Properties Dialog

Custom properties allows you to associate custom attributes (key-value pairs) to an Adaptive Form core component using the form template. The custom properties are reflected in the properties section of the headless rendition of the component. It allows creating dynamic form behavior that adapts based on the custom attributes values. For example, developers can design various renditions of a Headless Forms component for mobile, desktop, or web platforms, significantly enhancing the user experience across a wide array of devices.

  • Group Name: You can provide a name to identify the custom property group. You can add, delete, or rearrange multiple custom property groups. After adding the custom property group, you can see the following options:

    • Key-Value Pairs: You can add multiple custom property names and custom property values by clicking the Add button for each custom property group.

    • Delete: Tap or click to delete the custom property name and custom property value.

    • Rearrange: Tap or click and drag to rearrange the order of the custom property name and custom property value.

See Also see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c