使用案例：建立概觀頁面 use-cases-creating-overviews

建立單一​ 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應用程式清單。

將游標放在網頁應用程式的​ Page ​節點上，並新增​ Select folder ​元素(Advanced controls > Select folder)。

在出現的​ Storage ​視窗中，按一下​ Edit variables ​連結。

變更變數標籤以符合您的需求。

以​ 資料夾 ​值變更變數名稱。

將​ XML ​型別套用至變數。

選取​ Refresh page ​互動。

將游標放在清單上，並在​ Advanced ​索引標籤中，參考先前在清單的​ Folder filter XPath ​索引標籤中建立的變數。 您必須使用資料夾連結涉及的元素名稱，即​ 資料夾。

將游標放在​ Page ​專案上並新增連結(Static elements > Link)。

修改連結標籤，因為該標籤會出現在概覽的按鈕上。

在我們的範例中，標籤是​ New。

在URL欄位中插入下列URL： xtk://open/?schema=nms:webApp&form=nms:newWebApp。

選擇在相同視窗中顯示URL。

在影像欄位中新增網頁應用程式圖示： /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>

將游標放在​ Page ​專案上並選取​ Container > Standard。

將欄數設定為​ 2，讓連結編輯器和連結彼此相鄰。

如需元素配置的資訊，請參閱本區段。

套用​ dottedFilter

此樣式已在先前選取的​ Single-page Web application ​範本中參照。

將游標放在上一個階段建立的容器上，並透過​ Advanced controls ​功能表插入連結編輯器。

在自動開啟的儲存視窗中，選取​ Variables ​選項，然後按一下​ Edit variables ​連結並建立用於篩選資料的XML變數。

修改標籤。

它將顯示在總覽中的​ Filter ​欄位旁。

選擇運運算元表格作為應用程式綱要。

將游標放在清單元素上，並透過​ Data > Filter ​索引標籤建立篩選器：

• 運算式： '建立者'連結的外部索引鍵
• 運運算元： ​等於
• 值： ​變數（變數）
• 考慮條件： '$(var2/@id)'！="

將游標放在容器上，並透過​ Static elements ​功能表插入​ Link。

修改標籤。

選取 Refresh data in a list。

新增先前建立的清單。

在​ Image ​欄位上新增重新整理圖示： /xtk/img/refresh.png。

使用排序順序箭頭，重新組織Web應用程式的各種元素，如下所示。