Des modèles de style clé en main sont disponibles dans le menu déroulant de la barre d'outils du concepteur de formulaires. Ils 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
Les styles sélectionnés dans le menu déroulant seront appliqués à l'ensemble du formulaire. L'Éditeur d'apparence vous permet de personnaliser entièrement les éléments de formulaire individuels, tels que la police et la taille, les couleurs du texte et de l'arrière-plan, les styles et les couleurs des bordures, etc.
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. Cliquez sur dans la barre d'outils du concepteur de formulaires pour ouvrir l'Éditeur d'apparence, que vous pouvez utiliser en modes Express ou Avancé.
Pour éditer en mode Express, survolez 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.
La section Texte vous permet de modifier l'apparence du texte, l'alignement et l'espacement entre les mots. La section Disposition vous permet de modifier la largeur et le rembourrage de l'élément. La section Bordures vous permet d'ajouter des bordures et en modifier l'apparence. La section Disposition du conteneur vous permet de régler les marges du haut, de gauche et de droite du conteneur.
Depuis l'onglet Appliquer sur... vous pouvez spécifier les éléments auxquels vous désirez appliquer les paramètres d'apparence personnalisés.
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 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 Correspondances 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.
Lorsque l'action est sélectionnée, les boutons IN (valeur d'entrée) et OUT (valeur de sortie) seront activés pour chaque champ 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 IN 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 OUT 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 d'analytiques (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, cochez Activer l'approbation rapide dans l'onglet Approbation rapide. Cliquez sur Modifier les mots-clés pour l'approbation par courriel pour spécifier des mots-clés d'approbation par email (séparés par des virgules) pour les paramètres d'approbation rapide configurés. Une fois activé, vous pouvez également activer les commentaires d'approbation rapide pour les actions de commentaires.
Pour activer l'Approbation rapide par défaut, cochez Approbation rapide par défaut dans l'onglet Portail du panneau de configuration.
Si vous avez modifié les paramètres d'Approbation rapide par défaut ou ajouté des paramètres supplémentaires, les valeurs des paramètres doivent être statiques et non liées à des données de processus dynamiques.
Le mode Avancé propose du plus amples options. Pour afficher le panneau du mode Avancé, survolez la souris sur l'élément de formulaire pour afficher la barre d'outils du mode Express, puis cliquez sur l'icône à droite.
Pour appliquer vos paramètres d'apparence personnalisés et fermer le menu du mode Avancé, cliquez sur l'icône en haut à droite du panneau. Cliquez sur l'icône pour annuler les changements et fermer le menu.
Cliquez sur dans la barre d'outils pour activer la vue interactive du workflow et définir le comportement du formulaire.
Pour afficher la vue workflow interactive et gérer les correspondances du formulaire, cliquez sur dans la barre d'outils.
