septembre 26, 2020

Widget de commande de granit AEM simple (liste déplaçable)

Récemment, nous avons eu besoin d'une expérience de création où un auteur peut réorganiser une liste d'onglets fixes dans l'ordre souhaité. Le seul widget Granite qui permet de classer par glisser-déposer est le multi-champs, mais nous n'avons pas besoin d'un multi-champs, nous voulions juste la possibilité d'ordonner une liste fixe. Widget Draggable Lists mais je ne voulais pas inclure ACS commons juste pour ce widget. De plus, j'ai regardé l'implémentation de ce widget et cela m'a semblé complexe étant donné qu'il pourrait résoudre un problème différent. Il a également utilisé Coral UI 2; nous sommes sur AEM 6.4 où Coral UI 3 est la dernière version de Coral.

Une solution simple

Si vous regardez la documentation de Coral UI 3 le seul composant qui permet la commande glisser-déposer est le composant Coral.Table . Ce qui signifie que nous pouvons créer un widget Granite qui utilise cette interface utilisateur pour afficher une liste! des consommateurs prospèrent à une époque de contenu infini. Découvrez comment créer des expériences fluides pour vos clients omnicanaux.

Obtenir le guide

Voici le widget JSP impl: (Java 8)

pour les besoins de cet article, j'ai créé /apps/widgets/orderedList/orderedList.jsp

Ici, je rend chaque élément de la liste comme un champ caché avec le même «nom».
L'ordre des champs cachés dans le HTML est ce qui détermine l'ordre enregistré dans le nœud / prop de contenu JCR.
Cela signifie également que nous n'avons besoin d'aucun JS personnalisé pour que cela fonctionne! juste le composant de table OOTB CUI3!



 <%
  if (! cmp.getRenderCondition (ressource, faux) .check ()) {
    revenir;
  }
  Tag tag = cmp.consumeTag ();
  AttrBuilder attrs = tag.getAttrs ();
  attrs.addClass ("puits de corail");
  cmp.populateCommonAttrs (attrs);
  Config cfg = cmp.getConfig ();
  String title = cfg.get ("titre", String.class);
  String name = cfg.get ("nom", String.class);
  
  // le moyen le plus simple de le faire ...
  Chaîne cleanName =
    nom! = null
    ? nom.replace (".", "") .replace ("/", "")
    : "";
  String tableId = "order-table-" + cleanName;
  String hiddenInputId = "order-input-" + cleanName;

  String [] values = cmp.getValue (). GetContentValue (nom, nouvelle chaîne [0]);
  List  valuesList = Arrays.asList (valeurs);
  Iterator  itemsIterator = cmp.getItemDataSource (). Iterator ();
  
  // classement des valeurs côté serveur en fonction de la commande déjà enregistrée
  List  items = StreamSupport.stream (
      Spliterators.spliteratorUnknownSize (itemsIterator, Spliterator.ORDERED),
      faux
    ). trié (
      Comparator.comparing (élément -> {
        ValueMap vm = (élément (Ressource)) .getValueMap ();
        Chaîne val = vm.get ("valeur", "");
        renvoie valuesList! = null? valuesList.indexOf (val): 0;
      })
    ) .map (Ressource :: getValueMap)
    .collect (Collectors.toList ());
%>
<div >
  <table is = "coral-table" orderable id = "">
    
      
      
    
    
      
        
        
      
    
    
      
        
          
            
             <input type = "hidden" name = "" value = "" />

Voici un exemple de dialogue XML utilisant ce widget: