Personnalisation d'AEM: Afficher l'alerte de référence non publiée pour Tagpicker

Récemment, j'ai publié un article de blog concernant AEM Customization: Show Unpublished Reference Alert for Content Path où j'ai montré comment personnaliser le Pathfield et Xffield resourceType . Ce faisant, j'ai pu montrer comment créer une notification à l'auteur du contenu pour savoir si le chemin du contenu sélectionné est publié ou non. J'ai trouvé que c'était une fonctionnalité utile pour l'un de nos clients lors de la création d'un certain nombre de pages de contenu AEM. Après la livraison réussie de cette fonctionnalité, le client a demandé que nous implémentions un type similaire de fonctionnalité en sélectionnant Balises AEM dans cq: dialog.

Malheureusement, AEM n'a pas la fonctionnalité OOTB pour afficher les notifications non publiées pour les balises AEM sélectionnées lors de la création des composants. Dans ce blog, je vais vous montrer comment vous pouvez étendre les fonctionnalités de tagspicker resourceType pour afficher les alertes de référence non publiées lors de la sélection des balises AEM.

Étapes pour étendre les fonctionnalités de tagspicker resourceType.

1. Premièrement , ouvrez la console CRXDE Lite ie http: // localhost: 4502 / crx / de / index.jsp
2. Créez un nœud nommé clientlibs avec les propriétés suivantes. Ensuite, créez un dossier nommé js dans le nœud clientlibs et également un fichier nommé js.txt .

   La structure doit ressembler à ceci:

3. Maintenant, créez un fichier nommé unpublished-reference-alert-for-tags.js inside / clientlibs / js et collez le script suivant:

    (fonction ($, fenêtre) {
       // cq: validation du chemin de balise uniquement pour cq: dialog
       // Tagfield: cq / gui / components / common / tagspicker
       $ (window) .adaptTo ("foundation-registry"). register ("foundation.validation.validator", {
           sélecteur: ".js-cq-TagsPickerField .js-coral-pathbrowser-input",
           valider: fonction (élément) {
               var tagPath = element.value;
               if (tagPath! == '' && tagPath! = null) {
                   checkReplicationStatus (tagPath);
               }
           }
       });
   
       // Vérifie quand la boîte de dialogue corail-Pathbrowser-picker est ouverte.
       $ (document) .on ("clic", ".coral-ColumnView-item.is-active", function () {
           var selectedPath = $ (this) .data ("valeur");
           checkReplicationStatus (selectedPath);
       });
   
       // Vérifier l'état de réplication de la balise sélectionnée.
       function checkReplicationStatus (tagPath) {
           const CONTENT_PATH_PREFIX = "/ content / cq: tags /";
           const INFINITY_JSON = ".infinity.json";
           const CQ_LAST_REPLICATION_ACTION = "cq: lastReplicationAction";
           const ACTIVATE = "Activer";
           if (tagPath.indexOf (CONTENT_PATH_PREFIX)! == -1) {
               var tagPathUrl = tagPath.concat (INFINITY_JSON);
               $ .getJSON (tagPathUrl)
                   .done (fonction (données) {
                       var lastReplicationAction = données [CQ_LAST_REPLICATION_ACTION];
                       if (lastReplicationAction! == ACTIVATE) {
                           var message = "Vous avez sélectionné une balise non publiée:" + tagPath.bold ();
                            $ (window) .adaptTo ("foundation-ui"). notify ('', message, 'notice');
                       }
                   });
           }
       }
   }) ($, window); 

4. Ensuite, modifiez le fichier js.txt comme suit:

Une fois que vous avez terminé avec tout les étapes mentionnées ci-dessus, votre prochaine étape consiste à tester la fonctionnalité de tagpicker resourceType.

The Digital Essentials, Part 3

Développer une stratégie numérique robuste est à la fois un défi et un opportunité. La troisième partie de la série Digital Essentials explore cinq des expériences technologiques essentielles auxquelles les clients s'attendent, que vous pourriez manquer ou ne pas utiliser pleinement.

Obtenir le guide

Vous pouvez accéder à n'importe quelle page et y faire glisser / ajouter des composants un conteneur de mise en page dont cq: dialog a le champ tagpicker . Sélectionnez une balise qui n'a pas encore été publiée. À des fins de test, vous pouvez créer une nouvelle balise.

Lors de la création du composant, vous obtiendrez le résultat suivant:

Pour m'assurer que cela aiderait, j'ai testé cette fonctionnalité étendue sur AEM 6.5 . Cela ne fonctionnera que pour cq / gui / components / common / tagspicker resourceType.

Téléchargez ce package pour référence, et n'oubliez pas de laisser un commentaire si vous avez besoin plus d'aide à ce sujet. Au cas où vous auriez manqué mon blog précédent, veuillez visiter Personnalisation AEM: Afficher l'alerte de référence non publiée pour le chemin du contenu.

À propos de l'auteur <! -: skamdi, Consultant technique -> [19659047] 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