Le composant Mes mails affiche à chaque visiteur les derniers e-mails de sa propre boîte de réception. Le visiteur repère d'un coup d'œil ses e-mails non lus et ouvre celui qui l'intéresse dans Outlook, d'un clic.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage, ce que voient vos visiteurs et les bonnes pratiques à suivre.

📋 Sommaire

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

1. Présentation du composant

Chaque visiteur voit ses propres e-mails, jamais ceux d'un autre. Le composant se compose de deux parties :

• un en-tête : le titre du composant et deux boutons, Nouveau message pour écrire un e-mail et Ouvrir Outlook pour retrouver toute sa boîte de réception ;
• une carte par e-mail : la photo de l'expéditeur, son nom, la date et l'heure de réception, l'objet, un aperçu du texte et un trombone si l'e-mail a une pièce jointe.

⚠ Prérequis : le composant lit les e-mails avec la permission Microsoft 365 Mail.Read, qu'un administrateur doit avoir approuvée. Tant qu'elle ne l'est pas, le composant ne peut afficher aucun e-mail.

📌 Pour plus de détails, consultez l'article Approbation des permissions.

Cas d'usage

• Faire de la page d'accueil de l'intranet un point d'entrée unique, sans ouvrir Outlook.
• Composer un tableau de bord personnel, à côté de l'agenda et des tâches.
• Signaler aux collaborateurs peu connectés à Outlook les e-mails qu'ils n'ont pas encore lus.

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 - Mes mails, dans la catégorie « Texte, média et contenu ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Un composant fraîchement inséré affiche le titre « Mes e-mails », les deux boutons et tous les éléments des cartes.

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

Hauteur du composant WebPart

Hauteur (px) apparaît quand vous choisissez Personnalisée.

💡 La hauteur fixe le nombre de cartes visibles d'un coup : le composant affiche autant de cartes entières que la hauteur en contient, et place les suivantes sur d'autres pages.

Arrière-plan

• Couleur : le fond du composant prend la couleur choisie. Le titre et 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 fond du composant 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.

Les cartes gardent leur propre fond, réglé dans la rubrique Apparence.

Apparence

La rubrique Apparence règle le contour, l'ombre et l'arrondi du composant et de ses cartes, ainsi que les couleurs 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 d'abord ce que vous réglez : WebPart pour le cadre du composant, Cartes pour les cartes des e-mails. Chacun a son propre contour, sa propre ombre et son propre arrondi.

3.2 Onglet Contenu

Titre

Le titre se saisit et se met en forme directement sur la page (voir la partie 5).

Accessibilité

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

Elle affiche le nom du texte mesuré, Carte, 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 texte sous le niveau AA est remplacée par la couleur de la palette la plus proche qui l'atteint.

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

E-mails

Activez Non lus uniquement pour n'afficher que les e-mails qui n'ont pas encore été ouverts. Un e-mail que le visiteur lit disparaît du composant au rechargement suivant.

Affichage des éléments

Chaque interrupteur affiche ou masque un élément facultatif des cartes ou de l'en-tête.

L'expéditeur et l'objet restent toujours affichés. Si vous désactivez les six interrupteurs, la rubrique vous le rappelle : « Tout est désactivé : seuls l'expéditeur et l'objet restent affichés. »

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. Ce que voient vos visiteurs

Les e-mails

• Le composant affiche les e-mails de la boîte de réception du visiteur, du plus récent au plus ancien, 25 au maximum.
• Les cartes s'empilent sur une seule colonne. Quand elles ne tiennent pas toutes dans la hauteur du composant, des chevrons et des points permettent de passer d'une page à l'autre. Sur mobile, le visiteur peut aussi balayer les cartes.
• Un e-mail non lu se distingue par une pastille à la couleur principale de votre site SharePoint et par le nom de l'expéditeur et l'objet en gras.
• Le nom de l'expéditeur, l'objet et l'aperçu tiennent chacun sur une ligne. Au survol de la carte, l'objet complet s'affiche dans une infobulle.
• La date et l'heure s'écrivent au format court de la langue du visiteur.
• Un expéditeur sans photo apparaît avec ses initiales. Un expéditeur sans nom apparaît avec son adresse e-mail.
• Un e-mail sans objet affiche « (Aucun objet) ».

Ouvrir un e-mail ou Outlook

• Un clic sur une carte ouvre l'e-mail dans Outlook, dans un nouvel onglet.
• Nouveau message ouvre un nouvel e-mail dans Outlook, dans un nouvel onglet.
• Ouvrir Outlook ouvre la boîte de réception dans Outlook, dans un nouvel onglet.

💡 Quand le visiteur revient sur l'onglet de la page, le composant recharge ses e-mails : un e-mail lu entre-temps dans Outlook n'apparaît plus comme non lu.

⚠ En mode édition, les cartes et les boutons ne réagissent pas au clic. C'est normal : ils fonctionnent une fois la page publiée.

Quand il n'y a rien à afficher

• Une boîte de réception vide affiche « Aucun e-mail dans la boîte de réception. »
• Avec Non lus uniquement, s'il n'y a aucun e-mail non lu : « Aucun e-mail non lu. »
• Si le composant ne peut pas lire les e-mails, le visiteur voit « Impossible d'afficher le contenu pour le moment. » En mode édition, vous voyez en plus la cause. Si la permission Mail.Read n'est pas encore approuvée : « L'accès à vos e-mails n'est pas encore autorisé. Demandez à votre administrateur de l'approuver. »

5. Saisir et mettre en forme le titre sur la page

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

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. Le bouton Réinitialiser la mise en forme rétablit le style d'origine.

• Tant que le titre est vide, il affiche « Saisissez un titre » en mode édition, et 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.
• Si vous masquez le titre et les deux boutons, l'en-tête disparaît : les cartes commencent en haut du composant.

6. Bonnes pratiques

Faire valider la permission avant de poser le composant

Vérifiez avec votre administrateur que la permission Mail.Read est approuvée. Sinon, vos visiteurs verront un message d'erreur à la place de leurs e-mails.

Régler la hauteur selon la place disponible

Sur une page d'accueil chargée, gardez Moyenne : deux cartes suffisent pour signaler les nouveaux e-mails. Sur un tableau de bord personnel, choisissez Personnalisée pour en montrer quatre ou cinq.

Activer « Non lus uniquement » pour une page d'accueil

Le composant devient une boîte à traiter : il ne montre que ce qui attend une lecture, et se vide quand tout est lu.

Alléger les cartes dans une colonne étroite

Dans une colonne de tiers, masquez l'Aperçu de l'e-mail ou la Date et heure de réception : l'expéditeur et l'objet restent lisibles.

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 Mes Mails) :

• Le composant s'appelle désormais Jint - Mes mails dans le catalogue, dans la catégorie « Texte, média et contenu ».
• Nouveau : Non lus uniquement n'affiche que les e-mails pas encore ouverts.
• Nouveau : la rubrique Affichage des éléments masque la photo, la date, l'aperçu, le trombone ou chacun des deux boutons de l'en-tête.
• La hauteur se règle avec Petite, Moyenne ou une hauteur personnalisée. Les e-mails qui ne tiennent pas passent sur des pages suivantes.
• Nouveau : la rubrique Apparence, liée au thème Jint, règle séparément le cadre du composant et ses cartes.
• Nouveau : la rubrique Accessibilité vérifie le contraste du texte des cartes et le corrige en un clic.
• 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.