Apparence, comportement et correspondances
Dernière mise à jour
Dernière mise à jour
Les exemples de styles clé en main contiennent des CSS additionnels qui formalisent et optimisent automatiquement l’affichage du formulaire web sur smartphone et tablette selon la résolution de l’écran.
Des styles personnalisés peuvent être créés et déployés sur le serveur en suivant la structure suivante :
\wfgen\App_Data\Templates\Forms\[langue]\[nom du dossier]\css\[nom du style].css
📌 Exemple
\wfgen\App_Data\Templates\Forms\Fr\MonEntreprise\css\MonStyle.css
L'Éditeur d’apparence vous permet de personnaliser l'apparence des éléments de formulaire individuels ainsi que d'autres options. Vous pouvez changer l'apparence des en-têtes et pieds de page, les champs et leurs libellés, les boutons de radio et cases à cocher, et les boutons Envoyer et Enregistrer en brouillon.
Vous pouvez utiliser l'Éditeur d'apparence en mode Express ou Avancé.
Pour éditer en mode Express, passez la souris sur l'élément et une barre d'outils s'affichera dans laquelle vous pouvez changer l'apparence du texte et la taille du haut de page. (Si l'élément comprend plusieurs champs, des barres d'outils s'afficheront dans les positions correspondantes.) Vous pouvez aussi changer la largeur des libellés et des champs.
Pour afficher les barre d'outils Express pour tous les éléments du formulaire, appuyez sur Ctrl+Maj+A.
Le mode Avancé propose du plus amples options. Pour afficher le menu du mode Avancé, passez la souris sur l'élément pour afficher la barre d'outils Express, puis cliquez sur l'icône crayon.
Texte vous permet de modifier l'apparence du texte, l'alignement et l'espacement entre les mots. Disposition vous permet de modifier la largeur et le rembourrage de l'élément. Bordures vous permet d'ajouter des bordures et en modifier l'apparence. Disposition du conteneur vous permet de régler les marges du haut, de gauche et de droite du conteneur.
Vous pouvez également ajouter des images aux en-têtes et aux corps des sections :
URL de l'image de fond : L'URL de l'image à afficher
Répétition de l'image définit si/comment l'image sera répétée :
Aucune répétition : l'image ne sera pas répétée
Répétition : l'image sera répétée à la fois verticalement et horizontalement (valeur par défaut)
Répétition x : l'image sera répétée horizontalement seulement
Répétition y : l'image sera répétée verticalement seulement
Position de l'image "x" aligne l'image à gauche, au centre horizontal, ou à droite
Position de l'image "y" aligne l'image en haut, au centre vertical, ou en bas
Depuis l'onglet Appliquer sur... vous pouvez spécifier les éléments auxquels vous désirez appliquer les paramètres d'apparence personnalisés.
Pour appliquer vos paramètres d'apparence personnalisés et fermer le menu du mode Avancé, cliquez sur l'icône encoche. Pour annuler les changements et fermer le menu, cliquez sur l'icône x.
L'écran Comportement permet de définir visuellement et à l’aide de simples clics le comportement des sections et des champs du formulaire pour chacune des actions du workflow.
Pour activer la vue interactive du workflow et définir le comportement du formulaire cliquez sur Comportement dans la barre d'outils.
Pour définir le comportement des sections et des champs du formulaire au niveau d’une action, cliquez sur l’action souhaitée au niveau de la vue interactive du workflow.
Une fois l’action sélectionnée, les paramètres Requis, Lecture seule et Caché s’activent à l’écran sous forme de bouton cliquable pour chaque section et champ du formulaire.
Pour définir le comportement du formulaire au niveau des autres actions du workflow, cliquez sur une autre action via la vue interactive et répétez l’opération précédente selon le comportement souhaité.
Sections | Requis | Lecture seule | Caché |
Toutes les sections | ✔️ | ✔️ | ✔️ |
Champs par défaut | Requis | Lecture seule | Caché |
Pièce jointe (contrôle FileUpload .NET standard) | ✔️ | ✔️ | ✔️ |
Pièce jointe (contrôle WorkflowFileUpload) | ❌ | ✔️ | ✔️ |
Case à cocher | ❌ | ✔️ | ✔️ |
Case à cocher – liste | ❌ | ✔️ | ✔️ |
Case à cocher – liste verticale | ❌ | ✔️ | ✔️ |
Monétaire | ✔️ | ✔️ | ✔️ |
Date | ✔️ | ✔️ | ✔️ |
Date heure | ✔️ | ✔️ | ✔️ |
Liste déroulante | ✔️ | ✔️ | ✔️ |
Tableau | ✔️* | ✔️ | ✔️ |
Tableau – Colonne | ✔️* | ❌ | ❌ |
Libellé | ❌ | ❌ | ✔️ |
Liste | ✔️ | ✔️ | ✔️ |
Numérique | ✔️ | ✔️ | ✔️ |
Mot de passe | ✔️ | ✔️ | ✔️ |
Bouton radio | ❌ | ✔️ | ✔️ |
Bouton radio – liste | ✔️ | ✔️ | ✔️ |
Bouton radio – liste verticale | ✔️ | ✔️ | ✔️ |
Monétaire – lecture seule | ❌ | ❌ | ✔️ |
Date – lecture seule | ❌ | ❌ | ✔️ |
Date heure – lecture seule | ❌ | ❌ | ✔️ |
Numérique – lecture seule | ❌ | ❌ | ✔️ |
Texte – lecture seule | ❌ | ❌ | ✔️ |
Texte multi-lignes | ✔️ | ✔️ | ✔️ |
Texte | ✔️ | ✔️ | ✔️ |
* Sauf dans les conditions de champs.
L’écran Correspondance permet de définir visuellement et à l’aide de simples clics ou de boîtes de dialogue les valeurs par défaut (données en entrée) et/ou les données qui seront stockées par le workflow (données en sortie) des champs du formulaire pour chacune des actions du workflow.
Pour afficher la vue workflow interactive et gérer les correspondances du formulaire, cliquez sur Correspondance dans la barre d'outils.
Lorsque l'action est sélectionnée, les boutons Valeur d'entrée et Valeur de sortie seront activés pour chaque section du formulaire.
Une valeur par défaut va alimenter automatiquement un champ lors de l’affichage du formulaire suite au lancement d’une action. Ces valeurs par défaut peuvent être de plusieurs types.
Texte saisi manuellement
Une macro sélectionnée dans la liste des macros disponibles
Une donnée du workflow sélectionnée dans la liste des données
Pour définir les valeurs d'entrée par défaut des champs du formulaire au niveau d’une action, cliquez le bouton Valeur d'entrée du côté droit du champ.
Dans la boîte de dialogue qui apparaît, définissez la valeur par défaut du champ en saisissant un texte dans la zone Texte, en sélectionnant une macro dans la liste déroulante Macro ou en sélectionnant une donnée du processus dans la liste déroulante Donnée puis cliquez sur la coche en haut à droite pour enregistrer.
Pour définir les valeurs par défaut des autres champs du formulaire au niveau de chacune des actions du workflow, cliquez sur une autre action via la vue interactive et répéter l’opération précédente.
Pour définir les données du formulaire qui seront stockées au niveau d’une action, cliquez sur l’action souhaitée au niveau de la vue interactive du workflow.
Les champs dont la valeur a été envoyée sont alors automatiquement déclarés dans l’onglet Données de la définition du processus et seront exploitables :
Dans les conditions de transitions du workflow
Dans l'affectation d'une action, pour définir le délai d'action et le contenu des notifications
Dans les fonctionnalités de suivi et de statistiques (reporting)
Pour envoyer la valeur d’un champ du formulaire et par conséquent la stocker en donnée du processus, cliquez sur Valeur de sortie du côté droit de chaque champ concerné.
Les champs dont la valeur a été envoyée sont alors automatiquement déclarés dans l’onglet Données de la définition du processus et seront exploitables dans les conditions de transitions du workflow, les fonctionnalités de suivi et de statistiques (reporting), etc...
Les noms des données devraient respecter les conventions d'appellation XML suivantes :
Commencer par une lettre ou par un tiret bas
Contenir uniquement des lettres, des chiffres, des traits d'union, des tirets bas et des points
Ne pas contenir des espaces
Ne pas commencer par les lettres XML dans n'importe quelle casse (p.ex. xml ou Xml).
Pour plus d'informations, voir https://www.w3schools.com/xml/xml_elements.asp.
Pour définir les données stockées au niveau de chacune des actions du workflow, cliquez sur une autre action via la vue interactive et répéter l’opération précédente.
Pour activer la fonctionnalité Approbation rapide sur les actions de validation, cliquez Activer l'approbation rapide depuis l'onglet Approbation rapide. Vous pourrez alors définir des mots-clés d'approbation par email et activer les commentaires.
