開發批量編輯器

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

批量編輯器查詢參數

使用大量編輯器時,有數個查詢參數可新增至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時,會顯示欄位(預設值)。

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

注意

每個參數都可以有長名和短名。 例如,搜索根路徑的長名稱為rootPath,短名稱為rp。 如果未定義長名稱,則會從請求中讀取短名稱。

參數

(長名稱/短名稱)

類型
說明
rootPath / rp
字串 搜尋根路徑
queryParams / qp
字串 搜尋查詢
contentMode / cm
布林值 (Boolean) 若為true,則內容模式為啟用
colsValue / cv
String[] 搜索的屬性(選中的colsSelection中的值顯示為複選框)
extraCols / ec
字串[] 搜尋的額外屬性(以逗號分隔的文字欄位顯示)
initialSearch / is
布林值 (Boolean) 若為true,則會在頁面載入時執行查詢
colsSelection / cs
字串[] 搜索的屬性選擇(顯示為複選框)
showGridOnly / sgo
布林值 (Boolean) 若為true,則僅顯示網格,而不顯示搜索面板
searchPanelCollaped / spc 布林值 (Boolean) 為true時,載入時會收合搜尋面板
hideRootPath / hrp 布林值 (Boolean) 若為true,則隱藏根路徑欄位
hideQueryParams / hqp 布林值 (Boolean) 若為true,則隱藏查詢欄位
hideContentMode / hcm 布林值 (Boolean) 若為true,則會隱藏內容模式欄位
hideColsSelection / hcs 布林值 (Boolean) 若為true,則隱藏「欄選取」欄位
hideExtraCols / hec 布林值 (Boolean) 若為true,則會隱藏額外的欄位
hideSearchButton 布林值 (Boolean) 若為true,則隱藏搜尋按鈕
hideSaveButton / hsavep 布林值 (Boolean) 若為true,則會隱藏「儲存」按鈕
hideExportButton / hexpb 布林值 (Boolean) 若為true,則會隱藏匯出按鈕
hideImportButton / hib 布林值 (Boolean) 若為true,則會隱藏匯入按鈕
hideResultNumber / hrn 布林值 (Boolean) 若為true,則隱藏網格搜索結果編號文本
hideInsertButton / hinsertb 布林值 (Boolean) 為true時,隱藏網格插入按鈕
hideDeleteButton / hdelb 布林值 (Boolean) true時,隱藏網格刪除按鈕
hidePathCol / hpc 布林值 (Boolean) 若為true,則會隱藏格線「path」欄

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

本節概述如何使用大量編輯器,並根據大量編輯器說明現有的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>

批量編輯器配置屬性

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

屬性名稱 定義
rootPath 搜索根路徑
queryParams 搜尋查詢
contentMode 啟用內容模式為true:屬性在jcr:content節點上讀取,而非在搜尋結果節點上讀取
colsValue 搜索的屬性(colsSelection中的選定值顯示為複選框)
extraCols 搜尋的額外屬性(以文字欄位逗號分隔顯示)
initialSearch 若要在頁面載入上執行查詢,則為True
colsSelection 搜索的屬性選擇(顯示為複選框)
showGridOnly 為True ,只顯示格線而不顯示搜尋面板(請別忘記將initialSearch設為true)
searchPanelCollaped 預設折疊搜索面板為True
hideRootPath 隱藏根路徑欄位
hideQueryParams 隱藏查詢欄位
hideContentMode 隱藏內容模式欄位
hideColsSelection 隱藏協定選擇欄位
hideExtraCols 隱藏額外的cols欄位
hideSearchButton 隱藏搜索按鈕
hideSaveButton 隱藏保存按鈕
hideExportButton 隱藏導出按鈕
hideImportButton 隱藏導入按鈕
hideResultNumber 隱藏網格搜索結果編號文本
hideInsertButton 隱藏網格插入按鈕
hideDeleteButton 隱藏網格刪除按鈕
hidePathCol 隱藏網格「路徑」列
queryURL 查詢Servlet的路徑
exportURL 匯出servlet的路徑
importURL 匯入servlet的路徑
insertedResourceType 插入行時添加到節點的資源類型
saveButton 儲存按鈕Widget設定
searchButton 搜尋按鈕Widget設定
exportButton 匯出按鈕Widget設定
importButton 匯入按鈕Widget設定
searchPanel 搜尋面板Widget設定
網格 格線介面工具集配置
商店 儲存設定
colModel 網格列模型配置
rootPathInput rootPath widget設定
queryParamsInput queryParams widget設定
contentModeInput contentMode widget設定
colsSelectionInput colsSelection widget配置
extraColsInput extraCols widget設定
colsMetadata 欄中繼資料設定。 可能的屬性包括(應用於列的所有單元格):
  • cellStyle:html樣式
  • cellCls:css類
  • readOnly:為true,而無法變更值
  • 核取方塊:true ,將欄的所有儲存格定義為核取方塊(true/false值)
  • forcedPosition:要指定列必須置於網格中的位置的整數值(介於0和列數之間)


列元資料配置

您可以為每欄進行設定:

  • 顯示屬性: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」的好起點。

本頁內容