The Core Component Form options component allows for the selection from pre-defined options in various formats.
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.
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.
Component Version | AEM 6.3 | AEM 6.4 |
---|---|---|
v2 | Compatible | Compatible |
v1 | Compatible | Compatible |
This document describes v1 of the Form Options Component.
For details of the current version of the Form Options Component, see the Form Options Component document.
The following is sample taken from We.Retail.
<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>
"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"
}
JSON export from the Core Components requires release 1.1.0 of the Core Components. Please see the compatibility information for Core Components v1 for more information.
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
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
Help message - A hint for the user of what can be entered in the field
There is no design dialog for the Form Options component.
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.