[也適用於v8]{class="badge positive" title="亦適用於Campaign v8"}

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

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

建立單頁Web應用程式 creating-a-single-page-web-application

  1. 建立單一​ Page Web應用程式,並停用出站轉換及下一頁的轉換。

  2. 變更頁面標題。

    此標題將顯示在概覽標題和Web應用程式概覽中。

  3. 在Web應用程式屬性中,選取​ Single-page Web application ​範本,修改應用程式的轉譯。

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

  5. 在您的清單的​ Data ​索引標籤中,選取​ Web applications ​檔案的型別以及​ LabelCreation date ​和​ Type of application ​輸出欄。

  6. 在​ Filter ​子標籤中,建立下列篩選器,如下所示,以便只顯示Web應用程式並從檢視中排除範本。

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

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

在資料夾中新增篩選器 adding-a-filter-on-a-folder

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

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

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

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

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

    note note
    NOTE
    變數的名稱必須符合連結至資料夾(在結構描述中定義)的元素名稱,在此例中是​ 資料夾。 參照表格時,必須重複使用此名稱。
  5. 將​ XML ​型別套用至變數。

  6. 選取​ Refresh page ​互動。

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

    note note
    NOTE
    在此階段,網頁應用程式不在它的應用程式內容中,因此無法在資料夾上測試篩選器。

新增按鈕以設定新的Web應用程式 adding-a-button-to-configure-a-new-web-application

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

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

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

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

    note note
    NOTE
    nms:webApp ​與Web應用程式結構描述一致。
    nms:newWebApp ​與新的Web應用程式建立精靈一致。
  4. 選擇在相同視窗中顯示URL。

  5. 在影像欄位中新增網頁應用程式圖示: /nms/img/webApp.png

    此圖示將出現在​ New ​按鈕上。

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

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

新增詳細資料至清單 adding-detail-to-a-list

當您在總覽中設定清單時,您可以選擇顯示清單上每個專案的額外詳細資訊。

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

  2. 在​ General ​索引標籤中,選取下拉式清單中的​ Columns and additional detail ​顯示模式。

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

    如此一來,此資訊只會顯示在每個專案的詳細資訊中。

  4. 在​ 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>
    
NOTE
JavaScript程式庫需要5分鐘的時間在伺服器上重新整理。 您可以重新啟動伺服器以避免等候此延遲。

篩選和更新清單 filtering-and-updating-the-list

在本節中,您將建立一個篩選器,以顯示特定運運算元所建立之Web應用程式的概觀。 此篩選器是使用連結編輯器建立的。 選取運運算元後,請重新整理清單以套用您的篩選器;這需要建立重新整理連結。

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

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

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

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

  3. 套用​ dottedFilter

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

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

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

  3. 修改標籤。

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

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

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

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

CAUTION
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」標籤來預覽。

recommendation-more-help
601d79c3-e613-4db3-889a-ae959cd9e3e1