開發批量編輯器

本節介紹如何開發批量編輯器工具以及如何擴展基於批量編輯器的產品清單元件。

批量編輯器查詢參數

使用批量編輯器時，有幾個查詢參數可以添加到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表格中，而任何編輯都會在​編輯​對話方塊中執行，其中包含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?lang=zh-Hant"
            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?lang=zh-Hant"
            initialSearch="true"
            insertedResourceType="geometrixx/components/productlist/sku"
            queryParams=""
            queryURL="/etc/importers/bulkeditor/query.json?lang=zh-Hant"
            saveURL="/etc/importers/bulkeditor/save?lang=zh-Hant"
            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
}
}

以下範例可在產品清單元件(/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。 如果選定的標題是複選框列的標題，則會啟用這些選項。

在前面的示例中，選擇列只包含複選框作為checkbox="true"。

強迫位置

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

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

查詢Servlet

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

查詢Servlet的工作方式如下：它會接收GQL查詢和要返回的列，計算結果，並將結果作為JSON流發送回批量編輯器。

在「產品清單」元件案例中，發送到Query Servlet的兩個參數如下：

• 查詢："path:/content/geometrixx/tw/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概念的基礎，如果每個儲存格都是節點的屬性，則其運作良好。 但是，如果實現Query Servlet進行繼承計算，則此模型不能作為Query Servlet返回的屬性從另一個節點繼承。

「保存servlet」概念是，修改不直接發佈到每個節點，而是發佈到執行保存作業的一個servlet。 這使此Servlet能夠分析修改並將屬性保存在正確的節點上。

每個更新的屬性都以下列格式發送到servlet:

• 參數名稱：<jcr path>/<property name>

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

• 值：<value>

  例如: 12123

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

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

預設代碼不應像重新實施伺服器本機操作那樣使用（<jcr path>/<property name>上的POST），因此，它只是構建將管理屬性繼承模型的保存Servlet的一個好起點。