# Formulaire

## Concepteur de formulaires <a href="#ecran-formulaire-processus" id="ecran-formulaire-processus"></a>

### Mode design

<figure><img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2Fiyqn06DByBJYizDM2dp4%2Ffd_demande_simple.png?alt=media&#x26;token=fe0c76b6-96d1-49c3-8e2f-992c91ed9237" alt=""><figcaption></figcaption></figure>

### Éditeur ASP.NET

Cliquez sur ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FWv9QwOXKVnHXI5n4vXLr%2Fimage.png?alt=media\&token=1bc7f9e7-018a-423e-a0b1-671e3def6e13) 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.

<figure><img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F6JUS6Culpk6LDKSIO4Wc%2Ffd_editeur_aspnet.png?alt=media&#x26;token=7784d7d7-e042-47d6-9f50-4891ee0a2507" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
À 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](https://docs.microsoft.com/fr-fr/aspnet/web-forms/overview/performance-and-caching/using-asynchronous-methods-in-aspnet-45) pour plus d'informations).
{% endhint %}

### Éditeur JavaScript

Cliquez sur ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FiSK7VeICRQwcrWyzWAzM%2Fimage.png?alt=media\&token=deb9b79a-0097-40b8-98fe-0632459ea841) 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.

<figure><img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FhsjdtJ78zC91G6pVNFRA%2Ffd_editeur_javascript.png?alt=media&#x26;token=623c20b2-9aed-420e-a6e9-24c9bf0f524c" alt=""><figcaption></figcaption></figure>

### 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]`).

{% hint style="info" %}
Les éditeurs de code ASP.NET et JavaScript sont désactivés lorsque le mode d'édition côté serveur est activé.
{% endhint %}

{% hint style="warning" %}
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.
{% endhint %}

#### 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**.

{% hint style="info" %}
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 :

```csharp
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);
    }
}
```

{% endhint %}

## Barre d’outils <a href="#barre-doutils" id="barre-doutils"></a>

### Mode design

|                                                                                                                                                                                                                      **Icône**                                                                                                                                                                                                                      | **Nom**                                                   | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                 |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FCjFIOqIlVeAnYSdI7yT4%2Fimage.png?alt=media&#x26;token=f924aed8-08f0-47a7-805e-d8216d9e53e4" alt="" data-size="original">                                                                                             | Enregistrer le formulaire                                 | Enregistre le formulaire actuel                                                                                                                                                                                                                                                                                                                                                                                                 |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FrSMPRspiLn1iMotmImVB%2Fimage.png?alt=media&#x26;token=390dc88c-cc7e-4ef7-b9f4-0b0015645b3e" alt="" data-size="original">                                                                                             | 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é.                                                                                                                                                                                                                                                      |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FX5zMnXM1qNPIjxZGaFci%2Fimage.png?alt=media&#x26;token=25ea80ef-a846-4256-a088-52adf579cffc" alt="" data-size="original">                                                                                             | Supprimer une section ou un champ                         | Supprime la section ou le champ sélectionné du formulaire.                                                                                                                                                                                                                                                                                                                                                                      |
| <p><br><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaO1JPNKek6tN0xvKMQyj%2Fuploads%2FtOHIcrnx98BStSGDDK82%2Ffd_undo.png?alt=media&#x26;token=6a0c80ce-8f11-4613-8520-f757cb3840d7" alt=""><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaO1JPNKek6tN0xvKMQyj%2Fuploads%2FdSzAEgJzAtsyVPXhlnkk%2Fimage.png?alt=media&#x26;token=b37f69d9-9dbf-46d5-8199-dbba63d38a0b" alt=""></p> | Annuler/refaire                                           | Annule ou refait les modifications les plus récentes au formulaire.                                                                                                                                                                                                                                                                                                                                                             |
|                                                                                                                 ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FnFJVq7OJS8YeF1QaIKbB%2Fimage.png?alt=media\&token=35bc21f8-d7cb-4214-b2ba-221c2defc41b)                                                                                                                 | 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.                                                                                                                                                                                                                                                                                      |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2Fy5VMeH6PYkJMetBs7DzK%2Fimage.png?alt=media&#x26;token=b531fe40-d71d-4d55-865a-0e504d0cf61a" alt="" data-size="original">                                                                                             | Insérer l'outil sélectionné                               | Insère l'outil sélectionné dans le formulaire.                                                                                                                                                                                                                                                                                                                                                                                  |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FCi7Bc7s2AMW0mtJNmPJJ%2Fimage.png?alt=media&#x26;token=b8adb42d-dc4f-4419-bbb9-10e6970446cc" alt="" data-size="original">                                                                                             | Éditer l'identifiant du champ                             | Permet de modifier l'identifiant des sections et des champs                                                                                                                                                                                                                                                                                                                                                                     |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2Fjen2HCTBxiBi600u3NKp%2Fimage.png?alt=media&#x26;token=ebc58e60-cded-4157-98b2-59c3eaa74844" alt="" data-size="original">                                                                                             | Éditer l'infobulle du champ                               | Permet de modifier l'infobulle des sections et des champs                                                                                                                                                                                                                                                                                                                                                                       |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FRDsydoJh3QvifpPWIJm2%2Fimage.png?alt=media&#x26;token=0874b201-cb1b-4bff-98ca-9261e5fee757" alt="" data-size="original">                                                                                             | Éditer le format du champ                                 | Permet de modifier le format des champs                                                                                                                                                                                                                                                                                                                                                                                         |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F63o6MT5iaN5YnFkkG8tY%2Fimage.png?alt=media&#x26;token=3d971843-7c12-4dd0-8019-008c43901784" alt="" data-size="original">                                                                                             | Éditer l'apparence                                        | Permet de personnalises l'apparence des en-têtes, pieds de pages, libellés et champs (voir [Apparence du formulaire](https://docs.workflowgen.com/admin-fr/9.0/apparence-comportement-et-correspondances#apparence-du-formulaire))                                                                                                                                                                                              |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F1gVUu6OANgrkuNyBlgaK%2Fimage.png?alt=media&#x26;token=ceb7a704-ffd8-446e-8e0d-363a1c1841de" alt="" data-size="original">                                                                                             | É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](https://docs.workflowgen.com/admin-fr/9.0/apparence-comportement-et-correspondances#comportement-des-champs-et-des-sections)) |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FI8ZsA6BVsZEmLkWXW9Wo%2Fimage.png?alt=media&#x26;token=8c66aad8-789d-4b45-bef1-7180deb5a3cc" alt="" data-size="original">                                                                                             | É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](https://docs.workflowgen.com/admin-fr/9.0/apparence-comportement-et-correspondances#correspondances))                                                        |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FoVYJxXsoSweSN1wXVCvy%2Fimage.png?alt=media&#x26;token=64cf3c37-4df6-454b-9692-1bc015cf7ab8" alt="" data-size="original">                                                                                             | ASP.NET                                                   | Affiche l'éditeur de code ASP.NET                                                                                                                                                                                                                                                                                                                                                                                               |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2Fl3U54tu3I77gNA0pRlBX%2Fimage.png?alt=media&#x26;token=7f1fdd58-44f3-4329-be48-d3ab5d7bd505" alt="" data-size="original">                                                                                             | JavaScript                                                | Affiche l'éditeur de code JavaScript                                                                                                                                                                                                                                                                                                                                                                                            |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F282C8BbT8zqUAyvK8nlh%2Fimage.png?alt=media&#x26;token=4fc632a5-614b-4883-b03f-a3c08ccbe7ee" alt="" data-size="original">                                                                                             | Maximiser                                                 | Maximise la taille du canevas                                                                                                                                                                                                                                                                                                                                                                                                   |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F7YYWGZxznp36ub2OITS1%2Fimage.png?alt=media&#x26;token=537d5b25-146f-4dfe-a356-4014a3320a65" alt="" data-size="original">                                                                                             | Restaurer                                                 | Restaure le canevas à sa taille par défaut                                                                                                                                                                                                                                                                                                                                                                                      |
|                                                                       *Cliquez sur* ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FHfRPtL2j7WYVqVLKE066%2Fimage.png?alt=media\&token=aad34105-039a-44bf-8bde-a664e7413564) *pour afficher les fonctions supplémentaires répertoriées ci-dessous*                                                                       |                                                           |                                                                                                                                                                                                                                                                                                                                                                                                                                 |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FoKlEMCsVexoGJESBTUBj%2Fimage.png?alt=media&#x26;token=0c626be0-76e5-44b5-aad8-30804f6e971d" alt="" data-size="original">                                                                                             | Nouveau formulaire                                        | Crée un nouveau formulaire ou remplacer le formulaire actuel                                                                                                                                                                                                                                                                                                                                                                    |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F9KzZuykLhEnJCKYY2mtj%2Fimage.png?alt=media&#x26;token=1ef251dc-5a35-4c21-a931-81c21ddaf0dd" alt="" data-size="original">                                                                                             | Enregistrer une section ou un champ en tant qu'outil      | Enregistre la section ou le champ sélectionné comme un outil                                                                                                                                                                                                                                                                                                                                                                    |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FL3zn1v1aj1OvAY8vmFyf%2Fimage.png?alt=media&#x26;token=92be32ee-7b9c-4960-82e7-1df28573ed92" alt="" data-size="original">                                                                                             | Gérer les outils personnalisés                            | Permet de nommer des sections et des outils personnalisés                                                                                                                                                                                                                                                                                                                                                                       |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FXRrg7mTdgKaBUAyFAWwn%2Fimage.png?alt=media&#x26;token=145f9b10-d964-4b68-bdb6-4ac4cb77ebca" alt="" data-size="original">                                                                                             | Vue workflow                                              | Affiche la vue interactive du workflow                                                                                                                                                                                                                                                                                                                                                                                          |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F6a9SC9r7fmXysbl1Ykp7%2Fimage.png?alt=media&#x26;token=96486948-e317-4648-b6d4-7da779dc1242" alt="" data-size="original">                                                                                             | Configuration du formulaire                               | Ouvre le panneau de configuration du formulaire                                                                                                                                                                                                                                                                                                                                                                                 |
|                                                                                              <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2F1WxYx21OFPLvwnXIqczc%2Fimage.png?alt=media&#x26;token=a4887aa0-5c0a-4b46-a026-d052495b8c54" alt="" data-size="original">                                                                                             | Imprimer le formulaire                                    | Imprime le formulaire actuel                                                                                                                                                                                                                                                                                                                                                                                                    |

### Éditeur ASP.NET

|                                                                                                                                              **Icône**                                                                                                                                              | **Nom**               | **Description**                                                  |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------- | ---------------------------------------------------------------- |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FgIcMQb5VpH8ozc3ivY7p%2Fimage.png?alt=media&#x26;token=1981d32e-c41f-4936-b9c4-d288b7771849" alt="" data-size="original">                     | Enregistrer           | Enregistre le code ASP.NET                                       |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FmbT4xs6ndZH2QXnlj8Op%2Fimage.png?alt=media&#x26;token=90b7ff16-8ea6-4a09-affb-f44b20c3a4d3" alt="" data-size="original">                     | Commenter/décommenter | Ajoute ou supprime `//` devant la (les) ligne(s) sélectionnée(s) |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FE8A5nFM1gMurxrRCHE4R%2Fimage.png?alt=media&#x26;token=b4b97d03-224e-4ffe-ae0b-ef9108abdce0" alt="" data-size="original">                     | Éditeur de formulaire | Affiche l'éditeur de formulaire WYSIWYG                          |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FTgBdNm0rgyJ6b8MT6Apk%2Fimage.png?alt=media&#x26;token=d2b14a55-dac4-46c6-b5d5-63009fe33559" alt="" data-size="original">                     | Éditeur JavaScript    | Affiche l'éditeur de code JavaScript                             |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FvfuNssGhSHVpuDxLyX2S%2Fimage.png?alt=media&#x26;token=e2276b45-8741-4a6d-ad97-5c890fb2daab" alt="" data-size="original">                     | Maximiser             | Maximiser la taille du canevas                                   |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FEwfCQQ6udx8QaXqCFdGg%2Fimage.png?alt=media&#x26;token=8cb9fc72-a475-4f0e-9067-8f914c5a2ffc" alt="" data-size="original">                     | Restaurer             | Restaure le canevas à sa taille par défaut                       |
| *Cliquez sur* ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FHfRPtL2j7WYVqVLKE066%2Fimage.png?alt=media\&token=aad34105-039a-44bf-8bde-a664e7413564) *pour afficher la fonction supplémentaire répertoriée ci-dessous* |                       |                                                                  |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FGmW27rvnHzK8RdD06xWF%2Fimage.png?alt=media&#x26;token=b56fab9a-1db2-42f9-b76f-90262b837b56" alt="" data-size="original">                     | Nouveau               | Efface le code ASP.NET                                           |

### Éditeur JavaScript

|                                                                                                                                              **Icône**                                                                                                                                              | **Nom**               | **Description**                                                  |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------- | ---------------------------------------------------------------- |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FkS39wPDb85fjqrQBxWJt%2Fimage.png?alt=media&#x26;token=442154ff-3c0b-4016-ab9e-4499481d09a6" alt="" data-size="original">                     | Enregistrer           | Enregistre le code JavaScript                                    |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FniNTEhSHK5d97QEYi4AP%2Fimage.png?alt=media&#x26;token=71e710eb-dd1d-41d4-96e4-6d611e14b619" alt="" data-size="original">                     | Commenter/Décommenter | Ajoute ou supprime `//` devant la (les) ligne(s) sélectionnée(s) |
|                                         ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FaeCrDP8WR9ns1BSlWloy%2Fimage.png?alt=media\&token=e6217adc-9412-4736-834b-c1b14b2c0614)                                         | Éditeur de formulaire | Affiche l'éditeur de formulaire WYSIWYG                          |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FvXR9GiqSnm3qdeUvIS90%2Fimage.png?alt=media&#x26;token=7d3f843c-0450-498a-a2dd-5e2d8a937e8d" alt="" data-size="original">                     | Éditeur ASP.NET       | Affiche l'éditeur de code ASP.NET                                |
| *Cliquez sur* ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FHfRPtL2j7WYVqVLKE066%2Fimage.png?alt=media\&token=aad34105-039a-44bf-8bde-a664e7413564) *pour afficher la fonction supplémentaire répertoriée ci-dessous* |                       |                                                                  |
|                      <img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FesFNSUa2Od27R8qJONKz%2Fimage.png?alt=media&#x26;token=5f465eee-7647-423c-9253-009ffb34fd0b" alt="" data-size="original">                     | 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.&#x20;

Cliquez sur ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FWJeoQeNgIcdtHMrLe8Z1%2Fimage.png?alt=media\&token=59c5b7cc-2221-4d45-8dc9-5beb725927fa) dans le coin supérieur droit de la barre d'outils du concepteur de formulaires puis sur ![](https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FD9m8y6DPWMJLlZ5JsV5J%2Fimage.png?alt=media\&token=345590b9-9b46-4a79-9b84-81066337ff89) pour ouvrir le panneau de configuration du formulaire.

### Onglet Général

<figure><img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FcjxQAMDFa7aAjmbrtIh9%2Fconfig_form_general.png?alt=media&#x26;token=77f07681-e402-4999-925e-a574cd6fff2e" alt=""><figcaption></figcaption></figure>

| **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](#mode-dedition-de-code-cote-serveur)                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| Activer le mode AJAX                                      | Voir la section [Mode AJAX](#mode-ajax)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **En-tête**                                               |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Titre                                                     | Le titre du formulaire                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Largeur                                                   | <p>La largeur de l'en-tête du formulaire<br><br>Valeur numérique avec ou sans l'unité de mesure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>). <br>📌 <strong>Exemple :</strong> <code>720px</code></p>                                                                                                                                                                                                                          |
| Hauteur                                                   | <p>La hauteur de l'en-tête du formulaire<br><br>Valeur numérique avec ou sans l'unité de mesure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>). <br>📌 <strong>Exemple :</strong> <code>38px</code></p>                                                                                                                                                                                                                           |
| Alignement de l'image                                     | <p>L'alignement de l'image en-tête :</p><ul><li><strong>Droite :</strong> l'image sera alignée sur le côté droit</li><li><strong>Gauche :</strong> l'image sera alignée sur le côté gauche.</li><li><strong>Aucun :</strong> aucun alignement</li></ul>                                                                                                                                                                                                                                                                                     |
| 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                                     | <p>Définit si et comment l'image sera répétée :</p><ul><li><strong>Aucune répétition :</strong> l'image ne sera pas répétée</li><li><strong>Répétition :</strong> l'image sera répétée à la fois verticalement et horizontalement (par défaut)</li><li><strong>Répétition x :</strong> l'image sera répétée horizontalement seulement</li><li><strong>Répétition y :</strong> l'image sera répétée verticalement seulement</li></ul>                                                                                                        |
| **Sections**                                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Largeur                                                   | <p>La largeur pour toutes les sections<br><br>Valeur numérique avec ou sans l'unité de mesure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>). <br>📌 <strong>Exemple :</strong> <code>150px</code></p>                                                                                                                                                                                                                            |
| Appliquer la largeur                                      | Cochez la case pour appliquer la largeur à toutes les sections                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Libellés**                                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Alignement                                                | <p>L'alignement des libellés pour tous les champs :</p><ul><li><strong>Droite :</strong> le libellé sera aligné sur le côté droit du champ</li><li><strong>Gauche :</strong> le libellé sera aligné sur le côté gauche du champ</li><li><strong>Haut :</strong> le libellé sera aligné sur le dessus du champ</li></ul>                                                                                                                                                                                                                     |
| Largeur                                                   | <p>La largeur des libellés pour tous les champs<br><br>Valeur numérique avec ou sans l'unité de mesure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>). <br>📌 <strong>Exemple :</strong> <code>150px</code></p>                                                                                                                                                                                                                   |
| 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                                                   | <p>La largeur du bas de page<br><br>Valeur numérique avec ou sans l'unité de mesure (<code>px</code>, <code>pt</code>, <code>in</code>, <code>cm</code>, <code>mm</code>, <code>pc</code>, <code>em</code>, <code>ex</code>, <code>%</code>). <br>📌 <strong>Exemple :</strong> <code>720px</code></p>                                                                                                                                                                                                                                      |
| Hauteur                                                   | <p>La hauteur du bas de page<br><br>Valeur numérique avec ou sans l'unité de mesure <code>(px, pt, in, cm, mm, pc, em, ex, %)</code>. <br>📌 <strong>Exemple :</strong> <code>22px</code></p>                                                                                                                                                                                                                                                                                                                                               |
| Alignement de l'image                                     | <p>L'alignement de l'image du bas de page :</p><ul><li><strong>Droite :</strong> l'image sera alignée sur le côté droit</li><li><strong>Gauche :</strong> l'image sera alignée sur le côté gauche</li><li><strong>Aucun :</strong> aucun alignement</li></ul>                                                                                                                                                                                                                                                                               |
| 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                                     | <p>Définit si et comment l'image sera répétée :</p><ul><li><strong>Aucune répétition :</strong> l'image ne sera pas répétée</li><li><strong>Répétition :</strong> l'image sera répétée à la fois verticalement et horizontalement (par défaut)</li><li><strong>Répétition x :</strong> l'image sera répétée horizontalement seulement</li><li><strong>Répétition y :</strong> l'image sera répétée verticalement seulement</li></ul>                                                                                                        |
| **Sécurité**                                              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Permettre la signature XML                                | <p>Cocher pour permettre l'usage de la signature XML dans les données du formulaire<br><br>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.</p> |
| **Divers**                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| Afficher un message de confirmation de suppression rapide | Cochez pour afficher un message de confirmation avant la suppression                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

### Onglet Références Web

<figure><img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FbbhkKalWwpB2TJCtVtHW%2Fconfig_form_ref_web.png?alt=media&#x26;token=eb2481b1-8d0f-4b01-92be-9cdac379f0b2" alt=""><figcaption></figcaption></figure>

| **Nom**                                        | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Inclure les librairies jQuery API et jQuery UI | <p>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</p><p></p><p>Versions disponibles :</p><ul><li>v1.7.2 et v1.8.20</li><li>v1.10.2 et v1.10.3</li><li>v3.5.1 et v1.12.1 (par défaut)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| Texte libre                                    | <p>Références Web personnalisées pour être incluses dans l’élément HTML <code>head</code> qui sera disponible tant dans l’éditeur et d'exécution. Seulement les balises <code>\<script></code>, <code>\<meta></code>, <code>\<link></code> et <code>\<style></code> sont supportées.<br><br>📌 <strong>Exemple :</strong> <br><br><code>\<link rel="stylesheet" type="text/css" href="mystyle.css" /></code></p><p><code>\<style type="text/css"></code></p><p><code>body {background-color:yellow}</code></p><p><code>p {color:blue}</code></p><p><code>\</style></code></p><p><code>\<meta name="description" content="my content" /></code></p><p><code>\<script type="text/javascript"></code></p><p><code>alert("Hello World!");</code></p><p><code>\</script></code></p><p><code>\<script type="text/javascript" src="myscript.js"></code></p><p><code>\</script></code><br><br>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 <strong><code>Ctrl+Espace</code></strong> pour ouvrir un menu déroulant qui affichera une liste de variables et mots-clés disponibles.</p> |

### Onglet Traductions

<figure><img src="https://2319482533-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHMhIgi2Lkz6HWY2jK4rl%2Fuploads%2FNDRwf3NmE7giIw4xYWNi%2Fconfig_form_traductions.png?alt=media&#x26;token=96b68aaf-ae1a-4f8c-b8ba-f68b2d6fe8de" alt=""><figcaption></figcaption></figure>

| **Nom**                 | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Sélectionner une langue | <p>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.<br><br>✏️ <strong>Note :</strong> 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 <strong>Anglais US (États-Unis</strong>) alors la langue générique anglais contiendra sa traduction.</p> |
| 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**.                                                                                                                                                                                                                                                                                                                                              |