ユースケース：概要ページの作成 use-cases-creating-overviews

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

ページタイトルの変更

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

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

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

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

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

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

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

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

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

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

値 folder で変数名を変更します。

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

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

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

ページ ​要素にカーソルを置いて、リンクを追加します（静的要素／リンク）。

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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="detailBox">
  <div class="actionBox">
    <span class="action"><img src="/xtk/img/fileEdit.png"/><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"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&
      _schema=nms:webApp&_selection=<%=webApp.@id%>
      &__sessiontoken=<%=document.controller.getSessionToken()%>">Reports</a></span>
    <%
    }
    %>
  </div>
  <div>
    Internal name: <%= webApp.@internalName %>
  </div>
  <%
  if( webApp.desc != "" )
  {
  %>
  <div>
    Description: <%= webApp.desc %>
  </div>
  <%
  }
  %>
</div>

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

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

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

dottedFilter を適用します。

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

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

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

ラベルを修正します。

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

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

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

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

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

ラベルを修正します。

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

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

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

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