現在表示中:

フォームを作成するには、フィールドとコンポーネントを追加して、フォーム構造、コンテンツ、アクションをエディターで定義します。フィールドとコンポーネントは、フォームコンテナの guideRootPanel に追加します。基本構造と初期コンテンツが含まれているテンプレートをテンプレートエディターを使用して作成し、フォームの作成時に使用することができます。

例えば、登録フォームですべての作成者が特定のテキストボックス、ナビゲーションボタン、送信ボタンを使用できるようにします。他の登録フォームと統一のとれたフォームを作成者が作成できるようにコンポーネントを追加してテンプレートを作成できます。作成者がテンプレートを使用してアダプティブフォームを作成する場合、新しいフォームにはテンプレートに指定した構造とコンポーネントが継承されます。テンプレートエディターでは次のことが行えます。

  • 構造レイヤーでフォームのヘッダーおよびフッターコンポーネントを追加できます。
  • フォームの初期コンテンツを提供できます。
  • テーマや送信アクションを指定できます。

テンプレートの操作

オーサリングモードではテンプレートエディターにツールメニューからアクセスできます。Adobe Experience Manager/ツール/テンプレートに移動します。テンプレートコンソールにはグローバルフォルダーが表示されます。グローバルフォルダーではテンプレートを作成できます。

テンプレートフォルダーの作成

使用可能なフォルダーに加えて、テンプレートフォルダーを個別に作成することができます。テンプレートを作成するには管理者権限が必要です。

テンプレートフォルダーを作成するには:

  1. CRXDE で /conf を見つけます。/conf でテンプレートフォルダーを作成します。

    次の構造を使用します。

    /conf
        <your-folder-name> [sling:Folder]
            settings [sling:Folder]
                wcm [cq:Page]
                    templates [cq:Page]
                    policies [cq:Page]
    
  2. ルートノードで次のプロパティを定義します。

    <フォルダー名> [sling:Folder]

    • 名前:jcr:title
      • タイプ:String
      • 値:テンプレートコンソールに表示する(フォルダーの)タイトル。

    グループを割り当てて、作成者が新しいフォルダーでテンプレートを作成するために必要なアクセス権(ACL)を定義します。

    詳しくは、「アクセス権の管理」を参照してください。template-authors グループは割り当てが必要なデフォルトグループです。

     

    パス

     

    役割 / グループ

    権限 - 作成者環境

     

    説明

     

    /conf/<your- folder>/settings/wcm/templates

     

    template- authors

     

    読み取り、書き込み、レプリケーション

    標準インストールでは、template- authors グループは空になっています。

    /conf/<your- folder>/settings/wcm/templates

     

    everyone

     

    読み取り

     

    /conf/<your- folder>/settings/wcm/policies

    template- authors

     

    読み取り、書き込み、レプリケーション

     

    /conf/<your- folder>/settings/wcm/policies

     

    everyone

     

    読み取り

     

    パス

    役割 / グループ

    権限 - 発行環境

    /conf/<your- folder>/settings/wcm/templates

     

    everyone

     

    読み取り

    /conf/<your- folder>/settings/wcm/policies

     

    everyone

     

    読み取り

テンプレートの作成

フォルダーの作成後、フォルダーを開いて次の手順を実行し、テンプレートを作成します。

  1. テンプレートコンソールで、作成したフォルダー内で「作成」をタップします。
  2. 「テンプレートタイプを選択」セクションで、「アダプティブフォームテンプレート」を選択し、「次へ」をタップします。
  3. 「テンプレート詳細」セクションで、テンプレートタイトルを指定し、「作成」をタップします。
    作成したテンプレートがフォームの作成中に選択された場合に表示する説明とサムネールを指定できます。
  4. 「完了」をタップしてコンソールに戻るか、または「開く」をタップしてテンプレートをエディターで開きます。

テンプレートエディター UI

編集対象のテンプレートを開くと、次の AEM エディターコンポーネントが表示されます。

  • ページのツールバー
    次のオプションが含まれています。
    • サイドパネルを切り替え:サイドバーの表示と非表示を切り替えます。
    • ページ情報:発行 / 非公開の時間、サムネール、クライアント側ライブラリ、ページポリシー、ページデザインのクライアント側ライブラリなどの情報を指定できます。
    • エミュレーター:異なるデバイスの外観をシミュレートしてカスタマイズできます。
    • レイヤーセレクター:レイヤーを変更できます。
      構造レイヤーまたは初期コンテンツレイヤーを選択できます。構造レイヤーを使用すると、ヘッダーとフッターを追加してカスタマイズできます。初期コンテンツレイヤーを使用すると、フォームコンテンツをカスタマイズできます。
    • プレビュー:テンプレート発行時の外観をプレビューできます。「レイヤーセレクター」と「プレビュー」を使用して、編集モードとプレビューモードを切り替えることができます。
  • サイドバー:コンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。
  • コンポーネントツールバー:コンポーネントを選択すると、コンポーネントをカスタマイズできるツールバーが表示されます。
  • ページ:コンテンツを追加してテンプレートを作成する領域です。

タッチ UI エディターについて詳しくは、「アダプティブフォームのオーサリングの概要」を参照してください。

テンプレートの編集

アダプティブフォームテンプレートは 2 つのレイヤーを使用して作成されます。

  • 構造
  • 初期コンテンツ

画面の右上隅の「プレビュー」オプションの横にある「レイヤーセレクター」を使用します。 

構造

テンプレートエディターで構造レイヤーを選択すると、アダプティブフォームコンテナの上および下にレイアウトコンテナを表示できます。作成者はこれらのレイアウトコンテナをヘッダーとフッターに使用できます。ヘッダーとフッターは追加、編集、カスタマイズできます。テンプレートのヘッダーをカスタマイズするには、アダプティブフォームコンテナの上にあるレイアウトコンテナにアダプティブフォームのヘッダーコンポーネントをドラッグアンドドロップします。テンプレートのフッターをカスタマイズするには、アダプティブフォームコンテナの下にあるレイアウトコンテナにアダプティブフォームのフッターコンポーネントをドラッグアンドドロップします。

構造レイヤー内のレイアウトコンテナ
構造レイヤー内のレイアウトコンテナ

A. ヘッダーコンポーネントのレイアウトコンテナ B. フッターコンポーネントのレイアウトコンテナ 

アダプティブフォームコンテナの上にあるレイアウトコンテナにアダプティブフォームのヘッダーコンポーネントをドラッグアンドドロップします。コンポーネントを追加した後にプロパティを指定し、ロゴを追加してそのタイトルを指定できます。 

同様に、アダプティブフォームコンテナの下にあるレイアウトコンテナにフッターコンポーネントをドラッグアンドドロップすると、著作権情報や会社の詳細を指定できます。 

構造レイヤーに追加されたヘッダーとフッター
構造レイヤーに追加されたヘッダーとフッター

構造レイヤー内のコンポーネントのロック/ロック解除

構造レイヤーを選択してテンプレートを編集する際は、テンプレートのヘッダーとフッターをロック解除できます。テンプレート内のコンポーネントがロック解除されると、フォーム作成者はそのテンプレートを使用するアダプティブフォーム内のコンポーネントを編集できます。コンポーネントをロックすると、フォーム作成者はアダプティブフォーム内でそのコンポーネントを編集できなくなります。ロックオプションはコンポーネントツールバーにあります。

例えば、ヘッダーコンポーネントをテンプレートに追加するとします。コンポーネントを選択すると、コンポーネントツールバーにロックオプションが表示されます。通常、ヘッダーには会社名とロゴが含まれており、フォーム作成者がテンプレート内のロゴとヘッダーを変更できないようにする必要があります。ヘッダーコンポーネントをロックしたテンプレートを使用して作成したアダプティブフォームでは、フォーム作成者はロゴと会社名を変更できません。 

注意:

ヘッダーコンポーネント内の画像またはロゴを個々にロックまたはロック解除することはお勧めしません。ヘッダーコンポーネントはロック解除できます。

初期コンテンツ

「初期コンテンツ」オプションを選択すると、テンプレートのアダプティブフォームコンテナがアダプティブフォームと同様に開いて編集可能になります。アダプティブフォームを作成する場合と同様、テーマや送信アクションの選択などの初期設定を指定できます。

フォーム作成者はこれをベースにしてフォームを作成します。コンテンツのフロー構造は、テンプレートの初期コンテンツレイヤーで指定されます。フォームテンプレートの初期コンテンツの編集に切り替えるには、ページツールバーでプレビューを実行する前に、/初期コンテンツをタップします。

テンプレートエディター内の初期コンテンツレイヤー
プロパティを指定するために選択されたアダプティブフォームコンテナを表示しているテンプレートエディター内の初期コンテンツレイヤー。

初期コンテンツレイヤー内で、作成者がベースとして使用するアダプティブフォームテンプレートを作成します。テンプレートの作成はフォームの作成と同様です。サイドバーにあるオプションを使用します。サイドバーはコンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。 

サイドバー」を参照してください。

注意:

送信アクションとして「コンテンツを保存」または「PDF を保存」を選択すると、ストレージパスを指定するオプションを使用できます。テンプレートでパスを指定した場合、このテンプレートから作成されたすべてのフォームには同じパスが指定されます。正しいストレージパスを指定するか、またはフォーム作成者がストレージパスを更新してすべてのフォームのデータが同じ場所に保存されないようにします。

タブとパネルを使用したアダプティブフォームテンプレートの作成

例えば、次のタブを使用してテンプレートを作成するとします。

  • 一般情報
  • 職業情報

ロゴを追加し、タイトルを指定し、構造レイヤーにフッターを追加しています。ヘッダーとフッターをロックし、フォーム作成者がテンプレートを使用してフォームを作成する際にヘッダーとフッターが編集されないようにします。 

レイヤーを構造から初期コンテンツに変更し、コンテンツをフォームに追加します。タブ付きの構造を作成するには、アダプティブフォームコンテナの guideRootPanel に子パネルを追加します。パネルを追加するには:

  • パネルを追加するには、「コンポーネントをここにドラッグ」オプションを選択するときに + ボタンをタップします。
  • パネルコンポーネントはコンポーネントブラウザーからサイドバーにドラッグアンドドロップできます。 
  • コンポーネントツールバーから guideRootPanel の子パネルを追加できます。

「一般情報」および「職業情報」タブを作成するには、2 つのパネルを guideRootPanel の子パネルに追加します。パネルを選択して  をタップし、サイドバーでプロパティを開きます。要素名を general-info および professional-info に変更し、タイトルを「一般情報」および「職業情報」にそれぞれ変更します。サイドバーでコンテンツをタップし、コンテンツブラウザーを開きます。「フォームオブジェクト」タブで、「guideRootPanel」を選択します。エディターで guideRootPanel が選択されます。コンポーネントツールバーで  をタップし、プロパティを開きます。パネルレイアウトフィールドで、「上部のタブ」を選択し、「完了」をタップします。タブ付きのテンプレート構造が適用されます。

タブへのコンテンツの追加

アダプティブフォームテンプレートへのフィールドの追加
テンプレートへのフィールドの追加

パネルを追加してタブとして構造化した後、タブ内にフィールドを追加できます。エディターでタブを選択すると、「コンポーネントをここにドラッグ」オプションが表示されます。テキストボックス、リスト項目、ボタンなどのコンポーネントをドラッグアンドドロップできます。コンポーネントはコンポーネントブラウザーからサイドバーにドラッグアンドドロップできます。

各コンポーネントにはデータの取得と操作を強化するプロパティが存在します。例えば、コンポーネントの「必須フィールド」プロパティを有効化することができます。作成者は、顧客が必須フィールドをスキップした場合に表示するメッセージを指定できます。「必須フィールドメッセージ」プロパティにメッセージを指定します。

名前、電話番号、生年月日フィールドが例のテンプレートの「一般情報」タブに追加されます。現在の職業、雇用タイプ、学歴フィールドが「職業情報」タブに追加されます。 

フィールドを追加した後、「送信」、「リセット」などのボタンを追加できます。

テンプレートの有効化

テンプレートは作成するとドラフトとして追加されます。テンプレートを有効化して、アダプティブフォームの作成に使用できるようにします。テンプレートを有効化するには:

  1. Adobe Experience Manager/ツール/テンプレートに移動して、テンプレートの作成先のフォルダーを開きます。
  2. 作成したテンプレートはドラフトとしてマークされます。
  3. テンプレートを選択し、ツールバーで「有効」をタップします。
    アダプティブフォームの作成時にテンプレートの選択を求められる際、このテンプレートがリストに表示されるようになります。

テンプレートの読み込みまたは書き出し

フォームはテンプレートと連携しています。カスタマイズしたテンプレートを使用して作成したアダプティブフォームをダウンロードする場合、テンプレートはダウンロードされません。別の AEM Forms インスタンス上のフォームを読み込む場合は、テンプレートなしで読み込まれます。フォームが読み込まれてもテンプレートを使用できない場合、フォームはレンダリングされません。http://<server>:<port>/crx/packmgr にある /conf ノードのカスタムテンプレートをパッケージ化し、フォームのアップロード先の AEM Forms インスタンスに移植することができます。

テンプレートを使用したアダプティブフォームの作成

テンプレートを作成して有効にすると、Forms Manager でアダプティブフォームを作成するときにそのテンプレートを使用できます。テンプレートを使用したアダプティブフォームの作成方法について詳しくは、「アダプティブフォームの作成」を参照してください。

初期設定済みテンプレートの表示オプションの変更

アダプティブフォームのカスタムテンプレートを作成して、基本構造と初期コンテンツを定義できます。AEM Forms には、アダプティブフォーム用の一連の初期設定済みテンプレートも用意されています。テンプレートの表示/非表示を選択できます。 

テンプレートを表示または非表示にするには、以下の手順を実行します。

  1. AEM Forms 作成者インスタンスにログインし、ツール操作 Web コンソールに移動します。

    注意:

    AEM Web コンソールの URL は、http://[server]:[port]/system/console/configMgr です。

  2. FormsManager 設定を探して開きます。

    • アダプティブフォームの初期設定済みテンプレートを表示または非表示にするには、「AF および AD の初期設定済みテンプレートを含める」オプションをオンまたはオフにします。
    • AEM 6.0 Forms または AEM 6.1 Forms リリースで追加され、現在非推奨になっているアダプティブフォームの初期設定済みテンプレートを表示または非表示にするには、「AEM 6.0 の AF テンプレートを含める」オプションをオンまたはオフにします。このオプションをオンにした場合、これを有効にするには、「AF および AD の初期設定済みテンプレートを含める」の設定を有効にする必要があります。
  3. 保存」をクリックします。初期設定済みテンプレートの表示オプションが変更されます。

推奨事項

  • テンプレートエディターでフォームのプロパティを変更する際は、BindReference プロパティを使用しないようにしてください。
  • ブレークポイントを追加する場合は、アダプティブフォームテンプレートの作成時にブレークポイントを作成します。
    ブレークポイントについて詳しくは、「レスポンシブレイアウト」を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー