Personnaliser la création de pages

AEM s’accompagne de divers mécanismes pour vous permettre de personnaliser la fonctionnalité de création de pages (et les consoles) 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 sous /apps. La nouvelle bibliothèque cliente doit :

  • dépendre de la bibliothèque cliente de création cq.authoring.editor.sites.page ;
  • faire partie de la catégorie cq.authoring.editor.sites.page.hook appropriée.

• 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’une incrustation, aucune copie de l’original au format 1:1 n’est nécessaire, car Sling Resource Merger prend en charge l’héritage.

Ils peuvent être utilisés de différentes manières pour étendre la fonctionnalité de création de pages dans votre instance AEM. Plusieurs sont traités ci-après (à un niveau élevé).

Ajout d’un nouveau calque (mode)

Lorsque vous modifiez une page, plusieurs modes sont disponibles. Ces modes sont implémentés à l’aide de calques. Ils permettent d’accéder à différents types de fonctionnalités pour le même contenu de page. Les calques standard sont les suivants : édition, aperçu, annotation, développeur et ciblage.

Exemple de calque : État de Live Copy

Une instance AEM standard fournit le calque MSM. Elle accède aux données associées à la gestion multisite et les met en évidence dans le calque.

Pour obtenir une démonstration, vous pouvez modifier toute page Copie de langue We.Retail (ou n’importe quelle autre page Live Copy) et sélectionner le mode Statut de Live Copy.

Vous trouverez la définition du calque MSM (pour référence) à l’emplacement suivant :

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

Exemple de code

Il s’agit d’un exemple de module qui montre comment créer un calque (mode), qui est un nouveau calque pour la vue MSM.

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

• Ouvrez le projet aem-authoring-new-layer-mode sur GitHub.
• Téléchargez le projet sous la forme d’un fichier ZIP.

Ajout d’une nouvelle catégorie de sélection à l’explorateur de ressources

L’explorateur de ressources affiche les ressources de différents types/catégories (images, documents, etc.). Les ressources peuvent également être filtrées par ces catégories.

Exemple de code

aem-authoring-extension-assetfinder-flickr est un exemple de module qui montre comment ajouter un nouveau groupe à l’outil de recherche de ressources. Cet exemple se connecte au flux public de Flickr et l’affiche dans le panneau latéral.

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

• Ouvrez le projet aem-authoring-extension-assetfinder-flickr sur GitHub.
• Téléchargez le projet sous la forme d’un fichier ZIP.

Filtrage des ressources

Lors de la création de pages, vous êtes souvent amené à faire une sélection dans des ressources (pages, composants, ressources, etc.). Il peut s’agir, par exemple, d’une liste dans laquelle l’auteur doit choisir un élément.

Pour maintenir la liste à une taille raisonnable et faire en sorte qu’elle soit appropriée au scénario d’utilisation, un filtre peut être implémenté sous la forme d’un prédicat personnalisé. Par exemple, si le composant pathbrowser Granite est utilisé pour permettre à l’utilisateur de sélectionner le chemin d’accès à une ressource spécifique, les chemins d’accès présentés peuvent être filtrés comme suit :

• Mettez en œuvre le prédicat personnalisé en implémentant l’interface com.day.cq.commons.predicate.AbstractNodePredicate.
• Spécifiez un nom pour le prédicat et faites-y référence lors de l’utilisation de pathbrowser.

Pour plus d’informations sur la création d’un prédicat personnalisé, consultez cet article.

Ajout d’une nouvelle action à une barre d’outils de composants

Chaque composant (en règle générale) s’accompagne d’une barre d’outils qui permet d’accéder à un éventail d’actions auxquelles il peut être soumis.

Exemple de code

aem-authoring-extension-toolbar-screenshot est un exemple de module qui montre comment créer une action de barre d’outils personnalisée pour effectuer le rendu de composants.

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

• Ouvrez le projet aem-authoring-extension-toolbar-screenshot sur GitHub.
• Téléchargez le projet sous la forme d’un fichier ZIP.

Ajout d’un nouvel éditeur statique

Éditeur statique standard

Dans une installation AEM standard :

1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

   Conserve les définitions des différents éditeurs disponibles.

2. Il existe un lien entre l’éditeur et chaque type de ressource (comme dans le composant) qui peut l’utiliser :

   • cq:inplaceEditing

     par exemple :

     • /libs/foundation/components/text/cq:editConfig

     • /libs/foundation/components/image/cq:editConfig

       • property : editorType

         Définit le type d’éditeur statique utilisé lorsqu’une édition statique est déclenchée pour ce composant ; par exemple, text, textimage, image, title.

3. Les informations de configuration supplémentaires de l’éditeur peuvent être définies à l’aide d’un nœud config contenant des configurations, ainsi qu’un nœud plugin additionnel pour contenir les informations nécessaires à la configuration du module externe.

   Voici un exemple de définition des proportions pour le module externe de recadrage d’image du composant d’image. Notez que, dans la mesure où la taille d’écran peut être très limitée, les proportions de recadrage ont été déplacées vers l’éditeur plein écran et ne sont visibles qu’à cet endroit.

   <cq:inplaceEditing
           jcr:primaryType="cq:InplaceEditingConfig"
           active="{Boolean}true"
           editorType="image">
           <config jcr:primaryType="nt:unstructured">
               <plugins jcr:primaryType="nt:unstructured">
                   <crop jcr:primaryType="nt:unstructured">
                       <aspectRatios jcr:primaryType="nt:unstructured">
                           <_x0031_6-10
                               jcr:primaryType="nt:unstructured"
                               name="16 : 10"
                               ratio="0.625"/>
                       </aspectRatios>
                   </crop>
               </plugins>
           </config>
   </cq:inplaceEditing>
   

   ATTENTION

   Nous attirons également votre attention sur le fait que, dans AEM, les rapports de recadrage, tels qu’ils sont définis par la propriété ratio, sont définis sous la forme hauteur/largeur. Cela diffère de la définition conventionnelle de la largeur/hauteur. Cette différence a été créée pour des raisons de compatibilité héritée. Les utilisateurs chargés de la création ne percevront aucune différence, à condition que vous définissiez clairement la propriété name, car c’est cette dernière qui s’affiche dans l’interface utilisateur.

Création d’un éditeur statique

Pour mettre en œuvre un nouvel éditeur statique (au sein de votre bibliothèque cliente) :

1. Implémentez les éléments suivants :

   • setUp
   • tearDown

2. Enregistrez l’éditeur (comprend le constructeur) :

   • editor.register

3. Fournissez la connexion entre l’éditeur et chaque type de ressource (comme dans le composant) qui peut l’utiliser.

Exemple de code pour créer un éditeur statique

aem-authoring-extension-inplace-editor est un exemple de module qui montre comment créer un éditeur statique dans AEM.

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

• Ouvrez le projet aem-authoring-extension-inplace-editor sur GitHub.
• Téléchargez le projet sous la forme d’un fichier ZIP.

Configurer plusieurs éditeurs statiques

Il est possible de configurer un composant afin qu’il comporte plusieurs éditeurs statiques. Lorsque plusieurs éditeurs statiques sont configurés, vous pouvez sélectionner le contenu approprié et ouvrir l’éditeur adéquat. Pour plus d’informations, consultez Configuration de plusieurs éditeurs statiques.

Ajout d’une nouvelle action de page

Vous pouvez ajouter une action de page à la barre d’outils de la page ; Retour aux sites (console), par exemple.

Exemple de code

aem-authoring-extension-header-backtosites est un exemple de module qui montre comment créer une action de barre d’en-tête personnalisée pour revenir à la console Sites.

CODE SUR GITHUB

Vous pouvez trouver le code de cette page sur GitHub.

• Ouvrez le projet aem-authoring-extension-header-backtosites sur GitHub.
• Téléchargez le projet sous la forme d’un fichier ZIP.

Personnalisation du workflow Demander l’activation

Le workflow d’usine, Demande d’activation :

• apparaît automatiquement dans le menu approprié lorsqu’un auteur de contenu n’a pas les droits de réplication appropriés, mais dispose de l’abonnement des utilisateurs et auteurs de la gestion des ressources numériques ;

• sinon, rien ne s’affichera, car les droits de réplication ont été supprimés.

Pour bénéficier d’un comportement personnalisé lors d’une telle activation, vous pouvez incruster le workflow Demander l’activation :

1. Dans /apps, recouvrez l’assistant Sites :

   /libs/wcm/core/content/common/managepublicationwizard

   REMARQUE

   Cela a pour effet de remplacer l’instance commune de :

   /libs/cq/gui/content/common/managepublicationwizard

2. Mettez à jour le modèle de workflow et les configurations/scripts associés suivant les besoins.

3. Retirez, à tous les utilisateurs appropriés, le droit dont ils bénéficient sur l’action replicate pour l’ensemble des pages pertinentes ; pour faire en sorte que ce workflow se déclenche comme une action par défaut lorsque l’un des utilisateurs tente de publier (ou de répliquer) une page.

Ressources Business.Adobe.com

Multichannel Communication Ecommerce Integrations Customer Communications Responsive Forms Document Generation Headless Cms