控制面板 dashboards

CAUTION
AEM 6.4已結束延伸支援,本檔案不再更新。 如需詳細資訊,請參閱 技術支援期. 尋找支援的版本 此處.

使用AEM時,您可以管理許多不同類型的內容(例如頁面、資產)。 AEM控制面板提供簡單易用且可自訂的方式,來定義可顯示整合資料的頁面。

NOTE
AEM控制面板是根據每個使用者建立,因此使用者只能存取其自己的控制面板。
不過, 控制面板範本 可用來共用通用配置和控制面板配置。

chlimage_1-22

管理控制面板 administering-dashboards

建立控制面板 creating-a-dashboard

若要建立新控制面板,請繼續如下:

  1. 工具 ,按一下 配置控制台.

  2. 在樹中,按兩下 控制面板.

  3. 按一下 新控制面板.

  4. 輸入 標題 (例如我的控制面板)和 名稱.

  5. 按一下​ 建立

複製控制面板 cloning-a-dashboard

您可能想要有多個控制面板,以便從不同檢視快速查看您內容的相關資訊。 為協助您建立新控制面板,AEM提供複製功能,可用來複製現有控制面板。 若要複製控制面板,請繼續如下:

  1. 工具 ,按一下 配置控制台.

  2. 在樹中,按一下 控制面板.

  3. 按一下您要複製的控制面板。

  4. 按一下 原地複製.

  5. 輸入 名稱 新儀表板的。

移除控制面板 removing-a-dashboard

  1. 工具 ,按一下 配置控制台.

  2. 在樹中,按一下 控制面板.

  3. 按一下您要刪除的控制面板。

  4. 按一下​ 移除

  5. 按一下「」確認。

控制面板元件 dashboard-components

概觀 overview

控制面板元件只是一般元件 AEM元件. 本節說明AEM隨附的報表元件。

網站分析報表元件 web-analytics-reporting-components

AEM隨一組元件提供,可呈現 SiteCatalyst 資料。 這些元件會列在Sidekick底下 控制面板 區段。

每個報表元件至少提供三個索引標籤:

  • 基本:包含主要設定。

  • 報告: 包含每個報表的特定設定。

  • 樣式:包含樣式配置,如圖表大小和邊距。

報表元件會以預設設定初始化,協助您快速設定控制面板。

基本配置 basic-configuration

基本 索引標籤提供下列設定項目的存取權:

標題 控制面板上顯示的標題。

請求類型 請求資料的方式。

SiteCatalyst配置(可選) 您要用來連線至SiteCatalyst的設定。 若未提供,則假設設定是在控制面板頁面上設定(透過頁面屬性)。

報表套裝ID(選用) 您要用來產生圖形的SiteCatalyst報表套裝。

報表設定 report-configuration

若要顯示Web統計資料,您必須定義要傳送之資料的日期範圍。 此 報表 索引標籤提供兩個欄位來定義該範圍。

NOTE
設定大的日期範圍可能會降低控制面板的回應速度。

開始日期 擷取資料的絕對或相對日期。

結束日期 資料擷取的絕對或相對日期。

每個元件也定義特定設定。

超時報表 overtime-report

chlimage_1-26

日期粒度 X軸的時間單位(例如日、小時)。

量度 您要顯示的事件清單。

元素 劃分圖表中量度資料的元素清單。

排名清單報表 ranked-list-report

chlimage_1-27

元素 劃分圖表中量度資料的元素。

量度 您要顯示的事件。

否. 排名最前的項目 報表顯示的項目數。

排名報表 ranked-report

chlimage_1-28

量度 您要顯示的事件。

元素 劃分圖表中量度資料的元素。

主要網站區域報表 top-site-section-report

此元件會依據下列組態顯示圖形,顯示網站較常被瀏覽的區段。

chlimage_1-29

否. 排名最前的項目 報表中顯示的區段數。

趨勢報表 trended-report

chlimage_1-30

日期粒度 X軸的時間單位(例如日、小時)。

量度 您要顯示的事件。

元素 劃分圖表中量度資料的元素。

延伸控制面板 extending-dashboard

概觀 overview-1

控制面板是一般頁面( cq:Page),因此,任何元件都可用來組合控制面板。

有一個預設元件組 Dashboard 包含預設在範本上啟用的analytics報表元件。

建立控制面板範本 creating-a-dashboard-template

範本定義新控制面板的預設內容。 您可以使用數個範本來建立不同類型的控制面板。

控制面板範本的建立方式與其他頁面範本相同,只是儲存在 /libs/cq/dashboards/templates/. 請參閱 建立內容頁面範本 區段。

NOTE
控制面板範本會在使用者之間共用。

開發控制面板元件 developing-a-dashboard-component

開發控制面板元件包含建立一般的AEM元件。 本節說明顯示前10名貢獻者的元件範例。

chlimage_1-31

排名在前的製作元件會儲存在存放庫的 /apps/geometrixx-outdoors/components/reporting 和由:

  1. a jsp 讀取jcr資料並定義 html 佔位符。

  2. 包含 js 擷取並排序資料的檔案,然後填入 html 佔位符。

chlimage_1-32

下列Javascript檔案定義於 geout.reporting.topauthors 用戶端程式庫 作為元件本身的子項。

QueryBuilder 用於查詢要讀取的儲存庫 cq:AuditEvent 節點。 查詢結果是JSON物件,可從中擷取作者貢獻。

top_authors.js top-authors-js

$.ajax({
  url: "/bin/querybuilder.json",
  cache: false,
  data: {
       "orderby": "cq:time",
       "orderby.sort": "desc",
       "p.hits": "full",
       "p.limit": 100,
       "path": "/var/audit/com.day.cq.wcm.core.page/",
       "type": "cq:AuditEvent"
   },
  dataType: "json"
}).done(function( res ) {
    var authors = {};
    // from JSON to Object
    for(var r in res.hits) {
        var userId = res.hits[r].userId;
        if(userId == undefined) {
            continue;
        }
        var auth = authors[userId] || {userId : userId};
        auth.contrib = (auth.contrib || 0) +1;

        authors[userId] = auth;
    }

    // order by contribution
    var orderedByContrib = [];
    for(var a in authors) {
        orderedByContrib.push(authors[a]);
    }
    orderedByContrib.sort(function(a,b){return b.contrib - a.contrib});

    // produce the list
    for (var i=0, tot=orderedByContrib.length; i < tot; i++) {
        var current = orderedByContrib[i];
        $("<div> #" + (i + 1) +" "+ current.userId + " (" + current.contrib +" contrib.)</div>").appendTo("#authors-list");

    }
});

JSP 包括 global.jspclientlib.

top_authors.jsp top-authors-jsp

<%@page session="false" contentType="text/html; charset=utf-8" %><%
%><%
%><%@include file="/libs/foundation/global.jsp" %><%
%>
<ui:includeClientLib categories="geout.reporting.topauthors" />
<%
String reportletTitle = properties.get("title", "Top Authors");
%>
<html>
     <h3><%=xssAPI.encodeForHTML(reportletTitle) %></h3>
     <div id="authors-list"></div>
</html>
recommendation-more-help
5ce3024a-cbea-458b-8b2f-f9b8dda516e8