Vous consultez actuellement l'aide de la version:

Cette section explique comment développer l’outil d’éditeur en masse et comment étendre le composant Liste de produits, lui-même basé sur l’éditeur en masse.

Paramètres de requête de l’éditeur en masse

Lorsque vous travaillez avec l’éditeur en masse, plusieurs paramètres de requête peuvent être ajoutés à l’URL pour appeler l’éditeur en masse avec une configuration spécifique. Pour que l’éditeur en masse soit toujours utilisé avec une certaine configuration, par exemple, comme dans le composant Liste de produits, vous devez modifier bulkeditor.jsp (situé dans /libs/wcm/core/components/bulkeditor) ou créer un composant avec la configuration spécifique. Les modifications apportées à l’aide des paramètres de requête ne sont pas permanentes.

Par exemple, si vous tapez ce qui suit dans l’URL de votre navigateur :

http://<nom_serveur>:<numéro_port> /etc/importers/bulkeditor.html?rootPath=/content/geometrixx/fr&queryParams=geometrixx&initialSearch=true&hrp=true

l’éditeur en masse s’affiche sans le champ Chemin de base car hrp=true masque le champ. Avec le paramètre hrp=false, le champ est affiché (valeur par défaut).

Voici une liste des paramètres de requête de l’éditeur en masse :

Remarque :

Chaque paramètre peut avoir un nom long et un nom court. Par exemple, le nom long du chemin racine de la recherche est rootPath, le plus court est rp. Si le nom long n’est pas défini, le nom abrégé est lu dans la requête.

     

 Paramètre

(nom long/nom court)

 Type
 Description
 rootPath / rp
 Chaîne   search root path
 queryParams / qp
 Chaîne  search query
 contentMode / cm
 Booléen  si la valeur est true, le mode contenu est activé
 colsValue / cv
 Chaîne[]  propriétés recherchées (valeurs cochées à partir de colsSelection affichées sous forme de cases à cocher)
 extraCols / ec
 Chaîne[]  propriétés supplémentaires recherchées (affichées dans un champ de texte séparé par des virgules)
 initialSearch / is
 Booléen  si la valeur est true, la requête est effectuée au chargement de la page
 colsSelection / cs
 Chaîne[]  sélection des propriétés recherchées (affichées sous forme de cases à cocher)
 showGridOnly / sgo
 Booléen  si la valeur est true,   affiche uniquement la grille et non le panneau de recherche
 searchPanelCollapsed / spc  Booléen  si la valeur est true, le panneau de recherche est réduit au chargement
 hideRootPath / hrp  Booléen  si la valeur est true, masque le champ du chemin racine
 hideQueryParams / hqp  Booléen  si la valeur est true, masque le champ de requête
 hideContentMode / hcm  Booléen  si la valeur est true, masque le champ du mode de contenu
 hideColsSelection / hcs  Booléen  si la valeur est true, masque le champ de sélection des colonnes
 hideExtraCols / hec  Booléen  si la valeur est true, masque le champ de colonnes supplémentaires,
 hideSearchButton  Booléen  si la valeur est true, masque le bouton de recherche
 hideSaveButton / hsavep  Booléen  si la valeur est true, masque le bouton d’enregistrement
 hideExportButton / hexpb  Booléen  si la valeur est true, masque le bouton d’exportation
 hideImportButton / hib  Booléen  si la valeur est true, masque le bouton d’importation
 hideResultNumber / hrn  Booléen  si la valeur est true, masque le texte du résultat de la recherche de grille
 hideInsertButton / hinsertb  Booléen  si la valeur est true, masque le bouton d’insertion de la grille
 hideDeleteButton / hdelb  Booléen  si la valeur est true, masque le bouton de suppression de la grille
 hidePathCol / hpc  Booléen  si la valeur est true, masque la colonne "path" de la grille

Développement d’un composant basé sur l’éditeur en masse : le composant Liste de produits

Cette section présente l’utilisation de l’éditeur en masse et décrit le composant Geometrixx existant en fonction de l’éditeur en masse : le composant Liste de produits.

Le composant Liste de produits permet aux utilisateurs d’afficher et de modifier une table de données. Par exemple, vous pouvez utiliser le composant Liste de produits pour représenter les produits d’un catalogue. Les informations sont présentées dans un tableau HTML standard et toute modification est effectuée dans la boîte de dialogue Modifier, qui contient un widget BulkEditor. (Cet éditeur en masse est exactement le même que celui accessible sur /etc/importers/bulkeditor.html ou via le menu Outils). Le composant Liste de produits a été configuré pour des fonctionnalités d’éditeur en masse limitées spécifiques. Chaque partie de l’éditeur en masse (ou des composants dérivés de l’éditeur en masse) peut être configurée.

Avec l’éditeur en masse, vous pouvez ajouter, modifier, supprimer, filtrer et exporter les lignes, enregistrer les modifications et importer un ensemble de lignes. Chaque ligne est stockée en tant que nœud sous l’instance du composant Liste de produits elle-même. Chaque cellule est une propriété de chaque nœud. C’est un choix de conception qui peut être facilement modifié. Par exemple, vous pouvez stocker des nœuds ailleurs dans le référentiel. Le rôle du servlet de requête est de renvoyer la liste des nœuds à afficher. Le chemin de recherche est défini comme une instance Liste de produits.

Le code source du composant Liste de produits est disponible dans le référentiel sous /apps/geometrixx/components/productlist et est composé de plusieurs parties comme tous les composants CQ5 :

  • Rendu HTML : le rendu est effectué dans un fichier JSP (/apps/geometrixx/components/productlist/productlist.jsp). Le JSP lit les sous-nœuds du composant Liste de produits en cours et affiche chacun d’entre eux sous la forme d’une ligne d’une table HTML.

  • Boîte de dialogue Modifier dans laquelle vous définissez la configuration de l’éditeur en masse. Configurez la boîte de dialogue de sorte à répondre aux besoins du composant : colonnes disponibles et actions possibles effectuées sur la grille ou sur la recherche. Voir propriétés de configuration de l’éditeur en masse pour plus d’informations sur toutes les propriétés de configuration.

Voici une représentation XML des sous-nœuds de la boîte de dialogue :

        <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>

Propriétés de configuration de l’éditeur en masse

Chaque partie de l’éditeur en masse peut être configurée. Le tableau suivant répertorie toutes les propriétés de configuration pour l’éditeur en masse.

Nom de la propriété Définition
rootPath Chemin racine de recherche
queryParams Requête de recherche
contentMode True pour activer le mode contenu : les propriétés sont lues sur le nœud de contenu jcr: et non sur le nœud résultat de la recherche
colsValue Propriétés recherchées (valeurs cochées de colsSelection affichées sous forme de cases à cocher)
extraCols Propriétés supplémentaires recherchées (affichées dans une virgule de champ de texte séparée)
initialSearch True pour effectuer une requête au chargement de la page
colsSelection Sélection des propriétés recherchées (affichées sous forme de cases à cocher)
showGridOnly True pour afficher uniquement la grille et non le panneau de recherche (ne pas oublier de définir la valeur initialSearch sur true)
searchPanelCollapsed True pour réduire le panneau de recherche par défaut
hideRootPath Masquer le champ du chemin racine
hideQueryParams Masquer le champ de requête
hideContentMode Masquer le champ de mode de contenu
hideColsSelection Masquer le champ de sélection de colonnes
hideExtraCols Masquer le champ de colonnes suppl.
hideSearchButton Masquer bouton de recherche
hideSaveButton Masquer le bouton d’enregistrement
hideExportButton Masquer le bouton d’exportation
hideImportButton Masquer le bouton d’importation
hideResultNumber Masquer le texte de nombre de résultats de la recherche de grille
hideInsertButton Masquer le bouton d’insertion de grille
hideDeleteButton Masquer le bouton de suppression de grille
hidePathCol Masquer la colonne "chemin" de la grille
queryURL Chemin d’accès à la requête servlet
exportURL Chemin d’export du servlet
importURL Chemin d’accès au servlet
insertedResourceType Type de ressource ajouté au nœud lors de l’insertion d’une ligne
saveButton Config. widget bouton d’enregistrement
searchButton Config. widget bouton de recherche
exportButton Config. widget bouton d’exportation
importButton Config. widget bouton d’importation
searchPanel Config. widget panneau de recherche
grid Config widget grille
store Config. magasin
colModel Configuration du modèle de colonne de grille
rootPathInput Config. widget rootPath
queryParamsInput Config. widget queryParams
contentModeInput Config. widget contentMode
colsSelectionInput Config. widget colsSelection
extraColsInput Config. widget extraCol
colsMetadata Configuration des métadonnées de colonne. Les propriétés possibles sont (appliquées à toutes les cellules de la colonne) :
  • cellStyle: html style
  • cellCls: css class
  • readOnly : true pour ne pas pouvoir changer de valeur
  • checkbox : true pour définir toutes les cellules de la colonne comme cases à cocher (valeurs true/false)
  • forcedPosition : valeur entière pour spécifier où la colonne doit être placée dans la grille (entre 0 et le nombre de colonnes-1)


Configuration des métadonnées de colonnes

Vous pouvez configurer pour chaque colonne :

  • les propriétés d’affichage : style html, classe CSS et lecture seule

  • une case à cocher

  • une position forcée

le CSS et les colonnes en lecture seule

L’éditeur en masse comporte trois configurations de colonnes :

  • Nom de la classe CSS de la cellule (cellCls) : nom de classe CSS ajouté à chaque cellule de la colonne configurée.

  • Style de cellule (cellStyle) : style HTML ajouté à chaque cellule de la colonne configurée.

  • Lecture seule (readOnly) : la lecture seule est définie pour chaque cellule de la colonne configurée.

La configuration doit être définie comme suit :

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

L’exemple suivant est disponible dans le composant Liste de produits (/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>

Case

Si la propriété de configuration de case à cocher est définie sur true, toutes les cellules de la colonne sont affichées sous forme de cases à cocher. Une case cochée envoie true au servlet Save du serveur, false dans le cas contraire. Dans le menu d’en-tête, vous pouvez également tout sélectionner ou ne rien sélectionner. Ces options sont activées si l’en-tête sélectionné est l’en-tête d’une colonne de case à cocher.

Dans l’exemple précédent, la colonne de sélection contient uniquement des cases à cocher de type checkbox="true".

Position forcée

La métadonnée de position forcée forcedPosition vous permet de spécifier l’endroit où la colonne est placée dans la grille : 0 est la première place et <nombre de colonnes>-1 est la dernière position. Toute autre valeur est ignorée.

Dans le premier exemple, la colonne de sélection est la première colonne configurée avec forcedPosition="0".

Servlet Query

Par défaut, le servlet Query est disponible dans /libs/wcm/core/components/bulkeditor/json.java . Vous pouvez configurer un autre chemin pour récupérer les données.

Le servlet Query fonctionne comme suit : il reçoit une requête GQL et les colonnes à renvoyer, calcule les résultats et renvoie les résultats à l’éditeur en masse sous forme de flux JSON.

Dans le cas du composant Liste de produits, les deux paramètres envoyés au servlet Query sont les suivants :

  • query : "path:/content/geometrixx/en/customers/jcr:content/par/productlist Cube"
  • cols : "Selection,ProductId,ProductName,Color,CatalogCode,SellingSku"

et le flux JSON retourné est le suivant :

{
  "hits": [{
      "jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
      "ProductId": "21",
      "ProductName": "Cube",
      "Color": "Blue",
      "CatalogCode": "43244",
      "SellingSku": "32131"
    }
  ],
  "results": 1
}

Chaque hit correspond à un nœud et ses propriétés, et est affiché comme une ligne dans la grille.

Vous pouvez étendre le servlet Query de sorte à renvoyer un modèle d’héritage complexe ou à renvoyer des nœuds stockés dans un emplacement logique spécifique. Le servlet Query peut être utilisé pour effectuer n’importe quel type de calcul complexe. La grille peut ensuite afficher les lignes qui sont un agrégat de plusieurs nœuds dans le référentiel. La modification et l’enregistrement de ces lignes doivent dans ce cas être gérés par le servlet Save.

Servlet Save

Dans la configuration par défaut de l’éditeur en masse, chaque ligne est un nœud et le chemin de ce nœud est stocké dans l’enregistrement de ligne. L’éditeur en masse conserve le lien entre la ligne et le nœud via le chemin jcr. Lorsqu’un utilisateur modifie la grille, une liste de toutes les modifications est créée. Lorsqu’un utilisateur clique sur Enregistrer, une requête POST est envoyée à chaque chemin avec les valeurs de propriétés mises à jour. C’est la base du concept Sling. Ce mécanisme fonctionne bien si chaque cellule est une propriété du nœud. Mais si le servlet Query est implémenté de manière à effectuer le calcul d’héritage, ce modèle ne peut pas fonctionner car une propriété renvoyée par le servlet Query peut être héritée d’un autre nœud.

Le concept du servlet Save est le suivant : les modifications ne sont pas directement publiées sur chaque nœud, mais sont envoyées à un servlet qui effectue la tâche d’enregistrement. Ce servlet peut ainsi analyser les modifications et enregistrer les propriétés sur le bon nœud.

Chaque propriété mise à jour est envoyée au servlet au format suivant :

  • Nom du paramètre : <chemin jcr>/<nom de la propriété>
    Exemple :/content/geometrixx/en/products/jcr:content/par/productlist/1258674859000/SellingSku
  • Valeur : <valeur>
    Exemple : 12123

 

Le servlet doit connaître l’emplacement de stockage de la propriété catalogCode.

Une implémentation par défaut du servlet Save est disponible dans /libs/wcm/bulkeditor/save/POST.jsp et est utilisée dans le composant Liste de produits. Il prend tous les paramètres de la requête (au format <chemin jcr>/<nom de la propriété>) et écrit des propriétés sur les nœuds à l’aide de l’API JCR. Il crée également un nœud s’il n’existe pas (lignes insérées dans la grille).

Le code par défaut ne doit pas être utilisé tel quel, car il réimplémente ce que le serveur fait nativement (un POST sur <chemin jcr>/<nom de propriété>) et n’est donc qu’un bon point de départ pour créer un servlet Save qui gèrera un modèle d’héritage de propriété.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne