Structure, sections et champs

Structure du formulaire

Un formulaire créé avec l’éditeur intégré dispose d’un en-tête, une ou plusieurs sections, un ou plusieurs champs par section, un bouton Envoyer, un bouton Sauvegarder optionnel et un pied de page.

Les attributs que vous définissez dans la section générale de la fenêtre de configuration de formulaire seront appliqués à toutes les sections. L'éditeur d’apparence propose ceux-ci ainsi que d'autres options de style (par exemple, la police et la taille du texte, les couleurs de fond, les styles de bordure, etc...) que vous pouvez personnaliser pour chaque élément de formulaire. Pour plus de renseignements, voir la section Éditeur d'apparence.

En-tête

  • L’en-tête comprend un titre, un libellé et une image en option.

  • Le titre peut être utilisé pour afficher le nom du processus. Son texte peut être édité directement sur le formulaire.

  • Le libellé est utilisé pour afficher le numéro de la demande actuelle. Son identifiant par défaut est CURRENT_REQUEST et peut être référencé dans un paramètre d’action pour recevoir la macro Request.Id.

  • L’image est utilisée pour afficher un logo. Elle peut être redimensionnée ou réalignée dans la fenêtre de configuration du formulaire (Général / En-tête).

  • Une largeur et une hauteur fixe peuvent être réglées pour l’en-tête.

Section

  • Une section comprend un titre pour afficher le nom de la section. Son texte peut être édité directement sur le formulaire.

  • Il peut avoir un ou plusieurs champs.

  • Chaque section doit avoir un identifiant unique.

  • Les sections peuvent seulement être alignées verticalement et réorganisées en utilisant le glisser-déplacer avec la souris.

  • Lors de l’insertion d’une section sur le formulaire, la nouvelle section sera placée en dernière position.

  • Les sections seront redimensionnées automatiquement en fonction du plus grand champ sur le formulaire chaque fois qu’il y a un changement d’une largeur de champ.

  • Une largeur fixe peut être définie globalement pour les sections dans la configuration du formulaire (Général / Sections).

  • Les paramètres de la section peuvent être édités en utilisant l’icône crayon sur le côté droit du nom de la section.

Champs

  • Un champ comprend un libellé et un contrôle de saisie.

  • Le libellé est utilisé pour afficher le nom du champ. Son texte peut être édité directement sur le formulaire. Il peut être redimensionné et réaligné.

  • Une largeur fixe peut être définie globalement pour tous les libellés dans la configuration du formulaire (Général / Libellés).

  • Le contrôle de saisie permet de capturée une valeur sur le formulaire. Il peut être redimensionné et réaligné.

  • Chaque champ doit avoir un identifiant unique.

  • Tous les champs dans la même section sont préfixés avec l'identifiant de la section suivi par une barre de soulignement.

  • Les champs d’une section peuvent êtres réorganisés verticalement en utilisant le glisser-déplacer avec la souris.

  • Un champ peut être déplacé d'une section à une autre en utilisant le glisser-déplacer avec la souris.

  • Lors de l’insertion d'un outil de champ dans le formulaire, le nouveau champ sera placé dans la dernière position de la section sélectionnée ou la première section si aucune section n’a été choisie.

  • Par défaut, les champs sont alignés verticalement sur la même colonne.

  • Plusieurs champs peuvent être alignés horizontalement (sur la même ligne) en utilisant le bouton Retirer le saut de ligne (flèche vers la gauche) sur le côté droit du premier champ.

  • Plusieurs champs peuvent être alignés verticalement en utilisant le bouton Insérer un saut de ligne (flèche vers la droite) sur le côté droit du premier champ.

  • Les paramètres du champ peuvent être édités en utilisant l’icône crayon sur le côté droit du champ.

Boutons

  • Les boutons Soumettre et Enregistrer peuvent être renommés dans la configuration du formulaire (Général / Boutons).

  • Le bouton Enregistrer peut être activé ou désactivé.

  • Leur identifiants sont submitButton et saveAsDraftButton respectivement

Pied de page

  • Le pied de page comprend un libellé et une image en option.

  • Le libellé peut être utilisé pour afficher une note. Son texte peut être édité directement sur le formulaire.

  • L’image est utilisée pour afficher un logo. Elle peut être redimensionnée ou réalignée dans la configuration du formulaire (Général / Pied de page).

  • Une largeur et une hauteur fixe peuvent être définies pour le pied de page.

Pour modifier la feuille de style et autres attributs (en-tête, image, pied de page, textes, etc...) au moment de l'exécution du formulaire vous pouvez ajouter le code .NET suivant :

protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Load(sender, e);
    String stylePath=HttpContext.Current.Request.PhysicalApplicationPath.Replace("WfApps\\WebForms\\","App_Data\\Templates\\Forms\\En\\Default\\css");
    Page.Header.Controls.Remove(this.FindControl("StyleSheet"));
    Page.Header.Controls.Add(
        new LiteralControl(
            System.IO.File.ReadAllText(stylePath + "\\" + "metal.css")
        )
    );
    string imageUrl="http://mywebsite/mylogo.jpg"
    HeaderImage.Style["background-image"] = "url('" + imageUrl+ "')";
    HeaderTitleLabel.Text="My Title #";
    FooterTitleLabel.Text="My footer";
    imageUrl="http://mywebsite/myfooter.jpg";
    FooterImage.Style["background-image"] = "url('" + imageUrl+ "')";
}

Cet exemple remplace les éléments suivants :

  • La feuille de style par la feuille de style nommée metal.css

  • Le titre de l’en-tête

  • L’image de l’en-tête

  • Le titre du pied de page

  • L’image du pied de page

Vous pouvez avoir besoin de modifier la largeur et la hauteur dans le code .NET si vous changez d’image.

Exemple :

FooterImage.Style["width"] = "200px";  
FooterImage.Style["height"] = "100px";

Il est recommandé d’utiliser des adresses absolues pour les différentes ressources (images, CSS, etc...) de manière à ce que les copies comme le « Form Archive » puissent les afficher indépendamment de leur localisation (ex. : email de notification).

Sections et champs de formulaire

Outils

Enregistrement d’une section ou d’un champ comme outil

Cette fonctionnalité vous permet d'enregistrer une section ou un champ existant en tant que champ ou section personnalisé réutilisable dans le formulaire actuel et dans d'autres formulaires. Tout d'abord, sélectionnez une section ou un champ, puis cliquez sur l'icône Sauvegarder une section ou un champ en tant qu’outil dans la barre d'outils.

Gestion des outils personnalisés

Sélectionnez Gérer les outils personnalisés depuis la liste déroulante Outils.

Paramètres de section

Paramètres de la pièce jointe

Paramètres des cases à cocher et boutons de radio

Ces paramètres s'appliquent aux champs de type : case à cocher – liste, case à cocher – liste verticale, bouton de radio – liste et bouton de radio – liste verticale.

Paramètres des textes

Ces paramètres s'appliquent aux champs suivants : monétaire, date, date heure, numérique, mot de passe, texte multi-lignes.

Paramètres des listes et des listes déroulantes

Ces paramètres (exception aux éléments) s'appliquent aux champs suivants : libellé, monétaire - lecture seule, date – lecture seule, date heure – lecture seule, numérique – lecture seule, texte – lecture seule.

Paramètres de tableau

Outil de contrôle d'utilisateur ASP.NET

L’éditeur de formulaire supporte les outils de champ personnalisé. Ceci est un contrôle d’utilisateur ASP.NET. Vous pouvez créer cet outil et le déployer manuellement sur le serveur. Il doit avoir les structures des éléments, de dossiers et de fichiers suivants :

  • Le gabarit du contrôle d’utilisateur : \wfgen\App_Data\Templates\Forms\[langue]\[nom du dossier]\fields\[nom du contrôle d’utilisateur].txt

  • Les fichiers sources du contrôle d'utilisateur :

    • ASCX : \wfgen\WfApps\WebForms\[nom du contrôle d’utilisateur].ascx

    • Code-behind : \wfgen\WfApps\WebForms\[nom du contrôle d’utilisateur].ascx.cs

Quand vous entrez une balise, le champ de contrôle d'utilisateur insère automatiquement sa balise fermante. Pour écrouler un bloc de code, cliquez la flèche vers le bas, qui ensuite insérera une icône double-flèche à la place du code. Pour élargir un bloc de code, cliquez sur la flèche droite. Appuyez sur Ctrl+Espace pour afficher une liste déroulante qui contient les variables et mot-clés disponibles.

Le champ de contrôle utilisateur supporte les paramètres personnalisés des attributs (voir Paramètres de la pièce jointe).

Édition d’identifiant

Le menu Id dans la barre d'outils vous permet de modifier l'identifiant des sections et des champs. Vous pouvez modifier l'identifiant du libellé de l'en-tête, des sections et des champs. Les identifiants sont normalement utilisés pour identifier un élément du formulaire comme une section ou un champ d'action dans les paramètres de WorkflowGen (par exemple FORM_FIELDS_REQUIRED) ou dans le formulaire ASP.NET code-behind.

Règles

  • Chaque identifiant doit être unique

  • Il doit commencer par une lettre

  • Il ne peut contenir que des caractères alphanumériques et des caractères de soulignement

  • Il est sensible à la casse

  • Chaque champ dans une section sera automatiquement préfixé avec l’identifiant de la section suivi d’une barre de soulignement (ex. : section id=ACTION1; field id=ACTION1_MYFIELD1)

  • Chaque champ dans un tableau sera automatiquement préfixé avec identifiant du tableau suivi d’une barre de soulignement (ex. : identifiants du champ et du tableau : gridview id=ACTION1_MYGRIDVIEW1; field id=ACTION1_MYGRIDVIEW1_TITLE1).

    • Si le champ est déplacé d'une section à une autre section, l’identifiant du champ sera automatiquement préfixé avec l’identifiant de la nouvelle section.

    • Si l'identifiant de la section est modifié tous les identifiants des champs de la section sera automatiquement préfixé avec le nouvel identifiant.

Une infobulle avec l’identifiant complet/réel du champ sera affichée lorsque vous déplacez le pointeur de la souris sur l’entrée de l’identifiant.

Édition de l’infobulle

Le menu Infobulle dans la barre d'outils vous permet de modifier les infobulles. Vous pouvez modifier seulement les info-bulles des champs du formulaire. Les infobulles sont normalement utilisés pour afficher plus d'informations sur le champ lorsque l'utilisateur déplace le pointeur de la souris sur le champ.

Édition du format

Le menu Format dans la barre d'outils vous permet de modifier le format des champs. Vous pouvez modifier le format des types de champs suivant : texte, monétaire, date, date heure, numérique, libellé, monétaire en lecture seule, date en lecture seule, date heure en lecture seule, numérique en lecture seule, texte en lecture seule. Les formats sont normalement utilisés pour spécifier la façon de saisir et d'afficher une valeur spécifique basée sur la langue de l'utilisateur et de la culture.

Dernière mise à jour