Formulaire

Écran formulaire de processus
Mode éditeur
Éditeur ASP.NET
Cliquez sur ASP.NET 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 JS 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 :
1
protected void Page_Load(object sender, EventArgs e)
2
{
3
    base.Page_Load(sender, e);    
4
    
5
    // Register the custom button to the script manager for postback management in AJAX mode
6
    if (ScriptManager.GetCurrent(this) != null) {
7
        ScriptManager.GetCurrent(this).RegisterPostBackControl(ACTION1_BUTTON1);
8
    }
9
}
Copied!
Barre d’outils
Mode éditeur
Icône
Nom
Description
​
​
Nouveau formulaire
Crée un nouveau formulaire ou remplacer le formulaire actuel.
​
​
Enregistrer le formulaire
Enregistre le formulaire actuel
​
​
Imprimer le formulaire
Imprime le formulaire actuel
​
​
Enregistrer une section ou un champ en tant qu'outil
Enregistre la section ou le champ sélectionné comme un outil.
​
​
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.
​
​
Configuration du formulaire
Ouvre la fenêtre de configuration du formulaire
​
​
Vue workflow
Affiche la vue interactive du workflow
​
​
Annuler/refaire
Annule ou refait les modifications les plus récentes au formulaire.
Styles
Sélectionner un style
Liste de styles personnalisés et par défaut; sélectionnez un style pour changer le style du formulaire actuel.
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.
Id
Éditer l'identifiant des champs
Modifier l'identifiant des sections et des champs
Infobulle
Éditer l'infobulle des champs
Modifier l'infobulle des sections et des champs
Format
Éditer le format des champs
Modifier le format des champs
Apparence
Éditer l'apparence
Personnaliser l'apparence des en-têtes, pieds de pages, libellés et champs (voir Apparence du formulaire)
Comportement
É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)
Correspondance
É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
ASP.NET
Affiche l'éditeur de code ASP.NET
Éditeur ASP.NET
Icône
Nom
Description
​
​
Nouveau
Efface le code ASP.NET
​
​
Enregistrer
Enregistre le code ASP.NET
​
​
Commenter/Décommenter
Ajoute ou supprime // devant la (les) ligne(s) sélectionnée(s)
Éditeur
Éditeur de formulaire
Affiche l'éditeur de formulaire WYSIWYG
JS
Éditeur JavaScript
Affiche l'éditeur de code JavaScript
Éditeur JavaScript
Icône
Nom
Description
​
​
Nouveau
Efface le code JavaScript
​
​
Enregistrer
Enregistre le code JavaScript
​
​
Commenter/Décommenter
Ajoute ou supprime // devant la (les) ligne(s) sélectionnée(s)
Éditeur
Éditeur de formulaire
Affiche l'éditeur de formulaire WYSIWYG
ASP.NET
Éditeur ASP.NET
Affiche l'éditeur de code ASP.NET
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
Onglet Références Web
Nom
Description
Inclure les librairies jQuery API et jQuery UI
Cocher pour inclure les bibliothèques d'API de jQuery (v1.7.2) et jQuery UI (v1.8.20) dans la durée d'exécution (l'exécution du formulaire). Par défaut, ces bibliothèques sont disponibles en mode éditeur.
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 sélections de langues génériques telles que l'anglais, le français, l'espagnol, etc., correspondent à la version de la langue que l'administrateur a initialement utilisée pour créer un formulaire. Par exemple, si l'administrateur a utilisé English (United States) pour créer un formulaire, alors dans ce cas, les sélections English (United States) et English seraient identiques.
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.