Créer un formulaire avec K2

BPMN la norme mondialement connue pour la modélisation des processus

Créer un formulaire avec K2

Formulaire standard

K2 permet de créer des formulaires basés sur une système de vues. ces formulaires sont standard et permettent 3 types d’informations :

  • Des données en lecture/écriture pour saisir un élément (type une facture)
  • Éléments en liste (modifiable ou non) pour donner par exemple la liste des factures
  • Informations en lecture seule pour avoir de l’informations

Ces formulaires remplissent toutes les fonctions que l’on pourrait souhaiter dans une application métier.

Créez des formulaires BPM avec K2
Présentation d’un formulaire sous K2

Mais comment puis-je donner un peu de design à un formulaire ?

Dans les formulaires K2 (et donc dans les vues qui constituent un formulaire) il est tout à fait possible d’ajouter des icônes, du HTML et donc aussi du CSS.

J’entend déjà certains de mes clients me dire oui mais K2 est Low Code, bien entendu mais cela nous nous empêche pas d’ajouter un peu de code basique pour rendre le formulaire plus lisible pour les utilisateurs finaux.

Formulaire personnalisé

En moins de temps qu’il faut pour le dire nous pouvons ajouter des icônes dans un formulaire, et changer la couleur de cet icônes lorsque par exemple une information a été saisie dans une zone de texte.

Icône changement de couleur lors de la saisie

Ajouter une icône

Pour ajouter une icônes sur votre formulaire rien de plus simple, pour ce faire ajouter un DataLabel et dans la partie texte vous pouvez lui mettre ceci:

<i class= »fa fa-users » style= »font-size:24px »></i>

Ce qui aura pour effet de mettre cette icône

Si vous créez un style conditionnel avec la condition que lorsque la zone est différente de vide lors mettre le texte en vert vous obtiendrez l’effet souhaité.

Fenêtre de gestion des styles conditionnés
Condition de non vide sur un composant type textbox
Changement de couleur du texte si la condition est vrai

Maintenant vous pouvez ajouter des icônes très facilement dans vos formulaires avec un changement de couleur.

D’autres icônes

Retrouvez plus d’information sur les icônes ici:

https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *