Apparence, comportement et correspondances

Apparence du formulaire

Styles

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

Éditeur d’apparence

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é.

Mode Express

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 barre 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.

Mode Avancé

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.

Comportement des champs et des sections

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é.

Tableau des comportements paramétrables pour une section

Tableau des comportements paramétrables par type de champ

* Sauf dans les conditions de champs.

Correspondances

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.

Valeur par défaut (données en entrée)

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.

Données stockées par le workflow (données en sortie)

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.

Approbation rapide

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.

Dernière mise à jour