Étapes pour créer un Style Profile basique dans Nintex K2 (5.6)

Dans les dernières mises à jour de Nintex K2 Five (5.6), la fonctionnalité Style Profile a été introduite. Cette dernière facilite la modification des couleurs de vos formulaires en vous permettant de créer un style basique avec 3 couleurs principales.

Vous pouvez également paramétrer les couleurs des éléments de votre formulaire telsque les « text-box », les sliders, les info-bulles, les boutons, le menu, et les listes déroulantes. Les thèmes K2 sont désormais appelés « Legacy Themes ». Il existe de nombreuses autres propriétés que vous pourrez retrouver dans votre formulaire.

Cet article va vous aider à comprendre comment utiliser cette nouvelle fonctionnalité de (« Style Profile ») pour améliorer le design (le rendu) de vos formulaires (Smart Forms) existants. La nouvelle fonctionnalité Style Profile offre une expérience de conception visuelle pour créer des thèmes et styles sur-mesure, applicables à tout type de formulaire. Ainsi, vous pouvez désormais standardiser le format et l’expérience utilisateur de toutes vos applications pour les rendre conformes aux directives de la charte graphique de votre entreprise ou pour personnaliser le format de chaque application.

Style Profile simplifie le design de formulaires

Après analyse de la méthode de conception utilisée par les développeurs Nintex K2, nous avons observé les contraintes suivantes :

• La conception de contrôles individuels est laborieuse et rend l’uniformisation des formulaires trop chronophage.
• La création de formats sur-mesure était possible mais requérait beaucoup de code CSS et n’était pas compatible avec les best practices récentes du CSS.
• Le branding des « Smart Forms » est clé pour élargir l’utilisation d’applications d’automatisation en entreprise, en particulier auprès d’utilisateurs externes.

Pour répondre à ces contraintes, Nintex a ajouté la fonctionnalité « Style Profiles »  qui permet aux développeurs K2 et UX/UI designers de concevoir facilement des formulaires en utilisant des techniques modernes tels que l’utilisation des variables « LESS ». Nintex a pris le temps de revoir et moderniser la partie CSS et a créé des variables reliées à tous les champs des Smart Forms Nintex K2 disponibles dans le designer. De plus, dans la version 5.6, Nintex s’est concentré sur les variables liées aux couleurs qui vous permettent de définir facilement les couleurs principales ou de configurer les couleurs de chaque type de champs de façon plus détaillée au lieu de le faire sur les formulaires et les vues.

Étapes pour créer un Style Profile basique

Dans ce cas de figure, nous allons commencer par créer un formulaire Nintex K2 (SmartForm) sur lequel nous allons ensuite appliquer un Style Profile basique et changer ses couleurs principales. Et nous allons finir par faire un test pour observer les différences de styles.

Étape 1 : Créer un Formulaire

Dans K2 Designer, créez un formulaire avec une vue contenant quelques champs pour présenter l’utilisation de la fonctionnalité Style Profile :

• Créez une nouvelle catégorie pour cette démo et créez une vue de type « item »
• Remplissez cette dernière avec les champs que vous souhaitez obtenir. Dans cet exemple, nous avons utilisé « Employee Name » comme champs de texte « Start date » et « End date » comme dates, « Note » comme zone de texte et, pour finir, les boutons Save et Cancel.
• Faites un clic droit sur la vue « Item View » ainsi créée et sélectionnez « Generate Forms ».

Votre canevas de conception devrait ressembler à l’image ci-dessous. (Selon votre version de K2 et le thème que vous avez sélectionné, votre formulaire peut avoir un style et des couleurs différents).

Si vous exécutez le formulaire sans Style Profile, le formulaire ressemblera à l’image ci-dessous :

Étape 2 : Créer un Style Profile

Dans le Designer K2, faites un clic droit sur le bouton de catégorie de Style Profile et sélectionnez « New Style Profile ».

Cliquez sur la couleur d’accentuation principale, puis sélectionnez une couleur depuis la roue de couleurs pour mettre une couleur en évidence. C’est la couleur que vous utilisez normalement comme couleur de marque principale.

Lorsque vous modifiez les couleurs principales, tenez compte des points suivants :

• Couleur d’accentuation principale (main accent colour) : cette couleur s’applique à tous les hyperliens, surlignages et boutons principaux de votre formulaire.
• Couleur d’arrière-plan de votre contenu (content background colour) : cette couleur s’applique au fond du formulaire et au contenu de la fenêtre.
• Couleur d’arrière-plan du panneau (panel background colour) : cette couleur s’applique aux vues, aux fenêtres pop-ups et aux panneaux.

Vous pouvez également cliquer sur Options Avancée (« Advanced Options ») sur le côté droit pour changer la couleur du texte, des labels, de l’arrière-plan, etc. Une fois terminé, cliquez sur <<Finish>> et <<Check In >> pour enregistrer.

Étape 3 : Appliquer le Style Profile au Formulaire

• Une fois le Style Profile créé, faites un clic droit sur le formulaire et cliquez sur « Edit »
• Après ouverture du formulaire, sélectionnez l’option de Style Profile sur la droite et choisissez le Style Profile créé à l’étape précédente
• Puis, dans les Options Avancées (« Advanced Options »), décochez la case Utiliser the Thème Hérité (« Use Legacy Theme ») et cliquez sur Finish.
• Testez la solution : exécutez votre formulaire pour voir le nouveau Style Profile appliqué.

Vous pouvez voir que les 3 couleurs ont été appliquées au formulaire.

Conseils utiles

Lorsque vous appliquez un Style Profile à un formulaire, le résultat peut être différent de ce à quoi vous vous attendiez. En effet, d’autres paramétrages peuvent avoir un impact sur le rendu de votre formulaire durant son exécution :

• Vous devez désélectionner la propriété du formulaire “Use Legacy Theme”. Sans cela, c’est le thème hérité qui s’appliquera lors de l’exécution.
• Les propriétés définies dans le K2 Designer sont prioritaires par rapport au Style Profile pour que les propriétés que vous souhaitez s’appliquent à votre formulaire, utilisez celles du formulaire pour définir une couleur d’arrière-plan (pour une page ou un formulaire) ou configurez le style dans la propriété Format.
• Si vous utilisez les propriétés du formulaire pour lui appliquer une couleur sombre, les contrôles à l’intérieur du formulaire ne s’éclairciront pas et deviendront donc moins lisibles sur un fond sombre. Il est conseillé d’utiliser uniquement les couleurs avancées pour configurer le style et de ne pas mélanger le Style Profile avec d’autres paramètres dans le K2 Designer car le résultat attendu peut différer. Utilisez les propriétés du formulaire pour changer le format de votre formulaire ou configurez Style Profile.

Pour toute question sur cette présentation de la nouvelle fonctionnalité Style Profile ou, plus généralement sur Nintex K2, n’hésitez pas à contacter nos experts K2 !