フォームボタンコンポーネント（v1）

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

使用方法

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

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

バージョンと互換性

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

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

AEM のバージョン フォームボタンコンポーネント v1
6.3 互換性あり
6.4 互換性あり
注意

このドキュメントでは、フォームボタンコンポーネント v1 について説明します。

フォームボタンコンポーネントの現在のバージョンについて詳しくは、フォームボタンコンポーネントのドキュメントを参照してください。

コンポーネント出力のサンプル

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

スクリーンショット

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"
            }
メモ

コアコンポーネントからの JSON エクスポートには、コアコンポーネントのリリース 1.1.0 が必要です。詳しくは、コアコンポーネント v1 の互換性情報を参照してください。

設定ダイアログ

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

  • 種類

    • ボタン
    • 送信

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

    • 指定しない場合は、デフォルトでボタンの種類が表示されます

  • 名前 - ボタンの名前（フォームデータと共に送信されます）

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

デザインダイアログ

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

技術的詳細

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

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

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

このページ