自訂網站主控台(Classic UI)

新增自訂欄至網站(網站管理)主控台

「網站管理」主控台可以延伸,以顯示自訂欄。 主控台是以JSON物件為基礎建立的,可透過建立實作ListInfoProvider介面的OSGI服務來擴充。 此類服務會修改傳送至用戶端的JSON物件,以建立主控台。

本逐步教學課程說明如何透過實作ListInfoProvider介面,在「網站管理」主控台中顯示新欄。 它包含下列步驟:

  1. 建立OSGI服 務並將包含它的套件部署至AEM伺服器。
  2. (可選)發出JSON呼叫來請求用來建立主控台的JSON物件,以測試新服務
  3. 通過擴展存 儲庫中控制台的節點結構來顯示新列。
注意

本教學課程也可用來擴充下列管理控制台:

  • 數位資產主控台
  • 社群主控台

建立OSGI服務

ListInfoProvider介面定義了兩種方法:

  • updateListGlobalInfo,以更新清單的全局屬性,
  • updateListItemInfo,以更新單一清單項目。

兩種方法的引數為:

  • request,關聯的Sling HTTP請求物件,
  • info,則JSON物件要更新,這分別是全域清單或目前清單項目,
  • resource, a Sling resource.

實作範例如下:

  • 新增每個項目的​starized​屬性,如果頁面名稱以​e​開頭,則為falsetrue

  • 新增​stargedCount​屬性,此屬性是清單的全域屬性,並包含星號清單項目的數目。

要建立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伺服器以建立主控台:

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

要確保新服務在部署包含該服務的包後正在運行:

  1. 將您的瀏覽器指向下列URL:

    http://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-Hant)?

      這會讓網格設定在所有幾何網站上都啟用。

    • 將​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上的網站管理員版本,請定義屬性sling:vanityOrder,使其值高於/libs/wcm/core/content/siteadmin上定義的值。 預設值為300,因此任何較高的值都適用。

  7. 前往「網站管理」主控台,並導覽至Geometrixx網站:

    http://localhost:4502/siteadmin#/content/geometrixx.

  8. 有名為​Stardered​的新欄可供使用,顯示自訂資訊如下:

screen_shot_2012-02-14at104602

注意

如果多個網格配置與​pathRegex​屬性所定義的請求路徑匹配,則會使用第一個網格配置,而不是最具體的網格配置,這表示配置的順序很重要。

示例軟體包

本教學課程的結果可在「套件共用」上的「自訂網站管理控制台](http://localhost:4502/crx/packageshare/index.html/content/marketplace/marketplaceProxy.html?packagePath=/content/companies/public/adobe/packages/helper/customizing-siteadmin)」套件中取得。[

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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