使用案例:建立概述頁面

在以下示例中,我們將建立概述類型的Web應用程式,以顯示資料庫中的所有Web應用程式。 設定下列元素:

建立單頁Web應用程式

  1. 建立單一​Page Web應用程式,並停用出站轉變和轉變至下一頁。

  2. 變更頁面標題。

    此標題將出現在概述標題和Web應用程式概述中。

  3. 在Web應用程式屬性中,通過選擇​Single-page Web application​模板來修改應用程式的呈現。

  4. 開啟Web應用程式的​Page​活動並開啟清單(Static element > List)。

  5. 在清單的​Data​標籤中,選擇​Web applications​文檔類型以及​LabelCreation date​和​Type of application​輸出列。

  6. 在​Filter​子標籤中,建立以下篩選器,如下所示,以便僅顯示Web應用程式並從您的視圖中排除模板。

  7. 關閉頁面的設定視窗,然後按一下​Preview

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

在資料夾上新增篩選器

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

  1. 將游標放在Web應用程式的​Page​節點上,並添加​Select folder​元素(Advanced controls > Select folder)。

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

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

  4. 使用​folder​值變更變數名稱。

    注意

    變數的名稱必須符合連結至資料夾的元素名稱(在架構中定義),即​資料夾。 引用表時,必須重新使用此名稱。

  5. 將​XML​類型套用至變數。

  6. 選擇​Refresh page​交互。

  7. 將游標放在清單上,在​Advanced​標籤中,引用先前在清單的​Folder filter XPath​標籤中建立的變數。 您必須使用資料夾連結所關注元素的名稱,即​資料夾

    注意

    在此階段,Web應用程式不在其應用程式上下文中,因此無法在資料夾上測試篩選器。

添加按鈕以配置新的Web應用程式

  1. 將游標放在​Page​元素上並新增連結(Static elements > Link)。

  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

    此表徵圖將顯示在​New​按鈕上。

  6. 在​Style​欄位中輸入​按鈕

    此樣式在先前選擇的​Single-page Web application​模板中引用。

將詳細資訊添加到清單

當您在概覽中設定清單時,可以選擇顯示清單上每個項目的其他詳細資訊。

  1. 將游標置於先前建立的清單元素上。

  2. 在​General​標籤中,從下拉清單中選擇​Columns and additional detail​顯示模式。

  3. 在​Data​標籤中,新增​Primary keyInternal name​和​Description​欄,並為每個欄選取​Hidden field​選項。

    這樣,此資訊只會顯示在每個項目的詳細資訊中。

  4. 在​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應用程式的概觀。 此篩選器是使用連結編輯器建立。 選取運算子後,重新整理清單以套用篩選器;這需要建立重新整理連結。

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

  1. 將游標放在​Page​元素上,然後選取​Container > Standard

  2. 將欄數設為​2,使連結編輯器和連結彼此相鄰。

    有關元素佈局的資訊,請參閱此部分

  3. 套用​dottedFilter

    此樣式在先前選擇的​Single-page Web applicatio n模板中引用。

  1. 將游標置於上一階段建立的容器上,並透過​Advanced controls​功能表插入連結編輯器。

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

  3. 修改標籤。

    它會出現在概述的​Filter​欄位旁。

  4. 選擇運算子表作為應用程式方案。

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

    • 運算式: 「建立者」連結的外鍵
    • 運算子: 等於
    • 值: 變數(變數)
    • 考量if: '$(var2/@id)'!="

注意

Web應用程式用戶必須是已標識的操作員,具有訪問資訊的適當Adobe Campaign權限。 此類型的配置對匿名Web應用程式無效。

  1. 將游標放在容器上,並通過​Static elements​菜單插入​Link

  2. 修改標籤。

  3. 選取 Refresh data in a list

  4. 新增先前建立的清單。

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

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

現在已配置Web應用程式。 您可以按一下​Preview​標籤來預覽。

本頁內容