バルクエディターベースのコンポーネントの作成:製品リストコンポーネント

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

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

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

製品リストコンポーネントのソースコードは、/apps/geometrixx/components/productlist にあるリポジトリで入手でき、すべての Adobe Experience Manager(AEM)コンポーネントと同様に、複数のパーツで構成されています。

  • HTML レンダリングでのレンダリングは JSP ファイル(/apps/geometrixx/components/productlist/productlist.jsp)で実行されます。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検索クエリー
contentModetrue の場合は、コンテンツモードが有効(プロパティを検索結果ノードではなく jcr:content ノードで読み取り)
colsValue検索対象プロパティ(チェックボックスとして表示される colsSelection で選択した値)
extraCols追加の検索対象プロパティ(コンマ区切りでテキストフィールドに表示)
initialSearchtrue の場合は、ページの読み込み時にクエリを実行
colsSelection検索対象プロパティの選択(チェックボックスとして表示)
showGridOnlytrue の場合は、グリッドのみを表示し、検索パネルは非表示(必ず initialSearch を true に設定)
searchPanelCollapsedtrue の場合は、デフォルトで検索パネルを折りたたみ
hideRootPathルートパスフィールドを非表示
hideQueryParamsクエリフィールドを非表示
hideContentModeコンテンツモードフィールドを非表示
hideColsSelection列選択フィールドを非表示
hideExtraCols任意選択の列フィールドを非表示
hideSearchButton検索ボタンを非表示
hideSaveButton保存ボタンを非表示
hideExportButton書き出しボタンを非表示
hideImportButton読み込みボタンを非表示
hideResultNumberグリッドの検索結果番号テキストを非表示
hideInsertButtonグリッドの挿入ボタンを非表示
hideDeleteButtonグリッドの削除ボタンを非表示
hidePathColグリッドの「パス」列を非表示
queryURLクエリサーブレットへのパス
exportURL書き出しサーブレットへのパス
importURL読み込みサーブレットへのパス
insertedResourceType行が挿入されるとノードに追加されるリソースタイプ
saveButton保存ボタンウィジェット設定
searchButton検索ボタンウィジェット設定
exportButton書き出しボタンウィジェット設定
importButton読み込みボタンウィジェット設定
searchPanel検索パネルウィジェット設定
gridグリッドウィジェット設定
storeストア設定
colModelグリッドの列モデル設定
rootPathInputrootPath ウィジェット設定
queryParamsInputqueryParams ウィジェット設定
contentModeInputcontentMode ウィジェット設定
colsSelectionInputcolsSelection ウィジェット設定
extraColsInputextraCols ウィジェット設定
colsMetadata

列のメタデータ設定です。以下のプロパティを設定できます(列のすべてのセルに適用されます)。

  • cellStyle:HTML スタイル

  • cellCls:CSS クラス

  • readOnly:true の場合は、値を変更できません。

  • checkbox:true の場合は、列のすべてのセルをチェックボックス(true/false 値)として定義します。

  • forcedPosition:グリッド内での列の位置を指定する整数値(0 ~列 -1 の数)