Show Menu
TOPICS×

フォームボタンコンポーネント

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

使用方法

コアコンポーネントのフォームボタンコンポーネントを使用すれば、フォームの送信をトリガーすることが多いボタンフィールドを作成できます。このコンポーネントは、 フォームコンテナコンポーネント と共に使用するためのものです。
ボタンのプロパティは、コンテンツ編集者が 設定ダイアログ で定義できます。

バージョンと互換性

このドキュメントでは、フォームボタンコンポーネントの現在のバージョン(2018 年 1 月にコアコンポーネントのリリース 2.0.0 で導入された v2)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.3
AEM 6.4
AEM 6.5
v2
互換性あり
互換性あり
互換性あり
互換性あり
互換性あり
互換性あり
コアコンポーネントのバージョンとリリースについて詳しくは、 コアコンポーネントのバージョン を参照してください。

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

スクリーンショット

HTML

<div class="container responsivegrid 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="cmp-form 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="button aem-GridColumn aem-GridColumn--default--12"> <button type="BUTTON" class="cmp-form-button" name="loveToast" value="ILoveToast">Click here if you love toast!</button> </div> </form> </div>

JSON

"button":{ "columnClassNames":"aem-GridColumn aem-GridColumn--default--12", ":type":"core/wcm/sandbox/components/form/button/v2/button", "name":"loveToast", "jcr:title":"Click here if you love toast!", "type":"button", "value":"ILoveToast" }

技術的詳細

フォームボタンコンポーネントに関する最新の技術ドキュメ ントは、GitHubで入手できます
コアコンポーネントの開発について詳しくは、 コアコンポーネント開発者向けドキュメント を参照してください。

設定ダイアログ

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

「プロパティ」タブ

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

デザインダイアログ

「スタイル」タブ

フォームボタンコンポーネントは、AEM スタイルシステム をサポートしています。