Show Menu

Separator component in adaptive forms

You can use the separator component to visually segregate panels of a form. You can define the overall appearance and style of a separator component by specifying the following properties of separator component:
  • Element Name: Specifies the name of the component. The SOM expressions addresses the component with value specified in the Element Name field.
  • Thickness: Specifies the thickness of the separator component in pixels.
  • Colspan: Specifies the number of columns a separator component spans to.
  • CSS Class: Specifies the custom CSS class for the separator component
  • Inline styles: With AEM Forms, you can now apply inline CSS styles to individual adaptive form components and preview the changes in real-time.
To specify properties of a separator component:
  1. Select a separator component and tap . The properties open in sidebar.
  2. Click a tab in the Inline CSS Properties section to specify CSS properties. For example: a. In the Field tab, click Add Item . A row with two fields gets added.
  3. In the first field from left, specify a CSS3 property you want to apply. For example, border . You can also select a property by clicking the down-arrow button. The drop-down list is not exhaustive and you can specify any supported CSS3 property name in this field.
  4. In the adjoining field, specify a valid value for the specified CSS3 property. For example, 3px solid black .
  5. Click Add Item to specify another property and its value.
  6. Click Preview to preview the changes in the form.
  7. Click OK to confirm the changes or **Cancel **to exit the dialog without any changes.