Tuile bouton - Configuration avancée

Optimisez vos tuiles bouton K2 App avec ce guide de configuration avancée. Améliorez l'interactivité et personnalisez vos boutons pour une expérience utilisateur enrichie.

Accéder au mode édition de K2 App

1. Accédez au tableau de bord où vous souhaitez ajouter ou modifier un bouton.
2. Activer le mode édition : Cliquez sur l'icône d'édition du tableau de bord K2App, représentée par un crayon, située dans le coin de droit dans le haut l'interface.

Ajouter ou modifier un bouton dans K2 App

• Ajouter un nouveau bouton :
  • Cliquez sur le bouton "+" pour ajouter une nouvelle tuile.
  • Sélectionnez le type "Bouton" parmi les options proposées.
• Modifier un bouton existant :
  • Sélectionnez l'icône pour modifier le bouton que vous souhaitez configurer.

Une fenêtre s'ouvrira, vous menant aux paramètres de configuration.

Onglet 1 : Paramètres du bouton

Titre du bouton

• Nommer le bouton : Saisissez un titre clair et concis pour votre bouton K2App, facilitant son identification rapide par les utilisateurs.

Couleur du bouton

• Choisir une couleur : Sélectionnez une couleur qui correspond à votre charte graphique ou qui permet de mettre en évidence le bouton sur votre tableau de bord K2App.

Texte du bouton ou URL d'image

• Ajouter du texte : Si vous souhaitez afficher du texte sur le bouton, saisissez-le dans le champ prévu à cet effet.
• Utiliser une image : Remplacez le texte par une image en saisissant l'URL de l'image souhaitée.

Règle associée

• Lier à une règle : Associez le bouton à une règle existante dans le moteur de règles de K2App. Cette règle sera déclenchée lorsque l'utilisateur cliquera sur le bouton, permettant d'exécuter des actions spécifiques.

Paramètres du bouton

• Définir des paramètres : Si votre règle nécessite des paramètres, spécifiez-les ici.
• Valeur statique : Entrez une valeur fixe dans le champ "Valeur".
• Variable dynamique : Utilisez le symbole "$" pour sélectionner une variable dynamique.

Méthode d'ouverture de l'URL

• Si votre bouton sert à rediriger l'utilisateur vers une autre interface web, il faut définir le comportement du lien :
• Popup : Ouvre le lien dans une fenêtre superposée à l'écran.
• Redirection : Remplace le contenu actuel en ouvrant le lien dans la même fenêtre. 
• Nouvel onglet : Ouvre le lien dans un nouvel onglet du navigateur.

Onglet 2 : Style du bouton

• Titre :

  • Activez "Taille de la police du titre constante" pour définir une taille fixe.
  • Saisissez la taille souhaitée en pixels.

• Contenu :

  • Activez "Taille de la police du contenu constante" pour ajuster la taille du texte du bouton.
  • Saisissez la taille souhaitée en pixels.

Taille d'affichage du bouton

• Adapter la taille de la tuile : Choisissez la taille d'affichage adaptée à différents écrans :
  • Petit
  • Moyen
  • Grand

Onglet 3 : Mise en forme conditionnelle

Personnalisez l'apparence du bouton en fonction de conditions spécifiques.

Configurer une règle de mise en forme

1. Accéder à l'onglet "Mise en forme conditionnelle".
2. Créer une règle :

• • Cliquez sur "Ajouter une règle".
  • Variable : Sélectionnez la variable à évaluer.
  • Opérateur : Choisissez l'opérateur de comparaison (par exemple, égal à, supérieur à, etc.).
  • Valeur : Saisissez la valeur de comparaison.
  • Action : Définissez la couleur de l'arrière-plan souhaité ou du bouton lui-même lorsque la condition est remplie.

Onglet 4 : Règles de texte

Adaptez le texte affiché sur le bouton selon certaines conditions dynamiques.

Configurer une règle de texte

1. Accéder à l'onglet "Règles de texte".
2. Ajouter une règle :

• • Cliquez sur "Ajouter une règle".
  • Variable, opérateur, valeur : Définissez la condition.
  • Texte à afficher : Saisissez le texte qui sera affiché lorsque la condition est satisfaite.
  • Langue : Personnalisez le texte pour différentes langues si nécessaire.

Onglet 5 : Règles de média

Changez le média du bouton affiché en fonction de variables dynamiques.

Configurer une règle de média

1. Accéder à l'onglet "Règles de média".
2. Ajouter une règle :

• • Cliquez sur "Ajouter une règle".
  • Condition : Définissez la variable, l'opérateur et la valeur.
  • Média à afficher : Indiquez le média correspondant.

Onglet 6 : Règles de déclencheur

Faites évoluer l'exécution de règles en fonction de conditions prédéfinies. Un bouton peut alors déclencher plusieurs règles selon l'état d'un variable particulière. C'est très pratique si vous n'avez plus beaucoup d'espace sur votre tableau de bord!

Configurer une règle de déclencheur

1. Accéder à l'onglet "Règles de déclencheur".
2. Ajouter une règle :

• • Cliquez sur "Ajouter une règle".
  • Condition : Définissez la variable, l'opérateur et la valeur.
  • Règle à exécuter : Sélectionnez la nouvelle règle qui sera déclenchée par le bouton.

Onglet 7 : Règles d'affichage

Contrôlez la visibilité du bouton en fonction de conditions spécifiques.

Configurer une règle d'affichage

1. Accéder à l'onglet "Règles d'affichage".
2. Ajouter une règle :

• • Cliquez sur "Ajouter une règle".
  • Condition : Spécifiez la variable, l'opérateur et la valeur.
  • Action : Choisissez "Le contenu sera caché" si la condition est vraie.

Sauvegarder les modifications

Après avoir configuré toutes les options, cliquez sur le bouton "Soumettre" pour enregistrer vos modifications.

Bonnes pratiques pour la configuration avancée des boutons

• Clarté et cohérence :
  • Assurez-vous que le titre et le texte du bouton sont clairs et reflètent précisément son action.
  • Maintenez une cohérence visuelle avec le reste du tableau de bord en choisissant des couleurs et des styles appropriés.
• Optimisation des règles :
  • Utilisez les mises en forme conditionnelles pour attirer l'attention sur des états importants ou des alertes.
  • Limitez le nombre de règles complexes pour éviter de surcharger le bouton et de nuire aux performances de K2 App.
• Tests et validation :
  • Testez chaque règle et condition pour vous assurer qu'elles fonctionnent comme prévu.
  • Vérifiez l'affichage sur différents appareils et résolutions pour garantir une expérience utilisateur optimale.
• Accessibilité :
  • Pensez à l'accessibilité en utilisant des contrastes de couleurs suffisants et des textes descriptifs.
  • Évitez d'utiliser uniquement des couleurs pour transmettre des informations importantes.

Conclusion

La configuration avancée des tuiles bouton vous offre une grande flexibilité pour créer des interfaces interactives et dynamiques. En exploitant les règles conditionnelles et les options de personnalisation, vous pouvez concevoir des boutons qui répondent précisément aux besoins de vos utilisateurs et améliorent l'efficacité de votre tableau de bord. N'hésitez pas à expérimenter ces fonctionnalités avancées pour optimiser vos applications et maximiser l'engagement utilisateur.