Comment ? / How To ?

Comment afficher les Smart Fields de manière conditionnelle ?

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement savoir :

Présentation de la Smart Structure LIVRAISON

Nous allons ici créer une Smart Structure LIVRAISON qui définit des informations de livraison de repas.

Comme dans le How-To de création de Smart Structures, lancer la commande :

npx @anakeen/anakeen-cli createSmartStructure --sourcePath . --name LIVRAISON

Rendons-nous donc dans le fichier de configuration de la SmartStructure LIVRAISON :

src/vendor/Cogip/Restauratec/SmartStructures/Livraison/100-LivraisonStructure.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<smart:config xmlns:smart="https://platform.anakeen.com/4/schemas/smart/1.0">
    <smart:structure-configuration name="LIVRAISON" label="Livraison">
        <smart:icon file="livraison.png" />
        <smart:class>Cogip\Restauratec\SmartStructures\Livraison\LivraisonBehavior</smart:class>
        <smart:fields>
            <smart:field-set name="livraison_frame" type="frame" label="Informations de la livraison" access="ReadWrite">
                <smart:field-text name="livraison_client_nom" label="Nom du client"  access="ReadWrite" />
                <smart:field-text name="livraison_client_prenom" label="Prénom du client"  access="ReadWrite" />
                <smart:field-text name="livraison_ref" label="Référence de la commande"  access="ReadWrite" />
                <smart:field-text name="livraison_adresse" label="Adresse de livraison"  access="ReadWrite" />
                <smart:field-enum name="livraison_adresse_identique" label=" Adresse de facturation identique ?" access="ReadWrite" relation="Admin_Param_TrueFalse" />
                <smart:field-text name="livraison_adresse_facturation" label="Adresse de facturation" access="ReadWrite" />
                <smart:field-set name="livraison_composition" type="array" access="ReadWrite" label="Composition de la commande">
                    <smart:field-docid access="ReadWrite" name="livraison_menu" label="Menu" relation="MENU"/>
                </smart:field-set>
                <smart:field-money name="livraison_frais" access="Read" label="Frais de la livraison (€)"/>
            </smart:field-set>
        </smart:fields>
        <smart:hooks />
    </smart:structure-configuration>
</smart:config>

Comment déclencher du code JavaScript au changement de valeur d’un Smart Element ?

On souhaite que le champ d’adresse de facturation ne s’affiche en modification uniquement lorsque le champ Adresse de facturation identique ? est à false. Pour cela nous allons injecter du code JavaScript dans le formulaire de livraison en édition.

Modifier la classe de rendu en modification de la SMart Structure LIVRAISON :

src/vendor/Cogip/Restauratec/SmartStructures/Livraison/Render/LivraisonEditRender.php

<?php

namespace Cogip\Restauratec\SmartStructures\Livraison\Render;

class LivraisonEditRender extends \Anakeen\Ui\DefaultConfigEditRender
{

    /**
     * @param \Anakeen\Core\Internal\SmartElement|null $document
     * @return array
     */
    public function getJsReferences(\Anakeen\Core\Internal\SmartElement $document = null): array
    {
        $jsRefs =  parent::getJsReferences($document);
        $jsRefs['livraisonEdit'] = new \Anakeen\Ui\JsAssetReference("/livraisonEdit.js");
        return $jsRefs;
    }

}

L’événement smartFieldChange est déclenché à chaque fois qu’un Smart Field est modifié et peut être écouté au moyen de la méthode addEventListener.

Recommandations

Si vous n’êtes pas familier avec l’événement smartFieldChange, il est recommandé de lire la documentation associée disponible ici

Créer le fichier src/public/livraisonEdit.js :

window.ank.smartElement.globalController.registerFunction("livraisonEdit", (controller) => {
  controller.addEventListener(
    "smartFieldChange",
    {
      check: (documentObject) => "edit" === documentObject.renderMode,
      smartFieldCheck: (attributeObject) => attributeObject.id === "livraison_adresse_identique",
    },
    function eventButtonView(event, documentObject, attributeObject, values) {
      if (values.current.value == "FALSE") {
        controller.hideSmartField("livraison_adresse_facturation");
      } else {
        controller.showSmartField("livraison_adresse_facturation");
      }
    }
  );
});

Vous pouvez maintenant déployer vos modifications :

npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall

Et voir le résultat sur une livraison en création ou modification :

http://localhost:8080/api/v2/smart-elements/LIVRAISON/views/!defaultCreation.html

addJSConditionSF

Et ensuite ?

Comment ajouter des contraintes sur des Smart Fields du formulaires lors de la saisie ?