Élément de formulaire personnalisé vers Optimizely CMS qui prend en charge les dépendances

Optimizely CMS est livré avec un package appelé Episerver.Forms qui vous permet d’incorporer des formulaires faciles à créer dans un site Web CMS. Il existe un conteneur de formulaire intégré qui prend en charge les éléments de formulaire intégrés standard tels que les champs de saisie, les cases à cocher, les boutons radio, les listes de sélection, les boutons, etc. Et comme toute autre fonctionnalité, les formulaires Episerver sont également dotés de la capacité de personnalisation, où vous pouvez personnaliser éléments existants, ou en créer de nouveaux et plus encore.

Dans cet article, nous parlerons de l’ajout d’un élément de formulaire personnalisé à Optimizely CMS qui prend en charge les dépendances.

Que sont les dépendances dans Forms ?

Dépendances sont essentiellement un groupe de propriétés ajoutées aux éléments de formulaire sous un onglet, qui permettent aux utilisateurs de rendre cet élément dépendant d’autres éléments en fonction de critères. Prêt à l’emploi, cela permet d’afficher/masquer des éléments basés sur d’autres éléments et s’applique aux éléments suivants : Choix des images, Nombre, Gamme, Sélection, Zone de texte, Texte, URL, Téléchargement de fichierset Choix multiple ou unique, Texte riche et le bouton Soumettre.

Et si nous ajoutions un élément de formulaire personnalisé à notre implémentation et lui appliquions la même logique de dépendances ?

Eh bien, il existe un moyen d’y parvenir. Les propriétés qui prennent en charge les dépendances proviennent d’une autre interface appelée IMultipleConditionsElementDependant. Donc, pour commencer, vous devez que votre élément de formulaire personnalisé en hérite.

Une fois que vous avez implémenté cette interface, vous verrez la liste des propriétés :

Désormais, cette étape garantira que vous obtenez l’onglet et les propriétés de l’élément et que vous pourrez définir les bons critères de dépendance pour celui-ci.

Mais est-ce suffisant pour que cela fonctionne ?

Pas assez. Le contrôle de dépendance est comme un contrôle de validation, qui se produit lorsque vous effectuez un appel pouvant déclencher la validation de cet élément.

Ainsi, dans la vue de ce formulaire personnalisé, vous devez appeler une méthode d’assistance intégrée qui peut déclencher la validation :

Une autre chose à ajouter est certains attributs spécifiques au formulaire sur l’élément lui-même, qui sont lus en interne par la logique javascript mise en place par Episerver Forms pour déclencher et effectuer cette validation lorsque l’assistant ci-dessus est appelé :

Ce que fait maintenant l’assistant, c’est évaluer les dépendances définies sur cet élément et renvoyer une chaîne (« » pour afficher et « cacher » pour masquer) et vous l’ajoutez au CSS de l’élément. Les formulaires internes js entrent en jeu pour afficher/masquer l’élément en fonction de cette cssClass.

Qu’est-ce-qu’on fait maintenant?

Eh bien, vous construisez ce code et lorsque vous lancez CMS et accédez à votre formulaire, vous ajoutez cet élément personnalisé au formulaire et définissez la bonne dépendance dessus, quelque chose comme ceci :

Dans mon cas, il recherche un élément Bouton Radio sur le formulaire et si c’est Oui, il affichera alors cet élément personnalisé. Si c’est non, alors il masquera l’élément et affichera du contenu RTE :

Nous avons mis en évidence certains attributs lors de l’inspection de l’élément personnalisé dans le navigateur. Notez la classe « hide » ajoutée à partir de l’assistant HTML. Sur cette base, EpiserverForms.js met un attribut de style avec affichage : aucun à l’élément, afin de le masquer. Et puis, à l’heure du spectacle, il met à jour cet élément de style en bloc de visualisation.

Alors, on a fini ? Pouvons-nous mettre un terme à cette journée ?

Enfin presque. Un comportement étrange que j’ai remarqué est qu’au moment de l’affichage, l’attribut style avec display:block faisait que mon élément personnalisé s’étendait sur toute la largeur de la page. Donc, pour éviter cela, nous y avons ajouté un CSS personnalisé, qui ignorait l’attribut de style de display:block, en ajoutant le !important taguez-le :

Maintenant c’est fait. Nous avons ajouté un élément personnalisé à notre formulaire et avons pu lui appliquer la logique de dépendance intégrée avec des modifications mineures du code.

Si vous recherchez des implémentations personnalisées similaires, j’en ai fait d’autres avec MinusculeMCE et Bibliothèque d’icônes.