Form Button Component (v1)

The Core Component Form Button component allows for the inclusion of a button field in a form to trigger an action.

Usage

The Core Component Form Button component allows for the creation of button field, often to trigger the submission of the form and is intended to be used along with the form container component.

The button properties can be defined by the content editor in the configure dialog.

Version and Compatibility

This document describes v1 of the Form Button 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 Button Component.

Sample Component Output

The following is sample taken from We.Retail.

Screenshot

HTML

<div class="cmp cmp-button aem-GridColumn aem-GridColumn--default--12">
    <div class="cmp cmp-button">
        <button type="BUTTON" class="btn btn-action btn-primary" name="loveToast" value="ILoveToast">
            Click here if you love toast!
        </button>
    </div>
</div>

JSON

"container": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "columnCount": 12,
              "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
              ":items": {
                "button": {
                  "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
                  ":type": "weretail/components/form/button",
                  "name": "loveToast",
                  "jcr:title": "Click here if you love toast!",
                  "type": "submit",
                  "value": "ILoveToast"
                }
              },
              ":itemsOrder": [
                "button"
              ],
              ":type": "weretail/components/form/container"
            }

Configure Dialog

The configure dialog allows the content author to define the parameters of the button.

• Type

  • Button
  • Submit

• Title - The text displayed on the button

  • If none provided it defaults to the button type

• Name - The name of the button, which is submitted with the form data

• Value - The value of the button, which is submitted with the form data

Design Dialog

There is no design dialog for the Form Button component.

Technical Details

The latest technical documentation about the Form Button 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.

Business.Adobe.com resources