使用 AEM 可以管理多种不同类型的内容(如页面、资产)。AEM 功能板提供一种简单易用的自定义方式来定义主要显示综合数据的页面。
AEM 功能板是基于每位用户创建的,因此用户只能访问他们自己的功能板。
但是, 功能板模板 可用于共享常用配置和功能板布局。
要创建新的功能板,可按照以下步骤进行操作:
建议您创建多个功能板,以便在不同的视图中快速查看与内容有关的信息。为了帮助您创建新功能板,AEM 提供了一种克隆功能,可用于复制现有的功能板。要克隆功能板,请按照以下步骤执行操作:
在工具区域中,单击配置控制台。
在树中,单击功能板。
单击要克隆的功能板。
单击克隆。
键入新功能板的名称。
在工具区域中,单击配置控制台。
在树中,单击功能板。
单击要删除的功能板。
单击删除。
单击“是”以确认。
功能板组件只是常规组件 AEM组件. 本节介绍随 AEM 一起推出的报表组件。
AEM随附一组组件,这些组件可渲染您的 SiteCatalyst 数据。 这些组件在功能板区域下方的 Sidekick 中列出。
每个报表组件提供至少三个选项卡:
基本:包含主配置。
报表:包含每个组件的特定配置。
样式:包含样式配置,如图表大小和边距。
报表组件会初始化为默认配置,这有助于您快速设置功能板。
基本选项卡提供对以下配置条目的访问权:
标题 功能板上显示的标题。
请求类型 请求数据的方式。
SiteCatalyst配置(可选) 要用于连接到SiteCatalyst的配置。 如果未提供,则认为该配置是在功能板页面上进行配置的(通过页面属性)。
报表包ID(可选) 要用于生成图形的SiteCatalyst报表包。
为了显示网站分析,您需要定义想要获取的数据的日期范围。报表选项卡提供两个用于定义该范围的字段。
若设置一个较大的日期范围,会降低功能板的响应能力。
日期自 从中获取数据的绝对或相对日期。
日期至 获取数据的绝对或相对日期。
每个组件还定义特定设置。
日期粒度 X轴的时间单位(例如,日、小时)。
量度 要显示的事件列表。
元素 划分图表中量度数据的元素列表。
元素 用于划分图表中量度数据的元素。
量度 要显示的事件。
否. 排名最前的项目 报表显示的项目数。
量度 要显示的事件。
元素 用于划分图表中量度数据的元素。
该组件显示一个图形,图中又根据以下配置显示网站中访问量较大的区域。
否. 排名最前的项目 报表中显示的区域数。
日期粒度 X轴的时间单位(例如,日、小时)。
量度 要显示的事件。
元素 用于划分图表中量度数据的元素。
功能板是普通页面 (cq:Page
),因此任何组件都可用于构建功能板。
有一个默认的组件组 Dashboard
包含默认在模板中启用的analytics报表组件。
模板定义新功能板的默认内容。您可以使用多个模板来创建不同类型的功能板。
功能板模板的创建方式与其他页面模板类似,只是它们存储在 /libs/cq/dashboards/templates/
. 请参阅 创建内容页面模板 中。
功能板模板可在用户之间共享。
开发功能板组件包括创建一个常用 AEM 组件。本节介绍用于显示头 10 位参与者的组件示例。
顶级创作组件存储在位于的存储库中 /apps/geometrixx-outdoors/components/reporting
和由:
一个 jsp
文件,它可读取数据并定义 html
占位符。
一个客户端库,其中包含一个可对数据进行获取或排序,然后填充 js
占位符的 html
文件。
以下Javascript文件在 geout.reporting.topauthors
客户端库 作为组件本身的子项。
的 QueryBuilder 用于查询要读取的存储库 cq:AuditEvent
节点。 查询结果是一个可从其中提取作者投稿的 JSON 对象。
$.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.jsp
和 clientlib
.
<%@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>