Développement de formulaires Web : Mode simple
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.
- Visual Web Developer Express 2013 ou version ultérieure
- Visual Studio Community ou Professional 2013 ou version ultérieure
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é.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 :
- 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.
- 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.
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>
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;
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
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
.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.
TextBox
Label
RadioButton
RadioButtonList
CheckBox
CheckBoxList
DropDownList
ListBox
(mode de sélection simple ou multiple)FileUpload
HtmlInputFile
GridView
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.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 |
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.
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.
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.Cette section explique comment utiliser un GridView (avec certaines limitations) en mode simple.
- Seuls les
BoundFields
,CheckBoxFields
,CommandFields
etTemplateFields
sont supportés. - Le tri et la pagination ne peuvent pas être utilisés.
- 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
etCheckBoxField
comme requis. La propriété importante à définir pour chacun de ces champs estDataField
, 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'attributDataFormatString
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.
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.
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é.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.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
.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>
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();
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);
}
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.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.
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.
Dernière mise à jour 2mo ago