Formulaire

Concepteur de formulaires

Mode design

Éditeur ASP.NET

Cliquez sur dans la barre d'outils pour ouvrir l'éditeur de code ASP.NET, qui peut être utilisé pour définir des procédures côté serveur, des événements et des variables globales pour gérer des tâches personnalisées spécifiques. Cette fonctionnalité est principalement destinée au développement côté serveur ASP.NET.

À partir de la version 7.19.0 de WorkflowGen, tous les fichiers default.aspx sont enregistrés avec la propriété Page Async réglée sur true (p.ex. <%@ Page Async="true" ... %>). Cela permet le développement de formulaires Web ASP.NET asynchrones (voir l'article Microsoft Utilisation de méthodes asynchrones dans ASP.NET 4.5 pour plus d'informations).

Éditeur JavaScript

Cliquez sur dans la barre d'outils pour ouvrir l'éditeur de code JavaScript, qui peut être utilisé pour définir des procédures côté serveur, des événements et des variables globales pour gérer des tâches personnalisées spécifiques. Cette fonctionnalité est principalement destinée au développement côté client JavaScript.

Fonctionnalités avancées

Mode d'édition de code côté serveur

Cochez Activer le mode d'édition de code côté serveur dans l'onglet Général du panneau Configuration du formulaire pour activer ce mode, qui permet aux concepteurs de formulaires de modifier le contenu de la balise de serveur runat (p.ex. <script runat="server") et de la balise de script JavaScript (p.ex. <script jseditor="true">) avec Visual Studio Professional ou Visual Studio Code directement dans le fichier default.aspx généré sur le serveur (normalement situé dans le dossier \wfapps\webforms[PROCESSNAME]\V[VERSION]).

Les éditeurs de code ASP.NET et JavaScript sont désactivés lorsque le mode d'édition côté serveur est activé.

Vous devez enregistrer le formulaire sur l'écran Formulaire de WorkflowGen chaque fois que vous faites des modifications au code d'un script dans le fichier default.aspx afin de maintenir à jour les balises de script HTML du formulaire (FORM_HTML). Ceci est obligatoire avant de pouvoir exporter la définition de processus XPDL pour le déploiement sur un autre serveur.

Mode AJAX

Si vous utilisez l'éditeur de formulaire, vous pouvez activer le mode AJAX en cochant Activer le mode AJAX dans l'onglet Général du panneau Configuration du formulaire.

Lors de l'ajout d'un contrôle personnalisé (par exemple, un bouton pour gérer la soumission de formulaire), vous devez enregistrer l'ID de contrôle en tant que contrôle de publication (« postback ») dans l'objet ScriptManager de l'événement Page_Load. Par exemple :

protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Load(sender, e);    
    
    // Register the custom button to the script manager for postback management in AJAX mode
    if (ScriptManager.GetCurrent(this) != null) {
        ScriptManager.GetCurrent(this).RegisterPostBackControl(ACTION1_BUTTON1);
    }
}

Barre d’outils

Mode design

Icône	Nom	Description
	Enregistrer le formulaire	Enregistre le formulaire actuel
	Dupliquer une section ou un champ	Effectue une copie de la section ou champ sélectionné et l’insère dans le formulaire. La section ou champ doublé apparaîtra en dessous de la section ou champ sélectionné.
	Supprimer une section ou un champ	Supprime la section ou le champ sélectionné du formulaire.
	Annuler/refaire	Annule ou refait les modifications les plus récentes au formulaire.
	Sélectionner un style	Liste de styles personnalisés et par défaut; sélectionnez un style pour changer le style du formulaire actuel.
Liste déroulante des outils	Sélectionner un outil	Liste des outils personnalisés et par défaut; sélectionnez un outil en vue d'ajouter l'outil au formulaire en utilisant le bouton Insérer.
	Insérer l'outil sélectionné	Insère l'outil sélectionné dans le formulaire.
	Éditer l'identifiant du champ	Permet de modifier l'identifiant des sections et des champs
	Éditer l'infobulle du champ	Permet de modifier l'infobulle des sections et des champs
	Éditer le format du champ	Permet de modifier le format des champs
	Éditer l'apparence	Permet de personnalises l'apparence des en-têtes, pieds de pages, libellés et champs (voir Apparence du formulaire)
	Éditer le comportement des actions	Affiche la vue interactive du workflow, active les options cliquables Requis, Lecture seule et Caché pour chaque champ du formulaire et permet de définir le comportement des sections et des champs du formulaire pour chaque action (voir Comportement des champs et des sections)
	Éditer la correspondance des données d’actions des champs	Affiche la vue interactive du workflow, active les options cliquables Récupérer la valeur et Envoyer la valeur pour chaque champ du formulaire et permet de définir les données en entrées et en sortie au niveau de chaque action (voir Correspondances)
	ASP.NET	Affiche l'éditeur de code ASP.NET
	JavaScript	Affiche l'éditeur de code JavaScript
	Maximiser	Maximise la taille du canevas
	Restaurer	Restaure le canevas à sa taille par défaut
Cliquez sur pour afficher les fonctions supplémentaires répertoriées ci-dessous
	Nouveau formulaire	Crée un nouveau formulaire ou remplacer le formulaire actuel
	Enregistrer une section ou un champ en tant qu'outil	Enregistre la section ou le champ sélectionné comme un outil
	Gérer les outils personnalisés	Permet de nommer des sections et des outils personnalisés
	Vue workflow	Affiche la vue interactive du workflow
	Configuration du formulaire	Ouvre le panneau de configuration du formulaire
	Imprimer le formulaire	Imprime le formulaire actuel

Éditeur ASP.NET

Icône	Nom	Description
	Enregistrer	Enregistre le code ASP.NET
	Commenter/décommenter	Ajoute ou supprime // devant la (les) ligne(s) sélectionnée(s)
	Éditeur de formulaire	Affiche l'éditeur de formulaire WYSIWYG
	Éditeur JavaScript	Affiche l'éditeur de code JavaScript
	Maximiser	Maximiser la taille du canevas
	Restaurer	Restaure le canevas à sa taille par défaut
Cliquez sur pour afficher la fonction supplémentaire répertoriée ci-dessous
	Nouveau	Efface le code ASP.NET

Éditeur JavaScript

Icône	Nom	Description
	Enregistrer	Enregistre le code JavaScript
	Commenter/Décommenter	Ajoute ou supprime // devant la (les) ligne(s) sélectionnée(s)
	Éditeur de formulaire	Affiche l'éditeur de formulaire WYSIWYG
	Éditeur ASP.NET	Affiche l'éditeur de code ASP.NET
Cliquez sur pour afficher la fonction supplémentaire répertoriée ci-dessous
	Nouveau	Efface le code JavaScript

Configuration du formulaire

Un formulaire créé avec le concepteur de formulaires intégré comporte un en-tête, une ou plusieurs sections, un ou plusieurs champs par section, un bouton de soumission, un bouton d'enregistrement en brouillon facultatif et un pied de page.

Cliquez sur dans le coin supérieur droit de la barre d'outils du concepteur de formulaires puis sur pour ouvrir le panneau de configuration du formulaire.

Onglet Général

Nom	Description
Formulaires Web
Activer le mode d'édition de code côté serveur	Voir la section Mode d'édition de code côté serveur
Activer le mode AJAX	Voir la section Mode AJAX
En-tête
Titre	Le titre du formulaire
Largeur	La largeur de l'en-tête du formulaire Valeur numérique avec ou sans l'unité de mesure (px, pt, in, cm, mm, pc, em, ex, %). 📌 Exemple : 720px
Hauteur	La hauteur de l'en-tête du formulaire Valeur numérique avec ou sans l'unité de mesure (px, pt, in, cm, mm, pc, em, ex, %). 📌 Exemple : 38px
Alignement de l'image	L'alignement de l'image en-tête : Droite : L'image sera alignée sur le côté droit Gauche : L'image sera alignée sur le côté gauche. Aucune : Pas alignement
URL de l'image	L'URL de l'image à afficher
Largeur de l'image	La largeur de l'image
Hauteur de l'image	La hauteur de l'image
Répétition de l'image	Définit si et comment l'image sera répétée : Aucune répétition : l'image ne sera pas répétée Répétition : l'image sera répétée à la fois verticalement et horizontalement (par défaut) Répétition x : l'image sera répétée horizontalement seulement Répétition y : l'image sera répétée verticalement seulement
Sections
Largeur	La largeur pour toutes les sections Valeur numérique avec ou sans l'unité de mesure (px, pt, in, cm, mm, pc, em, ex, %). 📌 Exemple : 150px
Appliquer la largeur	Cochez la case pour appliquer la largeur à toutes les sections
Libellés
Alignement	L'alignement des libellés pour tous les champs : Droite : libellé sera aligné sur le côté droit du champ Gauche : libellé sera aligné sur le côté gauche du champ Haut : libellé sera aligné sur le dessus du champ
Largeur	La largeur des libellés pour tous les champs Valeur numérique avec ou sans l'unité de mesure (px, pt, in, cm, mm, pc, em, ex, %). 📌 Exemple : 150px
Appliquer la largeur	Cochez la case pour appliquer la largeur à tous les libellés
Boutons
Soumission	Le libellé pour le bouton de soumission
Enregistrer en brouillon	Le libellé pour le bouton d'enregistrement en brouillon
Activer le brouillon	Cochez pour activer et afficher le bouton de sauvegarde
Bas de page
Largeur	La largeur du bas de page Valeur numérique avec ou sans l'unité de mesure (px, pt, in, cm, mm, pc, em, ex, %). 📌 Exemple : 720px
Hauteur	La hauteur du bas de page Valeur numérique avec ou sans l'unité de mesure (px, pt, in, cm, mm, pc, em, ex, %). 📌 Exemple : 22px
Alignement de l'image	L'alignement de l'image du bas de page : Droite : l'image sera alignée sur le côté droit Gauche : l'image sera alignée sur le côté gauche Aucune : pas d'alignement
URL de l'image	L'URL de l'image à afficher
Largeur de l'image	La largeur de l'image
Hauteur de l'image	La hauteur de l'image
Répétition de l'image	Définit si et comment l'image sera répétée : Aucune répétition : l'image ne sera pas répétée Répétition : l'image sera répétée à la fois verticalement et horizontalement (par défaut) Répétition x : l'image sera répétée horizontalement seulement Répétition y : l'image sera répétée verticalement seulement
Sécurité
Permettre la signature XML	Cocher pour permettre l'usage de la signature XML dans les données du formulaire Les signatures digitales sont utilisées pour certifier qu’un document n’a pas été modifié par le système ou par quelqu’un non autorisé qui a réussit à se connecter au système. La signature XML est un standard du W3C qui définit les règles de procédure pour la création et la représentation de signatures digitales. C’est une méthode d’association d’une clé avec des données de références pour assurer l’intégrité de ces données.
Divers
Afficher un message de confirmation de suppression rapide	Cochez pour afficher un message de confirmation avant la suppression

Onglet Références Web

Nom	Description
Inclure les librairies jQuery API et jQuery UI	Cochez cette option pour inclure les bibliothèques d'interface utilisateur jQuery et jQuery en mode d'exécution (exécution de formulaire); par défaut, ces bibliothèques sont disponibles en mode design Versions disponibles : v1.7.2 et v1.8.20 v1.10.2 et v1.10.3 v3.5.1 et v1.12.1 (par défaut)
Texte libre	Références Web personnalisées pour être incluses dans l’élément HTML head qui sera disponible tant dans l’éditeur et d'exécution. Seulement les balises <script>, <meta>, <link> et <style> sont supportées. 📌 Exemple : <link rel="stylesheet" type="text/css" href="mystyle.css" /> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> <meta name="description" content="my content" /> <script type="text/javascript"> alert("Hello World!"); </script> <script type="text/javascript" src="myscript.js"> </script> Pour plier un bloc de code, cliquez sur la flèche vers le bas, ce qui insérera une icône double-flèches à la place du code. Pour déplier le bloc de code, cliquez sur la flèche vers la droite. Appuyez sur Ctrl+Espace pour ouvrir un menu déroulant qui affichera une liste de variables et mots-clés disponibles.

Onglet Traductions

Nom	Description
Sélectionner une langue	L’éditeur de formulaire vous permet de traduire vos formulaires pour toutes les langues définies dans WorkflowGen. Sélectionnez une langue disponible dans la liste déroulante des langues disponibles. ✏️ Note : Les langues génériques comme l’Anglais, le Français, l’Espagnol, etc... correspondent à la langue utilisée par le créateur du formulaire pour créer son formulaire. Par exemple, s’il a utilisé la langue Anglais US (États-Unis) alors la langue générique anglais contiendra sa traduction.
Texte libre	Saisir la traduction correspondante à la langue sélectionnée. Si un texte est laissé vide, alors sa valeur sera recherchée dans l’ordre suivant : Culture de la langue > Langue générique > Langue par défaut.