Le composant Anniversaires met en avant les anniversaires professionnels de vos collaborateurs, ceux qui viennent de passer et ceux qui approchent, à partir de leur date d'arrivée dans Microsoft 365. Chaque carte indique les années fêtées et l'écart avec l'anniversaire ; un bouton facultatif permet à vos visiteurs d'adresser leurs vœux dans Teams d'un clic.

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

📋 Sommaire

1. Présentation du composant
2. Avant de commencer : les dates d'arrivée dans Microsoft 365
3. Ajouter le composant à votre page
4. Paramétrer le composant
5. Saisir le titre et le bouton de vœux sur la page
6. Bonnes pratiques
7. Ce qui change par rapport à la version précédente

1. Présentation du composant

Le composant Anniversaires se compose d'un titre facultatif et d'une grille de cartes, une par collaborateur. Chaque carte affiche :

• la photo de profil du collaborateur, ou ses initiales s'il n'a pas de photo ;
• son nom ;
• les champs que vous choisissez, comme sa fonction ;
• une pastille d'anniversaire, qui indique les années fêtées et l'écart avec l'anniversaire ;
• un bouton de vœux, si vous l'activez.

Au clic sur une carte, la fiche de profil Microsoft 365 du collaborateur s'ouvre. Une carte dont le collaborateur n'a pas d'adresse e-mail ne réagit pas au clic.

Cas d'usage

• Célébrer chaque semaine les anniversaires professionnels sur la page d'accueil de l'intranet.
• Annoncer les anniversaires du mois à venir sur la page d'un service ou d'un site.
• Valoriser l'ancienneté et la fidélité d'une équipe, en limitant le composant à des groupes Microsoft 365.
• Inviter les collègues à adresser leurs vœux dans Teams, d'un clic sur la carte.

Comment se calcule un anniversaire

L'anniversaire professionnel d'un collaborateur tombe chaque année au jour et au mois de sa date d'arrivée, à partir du premier anniversaire. La période que vous choisissez dans le panneau (voir la partie 4) porte sur ces anniversaires, et non sur la date d'arrivée elle-même : un collaborateur s'affiche quand son anniversaire tombe dans la fenêtre passée ou dans la fenêtre à venir.

• « Aujourd'hui » est le jour du visiteur, dans son fuseau horaire, au chargement de la page.
• Si la date d'arrivée est un 29 février, l'anniversaire tombe le 28 février les années non bissextiles.
• Chaque collaborateur n'apparaît qu'une fois. Sa pastille situe son anniversaire le plus proche d'aujourd'hui dans les fenêtres actives.
• Les cartes s'affichent d'abord pour les anniversaires passés, du plus récent au plus ancien, puis pour les anniversaires à venir, du plus proche au plus lointain.

💡 Le premier anniversaire compte dès qu'il approche, même si le collaborateur n'a pas encore un an dans l'organisation.

💡 Un collaborateur dont la date d'arrivée est à venir n'apparaît jamais dans ce composant. Pour présenter les arrivées à venir, utilisez le composant Jint - Nouveaux arrivants.

La pastille d'anniversaire

La pastille affiche les années que fête l'anniversaire (« 1 an », « 3 ans »), suivies de l'écart avec aujourd'hui, en temps relatif : en jours sous 7 jours, en semaines sous 30 jours, puis en mois.

⚠ Quand l'anniversaire tombe dans 7 à 30 jours, bornes comprises, la pastille n'affiche pas l'écart, mais « Bientôt » suivi des années : par exemple « Bientôt 2 ans ». Deux cartes peuvent donc présenter leur pastille de deux façons différentes.

Au survol de la pastille, une infobulle donne la date d'arrivée du collaborateur : « Arrivé(e) le », suivi de la date au format court.

2. Avant de commencer : les dates d'arrivée dans Microsoft 365

Le composant lit la date d'arrivée de chaque collaborateur dans son profil de l'annuaire Microsoft 365. Sans date d'arrivée renseignée dans l'annuaire, un collaborateur n'apparaît jamais.

Deux conditions sont donc nécessaires :

1. Les dates d'arrivée de vos collaborateurs sont renseignées dans l'annuaire Microsoft 365.
2. Un administrateur du tenant a approuvé l'autorisation de lire l'annuaire.

⚠ Sans cette autorisation, le panneau affiche « Autorisation d'annuaire manquante : un administrateur du tenant doit l'approuver. », et aucun autre message d'avertissement. Sur la page, le composant affiche « Impossible d'afficher le contenu pour le moment. ». En mode édition, vous voyez en plus le détail de l'erreur ; vos visiteurs, non.

⚠ Si aucun des collaborateurs que le composant peut afficher n'a de date d'arrivée, le panneau affiche « Aucune date d'arrivée n'est disponible pour ces collaborateurs : vérifiez qu'elles sont renseignées dans l'annuaire, et qu'un administrateur du tenant a approuvé l'autorisation de les lire. »

💡 Le composant affiche l'annuaire tel qu'il était il y a au plus 5 minutes : une date d'arrivée tout juste renseignée peut mettre quelques minutes à apparaître.

3. 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 - Anniversaires, dans la catégorie « Actualités, personnes et événements ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Un composant Anniversaires fraîchement inséré porte le titre « Iels fêtent leur anniversaire professionnel ». Il affiche les anniversaires de la semaine passée et de la semaine à venir, de tous les collaborateurs, avec leur fonction et leur pastille d'anniversaire, sans bouton de vœux.

Si personne n'a d'anniversaire dans la période, le composant affiche « Aucun anniversaire à afficher ».

4. 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, sauf un nombre saisi dans un champ, qui s'applique quand vous quittez le champ.

4.1 Onglet Design

Mise en page

La rubrique se compose de deux groupes : Grille et Carte de profil.

• Profils par ligne : Auto affiche autant de cartes par ligne que la largeur de la section en contient, six au plus. Un seul donne à chaque carte toute une ligne.
• Aéré élargit l'écart entre les cartes et les marges de chaque carte.
• Taille apparaît quand Afficher la photo est activé. Grande agrandit la photo de chaque carte.
• Photo désactivée, aucune carte n'affiche de photo.

⚠ Si vous choisissez Un seul alors que le format est Portrait, le format passe automatiquement en Paysage.

Hauteur du composant WebPart

La hauteur fixe le nombre de rangées entières de cartes que le composant affiche. Les cartes qui ne tiennent pas passent sur des pages suivantes, que vos visiteurs parcourent avec la pagination : un chevron de chaque côté et des points au centre, cinq au plus. Sur mobile, ils changent de page d'un balayage. Si toutes les cartes tiennent sur une page, la pagination ne s'affiche pas.

⚠ La hauteur minimale vaut la plus grande valeur entre 150 px et la hauteur d'une rangée entière de cartes. Si la carte grandit (format, photo, champs affichés), la hauteur remonte d'elle-même à ce minimum.

Arrière-plan

• Couleur : le fond prend la couleur choisie. Les textes sans couleur propre posés sur ce fond, comme le titre, passent automatiquement en noir ou en blanc, selon ce qui contraste le mieux.
• Image : le fond 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.

💡 Sous l'image, le panneau rappelle le format conseillé : « Recommandé : JPG, PNG ou WebP, 1920 × 1080 px minimum, moins de 1 Mo. »

⚠ Si l'image d'arrière-plan est supprimée ou déplacée, le panneau affiche « Image introuvable : elle a peut-être été supprimée ou déplacée. Choisissez-en une autre. » et le composant s'affiche sur un fond blanc.

Apparence

La rubrique Apparence règle le contour, l'ombre et l'arrondi du composant et de ses cartes, ainsi que le fond et la couleur du texte des cartes.

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.

Choisissez ensuite la portée de vos réglages : WebPart pour le composant, Cartes pour les cartes. La rubrique s'ouvre sur WebPart. Chaque portée a son propre contour, sa propre ombre et son propre arrondi.

Pour la portée Cartes, deux réglages s'ajoutent :

4.2 Onglet Contenu

Accessibilité

La rubrique Accessibilité n'a pas de réglage. Dès l'ouverture du panneau, elle mesure le contraste du texte des cartes, nommé Carte, avec leur fond. Elle affiche le Ratio et la Lisibilité globale : Excellent, Bon ou Insuffisant.

Si la lisibilité est Insuffisant, cliquez sur Corriger : chaque couleur trop faible est remplacée par la couleur de la palette la plus proche qui offre un contraste suffisant.

Tant qu'aucune carte ne s'affiche, la rubrique indique « Aucune carte à vérifier pour le moment. »

Titre

Le titre se saisit et se met en forme directement sur la page (voir la partie 5). Désactivez Afficher le titre pour n'afficher que les cartes.

Anniversaires

La rubrique Anniversaires règle la période : une fenêtre passée et une fenêtre à venir, autour d'aujourd'hui.

• La liste des durées apparaît quand sa fenêtre est activée ; Nombre de jours, quand la durée vaut Personnalisé.
• Chaque fenêtre se compte depuis aujourd'hui, jour même compris. 1 mois, 3 mois et 6 mois sont des mois de calendrier.
• Anniversaires récents affiche les collaborateurs dont l'anniversaire vient de passer ; Anniversaires à venir, ceux dont l'anniversaire approche.

⚠ Si vous désactivez les deux fenêtres, le composant affiche tous les collaborateurs qui ont une date d'arrivée, chacun situé par son anniversaire le plus proche d'aujourd'hui. La rubrique le rappelle : « Aucune fenêtre active : tous les collaborateurs sont affichés. »

⚠ Si aucun des collaborateurs que le composant peut afficher n'a d'anniversaire dans les fenêtres choisies, le panneau affiche « Aucun de ces collaborateurs n'a d'anniversaire professionnel dans la période choisie. » Ce message ne s'affiche pas quand l'annuaire ne donne aucune date d'arrivée : c'est alors le message sur les dates d'arrivée qui apparaît (voir la partie 2).

Bouton de vœux

Activé, la rubrique affiche : « Cliquez sur le bouton d'une carte pour modifier son texte et son style. Pour un visiteur, le bouton ouvre une conversation Teams avec le collaborateur de la carte. »

• Au clic sur le bouton, vos visiteurs ouvrent une conversation Teams avec le collaborateur, dans un nouvel onglet. Le clic sur le bouton n'ouvre pas la fiche de profil.
• Un collaborateur sans adresse e-mail n'a pas de bouton.
• Le texte et le style du bouton se règlent sur la page (voir la partie 5).

Source (groupes et personnes)

• Groupes et personnes affichés apparaît quand Tous les collaborateurs est désactivé. Le composant affiche alors les personnes choisies et les membres des groupes choisis, sous-groupes compris.
• Inclure les comptes externes désactivé écarte les invités et les comptes d'autres organisations, même choisis nommément.
• Un compte désactivé n'est jamais affiché.
• Si un groupe ne peut pas être lu, le composant affiche quand même les autres personnes et groupes choisis.

⚠ Si vous désactivez Tous les collaborateurs sans choisir personne, plus personne n'est affiché. La rubrique vous le signale : « Aucune personne ni aucun groupe choisi : personne n'est affiché. »

Champs affichés

Le menu Ajouter un champ propose, dans cet ordre : Fonction, Département, Localisation, Date d'arrivée, Nom de l'entreprise, ID employé, Type d'employé, Manager, Adresse, Ville, État, Code postal, Pays ou région, Téléphone professionnel, E-mail, Numéro de fax.

• Un champ ajouté se place en fin de liste. Glissez un champ par sa poignée pour changer sa place, ou cliquez sur sa croix pour le retirer.
• Chaque carte affiche une ligne par champ, sous le nom, dans l'ordre de la liste. Si le profil d'un collaborateur n'a pas de valeur pour un champ, sa carte n'affiche pas cette ligne.
• Le champ Date d'arrivée s'affiche en pastille d'anniversaire.

4.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.

Activez Masquer s'il n'y a rien à afficher pour que vos visiteurs ne voient pas le composant quand personne n'a d'anniversaire dans la période, au lieu du message « Aucun anniversaire à afficher ». Si les anniversaires n'ont pas pu se charger, le composant reste affiché.

⚠ 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 », les dates d'affichage, ou « Masquée si vide ».

5. Saisir le titre et le bouton de vœux sur la page

Le titre

Cliquez sur le titre : il devient modifiable et une barre d'outils s'affiche au-dessus de lui. Elle 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. Le bouton Réinitialiser la mise en forme rétablit le style d'origine. Cliquez en dehors du titre pour valider.

Par défaut, le titre est « Iels fêtent leur anniversaire professionnel », en H4, noir, 20 px et gras. Si vous effacez le titre, vos visiteurs ne le voient pas.

💡 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.

Le bouton de vœux

Quand Bouton de vœux sur la carte est activé, chaque carte affiche le bouton en mode édition. Cliquez sur le bouton d'une carte pour saisir son texte : une barre d'outils s'affiche.

⚠ Tant que vous n'avez rien saisi, le bouton affiche « Souhaiter 🎉 » en invite, visible par vous seul : vos visiteurs ne voient pas le bouton. Saisissez le texte du bouton pour le publier. Seule exception : un bouton réglé en Icône seule s'affiche même sans texte.

Le texte et le style sont communs à toutes les cartes : modifier le bouton d'une carte modifie celui de toutes les autres. Chaque changement s'applique à tout le texte du bouton.

• Choisir une icône apparaît avec une icône à gauche, à droite ou seule.
• Couleur de remplissage colore le fond d'un bouton Plein et le contour d'un bouton Contour. Un bouton Texte n'a ni fond ni contour.
• La barre règle aussi la police, la couleur du texte (blanc par défaut), le gras, l'italique, le souligné et l'alignement.
• En Icône seule, le bouton affiche au survol le nom de son icône. Si vous revenez à un autre choix, le texte du bouton revient tel qu'il était.

⚠ En mode édition, le bouton n'ouvre aucune conversation Teams, et un clic sur une carte n'ouvre aucune fiche de profil. Testez-les sur la page publiée.

6. Bonnes pratiques

Faire renseigner les dates d'arrivée à la source

Le composant n'affiche que les collaborateurs dont la date d'arrivée est renseignée dans l'annuaire Microsoft 365. Voyez avec votre administrateur Microsoft 365, ou avec votre processus d'arrivée des collaborateurs, pour que chaque compte ait sa date.

Choisir une période adaptée à votre effectif

Dans une grande organisation, une fenêtre de 1 semaine suffit à remplir le composant. Pour une équipe, préférez 1 mois. Le panneau vous prévient quand personne n'a d'anniversaire dans la période choisie.

Saisir le texte du bouton de vœux

Si vous activez Bouton de vœux sur la carte, saisissez son texte sur la page : sans texte, vos visiteurs ne voient pas le bouton.

Adapter la hauteur au nombre de cartes

Les cartes qui ne tiennent pas dans la hauteur choisie passent sur des pages suivantes. Sur une page d'accueil, augmentez la hauteur pour que vos visiteurs voient toutes les cartes d'un coup d'œil, sans changer de page.

Garder des cartes courtes

Deux ou trois champs suffisent, par exemple Fonction, Département et Date d'arrivée.

Vérifier le contraste des cartes

Si vous personnalisez le fond ou la couleur du texte des cartes, vérifiez la rubrique Accessibilité : visez au moins Bon.

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

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

• Le composant s'appelle désormais Jint - Anniversaires dans le catalogue, dans la catégorie « Actualités, personnes et événements ».
• Le composant affiche les anniversaires qui approchent et ceux qui viennent de passer, avec deux fenêtres réglables séparément : Anniversaires récents et Anniversaires à venir.
• Une pastille réunit l'ancienneté et l'écart avec l'anniversaire ; la date d'arrivée s'affiche au survol.
• Un collaborateur dont la date d'arrivée est à venir n'apparaît jamais, le premier anniversaire compte dès qu'il approche, et une arrivée un 29 février est fêtée le 28 février les années non bissextiles.
• Le panneau vous prévient quand personne n'a d'anniversaire dans la période, quand aucune date d'arrivée n'est disponible ou quand l'autorisation d'annuaire manque.
• La source se règle sur Tous les collaborateurs, ou sur des personnes et des groupes choisis, sous-groupes compris.
• ⚠ Les comptes externes sont désormais inclus par défaut. Désactivez Inclure les comptes externes pour les écarter.
• Vous choisissez les Champs affichés sur chaque carte, et leur ordre.
• Le bouton Teams devient un Bouton de vœux facultatif, désactivé par défaut, dont vous choisissez le texte, le style et l'icône.
• Au clic sur une carte, la fiche de profil Microsoft 365 du collaborateur s'ouvre.
• La hauteur se règle au curseur et fixe le nombre de rangées de cartes par page, avec une pagination. La carte se règle à part : profils par ligne, espacement, format et photo.
• Nouveau : un Arrière-plan en couleur ou en image, une Apparence (contour, ombre, arrondi) liée au thème Jint pour le composant et pour ses cartes, et une rubrique Accessibilité qui vérifie le contraste des cartes.
• Le panneau s'organise en trois onglets, Design, Contenu et Visibilité. L'onglet Visibilité permet de réserver le composant à une audience, d'en planifier l'affichage et de le masquer quand il n'a rien à afficher.