---
title: Tuile bouton - Configuration avancée
description: Optimisez vos tuiles bouton K2 App. Améliorez l'interactivité et personnalisez vos boutons pour une expérience utilisateur enrichie.
---
[Passer au contenu](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/tuile-bouton-configuration-avancee#main-content)
Français
Afficher le sous-menu pour les traductions
Ouvrir la navigation principale
Fermer la navigation principale
- Français
Afficher le sous-menu pour les traductions
- Contact
Contact
Comment pouvons-nous vous aider ?
- Il n'y a aucune suggestion car le champ de recherche est vide.
1. [Base de connaissances K2 App](https://support.intelligenceindustrielle.com/fr/base-de-connaissance?hsLang=fr)
2. [Configuration et fonctionnalités 🤓](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/configuration-et-fonctionnalit%C3%A9s?hsLang=fr)
3. [Tuiles - Création et personnalisation](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/configuration-et-fonctionnalit%C3%A9s?hsLang=fr#tuiles-cr%C3%A9ation-et-personnalisation)
27 janvier 2025
# 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.
*Note : Nous vous conseillons de prévoir un moyen de rediriger de nouveau l'utilisateur vers l'interface initiale si vous choisissez l'option Redirection. Sans quoi, il ne sera pas possible de revenir à votre interface initiale.*
### 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.
- [Concepts clés 🔑](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/concepts-cl%C3%A9s?hsLang=fr#main-content)
- [Comprendre les données en temps réel](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/concepts-cl%C3%A9s?hsLang=fr#comprendre-les-donn%C3%A9es-en-temps-r%C3%A9el)
- [Introduction aux KPIs](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/concepts-cl%C3%A9s?hsLang=fr#introduction-aux-kpis)
- [Configuration et fonctionnalités 🤓](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/configuration-et-fonctionnalit%C3%A9s?hsLang=fr#main-content)
- [Configuration avancés - Zone des experts](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/configuration-et-fonctionnalit%C3%A9s?hsLang=fr#configuration-avanc%C3%A9s-zone-des-experts)
- [Tuiles - Création et personnalisation](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/configuration-et-fonctionnalit%C3%A9s?hsLang=fr#tuiles-cr%C3%A9ation-et-personnalisation)
- [Conseils et meilleures pratiques 👌](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/conseils-et-meilleures-pratiques?hsLang=fr#main-content)
- [Astuces et conseils](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/conseils-et-meilleures-pratiques?hsLang=fr#astuces-et-conseils)
- [Études de cas et retour d'expériences](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/conseils-et-meilleures-pratiques?hsLang=fr#%C3%A9tudes-de-cas-et-retour-dexp%C3%A9riences)
- [Premiers pas 👣](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/premiers-pas?hsLang=fr#main-content)
- [Prise en main et navigation 🧭](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/premiers-pas?hsLang=fr#prise-en-main-et-navigation)
- [Guides de l'utilisateur 📖](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/premiers-pas?hsLang=fr#guides-de-lutilisateur)
- [Configuration initiale ⚓](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/premiers-pas?hsLang=fr#configuration-initiale)
- [Connectivité machine 📡](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/connectivit%C3%A9-machine?hsLang=fr#main-content)
- [Boîtiers K2](https://support.intelligenceindustrielle.com/fr/base-de-connaissance/connectivit%C3%A9-machine?hsLang=fr#bo%C3%AEtiers-k2)
[](https://www.intelligenceindustrielle.com)
266 rue Saint-Paul E, Montréal, (Québec) H2Y 1G9
[mailto:success@intelligenceindustrielle.com](mailto:success@intelligenceindustrielle.com)
Copyright © 2025, Fait avec 🧠 par intelligenceindustrielle.com