アダプティブフォームのオーサリングの概要 introduction-to-authoring-adaptive-forms
概要 overview
アダプティブフォームを使用すると、動的で魅力的なアダプティブなフォームを作成できます。 AEM Formsには、アダプティブフォームを作成して操作するための直感的なユーザーインターフェイスと標準のコンポーネントが用意されています。 フォームモデルまたはスキーマに基づくアダプティブフォームを作成するか、フォームモデルを使用しないアダプティブフォームを作成するかを選択できます。 フォームモデルを選択する場合、そのモデルが業務上の要件を満たしているかどうかだけでなく、インフラに対する現在の投資や既存のアセットを拡張できるかどうかについても慎重に検討することが重要です。アダプティブフォームを作成するには、次のオプションから選択します。
-
フォームデータモデルの使用
データ統合を使用すると、異なるデータソースのエンティティとサービスをフォームデータモデルに統合して、アダプティブフォームの作成に使用できます。アダプティブフォームを作成する際に、複数のデータソースに対するデータの取得と書き込みが必要になる場合は、フォームデータモデルを選択してください。 -
XDP フォームテンプレートの使用
XFA ベースまたは XDP フォームに投資している場合、これは理想的なフォームモデルです。XFA ベースのフォームをアダプティブフォームに直接変換する方法を提供します。 既存の XFA ルールは、関連するアダプティブフォーム内でも保持されます。 作成されたアダプティブフォームは、検証、イベント、プロパティ、パターンなどの XFA 構成をサポートします。 -
XML スキーマ定義(XSD)または JSON スキーマの使用
XML スキーマおよび JSON スキーマは、組織内のバックエンドシステムによってデータが作成または使用される構造を表します。アダプティブフォームにスキーマを関連付け、そのスキーマの要素を使用することにより、アダプティブフォームに動的コンテンツを追加することができます。スキーマの要素は、アダプティブフォームを作成する際に、コンテンツブラウザーの「データモデルオブジェクト」タブで使用することができます。 -
フォームモデルを使用しない、または使用しない
このオプションで作成されたアダプティブフォームは、フォームモデルを使用しません。 このようなフォームで生成されるデータ XML は、フィールドと対応する値を持つフラットな構造です。
アダプティブフォームの作成について詳しくは、 アダプティブフォームの作成.
アダプティブフォームオーサリング UI adaptive-form-authoring-ui
アダプティブフォームのオーサリング用のタッチ操作向け UI は直感的で、次の機能を備えています。
- ドラッグ&ドロップ機能
- 標準フォームコンポーネント
- アセットのための統合リポジトリー
新しいアダプティブフォームを作成したり、既存のアダプティブフォームを編集したりする際には、次の UI 要素を使用します。
A. サイドバー B. ページツールバー C. アダプティブフォームページ
サイドバー sidebar
サイドバーでは、以下の操作が可能です。
-
パネル、コンポーネント、フィールド、レイアウトなどのフォームのコンテンツを表示する。
-
コンポーネントのプロパティを編集する。
-
AEM Digital Asset Management(DAM)リポジトリのアセットを検索、表示、使用する。
-
フォームにコンポーネントを追加する。
A. コンテンツブラウザー B. プロパティブラウザー C. アセットブラウザー D. コンポーネントブラウザー
サイドバーは、以下のブラウザーで構成されます。
-
コンテンツブラウザー
コンテンツブラウザーには、
-
フォームオブジェクト
フォームのオブジェクト階層を表示します。 作成者は、フォームオブジェクトツリーで要素をタップすることで、特定のフォームコンポーネントに移動できます。作成者は、このツリーでオブジェクトを探したり並べ替えたりできます。
-
データモデルオブジェクト
フォームモデルの階層を確認できます。
フォームモデルの要素をアダプティブフォームにドラッグ&ドロップできます。追加された要素は、元のプロパティを保持したまま、自動的にフォームコンポーネントに変換されます。XML スキーマ、JSON スキーマまたは XDP テンプレートをフォームで使用している場合は、データモデルオブジェクトを表示できます。
-
-
プロパティブラウザー
コンポーネントのプロパティを編集できます。コンポーネントに応じて、プロパティは異なります。アダプティブフォームコンテナのプロパティを確認するには:
コンポーネントを選択し、 /アダプティブフォームコンテナ をタップして、 をタップしてください。
-
アセットブラウザー
画像、ドキュメント、ページ、動画など、様々なタイプのコンテンツを分類します。
-
コンポーネントブラウザー
アダプティブフォームを構築するために使用できるコンポーネントが含まれます。コンポーネントをアダプティブフォームにドラッグしてフォームエレメントを追加し、必要に応じて追加したエレメントを設定できます。以下の表で、コンポーネントブラウザーにリストされるコンポーネントについて説明します。
コンポーネントを使用する場合のベストプラクティス best-practices
アダプティブフォームのコンポーネントを操作する際に覚えておくべきベストプラクティスと重要なポイントを以下に示します。
-
各コンポーネントには、そのコンポーネントの外観と機能をコントロールするプロパティが関連付けられています。コンポーネントのプロパティを設定するには、コンポーネントをタップし、 プロパティをタップして、プロパティブラウザーでコンポーネントプロパティを開きます。
-
コンポーネントは要素名で識別されます。コンポーネントの名前を変更するには、 をタップし、プロパティブラウザーで 要素名 フィールドの値を変更してください。要素名フィールドに使用できるのは、英字、数字、ハイフン(-)およびアンダースコア(_)のみです。その他の特殊文字は使用できません。また、要素名の先頭には文字を使用する必要があります。
-
フォーム上にタイトルが表示されている場合は、プロパティブラウザーを起動することなく、アダプティブフォームコンポーネントのタイトルプロパティをフォームエディター内でインライン編集することができます。そのためには、以下の手順を実行します。
- 「タイトル」プロパティが設定されていて、「タイトルを非表示」プロパティが無効になっているコンポーネントをタップして選択します。
- をタップして、タイトルを編集可能にします。
- タイトルを変更し、Return キーをタップするかコンポーネント以外の場所をタップして、変更内容を保存します。変更内容を破棄する場合は Esc キーをタップします。
-
メールコンポーネントや電話番号コンポーネントなど、一部のアダプティブフォームコンポーネントには、すぐに使用できる検証パターンが用意されています。ただし、コンポーネントプロパティのパターンアコーディオンの下に表示されている「検証パターン」フィールドを更新することにより、カスタムの検証パターンを指定できます。デフォルトの検証パターンについて詳しくは、前述の表に記載されているコンポーネントの説明を参照してください。
-
「数値ボックス」や「電子メール」などのアダプティブフォームフィールドは、特殊な入力タイプのHTML5 を含むように設定できます。 モバイルデバイスやタブレットでこれらのフィールドにフォーカスを置くと、これらのフィールドで情報を入力する際に共通して使用される特定のアルファベット、数値、文字がキーパッドに表示されます。これにより、キーパッドの文字セットを切り替える必要がなくなるので、情報をすばやく入力できます。特定のコンポーネントで特殊な入力タイプを許可するには、そのコンポーネントのプロパティで「HTML タイプ番号を使用」チェックボックスを有効にします。
-
テキストボックスコンポーネントでリッチテキストを有効にすることもできます。テキストボックスにリッチテキストを入力できるようにするには、コンポーネントプロパティで「リッチテキストを許可」チェックボックスを有効にします。
-
テキストボックスコンポーネント、メールコンポーネント、電話番号コンポーネントを有効にすると、ブラウザーの自動入力設定に保存されている情報から各種フィールドの値(名前、住所、クレジットカード番号、電話番号、メールアドレスなど)が取得され、自動的に入力されます。この機能を有効にするには、コンポーネントプロパティで「自動入力を有効にする」を選択し、「自動入力属性」を選択します。ユーザーがアダプティブフォームに入力する際に、ブラウザーの自動入力プロファイルから、またはユーザーが以前に入力した値に基づいて、値が提案されます。 自動入力機能を使用するには、ブラウザーの自動入力設定がオンになっている必要があります。
-
コンポーネントプロパティでは、ラジオボタン項目とチェックボックス項目の値を
{value}={text}
という形式で指定します。 -
添付ファイルコンポーネントでは、デフォルトで、1 つのファイルのみを添付できます。 ただし、複数の添付ファイルをサポートするようにコンポーネントのプロパティを設定することはできます。 また、ユーザーが同じファイル名を持つ複数のファイルを添付すると、添付ファイルに問題が生じる場合があります。 したがって、フォームの送信時に、送信された添付ファイルごとに一意の識別子を関連付けることをお勧めします。 そのためには、以下の手順を実行します。
- AEM Forms サーバーで、Adobe Experience Manager/ツール/操作/Web コンソール に移動します。
- 「アダプティブフォーム設定サービス」を探してタップします。
- アダプティブフォーム設定サービスダイアログで、「ファイル名を一意にする」を有効にします。このオプションは、デフォルトで無効になっています。
-
ユーザーが Safari ブラウザーを使用してPDFを添付できるようにするには、 application/pdf は、File attachment コンポーネントの Supported File Types プロパティに追加されます。 以前のバージョンのAEM Formsで作成されたアダプティブフォームには、次のものを含めることができます。 .pdf の代わりに application/pdf をクリックします。
アダプティブフォームに関するベストプラクティスについては、アダプティブフォームの操作のベストプラクティスを参照してください。
ページツールバー page-toolbar
上部のページツールバーでは、フォームのプレビュー、フォームプロパティの変更、フォームレイアウトの変更を可能にするオプションを提供します。フォームの作成者は、フォームをプレビューして変更を加えることができます。ページツールバーには、以下の項目が表示されます。
-
サイドパネルを切り替え :サイドバーの表示と非表示を切り替えます。
-
ページ情報 :ページプロパティの表示、フォームの公開/非公開、フォームワークフローの開始、フォームをクラシック UI で開く操作が可能です。
-
エミュレーター :タブレットや携帯電話など異なる画面サイズでのフォームの外観をエミュレートします。
-
編集:次のようなその他のモードを選択できます。 編集、スタイル、開発者、 および デザイン.
-
編集:フォームとそのコンポーネントのプロパティを編集できます。例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行うことができます。
-
スタイル:フォームのコンポーネントのアピアランスを調整できます。例えば、スタイルモードでパネルを選択してパネルの背景色を指定できます。
-
開発者:以下が可能です。
- フォームの構成要素を確認できます。
- 何がいつ、どこで起きているかを確認し、問題の解決に役立てます。
-
デザイン:サイドバーに表示されていないカスタムコンポーネントや標準搭載のコンポーネントを有効または無効にできます。
-
-
プレビュー:フォーム公開時の外観をプレビューできます。
コンポーネントツールバー component-toolbar
コンポーネントを選択すると、作業で使用できるツールバーが表示されます。切り取り、貼り付け、移動およびコンポーネントのプロパティを指定するオプションを使用できます。以下のオプションがあります。
A. 設定:「設定」をタップすると、サイドバーにコンポーネントのプロパティが表示されます。これらのプロパティを設定することで、データ取得方法をカスタマイズできます。コンポーネントのタイトルフィールドのラベルテキストを指定して、コンポーネントの要素名を変更できます。要素名を使用すると、ユーザーがコンポーネントを使用して入力した値を取得できます。コンポーネントのプロパティでは、コンポーネントの動作を指定し、ユーザーの入力を管理できます。サイドバーでプロパティを設定し、ユーザーデータを取得して、そのデータをその後の処理に使用できます。アダプティブフォームコンテナのプロパティでは、クライアントライブラリ、レイアウト、テーマ、レコードのドキュメントの設定、保存設定、送信設定、メタデータの設定を指定することができます。
B. コピー:コピーオプションでは、コンポーネントをコピーしてフォーム内の別の場所に貼り付けることができます。コンポーネントを貼り付けすると、貼り付けられたコンポーネントに新しい要素名が与えられますが、コピーされたコンポーネントのプロパティは保持されます。
C. カット:カットのオプションでは、コンポーネントをアダプティブフォーム内の別の場所に移動させることができます。
D. 削除:フォームからコンポーネントを削除できます。
E. 挿入:選択されたコンポーネントの上にコンポーネントを挿入できます。
F. 貼り付け:前述のオプションでカットまたはコピーしたコンポーネントを貼り付けることができます。
G. ルールを編集:ルールエディターを開くことができます。詳しくは、ルールエディターを参照してください。
H. グループ:複数のコンポーネントについて、カット、コピー、貼り付けを同時に実行したい場合に、複数のコンポーネントを選択できます。
I. 親:コンポーネントの親を選択できます。例えば、テキストフィールドがセクション内のサブセクションの中にある場合、セクションはガイドルートパネル内にあり、アダプティブフォームコンテナはガイドルートパネルの親になります。 コンポーネントの場合、下位から上位の順の階層ですべてのオプションを確認できます。
例えば、テキストボックスで「親」をタップすると、以下のように項目が表示されます。
- サブセクション
- セクション
- guideRootPanel
- アダプティブフォームコンテナ
J. その他:選択したコンポーネントの操作について、さらにオプションを提供します。
- SOM 式を表示
- パネルをフラグメントとして保存(パネルのみ)
- 子パネルを追加(パネルのみ)
- パネルツールバーを追加(パネルのみ)
- 置換(パネル以外)
アダプティブフォームページ af-page
アダプティブフォームページは実際のフォームです。 これは、WCM cq:Page
コンポーネントとしてモデル化されたその他すべての WCM ページと似ています。一般的なアダプティブフォームのコンテンツ構造を以下の図に示します。
コンテンツ構造は、通常、以下の一次コンポーネントを含みます。
-
guideContainer:アダプティブフォームのルートです。これは、アダプティブフォーム UI 内で アダプティブフォームの開始 としてマークされています。このコンポーネントでは、以下のことを指定できます。
- アダプティブフォームのモバイルレイアウト:モバイルデバイスでのフォームの外観を定義します。
- ありがとうページ:フォームの送信後にユーザーがリダイレクトされるページを定義します。
- 送信アクション:ユーザーがフォームを送信した後に、サーバーでフォームを処理する方法を定義します。
- スタイリング:フォームのアピアランスをカスタマイズするために使用する CSS ファイルへのパスを指定します。
-
rootPanel:アダプティブフォームのルートパネル。 項目ノードの下にサブパネルを含むことができます。ルートパネルを含む各パネルは、それに関連付けられたレイアウトを持つことができます。パネルのレイアウトは、フォームをレイアウトする方法を指示します。例えば、アコーディオンレイアウトでは、その項目はアコーディオンステップとしてレイアウトされます。
-
ツールバー:アダプティブフォームコンテナには関連するグローバルツールバーがあり、これはフォームに対してグローバルです。 このツールバーは、編集バーの ツールバーを追加 アクションを使用して追加でき、作成者は送信、保存、リセットなどのアクションを追加できます。
-
アセット:このノードには、フォームのオーサリングに使用される追加情報が含まれています。 例えば、フォームモデルの詳細、ローカリゼーションの詳細などです。