# Développement de formulaires Web : Mode simple

## Aperçu

Le mode simple est conçu pour faciliter le développement de formulaires Web et offre les avantages suivants :

* Il ne nécessite aucune ligne de code-behind.<br>
* Tout peut être fait en mode design.<br>
* Tous les champs supportés sont automatiquement liés dans deux directions : de WorkflowGen au formulaire Web et du formulaire Web à WorkflowGen.<br>
* Aucun jeu de données ne doit être créé; seuls les champs souhaités doivent être glissés-déplacés et correctement nommés dans le concepteur de formulaires Web.

## Création de l'application Web

### Outils de développement suggérés

* Visual Web Developer Express 2013 ou version ultérieure
* Visual Studio Community ou Professional 2013 ou version ultérieure

### Répertoire d'installation des formulaires Web

Nous vous suggérons fortement de stocker tous vos formulaires Web dans le répertoire  `\wfgen\wfapps\webforms` (p.ex. : `\wfgen\wfapps\webforms\MonFormulaireWeb`).

Notez que si vous modifiez votre processus WorkflowGen et que vous devez modifier le `MonFormulaireWeb` associé en raison de ces modifications, vous devez au préalable dupliquer `MonForulaireWeb`, puis créer une autre application IIS. Sinon, les deux versions du processus utiliseront le même `MonFormulaireWeb` modifié.

### Créez l'application dans IIS

L'application du formulaire Web doit être déclarée en tant qu'application dans IIS pour être reconnue en tant qu'application de formulaire Web .NET. Suivez ces instructions pour déclarer votre répertoire de formulaires Web en tant qu'application IIS :

#### Pour IIS 7 ou version ultérieure

1. Ouvrez **Gestionnaire IIS**. <br>
2. Accédez à l'emplacement de votre formulaire Web, qui doit se trouver dans le nœud **Site Web par défaut** sous `\wfgen\wfapps\webforms\MonFormulaireWeb`.<br>
3. Faites un clic droit sur **MonFormulaireWeb** et choisissez **Convertir en application**.<br>
4. Sélectionnez le pool d'applications utilisé par votre site et un autre pool d'applications spécifique.<br>
5. Cliquez sur **OK**.

## Création du projet avec Visual Studio

### Créez le projet

1. Ouvrez Visual Studio et sélectionnez **Fichier > Nouveau site Web**.<br>
2. Choisissez **Site Web ASP.NET**.<br>
3. Choisissez **Système de fichiers** dans la liste déroulante **Emplacement**.<br>
4. Cliquez sur **Parcourir**, puis choisissez l'emplacement de votre site Web ASP.NET.<br>
5. Cliquez sur **OK**.

### Obtenir des messages d'erreur détaillés

Par défaut, vous n'aurez aucun fichier `web.config` dans votre projet Web si vous utilisez C# comme langage de développement dans l'IDE de Microsoft Visual Studio. Pour afficher des messages d'erreur complets lorsque vous souhaitez déboguer, vous devez disposer d'un fichier `web.config`. Pour ajouter un fichier `web.config` par défaut à votre projet, procédez comme suit :

1. Faites un clic droit sur le nom de votre projet, puis cliquez sur **Ajouter un nouvel élément...**<br>
2. Choisissez **Fichier de configuration Web**, puis cliquez sur **OK**.

Afin de pouvoir voir les messages d'erreur complets, modifiez les propriétés suivantes dans le fichier `web.config` :

1. Assurez-vous que cette ligne est définie sur `"true"` :

   ```markup
   <compilation debug="true" />
   ```
2. Assurez-vous que le suivant n'est pas commenté et que la propriété `mode` est définie sur `"Off"` :

   ```markup
   <customErrors mode="Off" defaultRedirect="GenericErrorPage.htm">
       <error statusCode="403" redirect="NoAccess.htm" />
       <error statusCode="404" redirect="FileNotFound.htm" />
   </customErrors>
   ```

## Implémentation de base

### Référence

Vous devez ajouter une référence à `WorkflowGen.My.dll` dans votre projet Web, puis ajouter cette instruction au début de votre formulaire Web :

```csharp
using WorkflowGen.My.Web.UI.WebForms;
```

### Héritage de classe

Votre formulaire Web doit hériter de la classe WorkflowPage contenue dans l'espace de noms `WorfklowGen.My.Web.UI.WebForms` :

```csharp
public partial class Form : WorkflowPage
```

### Soumission au workflow à l'aide du `SubmitButton`

La soumission du formulaire Web à WorkflowGen se fait en ajoutant simplement n'importe quel type de bouton à votre formulaire Web avec l'ID `SubmitButton`.

Vous ne pouvez avoir qu'un seul `SubmitButton` dans l'ensemble de votre formulaire Web. Si vous voulez plus d'un bouton de soumission (par exemple pour un bouton de soumission de brouillon), vous pouvez utiliser la méthode `SubmitToWorkflow()` dans l'événement `Click` de vos boutons supplémentaires.

{% hint style="info" %}
Le type de bouton de soumission peut être l'un des contrôles Web suivants : `Button`, `LinkButton` ou `ImageButton`.
{% endhint %}

## Gestion des champs

### Aperçu

Les différents champs que glissez-déplacez dans votre formulaire Web doivent avoir leurs IDs exactement les mêmes que les noms des paramètres WorkflowGen dans vos actions afin d'être automatiquement liés avec les valeurs IN ou INOUT.

### Contrôles Web supportés

* `TextBox`
* `Label`
* `RadioButton`
* `RadioButtonList`
* `CheckBox`
* `CheckBoxList`
* `DropDownList`
* `ListBox` (mode de sélection simple ou multiple)
* `FileUpload`
* `HtmlInputFile`
* `GridView`

### Type de données de champ

Le type de données à mettre dans les zones de texte doit être spécifié dans la source de votre formulaire Web. Si vous souhaitez qu'une certaine zone de texte contienne une date, par exemple, vous devez spécifier l'attribut étendu `FieldDataType` comme `Date`. Pour ce faire, accédez à la source de votre formulaire Web en cliquant sur **Source** (à côté de **Conception**) en bas du formulaire Web.

Voici un exemple du code qui doit être ajouté à une zone de texte pour contenir une valeur `Date` :

```markup
<asp:TextBox FieldDataType="Date" ID="TEXT_BOX_DATE" runat="server"> </asp:TextBox>
```

Les formats suivants sont supportés :

* `Date`
* `DateTime`
* `Time`
* `Numeric`
* `Currency`
* `Text` (valeur par défaut)

Les valeurs `Date`, `DateTime`, `Time`, `Numeric` et `Currency` seront automatiquement mises en forme en fonction de la culture actuelle de l'utilisateur.

{% hint style="info" %}
Il n'est pas nécessaire de spécifier `FieldDataType="Text"` pour les valeurs de chaîne.
{% endhint %}

### `FieldFormat` pour `FieldDataType="DateTime"`

Si vous spécifiez le type de données de champ `DateTime` sur une zone de texte ou une étiquette, vous pouvez également spécifier l'attribut `FieldFormat`. Cet attribut est utilisé pour indiquer à WorkflowPage comment mettre en forme la date et l'heure de la culture actuelle. Par exemple, si vous souhaitez afficher la date au format `December 10, 2019 10:11:29 PM`, vous déclarez la zone de texte comme suit :

```markup
<asp:TextBox FieldDataType="DateTime" FieldFormat="{0:U}" ID="TEXT_BOX_DATE_TIME" runat="server"></asp:TextBox>
```

Le tableau suivant fournit une liste de toutes les chaînes de format `DateTime` possibles :

| **Chaîne** | **Type**                                     | **Exemple**                   |
| :--------: | -------------------------------------------- | ----------------------------- |
|   `{0:d}`  | Date courte                                  | 10/12/2020                    |
|   `{0:D}`  | Date longue                                  | December 10, 2020             |
|   `{0:t}`  | Heure courte                                 | 10:11 PM                      |
|   `{0:T}`  | Heure longue                                 | 10:11:29 PM                   |
|   `{0:f}`  | Date/heure complète                          | December 10, 2020 10:11 PM    |
|   `{0:F}`  | Date/heure complète (heure longue)           | December 10, 2020 10:11:29 PM |
|   `{0:g}`  | Date/heure par défaut                        | 10/12/2020 10:11 PM           |
|   `{0:G}`  | Date/heure par défaut (heure longue)         | 10/12/2020 10:11:29 PM        |
|   `{0:M}`  | Modèle mois heure                            | December 10                   |
|   `{0:r}`  | Chaîne de date RFC1123                       | Thu, 10 Dec 2020 22:11:29 GMT |
|   `{0:s}`  | Chaîne de date triable                       | 2020-12-10T22:11:29           |
|   `{0:u}`  | Date/heure triable universelle, heure locale | 2020-12-10 22:13:50Z          |
|   `{0:U}`  | Date/heure triable universelle, GMT          | December 10, 2020 3:13:50 AM  |
|   `{0:Y}`  | Modèle année mois                            | December, 2020                |

### `TimeZoneConversion` pour `FieldDataType="DateTime"`

Si vous spécifiez le type de données de champ `DateTime` sur une zone de texte ou une étiquette, vous pouvez également spécifier l'attribut `TimeZoneConversion`. Cet attribut booléen est utilisé pour indiquer à WorkflowPage de désactiver la conversion du fuseau horaire de l'utilisateur sur le contrôle Web actuel.

La valeur par défaut est `True` si cet attribut n'est pas déclaré dans la définition du contrôle Web. Si cet attribut est défini sur `False`, la valeur `DateTime` est traitée comme une valeur `DateTime` GMT/UTC (sans aucune conversion).

```aspnet
<asp:TextBox FieldDataType="DateTime" TimeZoneConversion="False" ID="TEXT_BOX_DATE_TIME" runat="server"></asp:TextBox>
```

Ceci est disponible depuis WorkflowGen.My version 2.2.3.

### `FieldDataBind` pour le contrôle `asp:Label`

Cet attribut est utilisé pour activer ou désactiver la liaison automatique de données entre un contrôle d'étiquette et son champ de données de formulaire associé.

La valeur par défaut est `True` si cet attribut n’est pas déclaré dans la définition du contrôle `Label`. Si cet attribut est défini sur `False`, le contrôle `Label` ne liera pas les données au champ de données de formulaire associé.

```aspnet
<asp:Label FieldDataBind="False" ID="MY_LABEL_NOT_BIND" runat="server"></asp:Label>
```

Ceci est disponible depuis WorkflowGen.My version 2.1.8.

## Gestion de la validation des champs

Voir [Gestion de la validation des champs](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance#gestion-de-la-validation-des-champs) dans la section [Mode avancé](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance).

## Champs en lecture seule

Voir [Champs en lecture seule](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance#champs-en-lecture-seule) dans la section [Mode avancé](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance).

## Gestion de la colorisation des champs

Voir [Gestion de la colorisation des champs](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance#gestion-de-la-colorisation-des-champs) dans la section [Mode avancé](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance).

## Gestion de l'archive de formulaire

Voir [Gestion de l'archive de formulaire](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance#gestion-de-larchive-de-formulaire) dans la section [Mode avancé](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance).

## Gestion des pièces jointes

Si vous ajoutez un contrôle `FileUpload` ou `HtmlInputFile` à votre formulaire Web, le fichier sera automatiquement enregistré et les données de processus WorkflowGen associées à cet ID de contrôle seront automatiquement mises à jour avec la référence au fichier téléchargé lors de la soumission du formulaire.

## Gestion des ressources

Voir [Gestion des ressources](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance#gestion-des-ressources) dans la section [Mode avancé](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance).

## Gestion du GridView

### Aperçu

Cette section explique comment utiliser un GridView (avec certaines limitations) en mode simple.

### Limitations

* Seuls les `BoundFields`, `CheckBoxFields`, `CommandFields` et `TemplateFields` sont supportés.<br>
* Le tri et la pagination ne peuvent pas être utilisés.

### Conception du GridView

1. Glissez-déplacez un GridView dans le formulaire Web.<br>
2. Cliquez sur **Modifier les colonnes**. <br>
3. Décochez la case **Générer automatiquement les champs**, car vous choisirez les champs souhaités dans GridView et aucune source de données ne sera utilisée.<br>
4. Ajoutez des `BoundField` et `CheckBoxField` comme requis. La propriété importante à définir pour chacun de ces champs est `DataField`, pour laquelle vous pouvez spécifier tout ce que vous voulez, tant qu'il n'y a pas de caractères spéciaux ou d'espaces dans ce nom.<br>
5. Si vous souhaitez que votre champ soit au format date/heure ou au format numérique, vous pouvez le faire en définissant l'attribut `HtmEncode` sur `"False"` et l'attribut `DataFormatString` sur les valeurs possibles suivantes uniquement :

📌 **Formats de date/heure et exemples utilisant la culture `en-US`**

| **Chaîne** | **Exemple**                         |
| :--------: | ----------------------------------- |
|   `{0:d}`  | 3/3/2020                            |
|   `{0:D}`  | Tuesday, March 03, 2020             |
|   `{0:g}`  | 3/3/2020 12:00 AM                   |
|   `{0:g}`  | 3/3/2020 12:00:00 AM                |
|   `{0:t}`  | 12:00 AM                            |
|   `{0:T}`  | 12:00:00 AM                         |
|   `{0:f}`  | Tuesday, March 03, 2020 12:00 AM    |
|   `{0:M}`  | March 03                            |
|   `{0:s}`  | 2020-03-03T00:00:00                 |
|   `{0:u}`  | 2020-03-03 00:00:00Z                |
|   `{0:U}`  | Tuesday, March 03, 2020 12:00:00 AM |
|   `{0:Y}`  | March, 2020                         |

📌 **Formats numériques et exemples utilisant la culture `en-US`**

|       Chaîne       | Exemple |
| :----------------: | ------- |
|       `{0:C}`      | $200.00 |
| `{0:N}` ou `{0:F}` | 200.00  |
|       `{0:P}`      | 20.00 % |
|       `{0:R}`      | 200     |

Nous vous recommandons de changer `ApplyFormatInEditMode` en `"true"` si vous utilisez l'un de ces formats dans vos champs. Cette propriété applique la mise en forme souhaitée aux données même lorsque l'utilisateur final modifie les données.

Si vous utilisez l'un de ces formats, le champ sera automatiquement validé pour une date/heure valide ou un format numérique lors de la mise à jour de la ligne. S'il n'est pas valide, un message d'erreur sera envoyé à l'utilisateur final en utilisant le texte d'en-tête de colonne pour lui indiquer que ce champ particulier n'est pas au format correct et qu'il doit le corriger.

Le message d'erreur par défaut pour les dates non valides dans les GridViews est `You have entered an invalid date in the {0} column`, où `{0}` représente le texte de l'en-tête de la colonne. Vous pouvez spécifier votre propre message en remplaçant la valeur de la propriété `InvalidDateGridViewErrorMessage` dans la méthode `Page_Load` de votre formulaire Web.

{% hint style="info" %}
La mise en forme utilise la culture actuelle de l'utilisateur.
{% endhint %}

### Activation de l'insertion, de la modification et de la suppression dans le GridView

Pour activer l'insertion, la modification et la suppression dans le GridView, procédez comme suit :

1. Ajoutez un `CommandField` à votre GridView.<br>
2. Définissez la propriété `CausesValidation` sur `"False"`, sinon le bouton **Mettre à jour** déclenchera la validation de tous les champs de la page.<br>
3. Définissez la propriété `ShowEditButton` sur `"True"` si vous souhaitez activer l'insertion et la modification.<br>
4. Définissez la propriété `"ShowDeleteButton"` sur `"True"` si vous souhaitez activer la suppression dans le GridView.

### Données de formulaire

Un nœud `DataTable` sera automatiquement ajouté par WorkflowPage dans votre jeu de données `FORM_DATA`. Le nom de cette table sera l'ID de votre GridView et chaque `BoundField` et `CheckBoxField` auront son `DataColumn` automatiquement créé dans cette table avec le `DataField` comme nom de colonne. Le `DataType` du `DataColumn` sera déterminé par le `DataFormatString` utilisé.

### Définition d'un GridView en lecture seule ou requis

Le GridView peut être automatiquement défini en lecture seule ou requis à l'aide des paramètres `FORM_FIELDS_READONLY` et `FORM_FIELDS_REQUIRED` de vos actions WorkflowGen.

Lorsqu'un GridView est défini sur requis, il force l'utilisateur final à remplir et à mettre à jour au moins une ligne. Le message par défaut `The {0} list needs to have at least one filled row` sera affiché à l'utilisateur, où `{0}` contiendra l'infobulle du GridView ou son ID si aucune infobulle n'a été spécifiée. Vous pouvez modifier ce message en modifier la propriété WorkflowPage `RequiredGridViewsErrorMessage` dans le `Page_Load` de votre formulaire Web.

Lorsqu'un GridView est défini en lecture seule, il masque automatiquement les colonnes `CommandField` et une ligne vide n'est pas automatiquement insérée dans le GridView.

### Définition de colonnes particulières sur requis dans un GridView

Vous pouvez utiliser le paramètre `FORM_FIELDS_REQUIRED` pour définir `BoundFields` ou `TemplateFields` sur requis dans votre GridView avec la syntaxe suivante :

`GRIDVIEW_ID.DATAFIELDNAME`

Vous ne pouvez pas utiliser les caractères `*` (astérisque) ou `^` (caret) pour ces champs particuliers. À la place, vous devez spécifier l'ID GridView et le nom du champ de données pour chaque champ que vous souhaitez définir comme requis.

Les champs des colonnes requises seront automatiquement colorisés en fonction de la valeur de votre propriété `FieldsColorization` lorsque vous êtes en mode édition.

Le message d'erreur par défaut affiché à l'utilisateur final est `The {0} column is required`. Ce message peut être modifié en modifiant la propriété `RequiredColumnsInGridViewsErrorMessage`.

### Utilisation des `TemplateField` dans un GridView

Vous pouvez utiliser des `TemplateField` (champs de modèle) dans vos GridViews. Les IDs des contrôles Web que vous utilisez dans vos champs de modèle seront utilisés comme noms de champ dans les données de votre formulaire. Assurez-vous d'avoir les mêmes IDs dans votre `ItemTemplate` et dans votre `EditItemTemplate`, sinon les données ne seront pas cohérentes lorsque vous basculerez entre les modes de modification et de listing.

La prochaine chose que vous devez faire est de définir les valeurs des contrôles Web à l'aide de l'expression `Bind` conformément à l'exemple ci-dessous.

Vous pouvez également utiliser l'attribut `FieldDataType` sur vos contrôles Web insérés dans vos champs de modèle, mais assurez-vous de définir le même `FieldDataType` dans le `ItemTemplate` et le `EditItemTemplate`, sinon les données ne seront pas formatées comme vous le souhaiteriez.

Vous pouvez également utiliser n'importe quel type de validateur dans vos champs de modèle pour valider l'entrée utilisateur (`RangeValidator`, `RequiredFieldValidator`, `RegularExpressionValidator`, `CustomValidator`, etc...), la seule contrainte étant que vous devez définir la propriété `EnableClientScript` sur `"False"` dans tous les validateurs que vous utilisez dans les champs de modèle.

Voici un exemple simple d'un `TemplateField` qui utilise un `DropDownList` et un `RequiredFieldValidator` :

```markup
<asp:TemplateField HeaderText="Gender">
    <EditItemTemplate>
        <asp:DropDownList ID="Gender" runat="server" SelectedValue='<%# Bind("Gender") %>'>
            <asp:ListItem Selected="True"></asp:ListItem>
            <asp:ListItem>Male</asp:ListItem>
            <asp:ListItem>Female</asp:ListItem>
        </asp:DropDownList>
        <asp:RequiredFieldValidator ID="GenderValidator" runat="server" ControlToValidate="Gender" Display="Dynamic" ErrorMessage="The gender is required" SetFocusOnError="True" EnableClientScript="False">                                    
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Gender" runat="server" Text='<%# Bind("Gender") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
```

### Remplir un GridView avec une source de données externe pour l'initialisation

Si vous souhaitez remplir un GridView avec une source de données externe, vous devrez écrire du code. Les étapes de base pour ce faire sont les suivantes :

1. Remplissez votre FormData à l'aide de la méthode `FillFormData(FormData)`.<br>
2. Récupérez vos données externes dans un DataSet.<br>
3. Pour chaque ligne du DataTable résultant, créez un clone de la ligne et insérez cette ligne au début de votre DataTable associé à votre GridView (le nom DataTable dans votre FormData est toujours l'ID de votre GridView).<br>
4. Enregistrez vos données de formulaire à l'aide de la méthode `SaveFormData(FormData)`.<br>
5. Si le GridView n'est pas en mode lecture seule, définissez l'index d'édition de votre GridView sur la dernière ligne.<br>
6. Reliez votre GridView.

Voici un exemple simple de remplissage d'un GridView dont l'ID est `PeopleList` avec quelques prénoms et noms de famille d'un DataSource SQL :

```csharp
// 1. Remplissez votre `FormData` en utilisant la méthode `FillFormData(FormData)`
            FillFormData(FormData);         

// 2. Récupérez vos données externes dans un DataSetSqlDataSourceSample.SelectCommand = "SELECT FIRST_NAME, LAST_NAME FROM PEOPLE_LIST";

      DataSet myData = new DataSet();
      SqlDataAdapter adapter = new
SqlDataAdapter(SqlDataSourceSample.SelectCommand,
   SqlDataSourceSample.ConnectionString);
      adapter.Fill(myData, "PEOPLE_LIST");

// 3. Pour chaque ligne du DataTable résultant, créez un clone de la ligne
//    et insérez cette ligne au début de votre DataTable associée au GridView
            foreach (DataRow row in myData.Tables["PEOPLE_LIST"].Rows)
            {

                DataRow rowToAdd = FormData.Tables["PEOPLE_LIST"].NewRow();
                rowToAdd["FirstName"] = row["FIRST_NAME"];
                rowToAdd["LastName"] = row["LAST_NAME"];

                FormData.Tables["PeopleList"].Rows.InsertAt(rowToAdd, 0);
            }

// 4. Enregistrez votre FormData en utilisant la méthode “SaveFormData(FormData)”           
SaveFormData(FormData);

// 5. Si le GridView n'est pas en mode ReadOnly, définissez l'index d'édition de votre GridView sur la dernière ligne
PeopleList.EditIndex = FormData.Tables["PeopleList"].Rows.Count - 1;

// 6. Relier le GridView
PeopleList.DataBind();
```

### Création d'un GridView avancé en mode simple

Si vous souhaitez gérer votre GridView sans utiliser le mode simple, vous pouvez suivre les étapes de la section [Gestion des GridView](#gestion-des-gridview) (mode avancé).

Pour placer vos données GridView dans le FormData géré par le mode simple, vous devez insérer le DataTable associé à votre GridView dans le jeu de données WorkflowPage `FormData` dans votre méthode `Page_Load`.

Après avoir implémenté l'exemple ci-dessus, vous devrez mettre le code suivant dans votre méthode `Page_Load` :

```csharp
// Ajoutez la table de données de la liste des personnes si elle n'est pas déjà
// dans le FormData du mode simple
if (!FormData.Tables.Contains(peopleListDataTable.TableName))
{

// Ajoutez la table peopleList dans le FormData du mode simple
FormData.Tables.Add(peopleListDataTable);

  // Remplissez les données du formulaire
  FillFormData(FormData);
}
```

## Utilisation des UserControls Web dans les formulaires Web

Voir [Utilisation des UserControls Web dans les formulaires Web](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance#utilisation-des-usercontrols-web-dans-les-formulaires-web) dans la section [Mode avancé](https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-avance).

## Utilisation de contrôles personnalisés

Lorsqu'ils travaillent sur des formulaires Web activés pour un workflow, les développeurs sont souvent demandés à implémenter des parties de formulaires Web qui auraient déjà pu être utilisées dans d'autres formulaires Web.

Parfois, le développeur passe un temps considérable à reproduire et adapter le code existant d'un formulaire Web existant à un autre. Les contrôles personnalisés sont la solution à ces problèmes.

Un contrôle personnalisé peut être défini comme un contrôle composite composé de contrôles réguliers et incorporant une logique métier.

Des exemples simples de contrôles personnalisés peuvent être `approval zone`  ou `advanced upload control`. Visual Studio permet à l'utilisateur d'insérer ce type de contrôle par un simple glisser-déplacer depuis la barre d'outils.

### Installation de contrôles personnalisés dans Visual Studio

Les contrôles personnalisés doivent être installés dans l'environnement de développement Visual Studio. Le développeur doit uniquement exécuter un assistant d'installation intégré dans un fichier VSI (Visual Studio Installer avec l'extension `.vsi`).

Les packs VSI fonctionnent dans toutes les versions de Visual Studio.

Nous vous recommandons de fermer Visual studio avant de démarrer une installation VSI. Ensuite, double-cliquez sur votre fichier `.vsi` pour passer à l'assistant d'installation de contrôle personnalisé. Lors de l'installation, il vous sera demandé de faire confiance au composant; répondez **OUI**.

Une fois installés, les contrôles personnalisés sont disponibles dans la boîte à outils Visual Studio.

### Utilisation de contrôles personnalisés avec des formulaires Web

Les développeurs qui ont installé un contrôle personnalisé doivent pouvoir le faire glisser-déplacer sur le formulaire Web en mode **Création**. Visual Studio ajoute ensuite toutes les références requises à l'assembly du contrôle personnalisé en cours d'insertion dans le projet. Visual Studio copie l'assembly dans le répertoire  `\bin` de votre application à partir du chemin de stockage des paramètres Visual Studio commun.

Si l'assembly de contrôle est introuvable, le concepteur Visual Studio affiche une erreur de rendu sur votre contrôle.

Vous pouvez ensuite ajuster divers paramètres de contrôle (tels que les dimensions, le style et d'autres propriétés spécifiques) en modifiant les valeurs de propriété dans la fenêtre **Propriétés**.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.workflowgen.com/vs-web-forms-fr/developpement-de-formulaires-web-mode-simple.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
