Fermer

octobre 20, 2020

Ajout d'un sélecteur de couleurs à l'éditeur de modèle de fragment de contenu AEM


Récemment, l'un de nos clients a cherché à ajouter un champ personnalisé dans l'éditeur de modèle de fragment de contenu d'Adobe Experience Manager (AEM). Si vous vous demandez ce que sont les fragments de contenu AEM, consultez le post de Dan Klco car il fait un excellent travail pour l'expliquer.

Les modèles de fragments de contenu sont construits avec des éléments de divers out-of- les types de données de la boîte, y compris le texte sur une seule ligne, le texte sur plusieurs lignes, le nombre, le booléen (uniquement pour les cases à cocher), la date / heure, l'énumération (uniquement pour les valeurs de liste déroulante statique), les balises et la référence de contenu.

Ajout d'un Champ personnalisé de l'éditeur de modèle de fragment de contenu AEM

Après avoir étudié la structure de la configuration du générateur de formulaire Modèle de fragment de contenu dans CRXDE, j'ai trouvé que nous pouvons facilement ajouter la plupart des autres types de données (il existe certaines restrictions pour quelques types de données). Pour étendre et personnaliser cette configuration de générateur de formulaire de l'éditeur de modèle de fragment de contenu, nous devons superposer la ressource de générateur de formulaire Fragment de contenu.

Dans le cas de notre client, nous devions définir l'exigence d'ajouter le champ Sélecteur de couleurs dans le Modèle de fragment de contenu dans AEM 6.5 . Dans cet article, je vais vous montrer comment étendu la fonctionnalité du modèle de fragment de contenu pour définir le type de données Color Picker.

Comment définir le type de données Color Picker:

  1. Tout d'abord, ouvrez la console CRXDE Lite . http: // localhost: 4502 / crx / de / index.jsp
  2. Entrez le chemin suivant dans la barre de recherche et appuyez sur Entrée. / libs / settings / dam / cfm / models / formbuilderconfig / datatypes / items
  3. Cliquez avec le bouton droit sur le nœud items. Cela ouvrira un menu contextuel.
  4. Cliquez sur Overlay Node Option dans le menu contextuel. Cela ouvrira une autre boîte de dialogue de modèle. Cliquez ensuite sur sélectionnez l'option Match Node Types. Assurez-vous que la boîte de dialogue du modèle contient les valeurs suivantes.
    Chemin: / libs / settings / dam / cfm / models / formbuilderconfig / datatypes / items
    Emplacement de la superposition: / apps /
    Correspondance des types de nœuds: coché  Sk Content Fragment Formbuilder Après avoir vérifié les propriétés et valeurs ci-dessus, cliquez sur "OK". Cela superposera l'emplacement du chemin / libs / settings / dam / cfm / models / formbuilderconfig / datatypes / items dans le dossier / apps / .
  5. Allez maintenant dans /apps/settings/dam/cfm/models/formbuilderconfig/datatypes/items[19659027[/19659015)Créezunnœudenfantdanslenœuditemsaveclenom color-picker .
  6. Définissez ce qui suit properties sur le nœud / apps / settings / dam / cfm / models / formbuilderconfig / datatypes / items / color-picker .
    fieldIcon (String) = ”colorPalette”
    fieldProperties (String []) = ”[labelfield,maptopropertyfield,placeholderfield,textvaluefield,requiredfield]”
    fieldPropResourceType (String) = ”dam / cfm / models / editor / components / types de données / champ "
    fieldResourceType (String []) =" [granite/ui/components/coral/foundation/form/colorfield] "
    fieldTitle (String) =" Color Picker "
    listOrder (Str ing) = ”9 ″
    renderType (String) =” text ”
    valueType (String []) =” [string] »
  7. Le sélecteur de couleurs Node xml doit ressembler à ceci
    
    
    
    
    
    

     Superposition de nœuds Sk CF Formbuilder Vous avez maintenant terminé avec la superposition de nœuds et le processus de personnalisation AEM.

  8. Afin de voir les changements, nous devons créer une configuration pour le modèle de fragment de contenu. Accédez à Menu Démarrer d'AEM> Outils> Général> Navigateur de configuration et créez une configuration pour le modèle de fragment de contenu. Vous pouvez également utiliser la configuration globale OOTB si vous ne souhaitez pas créer de configuration personnalisée (cela dépend de vos besoins). Ici, j'utilise la configuration AEM OOTB avec le nom «Global».
  9. Une fois que vous avez terminé les étapes de configuration, accédez à Menu Démarrer d'AEM> Outils> Actifs> Modèle de fragment de contenu> Global (ou accédez à votre configuration personnalisée).
    Ensuite, créez un nouveau modèle de fragment de contenu personnalisé (dans ce cas, j'ai créé un modèle avec le nom « Color Picker CFM ») et cliquez sur ouvert. Maintenant, jetez un œil aux types de données dans la barre latérale. Là, vous verrez un nouveau type de données apparaît avec le nom « Color Picker . «
  10. Pour créer votre modèle de fragment de contenu personnalisé, faites glisser et déposez les données du sélecteur de couleurs tapez dans le bloc éditeur, et définissez certaines propriétés sur le champ de sélection de couleurs . J'ai défini les propriétés suivantes:
    Étiquette de champ: Définir la couleur
    Nom de la propriété: color  Sk Cf Model Editor Une fois que vous avez terminé cliquez sur le bouton Enregistrer .
  11. Allez maintenant dans Menu Démarrer AEM> Navigations> Actifs> et créez un fragment de contenu en utilisant le modèle Color Picker CFM . Une fois créé, cliquez sur le bouton Ouvrir. Vous remarquerez que le fragment de contenu a le champ de sélection de couleur avec l'étiquette « Définir la couleur. » Vous pouvez maintenant sélectionner n'importe quelle couleur prédéfinie dans la palette de couleurs, ou vous pouvez créer votre propre couleur à l'aide d'un mélangeur de couleurs. [19659075] Sk Cf avec le type de données Color Picker  » width= »1920″ height= »707″ srcset= »https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?w=1920&ssl=1 1920w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=300%2C110&ssl=1 300w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=1024%2C377&ssl=1 1024w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=768%2C283&ssl=1 768w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=500%2C184&ssl=1 500w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=800%2C295&ssl=1 800w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=1280%2C471&ssl=1 1280w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=1536%2C566&ssl=1 1536w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=750%2C276&ssl=1 750w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=600%2C221&ssl=1 600w, https://i1.wp.com/blogs.perficient.com/files/SK_CF_WITH_COLOR_PICKER_DATA_TYPE.png?resize=640%2C236&ssl=1 640w » sizes= »(max-width: 1000px) 100vw, 1000px » data-recalc-dims= »1″/>

    Vous pouvez utiliser ces mêmes étapes pour étendre les fonctionnalités du modèle de fragment de contenu chaque fois que vous obtenez une telle exigence pour d'autres types de données également!

    Télécharger ce paquet pour référence, et n'oubliez pas de laisser un commentaire si vous avez besoin d'aide supplémentaire à ce sujet.

    À propos de l'auteur <! -: skamdi, Consultant technique – ->

    Suraj est un MVP Adobe et un membre actif de la communauté Adobe Experience Manager. Il est certifié Adobe – Développeur de sites Adobe Experience Manager et ingénieur DevOps. Il détient également la certification Scum alliance en Scrum Master (CSM®) et Scrum Developer (CSD®).

    Plus de cet auteur






Source link