開發批量編輯器

本節說明如何開發大量編輯器工具，以及如何擴充以大量編輯器為基礎的產品清單元件。

批量編輯器查詢參數

使用大量編輯器時，有數個查詢參數可新增至URL，以使用特定設定呼叫大量編輯器。 如果您希望批量編輯器始終與特定配置一起使用（例如，在「產品清單」元件中），則需要修改bulkeditor.jsp（位於/libs/wcm/core/components/bulkeditor中）或建立具有特定配置的元件。 使用查詢參數進行的變更不是永久性的。

例如，如果您在瀏覽器的URL中輸入下列內容：

https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true

顯示的批量編輯器沒有​根路徑​欄位，因為hrp=true會隱藏該欄位。 參數hrp=false時，會顯示欄位（預設值）。

以下是批量編輯器查詢參數的清單：

開發基於批量編輯器的元件：產品清單元件

本節概述如何使用大量編輯器，並根據大量編輯器說明現有的Geometrixx元件：產品清單元件。

產品清單元件可讓使用者顯示和編輯資料表。 例如，您可以使用產品清單元件來表示目錄中的產品。 該資訊會以標準HTML表格顯示，而任何編輯都會在​Edit​對話方塊中執行，該對話方塊包含BulkEditor介面工具集。 (此大量編輯器與可從/etc/importers/bulkeditor.html或「工具」功能表存取的編輯器完全相同)。 產品清單元件已針對特定、有限的大量編輯器功能進行設定。 批量編輯器的每個部分（或從批量編輯器派生的元件）都可以配置。

使用批量編輯器，您可以新增、修改、刪除、篩選和匯出列、儲存修改和匯入一組列。 每一行都儲存為「產品清單」元件實例本身下的節點。 每個儲存格都是每個節點的屬性。 這是一種設計選擇，可以輕鬆更改，例如，您可以將節點儲存在儲存庫中的其他位置。 查詢servlet的角色是返回要顯示的節點清單；搜索路徑定義為「產品清單」實例。

產品清單元件的原始碼可在/apps/geometrixx/components/productlist存放庫中取得，且由多個部分組成，如所有AEM元件：

• HTML呈現：渲染在JSP檔案(/apps/geometrixx/components/productlist/productlist.jsp?lang=zh-Hant)中完成。 JSP讀取當前產品清單元件的子節點，並將每個子節點顯示為HTML表的行。
• 編輯對話方塊，您可在此定義批量編輯器配置。 設定對話方塊以符合元件的需求：列在網格或搜索上執行的可用操作和可能操作。 有關所有配置屬性的資訊，請參閱批量編輯器配置屬性。

以下是對話子節點的XML表示：

        <editor
            jcr:primaryType="cq:Widget"
            colsSelection="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
            colsValue="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
            contentMode="false"
            exportURL="/etc/importers/bulkeditor/export.tsv"
            extraCols="Selection"
            hideColsSelection="false"
            hideContentMode="true"
            hideDeleteButton="false"
            hideExportButton="false"
            hideExtraCols="true"
            hideImportButton="false"
            hideInsertButton="false"
            hideMoveButtons="false"
            hidePathCol="true"
            hideRootPath="true"
            hideSaveButton="false"
            hideSearchButton="false"
            importURL="/etc/importers/bulkeditor/import"
            initialSearch="true"
            insertedResourceType="geometrixx/components/productlist/sku"
            queryParams=""
            queryURL="/etc/importers/bulkeditor/query.json"
            saveURL="/etc/importers/bulkeditor/save"
            xtype="bulkeditor">
            <saveButton
                jcr:primaryType="nt:unstructured"
                text="Save modifications"/>
            <searchButton
                jcr:primaryType="nt:unstructured"
                text="Apply filter"/>
            <queryParamsInput
                jcr:primaryType="nt:unstructured"
                fieldDescription="Enter here your filters"
                fieldLabel="Filters"/>
            <searchPanel
                jcr:primaryType="nt:unstructured"
                height="200">
                <defaults
                    jcr:primaryType="nt:unstructured"
                    labelWidth="150"/>
            </searchPanel>
            <grid
                jcr:primaryType="nt:unstructured"
                height="275"/>
            <store jcr:primaryType="nt:unstructured">
                <sortInfo
                    jcr:primaryType="nt:unstructured"
                    direction="ASC"
                    field="CatalogCode"/>
            </store>
            <colModel
                jcr:primaryType="nt:unstructured"
                width="150"/>
            <colsMetadata jcr:primaryType="nt:unstructured">
                <Selection
                    jcr:primaryType="nt:unstructured"
                    checkbox="true"
                    forcedPosition="0"
                    headerText=""/>
                <ProductId
                    jcr:primaryType="nt:unstructured"
                    cellCls="productlist-cell-productid"
                    headerText="Product Id"/>
                <ProductName
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #FFCC99;"
                    headerText="Product Name"/>
                <CatalogCode
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #EDEDED;"
                    headerText="Catalog Code"/>
                <Color jcr:primaryType="nt:unstructured">
                    <editor
                        jcr:primaryType="nt:unstructured"
                        store="[Blue,Red,Yellow]"
                        triggerAction="all"
                        typeAhead="true"
                        xtype="combo"/>
                </Color>
                <SellingSku
                    jcr:primaryType="nt:unstructured"
                    headerText="Sku Id"/>
            </colsMetadata>
        </editor>

批量編輯器配置屬性

批量編輯器的每個部分都可進行配置。 下表列出批量編輯器的所有配置屬性。

列元資料配置

您可以為每欄進行設定：

• 顯示屬性：html樣式、CSS類和只讀

• 核取方塊

• 強迫職位

CSS和唯讀欄

批量編輯器有三列配置：

• 單元格CSS類名(cellCls):新增至已設定欄之每個儲存格的CSS類別名稱。
• 單元格樣式(cellStyle):HTML樣式，會新增至已設定欄的每個儲存格。
• 只讀（只讀）:為已配置列的每個單元格設定只讀。

設定必須定義為下列設定：

"colsMetadata": {
"Column name": {
     "cellStyle": "html style",
     "cellCls": "CSS class",
     "readOnly": true/false
}
}

您可在productlist元件(/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=zh-Hant)中找到下列範例：

            <colsMetadata jcr:primaryType="nt:unstructured">
                <Selection
                    jcr:primaryType="nt:unstructured"
                    checkbox="true"
                    forcedPosition="0"
                    headerText=""/>
                <ProductId
                    jcr:primaryType="nt:unstructured"
                    cellCls="productlist-cell-productid"
                    headerText="Product Id"/>
                <ProductName
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #FFCC99;"
                    headerText="Product Name"/>
                <CatalogCode
                    jcr:primaryType="nt:unstructured"
                    cellStyle="background-color: #EDEDED;"
                    headerText="Catalog Code"/>
                <Color jcr:primaryType="nt:unstructured">
                    <editor
                        jcr:primaryType="nt:unstructured"
                        store="[Blue,Red,Yellow]"
                        triggerAction="all"
                        typeAhead="true"
                        xtype="combo"/>
                </Color>
                <SellingSku
                    jcr:primaryType="nt:unstructured"
                    headerText="Sku Id"/>
            </colsMetadata>

核取方塊

如果核取方塊配置屬性設為true，則列的所有儲存格都會呈現為核取方塊。 核取方塊會傳送​true​至伺服器儲存Servlet，否則會傳送​false。 在標題功能表中，您也可以​選取all​或​選取none。 如果所選標題是複選框列的標題，則啟用這些選項。

在前一個範例中，選取欄僅包含核取方塊，作為核取方塊="true"。

強迫位置

強制位置元資料forcedPosition可讓您指定欄在格線中的位置：0是第一位，<number of columns>-1是最後一位。 會忽略任何其他值。

在前一個範例中，選取欄是forcedPosition="0"的第一欄。

查詢Servlet

預設情況下，可在/libs/wcm/core/components/bulkeditor/json.java處找到查詢Servlet。 您可以設定其他路徑以擷取資料。

查詢Servlet的運作方式如下：它會接收GQL查詢並傳回欄、計算結果，並將結果以JSON資料流的形式傳回至大量編輯器。

在產品清單元件案例中，傳送至查詢servlet的兩個參數如下：

• 查詢："path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
• cols:"Selection,ProductId,ProductName,Color,CatalogCode,SellingSku"

而傳回的JSON資料流如下：

{
  "hits": [{
      "jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
      "ProductId": "21",
      "ProductName": "Cube",
      "Color": "Blue",
      "CatalogCode": "43244",
      "SellingSku": "32131"
    }
  ],
  "results": 1
}

每個點擊都對應一個節點及其屬性，並在格線中顯示為一列。

您可以擴展查詢Servlet以返回複雜的繼承模型或返回儲存在特定邏輯位置的節點。 查詢Servlet可用於執行任何類型的複雜計算。 然後，網格可顯示儲存庫中多個節點的聚合行。 在這種情況下，這些行的修改和保存必須由「保存Servlet」管理。

保存Servlet

在批量編輯器的預設配置中，每行都是一個節點，該節點的路徑儲存在行記錄中。 批量編輯器會透過jcr路徑保留列與節點之間的連結。 當使用者編輯格線時，會建立所有修改的清單。 當使用者按一下​Save​時，會傳送POST查詢至具有更新屬性值的每個路徑。 這是Sling概念的基礎，如果每個儲存格都是節點的屬性，就可正常運作。 但是，如果實現查詢Servlet以進行繼承計算，則此模型不能作為查詢Servlet返回的屬性從另一個節點繼承。

「儲存servlet」概念是修改不會直接張貼至每個節點，而是張貼至執行儲存作業的一個servlet。 這可讓此servlet分析修改並將屬性儲存在正確節點上。

每個更新的屬性都會以下列格式傳送至servlet:

• 參數名稱：<jcr path>/<屬性名稱>

  範例：/content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku

• 值：<value>

  例如: 12123

Servlet需要知道catalogCode屬性的儲存位置。

預設的「儲存Servlet」實作可在/libs/wcm/bulkeditor/save/POST.jsp取得，且用於「產品清單」元件。 它會取用請求中的所有參數（以<jcr path>/<property name>格式），並使用JCR API在節點上寫入屬性。 如果節點不存在（網格插入的行），它也會建立節點。

預設代碼不應如原樣使用，因為它重新實作了伺服器原生功能(<jcr path>/<property name>上的POST)，因此，它只是建立將管理屬性繼承模型的「儲存servlet」的好起點。