国コンポーネントのダイアログの作成
最終更新日： 2024年12月6日
- トピック：
- アダプティブフォーム
作成対象：
- 初心者
- 中級
- 開発者
AEM Forms as a Cloud Service
国コンポーネントは、ドロップダウンコンポーネントのダイアログ構造を継承しますが、大陸という新しいプロパティが導入されます。さらに、ダイアログは、ドロップダウンコンポーネントから継承された特定のフィールドを非表示にし、作成者が目的の大陸を選択できるようにカスタマイズされます。
このダイアログを作成する最も簡単な方法は、次のとおりです。
- AEM プロジェクトで、国コンポーネントフォルダーの下に _cq_dialog という名前のフォルダーを作成します。
- _cq_dialog フォルダー内に、.content.xml という名前のファイルを作成します。
- 以下の XML コードをこのファイルにペーストします。
- 変更内容を保存し、プロジェクトを AEM と同期します。
これにより、国コンポーネントのダイアログ設定が追加されます。
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Country of Residence"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs"
maximized="true">
<items jcr:primaryType="nt:unstructured">
<basic
jcr:primaryType="nt:unstructured"
jcr:title="Basic"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<columns
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
margin="{Boolean}true">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<saveValueType
granite:class="cmp-adaptiveform-dropdown__savevaluetype"
jcr:primaryType="nt:unstructured"
sling:orderBefore="placeholder"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Save value as"
name="./typeIndex"
typeHint="String">
<items jcr:primaryType="nt:unstructured">
<String
jcr:primaryType="nt:unstructured"
text="String"
value="0"/>
<Number
jcr:primaryType="nt:unstructured"
text="Number"
value="1"/>
<Boolean
jcr:primaryType="nt:unstructured"
text="Boolean"
value="2"/>
</items>
</saveValueType>
<type
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
name="./type"/>
<enums
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"
sling:orderBefore="bindref"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<enumOptions
jcr:primaryType="nt:unstructured"
sling:orderBefore="bindref"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldDescription="Provide the pair of enum (data value) and enumName (display text) for each option."
fieldLabel="Options">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container"
name="./enum">
<items jcr:primaryType="nt:unstructured">
<enum
granite:class="cmp-adaptiveform-base__enum"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Specify the content to submit, when the option is selected."
fieldLabel="Data value"
name="./enum"
required="{Boolean}true"/>
<enumNames
granite:class="cmp-adaptiveform-base__enumNames"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Specify the content to display in the adaptive form."
fieldLabel="Display text"
name="./enumNames"
required="{Boolean}false"/>
<richTextEnumNames
jcr:primaryType="nt:unstructured"
sling:hideResource="{Boolean}true"/>
</items>
</field>
</enumOptions>
<enumNames
granite:hidden="true"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield">
<field
granite:class="cmp-adaptiveform-base__enumNamesHidden"
granite:hidden="true"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
name="./enumNames"/>
</enumNames>
<areOptionsRichText
jcr:primaryType="nt:unstructured"
sling:hideResource="true"/>
</items>
</enums>
<multiSelect
granite:class="cmp-adaptiveform-dropdown__allowmultiselect"
jcr:primaryType="nt:unstructured"
sling:orderBefore="saveValueType"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
name="./multiSelect"
text="Allow multiple selection"
value="true"/>
<multiSelect-typehint
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/hidden"
name="./multiSelect@TypeHint"
value="Boolean"/>
<defaultValueSS
jcr:primaryType="nt:unstructured"
sling:orderBefore="placeholder"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Specified default option is preselected on form load."
fieldLabel="Default option"
name="./default"
wrapperClass="cmp-adaptiveform-dropdown__defaultvalue"/>
<defaultValueMS
jcr:primaryType="nt:unstructured"
sling:orderBefore="placeholder"
sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
fieldDescription="Specified default options are preselected on form load."
fieldLabel="Default options"
typeHint="String[]"
wrapperClass="cmp-adaptiveform-dropdown__defaultvaluemultiselect">
<field
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
name="./default"
required="{Boolean}false"/>
</defaultValueMS>
<continent
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Select Continent"
name="./continent"
required="true">
<items jcr:primaryType="nt:unstructured">
<northAmerica
jcr:primaryType="nt:unstructured"
text="North America"
value="northamerica"/>
<europe
jcr:primaryType="nt:unstructured"
text="Europe"
value="europe"/>
<asia
jcr:primaryType="nt:unstructured"
text="Asia"
value="asia"/>
<africa
jcr:primaryType="nt:unstructured"
text="Africa"
value="africa"/>
</items>
</continent>
</items>
</column>
</items>
</columns>
</items>
</basic>
</items>
</tabs>
</items>
</content>
</jcr:root>
次の手順
Experience Manager
- 概要
- プレイリスト
- AEM as a Cloud Service の概要
- Experience Cloud との統合
- 基盤となる技術
- Edge 配信サービス
- Cloud Manager
- ローカル開発環境の設定
- 開発
- AEM のデバッグ
- AEM API
- コンテンツ配信
- キャッシュ
- AEM へのアクセス
- 認証
- 高度なネットワーク機能
- セキュリティ
- AEM イベンティング
- 移行
- コンテンツフラグメント
- Forms
- Forms as a Cloud Service 向けの開発
- アダプティブフォームの作成
- ヘッドレスフォームを使用したカスタム送信サービス
- アドレスブロックコンポーネントの作成
- クリック可能な画像コンポーネントの作成
- AEM Forms と Analytics
- 国ドロップダウンコンポーネントの作成
- ボタンのバリエーションの作成
- 垂直タブの使用
- Output と Forms サービスの使用
- AEM Forms CS でのドキュメント生成
- Forms Document Services API の使用
- Batch API を使用したドキュメント生成
- Forms CS での PDF 操作
- Marketo との統合
- Blob インデックスタグを使用したフォーム送信の保存
- コアコンポーネントベースのフォームの事前入力
- Azure Portal ストレージ
- フォーム入力の保存と再開
- レビューワークフローの作成
- Acrobat Sign と AEM Forms の連携
- Microsoft Power Automate との統合
- Microsoft Dynamics との統合
- Salesforce との統合
- OneDrive と SharePoint にフォーム送信を保存
- Asset Compute の拡張性
- 複数のステップから成るチュートリアル
- エキスパートリソース