Personnaliser la création de pages customizing-page-authoring

Adobe Experience Manager as a Cloud Service fournit des mécanismes permettant de personnaliser la fonctionnalité de création de pages (et les consoles) de votre instance de création.

Clientlibs clientlibs

Les bibliothèques côté client vous permettent d’étendre l’implémentation par défaut pour activer 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 :

Voir Utilisation de bibliothèques côté client sur AEM as a Cloud Service.

Recouvrements overlays

Les superpositions sont basées sur des définitions de noeud et vous permettent de superposer la fonctionnalité standard dans /libs avec votre propre fonctionnalité personnalisée dans /apps.

Lors de la création d’une superposition, une copie 1:1 de l’original n’est pas nécessaire, car sling resource merge permet l’héritage.

Pour plus d’informations, voir le ensemble de documentation JS.

Pour plus d’informations sur les incrustations, voir Recouvrements pour Adobe Experience Manager as a Cloud Service.

Ajouter un nouveau calque (mode) add-new-layer-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 modes d’AEM standard incluent Modifier, Disposition, Développeur, Timewarp, État de Live Copy et Ciblage.

Exemple de calque : statut de Live Copy layer-example-live-copy-status

Une instance AEM standard fournit la couche MSM. Cela permet d’accéder aux données relatives à la gestion multisite et de les mettre en évidence dans le calque.

Pour l’afficher en action, vous pouvez modifier n’importe quelle copie de langue dans l’ exemple de contenu WKND et sélectionner le mode État 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 code-sample

Il s’agit d’un exemple de package montrant comment créer un calque (mode) pour la vue MSM.

Vous trouverez le code de cette page sur GitHub.

Ajouter une nouvelle catégorie de sélection à l’explorateur de ressources add-new-selection-category-to-asset-browser

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

Exemple de code code-sample-1

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

Vous trouverez le code de cette page sur GitHub.

Filtrer les ressources filtering-resources

Lors de la création de pages, l’utilisateur doit souvent effectuer une sélection dans les ressources d’une liste.

Pour maintenir la liste à une taille raisonnable et adaptée au cas d’utilisation, un filtre peut être mis en œuvre sous la forme d’un prédicat personnalisé. Par exemple, si le composant Granite pathbrowser est utilisé pour permettre à l’utilisateur de sélectionner le chemin d’accès à une ressource particulière, les chemins d’accès présentés peuvent être filtrés comme suit :

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

Ajouter une nouvelle action à une barre d’outils de composant add-new-action-to-a-component-toolbar

Chaque composant dispose généralement d’une barre d’outils qui permet d’accéder à un éventail d’actions pouvant être entreprises sur ce composant.

Exemple de code code-sample-2

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

Vous trouverez le code de cette page sur GitHub.

Ajouter un nouvel éditeur statique add-new-in-place-editor

Éditeur statique standard standard-in-place-editor

Dans une installation AEM standard :

Voici un exemple de définition des proportions pour le module externe de recadrage d’image du composant image.

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

Création d’un éditeur statique creating-a-new-in-place-editor

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

Exemple de code pour la création d’un éditeur statique code-sample-for-creating-a-new-in-place-editor

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

Vous trouverez le code de cette page sur GitHub.

Ajouter une nouvelle action de page add-a-new-page-action

Pour ajouter une nouvelle action de page à la barre d’outils de la page, par exemple une action Retour à Sites (console).

Exemple de code code-sample-3

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

Vous trouverez le code de cette page sur GitHub.

Personnalisation du workflow Demander l’activation customizing-the-request-for-activation-workflow

Le workflow d’usine, Demande d’activation  :

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