フォームボタンコンポーネント(v1) form-button-component-v

コアコンポーネントのフォームボタンコンポーネントを使用すれば、アクションをトリガーするボタンフィールドをフォームに含めることができます。

使用方法 usage

コアコンポーネントのフォームボタンコンポーネントを使用すれば、フォームの送信をトリガーすることが多いボタンフィールドを作成できます。このコンポーネントは、フォームコンテナコンポーネントと共に使用するためのものです。

ボタンのプロパティは、コンテンツ編集者が設定ダイアログで定義できます。

バージョンと互換性 version-and-compatibility

このドキュメントでは、AEM 6.3 に付属しているコアコンポーネントのリリース 1.0.0 で最初に導入されたフォームボタンコンポーネント v1 について説明します。

フォームボタンコンポーネント v1 の互換性を次の表に示します。

AEM のバージョン
フォームボタンコンポーネント v1
6.3
互換性あり
6.4
互換性あり
CAUTION
このドキュメントでは、フォームボタンコンポーネント v1 について説明します。
フォームボタンコンポーネントの現在のバージョンについて詳しくは、フォームボタンコンポーネントのドキュメントを参照してください。

コンポーネント出力のサンプル sample-component-output

以下は We.Retail から取得したサンプルです。

スクリーンショット screenshot

HTML 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 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"
            }
NOTE
コアコンポーネントからの JSON エクスポートには、コアコンポーネントのリリース 1.1.0 が必要です。詳しくは、コアコンポーネント v1 の互換性情報を参照してください。

設定ダイアログ configure-dialog

設定ダイアログでは、コンテンツ作成者がボタンのパラメーターを定義できます。

  • 種類

    • ボタン
    • 送信
  • タイトル - ボタンに表示されるテキスト

    • 指定しない場合は、デフォルトでボタンの種類が表示されます
  • 名前 - ボタンの名前(フォームデータと共に送信されます)

  • - ボタンの値(フォームデータと共に送信されます)

デザインダイアログ design-dialog

フォームボタンコンポーネントにはデザインダイアログはありません。

技術的詳細 technical-details

フォームボタンコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントプロジェクト全体を GitHub からダウンロードできます。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c