使用案例:建立概述頁

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

建立單頁Web應用程式

  1. 建立單個 Page Web應用程式並禁用出站過渡和到下一頁的過渡。

  2. 更改頁面標題。

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

  3. 在Web應用程式屬性中,通過選擇 Single-page Web application 的下界。

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

  5. Data 頁籤,選擇 Web applicationsLabelCreation dateType of application 輸出列。

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

  7. 關閉頁面的配置窗口,然後按一下 Preview

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

在資料夾上添加篩選器

在概覽中,您可以根據資料在Adobe Campaign樹中的位置來選擇訪問資料。 這是資料夾上的篩選器。 應用以下流程將其添加到您的概述中。

  1. 將游標置於 Page 節點,並添加 Select folder 元素(E)Advanced controls > Select folder)。

  2. Storage 窗口,按一下 Edit variables 的子菜單。

  3. 更改變數標籤以滿足您的需要。

  4. 使用 資料夾 值。

    注意

    變數的名稱必須與連結到資料夾(在架構中定義)的元素的名稱匹配,即 資料夾 在這個例子中。 引用表時必須重新使用此名稱。

  5. 應用 XML 鍵入到變數。

  6. 選擇 Refresh page 交互。

  7. 將游標置於清單中, Advanced 頁籤,引用先前在 Folder filter XPath 的子菜單。 必須使用資料夾連結所關注元素的名稱,即 資料夾

    注意

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

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

  1. 將游標置於 Page 元素並添加連結(Static elements > Link)。

  2. 修改連結標籤,因為它將出現在概覽的按鈕上。

    在本例中,標籤是 新建

  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 nameDescription 列,然後選擇 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. 應用 點式篩選器

    此樣式在 Single-page Web application 模板。

  1. 將游標置於在上一階段建立的容器上,並通過 Advanced controls 的子菜單。

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

  3. 修改標籤。

    它將出現在 Filter 的子菜單。

  4. 選擇運算子表作為應用程式架構。

  5. 將游標置於清單元素上,並通過 Data > Filter 頁籤:

    • 表達式: 「建立者」連結的外鍵
    • 運算子: 等於
    • 值: 變數(變數)
    • 在下列情況下,將考慮: '$(var2/@id)'!="

注意

Web應用程式用戶必須是具有相應Adobe Campaign權限的已識別操作員才能訪問資訊。 此類型的配置對匿名Web應用程式不起作用。

  1. 將游標置於容器上並插入 Link 通過 Static elements 的子菜單。

  2. 修改標籤。

  3. 選取 Refresh data in a list

  4. 添加以前建立的清單。

  5. Image 欄位: /xtk/img/refresh.png

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

現在已配置Web應用程式。 您可以按一下 Preview 按鈕。

本頁內容