Vous consultez actuellement l'aide de la version:

Attention :

Ce document décrit comment personnaliser les consoles de l’IU moderne et compatible avec les écrans tactiles, et ne s’applique pas à l’IU classique.

AEM comporte plusieurs mécanismes pour vous permettre de personnaliser les consoles (et la fonctionnalité de création de pages) de votre instance de création.

  • Clientlibs
    Les bibliothèques clientes (clientlibs) vous permettent d’étendre l’implémentation par défaut afin d’obtenir la nouvelle fonctionnalité, tout en réutilisant les fonctions, objets et méthodes standard. Lors de la personnalisation, vous pouvez créer votre propre bibliothèque cliente clientlib sous /apps. Par exemple, elle peut contenir le code requis pour votre composant personnalisé.
  • Recouvrements
    Les recouvrements sont basés sur les définitions de nœuds et vous permettent de recouvrir la fonctionnalité standard (dans /libs) avec votre propre fonctionnalité personnalisée (dans /apps). Lors de la création d’un recouvrement, une copie 1:1 de l’original n’est pas nécessaire, car la fusion de ressources Sling prend en compte l’héritage.

Ils peuvent être utilisés de différentes manières pour étendre les consoles AEM. Une petite sélection est abordée ci-dessous (à un niveau élevé).

Remarque :

Pour plus d’informations, voir :

Ce sujet est également abordé dans la session AEM Gems : Personnalisation de l’interface utilisateur pour AEM 6.0.

Attention :

Vous ne devez rien modifier dans le chemin /libs.

En effet, le contenu de /libs est remplacé dès que vous mettez à niveau votre instance (et risque de l’être si vous appliquez un correctif ou un Feature Pack).

La méthode recommandée pour la configuration et d’autres modifications est la suivante :

  1. Recréez l’élément requis (c’est-à-dire tel qu’il existe dans /libs) sous /apps
    .
  2. Apportez les modifications désirées dans /apps.

Par exemple, les emplacements suivants dans la structure /libs risquent d’être recouverts :

  • Consoles (toutes les consoles basées sur les pages de l’IU Granite), par exemple :
    • /libs/wcm/core/content
  • Rails (internes) secondaires, par exemple :
    • /libs/wcm/core/content/search
  • Barre(s) d’outils (selon la console, par exemple, Sites) :
    • Par défaut
      /libs/wcm/core/content/sites/jcr:content/body/content/header/items/default
    • Mode de sélection
      /libs/wcm/core/content/sites/jcr:content/body/content/header/items/selection
  • Options du menu d’aide (selon la console, par exemple, Sites)
    • /libs/wcm/core/content/sites/jcr:content/body/help
  • Informations affichées en mode Carte (selon la console, par exemple, Sites)
    • /libs/wcm/core/content/sites/jcr:content/body/content/content/items/childpages

Remarque :

Voir l’article de la base de connaissances Résolution des problèmes liés à l’IU tactile d’AEM pour d’autres conseils et outils.

Exemples de code

Différents modules sont disponibles sur GitHub. Ils fournissent des exemples de code associés aux tâches abordées sur cette page.

aem-admin-extension-new-console

aem-admin-extension-new-console est un module d’exemple indiquant comment créer une console AEM 6. Ce module offre une IU pour gérer les lancements et ajoute un lien dans la navigation :

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

aem-admin-extension-customize-sites

aem-admin-extension-customize-sites est un module d’exemple qui montre comment personnaliser une console d’administration AEM 6 existante. Ce module fournit des mises à jour à l’administration de Sites :

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

Création d’une console personnalisée

  1. Vous pouvez créer une console personnalisée avec des actions associées, par exemple avec les lancements au niveau supérieur (sous Sites) :

    Cela implique :

    • la création de la définition de l’espace racine de votre nouvelle console, par exemple :
      • /apps/<votreProjet>/admin/ext/launches
    • il peut contenir (en fonction des exigences) :
      • les clientlibs correspondants pour les actions personnalisées et les définitions less/css ;
        • /apps/<votreProjet>/admin/ext/launches/clientlibs
      • les composants qui doivent être redéfinis/ajustés, par exemple, les chemins de navigation, la source de données et le lancement ;
        • /apps/<votreProjet>/admin/ext/launches/components
      • la ressource de page de l’IU Granite :
        • /apps/<votreProjet>/admin/ext/launches/content/jcr:content
          propriété : sling:resourceType
      • la définition de la page à partir de la console :
        • /apps/<votreProjet>/admin/ext/launches/content/jcr:content/head
        • /apps/<votreProjet>/admin/ext/launches/content/jcr:content/body
    chlimage_1

    Pour utiliser la nouvelle console (par exemple dans le rail de navigation), un ID est utilisé, afin qu’il puisse être référencé explicitement. L’ID est utilisé pour lier la console et sa définition de navigation. L’ID est défini dans le nœud du rail de la page, par exemple, pour la console Sites : 

    • Le nœud du rail est :
      /libs/wcm/core/content/sites/jcr:content/body/rail
      • Ici, la propriété currentId est définie :
        currentId = cq-sites.

    Pour l’exemple de la console Lancements :

    • Le nœud est :
      • /apps/<votreProjet>/admin/ext/launches/content/jcr:content/body/rail
    • avec les propriétés suivantes :
      • currentId = cq-launches
      • sling:resourceType = granite/ui/components/endor/navcolumns
      • srcPath = cq/core/content/nav

Personnalisation du mode par défaut pour une console

Vous pouvez personnaliser le mode par défaut (colonnes, carte ou liste) pour une console :

  1. Vous pouvez réorganiser les modes en recouvrant l’entrée requise à partir de l’emplacement suivant :

    /libs/wcm/core/content/sites/jcr:content/views

    La première entrée est la valeur par défaut.

    Les nœuds disponibles sont corrélés aux options de mode dans le rail :

    • column
    • card
    • list
  2. Par exemple, dans un recouvrement du mode Liste :

    /apps/wcm/core/content/sites/jcr:content/views/list

    Définissez la propriété suivante :

    • Nom : sling:orderBefore.
    • Type : String
      .
    • Valeur : colonne.

aem-admin-extension-customize-sites est un module d’exemple qui montre comment personnaliser une console d’administration AEM 6 existante. Ce module fournit des mises à jour à l’administration de Sites :

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

Ajout d’une option de navigation au rail

  1. Vous pouvez ajouter une entrée de navigation dans le rail (par exemple, une console personnalisée telle que Lancements). 

    Pour ce faire, créez un recouvrement de :

    /libs/cq/core/content/nav

    Dans le recouvrement de /apps :

    /apps/cq/core/content/nav

    Créez les nœuds et les propriétés :

    chlimage_1
    • Étendez la navigation :
      • /apps/cq/core/content/nav/launches
    • Spécifiez l’emplacement dans l’arborescence :
      • Propriété : sling:orderBefore.
    • Pour créer la connexion, la propriété id référence la propriété currentID (c’est-à-dire que les deux propriétés doivent être identiques) pour la console pertinente :
      • Propriété : id.
      • Valeur : la même que pour la console (par exemple, cq-launches)
        , par exemple : la même valeur que la propriété currentId sur :
        /apps/<votreProjet>/admin/ext/launches/content/jcr:content/body/rail
        .

Ajout d’une action à la barre d’outils

  1. Vous pouvez créer vos propres composants et inclure les bibliothèques clientes correspondantes pour des actions personnalisées. Par exemple, une action Promouvoir sur Twitter à l’emplacement :

    /apps/wcm/core/clientlibs/sites/js/twitter.js

    Elle peut ensuite être connectée à un élément de la barre d’outils sur la console :

    /apps/<votreProjet>/admin/ext/launches

    Par exemple, en mode de sélection :

    content/jcr:content/body/content/header/items/selection/items/twitter

Limitation d’une action de la barre d’outils à un groupe spécifique

  1. Vous pouvez utiliser une condition de rendu personnalisé pour recouvrir l’action standard et imposer des conditions spécifiques qui doivent être remplies avant le rendu.

    Par exemple, créez un composant pour contrôler les conditions de rendu selon le groupe :

    /apps/myapp/components/renderconditions/group

  2. Pour les appliquer à l’action Créer un site sur la console Sites :

    /libs/wcm/core/content/sites

    Créez le recouvrement :

    /apps/wcm/core/content/sites

  3. Ajoutez ensuite la condition de rendu pour l’action :

    jcr:content/body/content/header/items/default/items/create/items/createsite/rendercondition

    En utilisant des propriétés sur ce nœud, vous pouvez définir les groupes autorisés à effectuer l’action spécifique ; par exemple, les administrateurs
    .

Suppression de l’accès à l’option de navigation du rail

  1. Vous pouvez renommer une entrée de navigation du rail, en recouvrant l’entrée requise à l’emplacement suivant :

    /libs/cq/core/content/nav

    Les nœuds disponibles sont corrélés aux options de navigation dans le rail :

    • projects
    • sites
    • assets
    • apps
    • forms
    • screens
    • personalization
    • commerce
    • tools
    • communities
  2. Par exemple, sur un recouvrement à l’emplacement suivant :

    /apps/cq/core/content/nav/sites

    Définissez la propriété suivante :

    • Nom : sling:hideResource.
    • Type : String
      .
    • Valeur : true.

aem-admin-extension-customize-sites est un module d’exemple qui montre comment personnaliser une console d’administration AEM 6 existante. Ce module fournit des mises à jour à l’administration de Sites :

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

Restriction de l’accès à l’option de navigation du rail

Vous pouvez limiter l’accès à une option de navigation à l’aide de listes ACL :

  1. Ouvrez la gestion des utilisateurs/groupes et sélectionnez l’utilisateur/le groupe dont vous souhaitez restreindre l’accès.

    Remarque :

    Évitez d’attribuer/de restreindre les permissions utilisateur par utilisateur. Il est recommandé d’utiliser des groupes.

  2. Supprimez les permissions au(x) nœud(s) approprié(s) sous /libs/cq/core/content/nav/sites. Ils sont en corrélation avec les options de navigation du rail :

    • projects
    • sites
    • assets
    • apps
    • forms
    • screens
    • personalization
    • commerce
    • tools
    • communities

Personnalisation des colonnes en mode Liste

Remarque :

Cette fonction est optimisée pour les champs de colonnes de texte ; pour les autres types de données, il est possible de remplacer cq/gui/components/siteadmin/admin/listview/columns/analyticscolumnrenderer dans /apps.

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

Pour personnaliser les colonnes en mode Liste :

  1. Recouvrez la liste des colonnes disponibles.

    • Sur le nœud :
      /apps/wcm/core/content/common/availablecolumns
    • Ajoutez des colonnes ou supprimez des colonnes existantes.

    Voir Utilisation des recouvrements (et la fusion de ressources Sling) pour plus d’informations.

  2. Si vous le souhaitez :

    • Si vous souhaitez connecter des données supplémentaires, vous devez écrire un PageInforProvider avec une propriété
      pageInfoProviderType.

    Par exemple, voir la classe/le lot (tiré de GitHub) ci-dessous.

  3. Vous pouvez maintenant sélectionner la colonne dans le configurateur de colonnes du mode Liste.

Filtrage des ressources

Lorsqu’une console est utilisée, un cas d’utilisation fréquent est la nécessité pour l’utilisateur de choisir des ressources (par exemple, des pages, des composants, des ressources, etc.). Cela peut prendre la forme d’une liste dans laquelle l’auteur doit sélectionner un élément.

Pour que la liste garde une taille raisonnable et reste pertinente par rapport au cas d’utilisation, un filtre peut être mis en œuvre sous la forme d’un prédicat personnalisé. Voir cet article pour en savoir plus.

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