Show Menu
トピック×

アダプティブフォームのオーサリングの概要

概要

アダプティブフォームを使用すると、動的で柔軟で応答の速い、魅力的なフォームを作成することができます。AEM Forms には、アダプティブフォームを作成して操作するための直感的なユーザーインターフェースと、すぐに使用できる各種のコンポーネントが用意されています。フォームモデルやスキーマをベースとしてアダプティブフォームを作成することも、フォームモデルを使用せずにアダプティブフォームを作成することもできます。フォームモデルを選択する場合は、そのモデルが業務上の要件を満たしているかどうかだけでなく、インフラに対する現在の投資や既存のアセットを拡張できるモデルであるかどうかについても慎重に検討することが重要になります。アダプティブフォームは、以下のいずれかの方法で作成することができます。
  • フォームデータモデルの使用 データ統合 :異なるデータソースのエンティティやサービスを、アダプティブフォームの作成に使用できるフォームデータモデルに統合できます。 作成するアダプティブフォームで、複数のデータソースからのデータの取得と、複数のデータソースへのデータの書き込みが含まれる場合は、フォームデータモデルを選択します。
  • XDP フォームテンプレートを使用する XFA ベースのフォームや XDP フォームを使用している場合は、このテンプレートをフォームモデルとして使用することをお勧めします。XFA ベースのフォームをアダプティブフォームに直接変換する方法を提供します。すべての既存の XFA ルールは、関連付けられたアダプティブフォームに保持されます。このアダプティブフォームは、検証、イベント、プロパティ、パターンなどの XFA 構成をサポートします。
  • XML スキーマ定義 (XSD) または JSON スキーマを使用する XML スキーマと JSON スキーマは、組織内のバックエンドシステムによって生成されて使用されるデータの構造を表します。スキーマをアダプティブフォームに関連付け、その要素を使用して、アダプティブフォームに動的なコンテンツを追加することができます。 スキーマの要素は、アダプティブフォームの作成時に、コンテンツブラウザーの「データモデルオブジェクト」タブで使用できるようになります。
  • フォームモデルを使用せずに作成する この方法で作成されたアダプティブフォームの場合、フォームモデルは使用されません。このようなフォームで生成されるデータ XML は、フィールドと対応する値を持つフラットな構造です。
アダプティブフォーム作成方法について詳しくは、「 アダプティブフォームの作成 」を参照してください。

アダプティブフォームオーサリング UI

タッチ操作向け UI によるアダプティブフォームのオーサリングは直観的で、次の機能が提供されます。
  • ドラッグ&ドロップ機能
  • フォームの標準コンポーネント
  • アセットの統合リポジトリ
新しいアダプティブフォームを作成するときまたは既存のものを編集するときは、次の UI エレメントを使用します。
A. Sidebar B. Page toolbar C. Adaptive form page

ページツールバー

上部のページツールバーを使用し、フォームのプレビュー、フォームプロパティの変更、フォームレイアウトの変更を行うことができます。フォームの作成者はフォームをプレビューして変更を加えることができます。ページのツールバーには、以下の項目が表示されます。
  • サイドパネル :サイドパネル:サイドバーの表示/非表示を切り替えることができます。
  • ページ情報 :ページのプロパティの表示、フォームの発行と非公開、フォームワークフローの開始、フォームをクラシックUIで開く操作を行うことができます。
  • エミュレータ :タブレットやスマートフォンなど、様々な画面サイズでのフォームの外観をエミュレートします。
  • 編集 :次のような他のモードを選択できます。 編集 スタイル 開発者 デザイン
    • 編集 :フォームとフォームのコンポーネントのプロパティを編集します。例えば、コンポーネントの追加、画像の削除、必須フィールドの指定などを行うことができます。
    • スタイル :フォームのコンポーネントのスタイルを調整します。例えば、スタイルモードでパネルを選択して、パネルの背景色を指定することができます。
    • 開発者 :開発者は次のことができます。
      • 開発者はフォームの構成要素を確認することができます。
      • 開発者はいつどこでどのような不具合が発生しているか確認し、問題の解決を図ることができます。
    • デザイン . サイドバーに表示されていないカスタムコンポーネントまたはあらかじめ用意されているコンポーネントを有効または無効にできます。
  • プレビュー :フォーム発行時の外観をプレビューします。

コンポーネントのツールバー

コンポーネントを選択すると、以下の機能を使用できるツールバーが表示されます。切り取り、貼りつけ、移動、およびコンポーネントのプロパティを指定するオプションを使用することができます。次のオプションがあります。
A. 設定 :「 設定 」をタップすると、サイドバーにコンポーネントの各種プロパティが表示されます。これらのプロパティを設定することで、データ取得の方法をカスタマイズすることができます。コンポーネントのタイトルフィールドのラベルテキストを指定して、コンポーネントの要素名を変更することができます。要素名によって、ユーザーがコンポーネントを使用して入力した値を取得することができます。コンポーネントのプロパティでは、コンポーネントの動作を指定し、ユーザーの入力を管理することができます。サイドバーでプロパティを設定し、ユーザーデータを取得して、そのデータをその後の処理に使用することができます。アダプティブフォームコンテナのプロパティを使用すると、クライアントライブラリ、レイアウト、テーマ、レコードのドキュメント、保存設定、送信設定、メタデータの設定を指定できます。
B. コピー :コピーのオプションでは、コンポーネントをコピーしてフォーム内の別の場所にペーストすることができます。コンポーネントを貼り付けると、貼り付けられたコンポーネントに新しい要素名が付けられますが、コピーされたコンポーネントのプロパティは保持されます。
C. カット :カットのオプションでは、コンポーネントをアダプティブフォーム内の別の場所に移動させることができます。
D. Delete : Lets you delete the component from the form.
E. Insert : Lets you insert a component above the selected component.
F. Paste : Lets you paste the component you cut or copied using the options described above.
G. ルールを編集 :ルールエディターを開きます。For more information, see Rule Editor .
H. Group : Lets you select multiple components if you want to cut, copy, or paste more than one component together.
I. :コンポーネントの親を選択します。例えば、テキストフィールド行がセクション内のサブセクションの中にある場合、そのセクションはガイドのルートパネル内に位置し、アダプティブフォームコンテナはガイドのルートパネルの親にあたります。コンポーネントでは、すべてのオプションは下位階層から順に表示されます。
For example, if you tap Parent for a text box, you can see:
  • サブセクション
  • セクション
  • guideRootPanel
  • アダプティブフォームコンテナ
J. その他 : 選択したコンポーネントを操作するための追加のオプションを提供します。
  • SOM 式を表示
  • パネルをフラグメントとして保存(パネルのみ)
  • 子パネルを追加(パネルのみ)
  • パネルツールバーを追加(パネルのみ)
  • 置換(パネル以外)

アダプティブフォームページ

アダプティブフォームページは実際のフォームです。これは、WCM cq:Page コンポーネントとしてモデル化されたその他すべての WCM ページと似ています。一般的なアダプティブフォームのコンテンツ構造を以下の図に示します。
コンテンツ構造は一般に、次の一次コンポーネントを含みます。
  • guideContainer : アダプティブフォームのルートです。これは、アダプティブフォーム UI 内で​ アダプティブフォームの開始 ​としてマークされています。このコンポーネントでは、次のことを指定できます。
    • アダプティブフォームのモバイルレイアウト : モバイルデータにおけるフォームの外観を定義します。
    • ありがとうページ : フォームの送信後にユーザーがリダイレクトされるページを定義します。
    • 送信アクション : ユーザーがフォームを送信した後に、サーバーでフォームを処理する方法を定義します。
    • スタイリング : フォームの外観をカスタマイズするために使用する CSS ファイルへのパスを指定します。
  • rootPanel: アダプティブフォームのルートパネル これは項目ノードの下にサブパネルを含むことができます。ルートパネルを含む各パネルは、それに関連付けられたレイアウトを持つことができます。パネルのレイアウトは、フォームをレイアウトする方法を指示します。例えば、アコーディオンレイアウトでは、その項目はアコーデオン手順としてレイアウトされます。
  • ツールバー : アダプティブフォームコンテナは関連付けられたグローバルツールバーを持ち、これはフォームに対してグローバルです。This toolbar can be added using the Add Toolbar action in the edit bar, which allows authors to add actions, such as Submit, Save, Reset, and so on.
  • アセット: ​このノードは、フォームのオーサリングのために使用する追加情報を含みます。例えば、フォームモデルの詳細、ローカリゼーションの詳細など。