Form Options Component (v1)

The Core Component Form options component allows for the selection from pre-defined options in various formats.

Usage

The Core Component Form Options Component allows for the submission of different types of options presented in many different ways and is intended to be used along with the form container component.

The presentation of the options, labels, and individual options can be defined by the content editor in the configure dialog.

Version and Compatibility

This document describes v1 of the Form Options Component, originally introduced with release 1.0.0 of the Core Components with AEM 6.3.

The following table lists the compatibility of v1 of the Form Options Component.

Sample Component Output

The following is sample taken from We.Retail.

Screenshot

HTML

<div class="cmp cmp-form aem-GridColumn aem-GridColumn--default--12">
<form method="POST" action="/content/we-retail/us/en/experience.html" id="new_form" name="new_form" enctype="multipart/form-data" class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
    <input type="hidden" name=":formstart" value="/content/we-retail/us/en/experience/jcr:content/root/responsivegrid/container">

    <div class="cmp cmp-options aem-GridColumn aem-GridColumn--default--12">

    <fieldset class="form-group checkbox">
        <legend>What is your favorite type of toast?</legend>

        <div class="checkbox-item">
            <label>
              <input type="checkbox" name="toasttypes" value="dry">
              Plain dry toast
            </label>
        </div>
<div class="checkbox-item">
            <label>
              <input type="checkbox" name="toasttypes" value="french">
              French toast
            </label>
        </div>
<div class="checkbox-item">
            <label>
              <input type="checkbox" name="toasttypes" value="texas">
              Texas toast
            </label>
        </div>

    </fieldset>

</div>

</form></div>

JSON

"container": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "columnCount": 12,
              "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
              ":items": {
                "options": {
                  "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
                  ":type": "weretail/components/form/options",
                  "name": "toastTypes",
                  "jcr:title": "What is your favorite type of toast?",
                  "source": "local",
                  "type": "checkbox"
                }
              },
              ":itemsOrder": [
                "options"
              ],
              ":type": "weretail/components/form/container"
            }

Configure Dialog

The configure dialog allows the content author to define the type of options that should be presented, labels, and which options are available.

• Types
  How the options will be presented

  • Checkboxes
  • Radio buttons
  • Drop-down
  • Multi-select drop-down

• Title - The title that will be displayed as the label for the options

• Name - The name of the field submitted with the form data

• Source - Where the options are defined

  • Local - Defined within the component
    • Tap or click the Add button to add a value, Delete to remove a value
    • Value - The value saved when that option is selected when the form is submitted
    • Text - The label for the option displayed on the form
    • Active - The option is marked as selected when the form loads
    • Disabled - The option is not selectable but still displayed
    • List - A static list defined elsewhere in AEM is used for the option
      • List - The path of the static list in AEM
        • Use the Browse button to locate the list resource
    • Data source - A data source is used for the options
      • Data source - resource type of the data source

• Help message - A hint for the user of what can be entered in the field

Design Dialog

There is no design dialog for the Form Options component.

Technical Details

The latest technical documentation about the Form Options Component can be found on GitHub.

The entire core components project can be downloaded from GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.