自定义网站控制台(经典UI)

将自定义列添加到网站(siteadmin)控制台

“网站管理”控制台可以扩展为显示自定义列。 该控制台基于JSON对象构建,可通过创建实现ListInfoProvider接口的OSGI服务来扩展该对象。 此类服务将修改发送到客户端的JSON对象以构建控制台。

此分步教程介绍如何通过实现ListInfoProvider接口在网站管理控制台中显示新列。 它包括以下步骤:

  1. 创建OSGI服 务并将包含它的捆绑包部署到AEM服务器。
  2. (可选)通过发出JSON调用来请求用于构建控制台的JSON对象,来测试新服务
  3. 通过扩展存 储库中控制台的节点结构来显示新列。
注意

本教程还可用于扩展以下管理控制台:

  • 数字资产控制台
  • 社区控制台

创建OSGI服务

ListInfoProvider接口定义两种方法:

  • updateListGlobalInfo,更新列表的全局属性,
  • updateListItemInfo,更新单个列表项。

这两种方法的参数有:

  • request,关联的Sling HTTP请求对象,
  • info,要更新的JSON对象,它分别是全局列表或当前列表项,
  • resource,Sling资源。

以下实施示例:

  • 为每个项目添加​星号​属性,如果页面名称开始​e,则该属性为true,否则为false

  • 添加​steredCount​属性,该属性是列表的全局属性,包含标记列表项的数量。

要创建OSGI服务,请执行以下操作:

  1. 在CRXDE Lite中,创建包
  2. 添加以下示例代码。
  3. 构建捆绑包。

新服务已启动并正在运行。

package com.test;

import com.day.cq.commons.ListInfoProvider;
import com.day.cq.i18n.I18n;
import com.day.cq.wcm.api.Page;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;

@Component(metatype = false)
@Service(value = ListInfoProvider.class)
public class StarredListInfoProvider implements ListInfoProvider {

    private int count = 0;

    public void updateListGlobalInfo(SlingHttpServletRequest request, JSONObject info, Resource resource) throws JSONException {
        info.put("starredCount", count);
        count = 0; // reset for next execution
    }

    public void updateListItemInfo(SlingHttpServletRequest request, JSONObject info, Resource resource) throws JSONException {
        Page page = resource.adaptTo(Page.class);
        if (page != null) {
            // Consider starred if page name starts with 'e'
            boolean starred = page.getName().startsWith("e");
            if (starred) {
                count++;
            }
            I18n i18n = new I18n(request);
            info.put("starred", starred ? i18n.get("Yes") : i18n.get("No"));
        }
    }

}
注意
  • 您的实施应根据提供的请求和/或资源决定是否应将信息添加到JSON对象。
  • 如果ListInfoProvider实现定义了响应对象中已存在的属性,则其值将被您提供的属性覆盖。

您可以使用服务排名管理多个ListInfoProvider实现的执行顺序。

测试新服务

打开网站管理控制台并浏览您的站点时,浏览器将发出ajax调用,以获取用于构建控制台的JSON对象。 例如,当您浏览到/content/geometrixx文件夹时,以下请求将发送到AEM服务器以构建控制台:

https://localhost:4502/content/geometrixx.pages.json?start=0&limit=30&predicate=siteadmin

确保在部署包含新服务的包后,新服务正在运行:

  1. 将您的浏览器指向以下URL:
    https://localhost:4502/content/geometrixx.pages.json?start=0&limit=30&predicate=siteadmin

  2. 响应应按如下方式显示新属性:

screen_shot_2012-02-13at163046

显示新列

最后一步是通过覆盖/libs/wcm/core/content/siteadmin来调整网站管理控制台的节点结构以显示所有Geometrixx页面的新属性。 按如下方式继续:

  1. 在CRXDE Lite中,创建具有类型sling:Folder的节点的节点结构/apps/wcm/core/content以反映结构/libs/wcm/core/content

  2. 复制节点/libs/wcm/core/content/siteadmin并将其粘贴到/apps/wcm/core/content下。

  3. 将节点/apps/wcm/core/content/siteadmin/grid/assets复制到/apps/wcm/core/content/siteadmin/grid/geometrixx并更改其属性:

    • 删除​pageText

    • 将​pathRegex​设置为/content/geometrixx(/.*?lang=zh-Hans)?
      这将使所有geometrixx网站的网格配置处于活动状态。

    • 将​storeProxySuffix​设置为.pages.json

    • 编辑​storeReaderFields​多值属性并添加starred值。

    • 要激活MSM功能,请将以下MSM参数添加到多字符串属性​storeReaderFields​中:

      • msm:isSource
      • msm:isInBlueprint
      • msm:isLiveCopy
  4. /apps/wcm/core/content/siteadmin/grid/geometrixx/columns下面添加一个starred节点(类型为​nt:unstructured),其属性如下:

    • dataIndex: starred 字符串类型

    • header: Starred 字符串类型

    • xtype: gridcolumn 字符串类型

  5. (可选)删除您不希望显示在/apps/wcm/core/content/siteadmin/grid/geometrixx/columns的列

  6. /siteadmin 是虚路径,默认情况下指 /libs/wcm/core/content/siteadmin向要将其重定向到/apps/wcm/core/content/siteadmin上的siteadmin版本,请定义属性sling:vanityOrder,使其值高于在/libs/wcm/core/content/siteadmin上定义的值。 默认值为300,因此任何较高的值都适合。

  7. 转到“网站管理”控制台并导航到Geometrixx站点:
    https://localhost:4502/siteadmin#/content/geometrixx

  8. 名为​Stared​的新列可用,按如下方式显示自定义信息:

screen_shot_2012-02-14at104602

注意

如果多个网格配置与​pathRegex​属性定义的请求路径匹配,将使用第一个网格配置,而不是最具体的网格配置,这意味着配置的顺序很重要。

示例包

本教程的结果可在包共享上的自定义网站管理控制台包中找到。

On this page

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