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.

• Tout peut être fait en mode design.

• Tous les champs supportés sont automatiquement liés dans deux directions : de WorkflowGen au formulaire Web et du formulaire Web à WorkflowGen.

• 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.

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.

3. Faites un clic droit sur MonFormulaireWeb et choisissez Convertir en application.

4. Sélectionnez le pool d'applications utilisé par votre site et un autre pool d'applications spécifique.

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.

2. Choisissez Site Web ASP.NET.

3. Choisissez Système de fichiers dans la liste déroulante Emplacement.

4. Cliquez sur Parcourir, puis choisissez l'emplacement de votre site Web ASP.NET.

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

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" :

   <compilation debug="true" />

2. Assurez-vous que le suivant n'est pas commenté et que la propriété mode est définie sur "Off" :

   <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 :

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 :

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.

Le type de bouton de soumission peut être l'un des contrôles Web suivants : Button, LinkButton ou ImageButton.

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 :

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

Il n'est pas nécessaire de spécifier FieldDataType="Text" pour les valeurs de chaîne.

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 :

<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).

<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é.

<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 dans la section Mode avancé.

Champs en lecture seule

Voir Champs en lecture seule dans la section Mode avancé.

Gestion de la colorisation des champs

Voir Gestion de la colorisation des champs dans la section Mode avancé.

Gestion de l'archive de formulaire

Voir Gestion de l'archive de formulaire dans la section Mode avancé.

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 dans la section Mode avancé.

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.

• Le tri et la pagination ne peuvent pas être utilisés.

Conception du GridView

1. Glissez-déplacez un GridView dans le formulaire Web.

2. Cliquez sur Modifier les colonnes.

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.

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.

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.

La mise en forme utilise la culture actuelle de l'utilisateur.

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.

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.

3. Définissez la propriété ShowEditButton sur "True" si vous souhaitez activer l'insertion et la modification.

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 :

<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).

2. Récupérez vos données externes dans un DataSet.

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).

4. Enregistrez vos données de formulaire à l'aide de la méthode SaveFormData(FormData).

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.

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 :

// 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 (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 :

// 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 dans la section Mode avancé.

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.