使用案例：建立概觀頁面

在下列範例中，我們將建立概觀型別的Web應用程式，以顯示資料庫中的所有網頁應用程式。設定下列元素：

資料夾上的篩選器(請參閱在資料夾中新增篩選器)，
用於建立新Web應用程式的按鈕(請參閱新增按鈕以設定新的網頁應用程式)，
清單中每個專案的詳細資訊顯示(請參閱新增詳細資料至清單)，
每個連結編輯工具各一個篩選器(請參閱使用連結編輯器建立篩選器)，
重新整理連結(請參閱建立重新整理連結)。

建立單頁Web應用程式

建立單一 Page Web應用程式並停用出站轉變，以及轉變到下一頁。
變更頁面標題。

此標題將顯示在概覽標題和Web應用程式概覽中。
在Web應用程式屬性中，選取 Single-page Web application 範本。
開啟 Page 網站應用程式的活動，並開啟清單(Static element > List)。
在 Data 標籤中，選取 Web applications 檔案和 Label ， Creation date 和 Type of application 輸出欄。
在 Filter 子索引標籤下，建立下列篩選器，如下所示，以便僅顯示Web應用程式並從檢視中排除範本。
關閉頁面的設定視窗，然後按一下 Preview.

會顯示資料庫中可用的Web應用程式清單。

在資料夾中新增篩選器

在概覽中，您可以選擇根據資料在Adobe Campaign樹狀結構中的位置來存取資料。這是資料夾上的篩選器。套用下列程式以將其新增至概觀。

將游標放在 Page Web應用程式的節點並新增 Select folder 元素(Advanced controls > Select folder)。
在 Storage 視窗中，按一下 Edit variables 連結。
變更變數標籤以符合您的需求。
使用變更變數名稱 資料夾 值。

注意

變數的名稱必須符合連結至資料夾（在結構描述中定義）的元素名稱，即。 資料夾 在此案例中。參照表格時，必須重複使用此名稱。
套用 XML 輸入變數。
選取 Refresh page 互動。
將游標放在清單上，並放在 Advanced 標籤中，參照之前在中建立的變數 Folder filter XPath 標籤中列出的所有專案。您必須使用資料夾連結涉及的元素名稱，即 資料夾.

注意

在此階段，Web應用程式不在它的應用程式內容中，因此無法在資料夾上測試篩選器。

新增按鈕以設定新的網頁應用程式

將游標放在 Page 元素並新增連結(Static elements > Link)。
修改連結標籤，因為它會出現在概覽的按鈕上。

在我們的範例中，標籤為新增.
在URL欄位中插入下列URL： xtk://open/?schema=nms:webApp&form=nms:newWebApp.

注意

nms：webApp 與Web應用程式結構描述一致。

nms：newWebApp 與新的Web應用程式建立精靈一致。
選擇以在同一視窗中顯示URL。
在影像欄位中新增Web應用程式圖示： /nms/img/webApp.png.

此圖示會出現在 New 按鈕。
輸入按鈕在 Style 欄位。

此樣式在 Single-page Web application 先前選取的範本。

新增詳細資料至清單

當您在總覽中設定清單時，您可以選擇顯示清單上每個專案的額外詳細資料。

將游標放在先前建立的清單元素上。
在 General 索引標籤中，選取 Columns and additional detail 顯示模式。
在 Data 索引標籤中，新增 Primary key ， Internal name 和 Description 欄並選取 Hidden field 選項。

如此一來，此資訊只會顯示在每個專案的詳細資訊中。

在 Additional detail 索引標籤中，新增下列程式碼：

<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>

注意

伺服器上的JavaScript程式庫需要5分鐘的時間重新整理。您可以重新啟動伺服器，以避免等候此延遲。

篩選和更新清單

在本節中，您將建立一個篩選器，以顯示由特定運運算元建立的Web應用程式概觀。此篩選器是使用連結編輯器建立的。選取運運算元後，請重新整理清單以套用您的篩選器；這需要建立重新整理連結。

這兩個元素將分組在相同容器中，以便在概述中以圖形方式分組。

將游標放在 Page 元素並選取 Container > Standard.
將欄數設定為 2，讓連結編輯器和連結彼此相鄰。

有關元素配置的資訊，請參閱本節.
套用 點狀濾鏡.

此樣式在 Single-page Web application 先前選取的範本。

使用連結編輯器建立篩選器

將游標放在上一個階段建立的容器上，並透過插入連結編輯器 Advanced controls 功能表。
在自動開啟的儲存視窗中，選取 Variables 選項，然後按一下 Edit variables 連結並建立XML變數來篩選資料。
修改標籤。

它會顯示在 Filter 欄位。
選擇運運算元表格作為應用程式綱要。
將游標放在清單元素上，並透過以下方式建立篩選器： Data > Filter 標籤：
- 運算式： '建立者'連結的外部索引鍵
- 運運算元： 等於
- 值：變數（變數）
- 出現以下情況時納入考量： '$(var2/@id)'！="