L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
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:
- Tout d'abord, ouvrez la console CRXDE Lite . http: // localhost: 4502 / crx / de / index.jsp
- Entrez le chemin suivant dans la barre de recherche et appuyez sur Entrée. / libs / settings / dam / cfm / models / formbuilderconfig / datatypes / items
- Cliquez avec le bouton droit sur le nœud items. Cela ouvrira un menu contextuel.
- 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é
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 / . - Allez maintenant dans /apps/settings/dam/cfm/models/formbuilderconfig/datatypes/items[19659027[/19659015)Créezunnœudenfantdanslenœuditemsaveclenom color-picker .
- 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] » - Le sélecteur de couleurs Node xml doit ressembler à ceci
Vous avez maintenant terminé avec la superposition de nœuds et le processus de personnalisation AEM. - 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».
- 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 . « - 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
Une fois que vous avez terminé cliquez sur le bouton Enregistrer . - Allez maintenant dans Menu Démarrer AEM> Navigations> Actifs>
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.
Source link