Bulk Editor の開発

ここでは、Bulk Editor ツールを開発する方法と、Bulk Editor に基づく製品リストコンポーネントを拡張する方法について説明します。

Bulk Editor のクエリパラメーター

Bulk Editor を操作するときに、特定の設定で Bulk Editor を呼び出すために URL に追加できるクエリパラメーターがいくつかあります。製品リストコンポーネントなどで、Bulk Editor を常に特定の設定で使用するには、 （/libs/wcm/core/components/bulkeditor にある）bulkeditor.jsp を変更するか、特定の設定でコンポーネントを作成する必要があります。クエリパラメーターを使用した変更は、永続的ではありません。

例えば、ブラウザーの URL に次のように入力するとします。

https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true

「hrp=true」によってフィールドが非表示になるので、Bulk Editor は「ルートパス」フィールドなしで表示されます。パラメーター「hrp=false」を使用すると、フィールドが表示されます（デフォルト値）。

以下に Bulk Editor のクエリパラメーターリストを示します。

Bulk Editor ベースのコンポーネントの作成：製品リストコンポーネント

ここでは、Bulk Editor の使用方法の概要について説明します。また、Bulk Editor に基づく既存の Geometrixx コンポーネントである製品リストコンポーネントについても説明します。

製品リストコンポーネントを使用すると、ユーザーがデータのテーブルを表示および編集できます。例えば、製品リストコンポーネントを使用して、カタログの商品を表現できます。情報は標準的な HTML テーブルで表示され、編集は BulkEditor ウィジェットを含む​編集​ダイアログで実行されます。（この Bulk Editor は、 /etc/importers/bulkeditor.html またはツールメニューからアクセスできるものとまったく同じです）。製品リストコンポーネントは、特定の制限された Bulk Editor 機能を使用するように設定されています。バルクエディターのすべての部分（またはバルクエディターから派生したコンポーネント）を設定できます。

Bulk Editor を使用すると、行の追加、変更、削除、フィルターおよび書き出し、変更内容の保存および複数行の読み込みをおこなうことができます。各行は、製品リストコンポーネントインスタンス以下の 1 つのノードとして格納されます。すべてのセルは、各ノードのプロパティです。これはデザインの選択として簡単に変更できます。例えば、リポジトリの他の場所にノードを格納することもできます。クエリサーブレットの役割は、表示するノードリストを返すことです。検索パスは製品リストインスタンスとして定義されます。

製品リストコンポーネントのソースコードは、 /apps/geometrixx/components/productlist は、他のすべての AEM コンポーネントと同様に複数のパーツで構成されています。

• HTML レンダリング。このレンダリングは JSP ファイル（/apps/geometrixx/components/productlist/productlist.jsp）で実行されます。JSP は現在の製品リストコンポーネントのサブノードを読み取り、HTML テーブルの行として各サブノードを表示します。
• 編集ダイアログは、バルクエディター設定を定義する場所です。コンポーネントのニーズに合わせてダイアログを設定します。使用可能な列およびグリッドまたは検索で実行できるアクション。すべての設定プロパティについて詳しくは、Bulk Editor の設定プロパティを参照してください。

以下はダイアログのサブノードの 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 の設定プロパティ

バルクエディターのすべての部分が設定可能です。次の表に、バルクエディターのすべての設定プロパティを示します。

列メタデータ設定

列ごとに以下を設定できます。

• 表示プロパティ：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 コンポーネント（/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata）にあります。

            <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 設定プロパティを true に設定すると、その列のすべてのセルがチェックボックスとしてレンダリングされます。ボックスがオンの場合は true がサーバーの Save サーブレットに送信され、オフの場合は false が送信されます。ヘッダーメニューで、すべてを選択​または なしを選択​することもできます。これらのオプションは、選択したヘッダーがチェックボックス列のヘッダーの場合に有効になります。

前の例で、selection 列には、checkbox="true" のチェックボックスのみが含まれます。

強制された位置

強制された位置メタデータ forcedPosition を使用すると、グリッド内での列の位置を指定できます。0 が先頭位置で、<列の数>-1 が最終位置です。その他の値は無視されます。

前の例で、selection 列は forcedPosition="0" の最初の列です。

クエリサーブレット

デフォルトでは、クエリサーブレットは /libs/wcm/core/components/bulkeditor/json.java にあります。別のパスを設定するとデータを取得できます。

Query サーブレットには、GQL クエリおよび返す列を受信し、結果を計算し、結果を JSON ストリームとして Bulk Editor に送信するという機能があります。

製品リストコンポーネントの場合、Query サーブレットに送信される 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 サーブレットで管理する必要があります。

保存サーブレット

バルクエディターのデフォルト設定では、各行が 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）を再実装したコードなので、プロパティの継承モデルを管理する保存サーブレットを作成する際の出発点として使用するのに適しています。

Business.Adobe.com リソース

Multichannel Communication Ecommerce Integrations Personalized Communications Embedded Charts Dynamic Forms Content Management