Éléments HTML dynamiques

Les éléments HTML dynamiques vous permettent de créer du contenu HTML qui peut être affiché ou utilisé dynamiquement dans n'importe quelle partie du formulaire lorsque le formulaire est ouvert pendant l'exécution. Par exemple, vous pouvez affecter une image pour qu'elle apparaisse dynamiquement après qu'une option déroulante a été sélectionnée, puis inviter l'utilisateur à saisir l'élément d'image dans un champ de texte.

Tutoriel

Pour transmettre un élément HTML dynamique :

1. Dans l'activité Créer un formulaire ( Create Form) > panneau Propriétés (Properties), ouvrez la fenêtre CollecteFormulaires ( FormFieldsCollection) .
2. Ajoutez un argument In de type String et nommez-le de manière suggestive.
3. Ouvrez le Concepteur de formulaires et faites glisser un composant Élément HTML vers votre formulaire.
4. Dans l'onglet Affichage (Display) > champ Balise HTML ( HTML Tag ), ajoutez p pour un nouveau paragraphe HTML.
5. Dans le champ Contenu (Content), ajoutez le type de données que vous souhaitez transmettre dynamiquement à l'aide de l'expression {{data.variable}}et remplacez variable par le nom de l'argument créé à l'étape 2.

6. Cochez la case Actualiser en cas de modification .

   Remarque : pour ajouter une image dans un champ de formulaire Élément HTML , l'image doit être convertie au format Base64.

   Pour transmettre une image en tant qu'élément HTML dynamique :

7. Convertissez l'image en chaîne Base64.
8. Enregistrez la chaîne Base64 en tant que variable de workflow. Par exemple, image .
9. Dans l'activité Créer un formulaire ( Create Form) > panneau Propriétés (Properties), ouvrez la fenêtre CollecteFormulaires ( FormFieldsCollection) .
10. Ajoutez un argument In de type String et nommez-le sampleImage.
11. Définissez la chaîne Base64 de l'étape 2 sur Value.
12. Cliquez sur OK pour fermer la fenêtre FormFieldsCollection .

13. Dans le Concepteur de fiches (Form Designer) > onglet Avancé (Advanced) > composant Élément HTML (HTML Element) > champ Contenu (Content), saisissez l'expression suivante :

    <img href={{data.sampleImage}} height=100 width=100/>

    Remarque : les composants de base Libellé/En-tête peuvent également être utilisés pour transmettre des éléments dynamiquement. Cela vous permet de définir des libellés et des en-têtes dynamiques pour les champs de formulaire.