ユースケース:概要ページの作成

次の例では、概要タイプの Web アプリケーションを作成して、データベースのすべての Web アプリケーションを表示します。次の要素を設定します。

単一ページ Web アプリケーションの作成

  1. 単一​ページ Web アプリケーションを作成し、アウトバウンドトランジションおよび次のページへのトランジションを無効にします。

  2. ページタイトルの変更

    このタイトルは、概要ヘッダーおよび Web アプリケーションの概要に表示されます。

  3. Web アプリケーションプロパティで、単一ページ Web アプリケーション​テンプレートを選択することで、アプリケーションのレンダリングを修正します。

  4. Web アプリケーションの​ページ​アクティビティを開いて、リストを開きます(静的要素/リスト)。

  5. リストの「データ」タブで、Web アプリケーション​ドキュメントタイプを選択し、ラベル作成日​および​アプリケーションのタイプ​出力列を選択します。

  6. フィルター」サブタブで、次に示すように、Web アプリケーションのみを表示して、表示からテンプレートを除外するために、次のフィルターを作成します。

  7. ページの設定ウィンドウを閉じて、「プレビュー」をクリックします。

    データベースで使用可能な Web アプリケーションのリストが表示されます。

フォルダーのフィルターの追加

概要では、Adobe Campaign ツリーでの場所に応じてデータにアクセスすることを選択できます。これが、フォルダーのフィルターです。フォルダーのフィルターを概要に追加するには、次の手順に従います。

  1. Web アプリケーションの​ページ​ノードにカーソルを置いて、フォルダーを選択​要素を追加します(高度なコントロール/フォルダーを選択)。

  2. 表示される​ストレージ​ウィンドウで、「変数を編集」リンクをクリックします。

  3. ニーズに合わせて変数ラベルを変更します。

  4. folder で変数名を変更します。

    メモ

    変数の名前は、フォルダーにリンクした要素の名前(スキーマで定義)に一致する必要があります(つまり、この場合は folder)。テーブルを参照する際に、この名前を再利用する必要があります。

  5. 変数に XML タイプを適用します。

  6. ページを更新​インタラクションを選択します。

  7. リストにカーソルを置いて、「詳細設定」タブで、リストの「フォルダーのフィルター XPath」タブで前に作成した変数を参照します。フォルダーリンクに関係している要素の名前(つまり folder)を使用する必要があります。

    メモ

    この段階では、Web アプリケーションは、アプリケーションコンテキスト内にないので、フィルターは、フォルダーでテストできません。

新しい Web アプリケーションを設定するためのボタンの追加

  1. ページ​要素にカーソルを置いて、リンクを追加します(静的要素/リンク)。

  2. 概要のボタンに表示されるので、リンクラベルを修正します。

    この例では、ラベルは "New" です。

  3. 「URL」フィールドに URL(xtk://open/?schema=nms:webApp&form=nms:newWebApp)を挿入します。

    メモ

    nms:webApp は、Web アプリケーションスキーマと一致します。

    nms:newWebApp は、新しい Web アプリケーション作成ウィザードと一致します。

  4. URL を同じウィンドウで表示することを選択します。

  5. 「画像」フィールドに Web アプリケーションアイコン /nms/img/webApp.png を追加します。

    このアイコンは、「新規」ボタンに表示されます。

  6. スタイル」フィールドに "button" と入力します。

    このスタイルは、前に選択した​単一ページ Web アプリケーション​テンプレートで参照されます。

リストへの詳細の追加

概要でリストを設定する場合、リストの各エントリに関する追加の詳細を表示することを選択できます。

  1. 前に作成したリスト要素にカーソルを置きます。

  2. 一般」タブで、ドロップダウンリストから​列と追加詳細​表示モードを選択します。

  3. データ」タブで、プライマリキー内部名​および​説明​列を追加して、各列に対して「非表示フィールド」オプションを選択します。

    これで、この情報は、各エントリの詳細にのみ表示されます。

  4. 追加の情報」タブで、次のコードを追加します。

    <div class="detailBox">
      <div class="actionBox">
        <span class="action"><img src="/xtk/img/fileEdit.png?lang=ja"/><a title="Open" class="linkAction" href="xtk://open/?schema=nms:webApp&form=nms:webApp&pk=
        <%=webApp.id%>">Open...</a></span>
        <% 
        if( webApp.@appType == 1 ) { //survey
        %>
        <span class="action"><img src="/xtk/img/report.png?lang=ja"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&+++++++++_schema=nms%3AwebApp&_selection=%3C%25%3DwebApp.%40id%25%3E+++++++++&__sessiontoken=%3C%25%3Ddocument.controller.getSessionToken%28&lang=ja)%>">Reports</a></span>
        <% 
        } 
        %>
      </div>
      <div>
        Internal name: <%= webApp.@internalName %>
      </div>
      <%
      if( webApp.desc != "" )
      {
      %>
      <div>
        Description: <%= webApp.desc %>
      </div>
      <% 
      } 
      %>
    </div>
    
メモ

JavaScript ライブラリは、サーバー上で更新するのに 5 分かかります。サーバーを再起動して、この遅延を待機するのを回避できます。

リストのフィルターと更新

ここでは、特定のオペレーターによって作成された Web アプリケーションの概要を表示するフィルターを作成します。このフィルターは、リンクエディターで作成されます。オペレーターを選択したら、リストを更新してフィルターを適用します。これには、更新リンクを作成する必要があります。

これら 2 つの要素は、概要で視覚的にグループ化させるために、同じコンテナにグループ化されます。

  1. ページ​要素にカーソルを置いて、コンテナ/標準​を選択します。

  2. 列数を "2" に設定し、リンクエディターおよびリンクがお互い隣になるようにします。

    要素のレイアウトについては、この節を参照してください。

  3. dottedFilter を適用します。

    このスタイルは、前に選択した​単一ページ Web アプリケーション​テンプレートで参照されます。

  1. 前のステージで作成したコンテナにカーソルを置いて、高度なコントロール​メニューからリンクエディターを挿入します。

  2. 自動的に開くストレージウィンドウで、「変数」オプションを選択してから、「変数を編集」リンクをクリックして、データをフィルターするための XML 変数を作成します。

  3. ラベルを修正します。

    概要の「フィルター」フィールドの隣に表示されます。

  4. アプリケーションスキーマとしてオペレーターテーブルを選択します。

  5. リスト要素にカーソルを置いて、データ/「フィルター」​タブでフィルターを作成します。

    • 式:「作成者」リンクの外部キー
    • 演算子:​等しい
    • 値:​変数
    • 次の場合に考慮:'$(var2/@id)'!="

注意

Web アプリケーションユーザーは、情報にアクセスするための適切な Adobe Campaign 権限を持つ識別されたオペレーターである必要があります。このタイプの設定は、匿名 Web アプリケーションに対しては機能しません。

  1. コンテナにカーソルを置いて、静的要素​メニューで​リンク​を挿入します。

  2. ラベルを修正します。

  3. リスト内のデータを更新​を選択します。

  4. 前に作成したリストを追加します。

  5. 画像」フィールドに更新アイコン /xtk/img/refresh.png を追加します。

  6. 次に示すように、並べ替え矢印を使用して、Web アプリケーションの様々な要素を認識します。

これで、Web アプリケーションが設定されました。「プレビュー」タブをクリックしてプレビューします。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now