Cette section décrit le développement de l’outil d’éditeur en bloc et l’extension du composant Liste de produits , basé sur l’éditeur en bloc.
Lorsque vous utilisez l’éditeur en bloc, vous pouvez ajouter plusieurs paramètres de requête à l’URL pour appeler l’éditeur en bloc avec une configuration spécifique. Si vous souhaitez que l’éditeur en bloc soit toujours utilisé avec une certaine configuration, par exemple, comme dans le composant Liste de produits, vous devez modifier . bulkeditor.jsp
(dans /libs/wcm/core/components/bulkeditor) ou créez un composant avec la configuration spécifique. Les modifications effectuées à l’aide des paramètres de requête ne sont pas permanentes.
Par exemple, si vous entrez les informations suivantes dans l’URL de votre navigateur :
https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true
L’éditeur en bloc s’affiche sans le paramètre Chemin racine comme hrp=true masque le champ. Avec le paramètre hrp=false, le champ s’affiche (valeur par défaut).
Voici une liste des paramètres de requête de l’éditeur en bloc :
Chaque paramètre peut avoir un nom long et un nom court. Par exemple, le nom long du chemin racine de recherche est rootPath
, la valeur abrégée 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 | chemin racine de recherche |
queryParams / qp |
Chaîne | requête de recherche |
contentMode / cm |
Booléen | lorsque la valeur est true, le mode de contenu est activé. |
colsValue / cv |
Chaîne[] | propriétés recherchées (valeurs cochées de colsSelection affichées sous forme de cases à cocher) |
extraCols / ec |
Chaîne[] | propriétés recherchées supplémentaires (affichées dans un champ de texte séparé par des virgules) |
initialSearch / is |
Booléen | lorsque la valeur est true, la requête est exécutée au chargement de la page. |
colsSelection / cs |
Chaîne[] | sélection des propriétés recherchées (affichée sous forme de cases à cocher) |
showGridOnly / sgo |
Booléen | lorsque la valeur est true, affiche uniquement la grille et non le panneau de recherche. |
searchPanelCollapsed / spc | Booléen | lorsque la valeur est true, le panneau de recherche est réduit au chargement. |
hideRootPath / hrp | Booléen | lorsque la valeur est true, le champ de chemin d’accès racine est masqué. |
hideQueryParams / hqp | Booléen | lorsque la valeur est true, le champ de requête est masqué. |
hideContentMode / hcm | Booléen | lorsque la valeur est true, le champ mode de contenu est masqué. |
hideColsSelection / hcs | Booléen | lorsque la valeur est true, le champ de sélection des colonnes est masqué. |
hideExtraCols / hec | Booléen | lorsque la valeur est true, le champ des colonnes supplémentaires est masqué. |
hideSearchButton | Booléen | lorsque la valeur est true, le bouton de recherche est masqué. |
hideSaveButton / hsavep | Booléen | lorsque la valeur est true, le bouton d’enregistrement est masqué. |
hideExportButton / hexpb | Booléen | lorsque la valeur est true, le bouton d’exportation est masqué. |
hideImportButton / hib | Booléen | lorsque la valeur est true, le bouton d’importation est masqué. |
hideResultNumber / hrn | Booléen | lorsque la valeur est true, le texte du numéro de résultat de la recherche par grille est masqué. |
hideInsertButton / hinsertb | Booléen | lorsque la valeur est true, le bouton d’insertion de grille est masqué. |
hideDeleteButton / hdelb | Booléen | lorsque la valeur est true, le bouton de suppression de la grille est masqué. |
hidePathCol / hpc | Booléen | lorsque la valeur est true, la colonne « chemin » de la grille est masquée. |
Cette section présente un aperçu de l’utilisation de l’éditeur en bloc et donne une description du composant de Geometrixx existant en fonction de l’éditeur en bloc : 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 de HTML standard et toute modification est effectuée dans la variable Modifier qui contient un widget BulkEditor. (Cet éditeur en bloc est identique à celui accessible à l’adresse /etc/importers/bulkeditor.html ou via le menu Outils). Le composant Liste de produits a été configuré pour des fonctionnalités spécifiques et limitées de l’éditeur en bloc. Chaque partie de l’éditeur en bloc (ou les composants dérivés de l’éditeur en bloc) peut être configurée.
Avec l’éditeur en bloc, 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 noeuds à 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 à l’adresse /apps/geometrixx/components/productlist et est composé de plusieurs parties comme tous les composants Adobe Experience Manager (AEM) :
Voici une représentation XML des sous-noeuds de 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>
Chaque partie de l’éditeur en bloc peut être configurée. Le tableau suivant répertorie toutes les propriétés de configuration de l’éditeur en bloc.
Nom de la propriété | Définition |
rootPath | Chemin racine de la recherche |
queryParams | Requête de recherche |
contentMode | True pour activer le mode de contenu : les propriétés sont lues sur le nœud jcr:content et non sur le nœud de 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 recherchées supplémentaires (affichées dans un champ séparé par des virgules) |
initialSearch | True pour effectuer une requête au chargement de la page |
colsSelection | Sélection des propriétés recherchées (affichée sous forme de cases à cocher) |
showGridOnly | True pour afficher uniquement la grille et non le panneau de recherche (n’oubliez pas de définir initialSearch sur true) |
searchPanelCollapsed | True pour réduire le panneau de recherche par défaut |
hideRootPath | Masquer le champ de chemin racine |
hideQueryParams | Masquer le champ de requête |
hideContentMode | Masquer le champ du mode de contenu |
hideColsSelection | Masquer le champ de sélection des protocoles |
hideExtraCols | Masquer le champ des protocoles supplémentaires |
hideSearchButton | Bouton Masquer la recherche |
hideSaveButton | Bouton Masquer l’enregistrement |
hideExportButton | Bouton Masquer l’exportation |
hideImportButton | Bouton Masquer l’importation |
hideResultNumber | Masquer le texte du numéro de résultat de la recherche par grille |
hideInsertButton | Masquer le bouton d’insertion de grille |
hideDeleteButton | Bouton Masquer la suppression de la grille |
hidePathCol | Masquer la colonne « chemin » de la grille |
queryURL | Chemin d’accès au servlet de requête |
exportURL | Chemin d’accès au servlet d’exportation |
importURL | Chemin d’accès au servlet d’importation |
insertedResourceType | Type de ressource ajouté au nœud lorsqu’une ligne est insérée |
saveButton | Enregistrer la configuration du widget de bouton |
searchButton | Configuration du widget du bouton de recherche |
exportButton | Configuration du widget du bouton Exporter |
importButton | Configuration du widget du bouton Importer |
searchPanel | Configuration du widget du panneau de recherche |
grid | Configuration du widget Grille |
store | Configuration du magasin |
colModel | Configuration du modèle de colonne de grille |
rootPathInput | Configuration du widget rootPath |
queryParamsInput | Configuration du widget queryParams |
contentModeInput | Configuration du widget contentMode |
colsSelectionInput | colsSelection widget config |
extraColsInput | Configuration du widget extraCols |
colsMetadata | Configuration des métadonnées de colonne. Les propriétés possibles sont (appliquées à toutes les cellules de la colonne) :
|
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
Colonnes CSS et lecture seule
L’éditeur en bloc comporte trois configurations de colonne :
La configuration doit être définie comme suit :
"colsMetadata": {
"Column name": {
"cellStyle": "html style",
"cellCls": "CSS class",
"readOnly": true/false
}
}
L’exemple suivant se trouve dans le composant de liste de produits (/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=fr) :
<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 à cocher
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 le premier exemple, la colonne de sélection contient uniquement des cases à cocher comme case="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 sous la forme forcedPosition="0".
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 bloc sous la forme d’un flux JSON.
Dans le cas du composant Liste de produits , les deux paramètres envoyés au servlet Query sont les suivants :
Et le flux JSON est renvoyé comme suit :
{
"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 accès correspond à un noeud et à ses propriétés, et s’affiche sous la forme d’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.
Dans la configuration par défaut de l’éditeur en bloc, chaque ligne est un noeud et le chemin de ce noeud est stocké dans l’enregistrement de ligne. L’éditeur en bloc conserve le lien entre la ligne et le noeud 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é pour effectuer le calcul d’héritage, ce modèle ne peut pas fonctionner en tant que propriété renvoyée par le servlet Query peut être héritée d’un autre noeud.
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. Cela permet à ce servlet d’analyser les modifications et d’enregistrer les propriétés sur le noeud droit.
Chaque propriété mise à jour est envoyée au servlet au format suivant :
Nom du paramètre : <chemin jcr>/<nom de propriété>
Exemple : /content/geometrixx/fr/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 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).
N’utilisez pas le code par défaut tel quel, car il réimplémente ce que le serveur fait nativement (un POST sur <jcr path="">/<property name="">) et n’est donc qu’un bon point de départ pour créer une servlet Save capable de gérer un modèle d’héritage de propriétés.