Proposer des cases à cocher dans une vue liste

Une vue liste dans K2 distingue deux parties, la partie en lecture et la partie en édition (si cette dernière est activée). La partie en lecture ne peut pas présenter de contrôle de saisie (liste déroulante, case à cocher…), il faut forcément passer par la partie en édition (via le bouton “Edit” ou le double clic).  Comme le besoin d’avoir des cases à cocher en mode lecture est un besoin récurrent, voici un billet sur le sujet.

 Cette article est une sorte de hack des smartforms car il repose sur un javascript.

Le principe est très simple, il reprend la fonction sélection multiple d’une vue liste (en standard via la touche “Ctrl” du clavier), et dans notre cas des cases à cocher sont présentées à l’utilisateur. Une fois le mécanisme mis en place, toutes les règles qui utilisent la condition “for selected rows” prendront en compte les lignes dont les cases sont cochées.

Par exemple, pour afficher un message en popup pour toutes les lignes cochées :

  1. Ajoutez une colonne à la vue liste, avec un contrôle data label (propriété literal cochée).etape 1
  2. Définir une expression dans le body de la colonne ajoutée en 1) contenant <label class="checkbox input-control selection-check" onclick="$(this).toggleClass('checked', !$(this).hasClass('checked'))"><span class="input-control-img"></span>etape 1
  3. Ajouter un data label dans l’entête (propriété literal cochée)
  4. Ajouter un bouton (pour faire apparaître les messages)
  5. Définir une règle au clic de ce bouton contenant:
    etape 1

    1. une action transfert data, envoyant la valeur suivante dans le data label de l’entête <script>selectall();function selectall(){$.each($('.selection-check.checked').closest('tr'), function () {$(this).addClass('selected');})}</script>etape 1
    2. la condition “For each item in a List View” : selected rows
    3. l’action à faire (dans notre exemple, “show a message”)

etape 1
Plutôt simple, non ? bon, l’exemple manque un peu d’utilité… mais il n’y a plus qu’un pas pour réaliser des conceptions plus intéressantes ! Par exemple, au lieu d’afficher un message, il est possible d’effectuer n’importe quelle série d’actions (démarrer un sous processus, mettre à jour des données…).

Une des prochaines démonstrations prévue pour le blog, la gestion des demandes d’achat, propose des cases à cocher pour la gestion du panier. L’article sera publié bientôt !

C’est tout pour cette fois, cheers !

benjamin

Technical Specialist @t K2 France ----- Twitter : @benjaminbertram ----- LinkedIn : Benjamin Bertram

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.