本節說明如何開發大量編輯器工具,以及如何擴充以大量編輯器為基礎的產品清單元件。
使用大量編輯器時,有數個查詢參數可新增至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元件:
以下是對話子節點的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 | 欄中繼資料設定。 可能的屬性包括(應用於列的所有單元格):
|
您可以為每欄進行設定:
顯示屬性:html樣式、CSS類和只讀
核取方塊
強迫職位
CSS和唯讀欄
批量編輯器有三列配置:
設定必須定義為下列設定:
"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"的第一欄。
預設情況下,可在/libs/wcm/core/components/bulkeditor/json.java
處找到查詢Servlet。 您可以設定其他路徑以擷取資料。
查詢Servlet的運作方式如下:它會接收GQL查詢並傳回欄、計算結果,並將結果以JSON資料流的形式傳回至大量編輯器。
在產品清單元件案例中,傳送至查詢servlet的兩個參數如下:
而傳回的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」管理。
在批量編輯器的預設配置中,每行都是一個節點,該節點的路徑儲存在行記錄中。 批量編輯器會透過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」的好起點。