開發大量編輯器 developing-the-bulk-editor

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

大量編輯器查詢引數 bulk-editor-query-parameters

使用「大量編輯器」時,您可以將多個查詢引數新增到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,會顯示欄位(預設值)。

以下是「大量編輯器」查詢引數的清單:

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

參數

(長名稱/短名稱)

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

開發以大量編輯器為基礎的元件:產品清單元件 developing-a-bulk-editor-based-component-the-product-list-component

本節提供如何使用大量編輯器的概觀,並說明以大量編輯器為基礎的現有Geometrixx元件:產品清單元件。

產品清單元件可讓使用者顯示和編輯資料表。 例如,您可以使用產品清單元件來代表目錄中的產品。 此資訊會以標準HTML表格顯示,任何編輯作業都會在 編輯 對話方塊,其中包含BulkEditor Widget。 (此大量編輯器與在/etc/importers/bulkeditor.html或透過「工具」功能表存取的編輯器相同)。 產品清單元件已針對特定的有限大量編輯器功能進行設定。 可以設定批次編輯器的每個部分(或衍生自批次編輯器的元件)。

使用大量編輯器,您可以新增、修改、刪除、篩選和匯出列、儲存修改和匯入一組列。 每一列都會儲存為「產品清單」元件實體本身的節點。 每個儲存格都是每個節點的屬性。 這是設計選擇,很容易變更,例如,您可以將節點儲存在存放庫中的其他位置。 查詢servlet的角色是傳回要顯示的節點清單;搜尋路徑定義為產品清單執行個體。

產品清單元件的原始程式碼可在存放庫/apps/geometrixx/components/productlist中取得,並且由幾個部分組成,例如所有Adobe Experience Manager (AEM)元件:

  • HTML呈現:呈現會在JSP檔案(https://experienceleague.adobe.com/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>

大量編輯器組態屬性 bulk-editor-configuration-properties

可設定大量編輯器的每個部分。 下表列出大量編輯器的所有組態屬性。

屬性名稱
定義
rootPath
搜尋根路徑
queryParams
搜尋查詢
contentmode
True表示啟用內容模式:在jcr:content節點上讀取屬性,而不是在搜尋結果節點上讀取屬性
colsvalue
搜尋的屬性(colsSelection中核取的值會顯示為核取方塊)
額外欄位
額外的搜尋屬性(以逗號分隔的文字欄位顯示)
initialSearch
若為True,則會在頁面載入時執行查詢
欄選取
搜尋的屬性選取範圍(顯示為核取方塊)
showGridOnly
True表示只顯示格線而不顯示搜尋面板(別忘了將initialSearch設為true)
searchPanelCollapsed
True,依預設會收合搜尋面板
隱藏根路徑
隱藏根路徑欄位
隱藏查詢引數
隱藏查詢欄位
隱藏內容模式
隱藏內容模式欄位
hideColsSelection
隱藏欄位選取欄位
hideExtraCols
隱藏額外欄位
hideSearchButton
隱藏搜尋按鈕
hideSaveButton
隱藏儲存按鈕
hideExportButton
隱藏匯出按鈕
hideImportButton
隱藏匯入按鈕
hideResultNumber
隱藏格線搜尋結果編號文字
隱藏插入按鈕
隱藏格線插入按鈕
hideDeleteButton
隱藏格線刪除按鈕
hidePathCol
隱藏格線「路徑」欄
queryurl
查詢servlet的路徑
exportURL
匯出servlet的路徑
importURL
匯入servlet的路徑
insertedResourceType
插入列時新增到節點的資源型別
saveButton
儲存按鈕Widget設定
searchButton
搜尋按鈕Widget設定
exportButton
匯出按鈕Widget設定
importButton
匯入按鈕Widget設定
searchPanel
搜尋面板Widget設定
格線
格線Widget設定
儲存
存放區設定
colModel
格線欄模型設定
根路徑輸入
rootPath widget config
queryParamsInput
queryParams Widget設定
contentModeInput
contentMode Widget設定
colsselectionInput
colsSelection widget config
extraColsInput
extraCols Widget設定
colsMetadata

欄中繼資料設定。 可能的屬性包括(套用至欄的所有儲存格):

  • cellStyle: html樣式

  • cellCls: css類別

  • readOnly: true表示無法變更值

  • 核取方塊: true可將欄的所有儲存格定義為核取方塊(true/false值)

  • forcedPosition:整數值,指定資料行必須置於格線中的位置(介於0-colums-1之間)

欄中繼資料設定 columns-metadata-configuration

您可以為每個欄設定:

  • 顯示屬性:html樣式、CSS類別及唯讀

  • 核取方塊

  • 強制位置

CSS和唯讀欄

大量編輯器有三種欄設定:

  • 儲存格CSS類別名稱(cellCls):新增至已設定欄之每個儲存格的CSS類別名稱。
  • 儲存格樣式(cellStyle):新增至已設定欄之每個儲存格的HTML樣式。
  • 唯讀(readOnly):針對已設定欄的每個儲存格設定唯讀。

組態必須定義為下列組態:

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

以下範例可在productlist元件(https://experienceleague.adobe.com/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 否則。 在頁首功能表中,您也可以 全選全部不選. 如果選取的標頭是核取方塊欄的標頭,則會啟用這些選項。

在前一個範例中,選取欄僅包含核取方塊,如checkbox="true"。

強制位置

強制位置中繼資料forcedPosition可讓您指定欄在格線中的放置位置:0是第一個位置,而 <number of="" columns="">-1是最後一個位置。 任何其他值會受到忽略。

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

查詢Servlet query-servlet

依預設,可以在以下位置找到查詢servlet: /libs/wcm/core/components/bulkeditor/json.java. 您可以設定其他路徑以擷取資料。

查詢servlet的運作方式如下:它接收GQL查詢並接收要傳回的欄、計算結果,並將結果以JSON資料流的形式傳回大量編輯器。

在產品清單元件案例中,傳送至查詢servlet的兩個引數如下:

  • 查詢: "path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
  • 欄: "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 save-servlet

在大量編輯器的預設設定中,每一列都是一個節點,而且此節點的路徑會儲存在列記錄中。 大量編輯器會透過jcr路徑保持列與節點之間的連結。 當使用者編輯格線時,會建立所有修改的清單。 當使用者按一下 儲存,會傳送POST查詢至具有更新屬性值的每個路徑。 這是Sling概念的基礎,如果每個儲存格都是節點的屬性,則運作良好。 但是,如果實施查詢servlet來執行繼承計算,則此模型無法運作,因為查詢servlet傳回的屬性可以從另一個節點繼承。

「儲存servlet」概念是修改不會直接發佈到每個節點,而是發佈到執行儲存作業的一個servlet。 此servlet因此可分析修改,並將屬性儲存在正確的節點上。

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

  • 引數名稱: <jcr path="">/<property name="">

    範例: /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在節點上寫入屬性。 如果節點不存在,它也會建立節點(格線插入列)。

請勿按原樣使用預設程式碼,因為它會重新實作伺服器本機的功能(POST於 <jcr path="">/<property name="">),因此這只是建置可管理屬性繼承模型的「儲存」servlet的良好起點。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2