Adding and Configuring Single Column Read Only Form on a Webpage
Overview
The Single Column Read Only Form component allows users to display structured form data in a vertical layout where fields are visible but not editable. Using the Web Builder, users can add and configure a Single Column Read Only Form by defining identifiers, titles, dependencies, section version types, and by adding various read-only field types such as text, date, date-time, URL, document, and image fields. This article explains how to add, configure, and manage a Single Column Read Only Form on a web page.
Step-by-Step Approach
1. Access the Web Builder
- From the Event Dashboard, navigate to the Content module.
- Select the Pages submenu.
- Open the required web page in edit mode.
2. Drag and Drop the Single Column Read Only Form
- From the Components panel, locate the Single Column Read Only Form component.
- Drag and drop the component onto the desired area of the web page.
- The form is added and displayed in a single-column layout.
3. Enter or Edit the Form Id
- Select the Single Column Read Only Form to open the settings panel.
- Locate the Id field.
- Enter or edit the Id as required.
4. Enter or Edit the Form Title
- Locate the Title field in the form settings.
- Enter or edit the title as required.
- The title serves as the primary identifier for the web page for both search engines and users.
5. Select Dependency from the Dependency Select Field
- In the settings panel, locate the Dependency select field.
- Select the required dependency from the list.
- The form displays or hides based on the configured dependency conditions.
6. Select Section Version Type
- Locate the Section Version Type select field.
- Select the appropriate version type.
- The form follows the visibility rules defined for the selected section version.
7. Add Fields to the Single Column Read Only Form
- From the Fields panel, drag and drop the required field types into the form.
- Supported field types include Text, Date, DateTime, URL, Document, Image, and other available fields.
- All fields added to this form are displayed in read-only mode.
8. Validate Field Name and Field Label
- Select a field within the form.
- Verify that the Field Name and Field Label are correctly reflected in the Original Field Name.
9. Configure Individual Read Only Fields
- Select a field within the Single Column Read Only Form.
- Enter or edit the Id for the selected field.
- Enter or edit the Title for the selected field.
- Enter or edit the For value for the field label to maintain proper association and accessibility.
10. Manage the Single Column Read Only Form
- Reposition the Single Column Read Only Form using drag-and-drop within the page layout.
- Remove the Single Column Read Only Form if it is no longer required.
11. Save and Apply Changes
- Save and publish the web page to apply the Single Column Read Only Form configuration.
- Preview the page to confirm that all fields are displayed correctly in read-only mode.