Comment ajouter un bouton d’action personnalisé au menu de la barre d’action d’AEM Assets

Récemment, un client nous a contacté pour nous demander de mettre à jour les données des éléments de fragment de contenu, les métadonnées des actifs et les métadonnées des dossiers via une API basée sur Azure. Notre solution initiale consistait à implémenter un script JMX, qui pouvait être démarré par un groupe d’utilisateurs administrateur avec des paramètres valides. Cependant, il s’agissait d’une solution plutôt limitée, car les auteurs AEM normaux ne disposaient pas des autorisations nécessaires pour effectuer ces opérations.

Pour résoudre ce problème, le client nous a demandé de fournir un bouton d’action personnalisé dans le menu des ressources AEM. Ce bouton permettrait aux auteurs AEM autorisés à modifier les métadonnées des actifs AEM de mettre à jour les actifs AEM en déclenchant le bouton d’action pour les actifs AEM sélectionnés. Cette implémentation personnalisée s’est avérée très utile pour le client, car il pouvait facilement accéder au menu AEM Assets et déclencher le bouton d’action personnalisé.

AEM Asset – Aperçu du bouton d’action personnalisé

Cet article de blog expliquera comment nous avons implémenté ce bouton d’action personnalisé.

Superposer le nœud

1. Aller chez AEM CRXDE.
2. Sauter sur /libs/dam/gui/content/assets/jcr:content/actions/selection Chemin
3. Cliquez avec le bouton droit sur le nœud Sélection et sélectionnez le Nœud de superposition dans le menu contextuel.
   

   AEM – Menu contextuel du nœud de superposition

   

   AEM – Configuration du nœud de superposition

4. Assurez-vous que le Emplacement de superposition est sous /applications/ dossier, et le Faire correspondre les types de nœuds l’option devrait être vérifié.
5. Cela ressemblera à ceci.
   

   AEM – Emplacement du chemin de superposition dans CRDEX

Ajouter un nœud de barre d’action personnalisée

Pour ajouter un bouton d’action personnalisé dans le menu Action, nous devons créer un nœud enfant de barre d’action sous Sélection maintenant. Faisons cela!

1. Créez un nœud nommé action personnalisée-btn (vous pouvez mettre n’importe quel nom ici) et définir les propriétés suivantes sur un nœud.
   

   AEM CRXDE – Nœud de bouton d’action personnalisé

   Format XML

   <custom-action-btn
       granite:class="foundation-collection-action suraj-custom-action-btn"
       jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/coral/foundation/collection/action"
       activeSelectionCount="single"
       icon="refresh"
       text="Refresh Asset Data"
       title="Refresh Asset Data"
       variant="actionBar">
       <granite:rendercondition
           jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/coral/foundation/renderconditions/and">
           <haspermission
               jcr:primaryType="nt:unstructured"
               sling:resourceType="dam/gui/coral/components/commons/renderconditions/haspermissions"
               path="${requestPathInfo.suffix}"
               privileges="[modify_property]"/>
       </granite:rendercondition>
   </custom-action-btn>
   

2. Vous pouvez également définir granit:état du rendu si vous souhaitez gérer des scénarios spécifiques afin d’afficher ce bouton d’action personnalisé (exemple Fourni dans le code ci-dessus pour afficher ce bouton d’action à l’utilisateur AEM qui a modifier_propriété autorisation)

nous en avons fini avec la partie superposition. L’étape suivante consiste à écrire une action personnalisée à l’aide d’un appel Ajax, ou bien vous pouvez également utiliser des assistants personnalisés pour effectuer n’importe quelle opération à l’aide de ce bouton d’action. Mais ici, je vais gérer des actions personnalisées à l’aide d’appels Ajax.

Pour afficher le bouton d’action dans des conditions spécifiques, considérons que le bouton d’action ne doit s’afficher que lorsque l’auteur d’AEM sélectionne le fragment de contenu ; dans ce cas, nous devons écrire un code JS personnalisé pour activer et désactiver la visibilité du bouton d’action.

Créez un fichier JS dans le dossier de la bibliothèque client en spécifiant clientlib catégories comme barrage.gui.actions.coral

• Éditeur d’actifs-action-btn-visibility.js

  (function(document, $) {
      "use strict";
  
      //initially hide the refressh asset button
      $(document).trigger("foundation-contentloaded");
      $(".suraj-custom-action-btn").addClass("foundation-collection-action-hidden");
  
      // hide/show refressh asset btn when author select CF asset.
      $(document).on("foundation-selections-change", ".foundation-collection", function(e) {
          let view = $("body").data("shell-collectionpage-view-layoutid");
          if (view === "list" || view === "column") {
              let selectedItem = $(this).find(".foundation-collection-item.foundation-selections-item");
              let itemType = $(selectedItem).data("editorkey");
              if (itemType?.trim() === "contentfragment") {
                  var contentFragmentPath = $(selectedItem).data("foundation-collection-item-id");
                  if(contentFragmentPath.includes("/sample-cf/")){
                      $(".suraj-custom-action-btn").removeClass("foundation-collection-action-hidden");
                  }
              }
          } else if (view === "card") {
              let selectedItem = $(this).find(".foundation-collection-item.foundation-selections-item");
              let itemType = $(selectedItem).find("[data-editorkey]").data("editorkey");
              if (itemType?.trim() === "contentfragment") {
                  var contentFragmentPath = $(selectedItem).data("foundation-collection-item-id");
                  if(contentFragmentPath.includes("/projects/")){
                      $(".suraj-custom-action-btn").removeClass("foundation-collection-action-hidden");
                  }
              }
          }
      });
  })(document, Granite.$);
  

  Créez maintenant un autre fichier JS pour gérer l’action personnalisée lorsque l’auteur déclenche le bouton d’action personnalisée.

• Déclencheur-personnalisé-action-btn.js

  (function(document, $) {
      "use strict";
  
      // On click of Refresh Asset button update the selected CF
      $(document).on("click", ".foundation-collection-action.suraj-custom-action-btn", function(e) {
          let selectedElements = $(".foundation-collection-item.foundation-selections-item.is-selected");
          var items = [];
          $(selectedElements).each(function(e) {
              let data = $(this).data("foundation-collection-item-id");
              items.push(data);
          });
          let message = "<h3>Updating data for following Selected CF</h3>" + items.toString().replaceAll(",", "<br>");
          //Show wait ticker untill response is received from ajax call.
          const $UI = $(window).adaptTo("foundation-ui");
          var $waitTicker = $UI.waitTicker("Updating Asset", message);
  
          // Ajax to update selected CF.
          $.ajax({
              type: 'POST',
              url: '<Enter servlet path or API Path which will return the JSON output>',
              data: JSON.stringify(items),
              contentType: "application/json",
              dataType: "json",
              success: function(response) {
                  if (response.status === 200) {
               // do some additional stuff with response as per requirement.
                      $UI.alert("Success", response.message, "success");
                      $waitTicker.clear();
                  } else {
                      $UI.alert("Error", "Failed to update selected Content Fragments", "error");
                      $waitTicker.clear();
                  }
              },
              error: function() {
                  $UI.alert("Error", "Failed to update selected Content Fragments", "error");
                  $waitTicker.clear();
              }
          });
      });
  })(document, Granite.$);
  

  Incluez les deux fichiers JS dans le js.txt fichier de votre dossier bibliothèque client.

Nous en avons terminé avec la partie mise en œuvre. Allez maintenant dans le dossier Asset et sélectionnez n’importe quel fragment de contenu. Le bouton d’action nommé Actualiser l’élément de données d’actif apparaît dans la barre d’action supérieure. Navigation dans le menu. Clique le Actualiser les données de l’actif pour voir la fenêtre contextuelle suivante pour déclencher l’action !

AEM – Sortie finale du bouton d’action personnalisé

Consultez mes blogs compétents liés à Adobe AEM ici…