Le composant Indicateur met en avant un chiffre clé et sa description, sur une couleur ou une image, avec une accroche facultative. Vous saisissez le chiffre et chaque texte directement sur la page.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage, la saisie du contenu sur la page et les bonnes pratiques à suivre.

📋 Sommaire

1. Présentation du composant
2. Ajouter le composant à votre page
3. Paramétrer le composant
4. Saisir et mettre en forme le contenu sur la page
5. Bonnes pratiques
6. Ce qui change par rapport à la version précédente

1. Présentation du composant

L'Indicateur se compose de trois parties, de haut en bas :

• un titre, facultatif ;
• le bloc du chiffre : le chiffre en grand et sa description, sur le fond que vous choisissez ;
• l'accroche : un titre et un texte, que vous pouvez masquer.

Cas d'usage

• Partager un taux de satisfaction ou le résultat d'un baromètre interne.
• Afficher les effectifs, le nombre de sites ou de pays.
• Suivre l'avancement d'un objectif d'entreprise.
• Mettre en avant un chiffre marquant dans une actualité.

2. Ajouter le composant à votre page

1. Ouvrez le mode édition de la page SharePoint en cliquant sur Modifier en haut à droite.
2. À l'emplacement souhaité, cliquez sur le bouton « + » pour ouvrir le catalogue de composants.
3. Recherchez ou déroulez le catalogue pour sélectionner Jint - Indicateur, dans la catégorie « Texte, média et contenu ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Un Indicateur fraîchement inséré affiche un exemple : le chiffre « 95% », la description « C'est le taux de satisfaction client pour l'ensemble du pôle à ce jour », et une accroche « Jint » / « Allons plus loin ensemble ». Le bloc du chiffre est à la couleur principale de votre site SharePoint. Le titre est vide.

💡 Ces textes sont visibles par vos visiteurs : remplacez-les par votre contenu avant de publier la page (voir la partie 4).

3. Paramétrer le composant

Le panneau de configuration se compose de trois onglets : Design, Contenu et Visibilité. Chaque réglage s'applique immédiatement sur la page.

3.1 Onglet Design

Arrière-plan

• Couleur : le bloc du chiffre prend la couleur choisie. Les textes sans couleur propre posés sur ce fond passent automatiquement en noir ou en blanc, selon ce qui contraste le mieux.
• Image : le bloc du chiffre affiche l'image choisie, recadrée selon son Point focal. Le Texte de remplacement apparaît quand l'image n'est pas marquée comme décorative.

⚠ L'arrière-plan colore le bloc du chiffre seulement, jamais le titre ni l'accroche.

Apparence

La rubrique Apparence règle le contour, l'ombre et l'arrondi du composant.

Par défaut, le composant suit le thème Jint de votre site : la rubrique affiche « Les valeurs d'apparence viennent du thème. Il se règle dans Jint Portal. » et ses réglages sont désactivés. Cliquez sur Personnaliser pour les modifier. Pour revenir au thème, cliquez sur Réinitialiser depuis le thème.

3.2 Onglet Contenu

Titre

Le titre se saisit et se met en forme directement sur la page (voir la partie 4). Il est vide par défaut : tant que vous n'avez rien saisi, vos visiteurs ne le voient pas.

Accessibilité

La rubrique Accessibilité mesure le contraste du chiffre avec le fond du bloc. Vous n'avez rien à sélectionner : elle mesure le chiffre dès l'ouverture du panneau, et le mesure de nouveau à chaque modification.

Elle affiche le nom du texte mesuré, Chiffre, son Ratio de contraste et sa Lisibilité globale :

• Excellent : le contraste atteint le niveau AAA.
• Bon : le contraste atteint le niveau AA.
• Insuffisant : le contraste n'atteint pas le niveau AA.

Quand la rubrique affiche Insuffisant, cliquez sur Corriger : chaque couleur du chiffre sous le niveau AA est remplacée par la couleur de la palette la plus proche qui l'atteint.

• Tant que le chiffre est vide, la rubrique affiche « Saisissez un chiffre sur la page pour vérifier son contraste. »
• Sur un arrière-plan Image, la rubrique affiche « Le contraste ne peut pas se mesurer sur ce texte. » : vérifiez la lisibilité à l'œil.

Accroche

Désactivez Afficher l'accroche pour n'afficher que le titre et le bloc du chiffre.

3.3 Onglet Visibilité

Audience

Activez Audience personnalisée pour réserver le composant à des personnes ou aux membres de groupes Microsoft 365. Seuls les visiteurs choisis, ou membres d'au moins un groupe choisi, le voient. Pour les autres, il ne prend aucune place sur la page.

Affichage

Activez Planifier la visibilité pour limiter l'affichage dans le temps, avec un Début de l'affichage, une Fin de l'affichage, ou les deux. Chaque date apparaît quand vous activez son interrupteur : le début est proposé à l'instant présent, la fin dans 7 jours.

⚠ Si vous activez Audience personnalisée sans choisir personne, plus personne ne voit le composant. La rubrique vous le signale : « Personne ne voit ce composant WebPart : choisissez au moins une personne ou un groupe. »

⚠ Si la fin de l'affichage précède le début, le panneau affiche « La date de fin doit être postérieure à la date de début. » et la planification ne limite pas l'affichage tant que vous ne l'avez pas corrigée.

💡 En mode édition, vous voyez toujours le composant, quelle que soit son audience ou sa planification. Un badge vous le signale : « Audience », ou les dates d'affichage.

4. Saisir et mettre en forme le contenu sur la page

Le chiffre, sa description, le titre et l'accroche se saisissent directement sur la page, pas dans le panneau de configuration. Cliquez sur un texte : il devient modifiable et une barre d'outils s'affiche au-dessus de lui. Cliquez en dehors du texte et de la barre d'outils pour valider.

Les textes du composant

• Un texte vide affiche « Valeur du champ » en texte indicatif, visible en mode édition seulement.
• 💡 Si le chiffre et sa description sont vides, le bloc reste affiché pour vos visiteurs, avec son fond seul.
• 💡 Si le titre et le texte de l'accroche sont vides, vos visiteurs ne voient pas l'accroche.

Mettre en forme un texte

La barre d'outils règle le Style de texte (H1 à H4 ou Corps), la Police, la Taille de police, la Couleur du texte, le gras, l'italique, le souligné et l'alignement. Si la place manque, certains contrôles se replient derrière le bouton Plus.

• Si vous sélectionnez une partie du texte, la police, la taille, la couleur, le gras, l'italique et le souligné s'appliquent à la sélection seule. Sans sélection, ils s'appliquent à tout le texte.
• Le bouton Réinitialiser la mise en forme rétablit le style d'origine.

💡 Tant que le composant suit le thème Jint, la barre d'outils du titre affiche à la place le bandeau du thème. Cliquez sur Personnaliser pour mettre le titre en forme.

5. Bonnes pratiques

Un chiffre court, avec son unité

« 87% », « 1 500 », « +12 % » : le chiffre se lit d'un coup d'œil. Gardez l'explication pour la description.

Une description d'une phrase

La description dit ce que mesure le chiffre, et à quelle date : « des collaborateurs recommandent l'entreprise (baromètre 2026) ».

Vérifier la lisibilité du chiffre

Sur une couleur, consultez la rubrique Accessibilité et visez au moins Bon. Sur une image, choisissez une image calme, ou réglez son Point focal pour que le chiffre reste lisible.

Aligner plusieurs indicateurs

Pour présenter plusieurs chiffres, placez plusieurs indicateurs côte à côte dans une section à plusieurs colonnes, avec le même arrière-plan.

6. Ce qui change par rapport à la version précédente

Si vous utilisiez la version précédente du composant (voir l'article Composant Indicateurs) :

• Le composant s'appelle désormais Jint - Indicateur dans le catalogue, dans la catégorie « Texte, média et contenu ».
• L'affichage de la zone d'accroche se règle avec Afficher l'accroche, dans l'onglet Contenu.
• La couleur ou l'image de fond du bloc du chiffre se règle dans la rubrique Arrière-plan, avec un point focal et un texte de remplacement pour l'image.
• Nouveau : un titre du composant, facultatif.
• Nouveau : la rubrique Apparence, liée au thème Jint, pour le contour, l'ombre et l'arrondi.
• Nouveau : la rubrique Accessibilité vérifie le contraste du chiffre et le corrige en un clic.
• Chaque texte se met en forme sur la page avec la barre d'outils de texte.
• Le panneau s'organise en trois onglets, Design, Contenu et Visibilité. L'onglet Visibilité permet de réserver le composant à une audience et d'en planifier l'affichage.