使用案例:建立概觀頁面 use-cases-creating-overviews
在下列範例中,我們將建立概觀型別的Web應用程式,以顯示資料庫中的所有網頁應用程式。 設定下列元素:
- 資料夾上的篩選器(請參閱 在資料夾中新增篩選器),
- 用於建立新Web應用程式的按鈕(請參閱 新增按鈕以設定新的Web應用程式),
- 清單中每個專案的詳細資訊顯示(請參閱 新增詳細資料至清單),
- 每個連結編輯工具各一個篩選器(請參閱 使用連結編輯器建立篩選器),
- 重新整理連結(請參閱 建立重新整理連結)。
建立單頁Web應用程式 creating-a-single-page-web-application
-
建立單一 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應用程式清單。
在資料夾中新增篩選器 adding-a-filter-on-a-folder
在概觀中,您可以選擇根據資料在Adobe Campaign樹狀結構中的位置來存取資料。 這是資料夾上的篩選器。 套用下列程式以將其新增至您的概觀。
-
將游標放在 Page 節點,並新增 Select folder 元素(Advanced controls > Select folder)。
-
在 Storage 視窗隨即出現,請按一下 Edit variables 連結。
-
變更變數標籤以符合您的需求。
-
使用變更變數名稱 資料夾 值。
note note NOTE 變數的名稱必須符合連結至資料夾(在結構描述中定義)的元素名稱,即 資料夾 在此案例中。 參照表格時,必須重複使用此名稱。 -
套用 XML 輸入變數。
-
選取 Refresh page 互動。
-
將游標放在清單上,並放在 Advanced 標籤中,參照之前在中建立的變數 Folder filter XPath 清單的索引標籤。 您必須使用資料夾連結涉及的元素名稱,即 資料夾.
note note NOTE 在此階段,網頁應用程式不在它的應用程式內容中,因此無法在資料夾上測試篩選器。
新增按鈕以設定新的Web應用程式 adding-a-button-to-configure-a-new-web-application
-
將游標放在 Page 元素並新增連結(Static elements > Link)。
-
修改連結標籤,因為該標籤會出現在概覽的按鈕上。
在我們的範例中,標籤為 新增.
-
在URL欄位中插入下列URL: xtk://open/?schema=nms:webApp&form=nms:newWebApp.
note note NOTE nms:webApp 與Web應用程式結構描述一致。 nms:newWebApp 與新的Web應用程式建立精靈一致。 -
選擇在相同視窗中顯示URL。
-
在影像欄位中新增Web應用程式圖示: /nms/img/webApp.png.
此圖示會出現在 New 按鈕。
-
輸入 按鈕 在 Style 欄位。
此樣式參照於 Single-page Web application 先前選取的範本。
新增詳細資料至清單 adding-detail-to-a-list
當您在總覽中設定清單時,您可以選擇顯示清單上每個專案的額外詳細資訊。
-
將游標放在先前建立的清單元素上。
-
在 General 索引標籤中,選取 Columns and additional detail 顯示模式。
-
在 Data 標籤,新增 Primary key , Internal name 和 Description 欄並選取 Hidden field 選項。
如此一來,此資訊只會顯示在每個專案的詳細資訊中。
-
在 Additional detail 索引標籤中,新增下列程式碼:
code language-none <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>
篩選和更新清單 filtering-and-updating-the-list
在本節中,您將建立一個篩選器,以顯示特定運運算元所建立之Web應用程式的概觀。 此篩選器是使用連結編輯器建立的。 選取運運算元後,請重新整理清單以套用您的篩選器;這需要建立重新整理連結。
這兩個元素將分組到相同的容器中,以便在概述中以圖形方式分組。
-
將游標放在 Page 元素並選取 Container > Standard.
-
將欄數設定為 2,讓連結編輯器和連結彼此相鄰。
有關元素配置的資訊,請參閱 本節.
-
套用 點狀濾鏡.
此樣式參照於 Single-page Web application 先前選取的範本。
使用連結編輯器建立篩選器 creating-a-filter-using-a-link-editor
-
將游標放在上一個階段建立的容器上,並透過插入連結編輯器 Advanced controls 功能表。
-
在自動開啟的儲存視窗中,選取 Variables 選項,然後按一下 Edit variables 連結並建立XML變數以篩選資料。
-
修改標籤。
它會顯示在 Filter 欄位。
-
選擇運運算元表格作為應用程式綱要。
-
將游標放在清單元素上,並透過以下方式建立篩選器: Data > Filter 標籤:
- 運算式: '建立者'連結的外部索引鍵
- 運運算元: 等於
- 值: 變數(變數)
- 出現以下情況時納入考量: '$(var2/@id)'!="
建立重新整理連結 creating-a-refresh-link
-
將游標放在容器上並插入 Link 透過 Static elements 功能表。
-
修改標籤。
-
選取 Refresh data in a list。
-
新增先前建立的清單。
-
在頁面上新增重新整理圖示 Image 欄位: /xtk/img/refresh.png.
-
使用排序順序箭頭,重新組織Web應用程式的各種元素,如下所示。
Web應用程式現在已設定完畢。 您可以按一下 Preview 標籤以預覽。