Structure, sections et champs

Structure

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.

Voir la section Outils pour les différents types de section par défaut.

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.

Voir la section Outils pour les différents types de champs par défaut.

Boutons

  • Les boutons de soumission et d'enregistrement peuvent être renommés dans la configuration du formulaire (Général / Boutons).

  • Le bouton d'enregistrement en brouillon 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

Gestion des outils personnalisés

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

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

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

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

Édition du format