使用案例:建立概述頁面

在下例中,我們將建立概述類型的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​值變更變數名稱。

    注意

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

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

  6. 選擇​Refresh page​交互。

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

    注意

    在此階段,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​欄位中輸入​button

    此樣式在先前選擇的​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?lang=zh-Hant"/><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?lang=zh-Hant"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&+++++++++_schema=nms%3AwebApp&_selection=%3C%25%3DwebApp.%40id%25%3E+++++++++&__sessiontoken=%3C%25%3Ddocument.controller.getSessionToken%28&lang=zh-Hant)%>">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. 選擇Operator表作為應用程式方案。

  5. 將游標置於清單元素上,並透過​Data > Filter​標籤建立篩選:

    • 表達式: 'Created by'連結的外鍵
    • 運算元: 等於
    • 值:變 數(變數)
    • 考量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​標籤來預覽。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now