Bulk Editor の開発 developing-the-bulk-editor
この節では、バルクエディターツールの開発方法と、バルクエディターに基づく製品リストコンポーネントの拡張方法について説明します。
バルクエディタークエリパラメーター bulk-editor-query-parameters
Bulk Editor を操作する際には、URL に追加して、特定の設定で Bulk Editor を呼び出すためのクエリパラメーターがいくつかあります。 製品リストコンポーネントなどで、Bulk Editor を常に特定の設定で使用するには、 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 の場合、フィールドが表示されます（デフォルト値）。
次に、Bulk Editor クエリパラメーターのリストを示します。
rootPath、短い名前は rp のようになります。長い名前が定義されていない場合、短い名前がリクエストから読み取られます。バルクエディターベースのコンポーネントの開発：製品リストコンポーネント developing-a-bulk-editor-based-component-the-product-list-component
この節では、バルクエディターの使用方法の概要と、バルクエディターに基づく既存のGeometrixxコンポーネントの説明を示します。製品リストコンポーネント
製品リストコンポーネントを使用すると、ユーザーはデータのテーブルを表示および編集できます。 例えば、製品リストコンポーネントを使用して、カタログ内の製品を表すことができます。 情報は標準的な HTML テーブルで表示され、編集は BulkEditor ウィジェットを含む 編集 ダイアログで実行されます。（この Bulk Editor は、 /etc/importers/bulkeditor.htmlまたはツールメニューから )。 製品リストコンポーネントは、特定の限られたバルクエディター機能用に設定されています。 バルクエディターのすべての部分（またはバルクエディターから派生したコンポーネント）を設定できます。
Bulk Editor を使用すると、行の追加、変更、削除、フィルタリングおよびエクスポート、変更の保存、一連の行のインポートをおこなうことができます。 すべての行は、製品リストコンポーネントインスタンス自体の下にノードとして保存されます。 すべてのセルは、各ノードのプロパティです。これは設計の選択肢で、簡単に変更できます。例えば、リポジトリ内の別の場所にノードを保存できます。 クエリサーブレットの役割は、表示するノードのリストを返すことです。検索パスは、製品リストインスタンスとして定義されます。
製品リストコンポーネントのソースコードは、 /apps/geometrixx/components/productlist は、他のすべての AEM コンポーネントと同様に複数のパーツで構成されています。
- HTMLレンダリング：レンダリングは JSP ファイル (https://experienceleague.adobe.com/apps/geometrixx/components/productlist/productlist.jsp?lang=ja) で行われます。 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
バルクエディターのすべての部分が設定可能です。次の表に、バルクエディターのすべての設定プロパティを示します。
列のメタデータ設定 columns-metadata-configuration
各列に対して、次のようにを設定できます。
-
表示プロパティ：html スタイル、CSS クラスおよび読み取り専用
-
チェックボックス
-
強制的な位置
CSS 列と読み取り専用列
Bulk Editor には次の 3 つの列設定があります。
- セルの 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=ja) にあります。
<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>
チェックボックス
checkbox configuration プロパティが true に設定されている場合、列のすべてのセルがチェックボックスとしてレンダリングされます。 ボックスがオンの場合は true がサーバーの Save サーブレットに送信され、オフの場合は false が送信されます。ヘッダーメニューで、すべてを選択 または なしを選択 することもできます。これらのオプションは、選択したヘッダーがチェックボックス列のヘッダーの場合に有効になります。
前の例では、選択列には、checkbox="true"のチェックボックスのみが含まれています。
強制位置
強制位置メタデータ forcedPosition を使用すると、列をグリッド内のどこに配置するかを指定できます。0 が最初で、 <number of="" columns="">-1 が最後の位置です。 その他の値は無視されます。
前の例では、選択列は forcedPosition="0"の最初の列です。
クエリサーブレット query-servlet
デフォルトでは、クエリサーブレットは /libs/wcm/core/components/bulkeditor/json.java にあります。別のパスを設定するとデータを取得できます。
クエリサーブレットは、次のように動作します。GQL クエリと返す列を受け取り、結果を計算し、結果を JSON ストリームとしてバルクエディターに返します。
製品リストコンポーネントの場合、クエリサーブレットに送信される 2 つのパラメーターは次のようになります。
- クエリ：「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
}
各ヒットは 1 つのノードとそのプロパティに対応し、グリッドに行として表示されます。
クエリサーブレットを拡張すると、複雑な継承モデルを返したり、特定の論理場所に保存されたノードを返したりすることができます。クエリサーブレットを使用すると、あらゆる種類の複雑な計算を実行できます。リポジトリ内の複数ノードの集計がグリッドに行で表示されます。この場合、これらの行の変更と保存は、Save サーブレットで管理する必要があります。
サーブレットを保存 save-servlet
バルクエディターのデフォルト設定では、各行が 1 つのノードであり、各行のレコードにそのノードのパスが格納されます。バルクエディターは、行とノードの間のリンクを jcr パスを介して保持します。ユーザーがグリッドを編集すると、すべての変更のリストが作成されます。ユーザーが 保存 に設定すると、POSTクエリが、更新されたプロパティ値と共に各パスに送信されます。 これは Sling の基本的な概念であり、各セルがノードのプロパティである限り適切に機能します。ただし、クエリサーブレットで継承を計算するように実装している場合は、クエリサーブレットが返すプロパティは別のノードから継承される可能性があるので、このモデルは機能しません。
変更は、各ノードに直接反映されるのではなく、保存ジョブを行う 1 つのサーブレットに反映される、というのが保存サーブレットの概念です。これにより、そのサーブレットで変更を分析することができ、そのプロパティを適切なノードに保存できます。
更新された各プロパティは、次の形式でサーブレットに送信されます。
-
パラメーター名：<jcr path>/<property name>
例：/content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku
-
値：<value>
値：12123
サーブレットは、catalogCode プロパティが格納されている場所を認識している必要があります。
保存サーブレットのデフォルトの実装は /libs/wcm/bulkeditor/save/POST.jsp にあり、製品リストのコンポーネントで使用されます。（<jcr path>/<property name> 形式の）リクエストからすべてのパラメーターを取得し、JCR API を使用してノードにプロパティを書き込みます。また、存在しない場合は、ノードも作成されます（グリッド挿入行）。
デフォルトのコードをそのまま使用しないでください。サーバーがネイティブに実行する機能（<jcr path>/<property name> での POST）を再実装したコードなので、プロパティの継承モデルを管理する保存サーブレットを作成する際の出発点として使用するのに適しています。