Comment programmer Touch UI d’AEM grâce au Workflow Wizard ?

Comment programmer Touch UI d’AEM grâce au Workflow Wizard ?

Le but de cet article est de montrer un exemple de personnalisation d’une interface Touch UI AEM de type “Wizard”.

ÉNONCÉ DU PROBLÈME

Le but de cet article est de montrer un exemple de personnalisation d’une interface Touch UI AEM de type “Wizard”. On prend pour exemple l’interface de la page “Create Workflow Wizard” comportant 3 sections (cf image ci-dessous) avec pour comportement fonctionnel :
– Si l’utilisateur clique sur “Sélectionner tout” alors toutes les checkbox de langue sont sélectionnées
– Inversement si l’utilisateur décoche cette case à cocher, toutes les checkbox de langue sont décochées
Nous allons créer une client library custom pour atteindre cet objectif.

 

SOLUTION

Pour ce faire, voici les différentes étapes à suivre :

1. La page de type “Wizard” qui contient les sections :
– Body
– Head

La section Body comporte les onglets de l’assistant intitulés :
1. Propriétés
2. Langues
3. Portée
De plus, c’est dans la section Head que vous trouverez la configuration des bibliothèques « Clientlibs » permettant de spécifier toute nouvelle catégorie de bibliothèque client.

Pour notre cas d’utilisation, nous allons créer une nouvelle client lib comme montré dans l’image ci-dessous. Notez les catégories et dépendances inclues :

– Catégories : com.xxxxx.manageLanguageCheckboxEnableDisable
– Dépendances : granite.jquery
Afin de pointer vers la source et les éléments cible, nous devons marquer les deux, c.à.d. :
– Ajoutez la classe « cq-dialog-checkbox-enabledisable » à la case « Tout sélectionner »

– Pour toutes les cases de langues, nous ajoutons la classe « cq-dialog-checkbox-enabledisable-target »

Maintenant que la source et la cible sont marquées par classes, rajoutez les lignes de code suivantes à la bibliothèque client que nous avons créée plus tôt.

Pour identifier cette nouvelle catégorie clientlib dans la configuration de votre interface Touch UI Wizard personnalisée, rajoutez « com.xxxxx.manageLanguageCheckboxEnableDisable » à la configuration clientlib sous la section Head de la page de l’assistant.

Ceci devrait permettre à votre clic sur le bouton « Tout sélectionner » d’être répliqué sur toutes les cases.

 

Code

(function(document, $) {

    "use strict";

// when dialog gets injected

    $(document).on("foundation-contentloaded", function(e) {

// if there is already an inital value make sure the according target element becomes visible

        enableDisable($(".cq-dialog-checkbox-enabledisable", e.target));

    });

    $(document).on("change", ".cq-dialog-checkbox-enabledisable", function(e) {

        enableDisable($(this));

    });

    function enableDisable(el){

        el.each(function(i, element) {

            if ($(element).attr("type") === "checkbox"){

                if ($(element).prop('checked')){

                    $('.cq-dialog-checkbox-enabledisable-target').enable();

                    $('.cq-dialog-checkbox-enabledisable-target').checkCheckBox();

                } else {

                    $('.cq-dialog-checkbox-enabledisable-target').enable();

                    $('.cq-dialog-checkbox-enabledisable-target').uncheckCheckBox();

                }

            }

        })

    }

    //iterate class cq-dialog-checkbox-enabledisable-target's and enable

    $.prototype.enable = function () {

        $.each(this, function (index, el) {

                el.disabled = false;

        });

    }

    //iterate class cq-dialog-checkbox-enabledisable-target's and disable

    $.prototype.disable = function () {

        $.each(this, function (index, el) {

                el.disabled = true;

        });

    }

    //iterate class cq-dialog-checkbox-enabledisable-target's and uncheck the checkbox

    $.prototype.uncheckCheckBox = function () {

        $.each(this, function (index, el) {

                el.checked = false;

        });

    }

    //iterate class cq-dialog-checkbox-enabledisable-target's and check the checkbox

    $.prototype.checkCheckBox = function () {

        $.each(this, function (index, el) {

                el.checked = true;

        });

    }

})(document,Granite.$);