Le composant Bouton d'action affiche un bouton qui ouvre un lien : dans un nouvel onglet, à la place de la page, dans une modale ou dans un panneau. Vous écrivez le texte du bouton et le mettez en forme directement sur la page : style, icône, couleur, arrondi et alignement.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage, la mise en forme du bouton 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 bouton sur la page
5. Bonnes pratiques
6. Ce qui change par rapport à la version précédente

1. Présentation du composant

Le Bouton d'action affiche un seul bouton. Au clic, vos visiteurs ouvrent le lien que vous avez choisi. Le bouton peut être Plein, Contour ou Texte, avec ou sans icône.

💡 Le composant n'a ni titre, ni fond, ni cadre : seul le bouton se voit sur la page. Il s'affiche toujours, même sans lien.

Cas d'usage

• Ouvrir un formulaire de demande, sans quitter la page.
• Donner accès à un outil métier, comme votre application RH.
• Renvoyer vers une page de réservation.
• Mettre en avant une page clé de votre intranet.

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

Un Bouton d'action fraîchement inséré est un bouton Plein, de taille Grand, centré, à la couleur principale de votre site SharePoint. Son texte est vide : il affiche « Cliquez ici » en texte indicatif, visible en mode édition seulement.

⚠ Tant que vous n'avez saisi aucun texte, vos visiteurs voient un bouton vide. Saisissez le texte du bouton sur la page (voir la partie 4), puis choisissez son lien dans le panneau.

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

Taille du bouton

• Petit, Moyen et Grand fixent la hauteur du bouton. Sa largeur suit la longueur de son texte.
• Cliquez sur le bouton Taille personnalisée pour régler la hauteur et la largeur au pixel près. Les champs Hauteur (px) et Largeur (px) apparaissent, réglés à la taille actuelle du bouton.

💡 En taille personnalisée, le bouton ne peut pas être plus petit que son texte et son icône : si une valeur passe sous ce minimum, elle remonte d'elle-même. Une largeur plus grande que la colonne est ramenée à la largeur de la colonne.

3.2 Onglet Contenu

Action du bouton

• Action : le bouton ouvre une adresse web, la seule action proposée.
• Lien direct : saisissez l'adresse de la page à ouvrir.
• Ouverture dans choisit où le lien s'ouvre :
• Un nouvel onglet : la page s'ouvre dans un nouvel onglet du navigateur.
• Le même onglet : la page remplace la page en cours.
• Une modale : la page s'ouvre dans une fenêtre, par-dessus la page en cours.
• Un panneau : la page s'ouvre dans un panneau sur le côté. Largeur du panneau apparaît alors pour choisir sa largeur.

⚠ Un lien vers une adresse e-mail ou un numéro de téléphone s'ouvre toujours comme dans un nouvel onglet, et un lien vers une ancre de la page toujours dans le même onglet, quel que soit le choix d'Ouverture dans.

⚠ Tant que Lien direct ne contient pas une adresse valide, le bouton ne fait rien au clic.

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 bouton sur la page

Le texte et le style du bouton se règlent directement sur la page, pas dans le panneau de configuration. Cliquez sur le bouton : son texte devient modifiable et une barre d'outils s'affiche au-dessus de lui. Cliquez en dehors du bouton et de la barre d'outils pour valider.

⚠ En mode édition, un clic sur le bouton n'ouvre pas son lien. Testez le lien sur la page publiée.

Saisir le texte

• Le texte tient toujours sur une ligne.
• S'il ne tient pas dans le bouton, il est coupé par des points de suspension « … ». Au survol, vos visiteurs lisent le texte entier dans une infobulle.

Mettre en forme le bouton

La barre d'outils règle la Police, la Taille de police (de 8 à 120 px), la Couleur du texte, le gras, l'italique, le souligné et l'alignement, ainsi que :

• Par défaut, le texte est en 16 px et le bouton est centré dans sa colonne. L'alignement place le bouton à gauche, au centre ou à droite.
• Chaque changement s'applique à tout le texte du bouton, quelle que soit votre sélection.
• 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.
• Choisir une icône apparaît avec Icône à gauche, Icône à droite ou Icône seule.
• Icône seule : le bouton n'affiche que son icône, et son nom au survol. Si vous revenez à un autre choix, le texte du bouton revient tel qu'il était.
• Les boutons Réduire l'arrondi des coins et Augmenter l'arrondi des coins changent l'arrondi pixel par pixel.
• Le bouton de réinitialisation remet le style, l'icône, la couleur de remplissage et l'arrondi à leurs valeurs par défaut.

5. Bonnes pratiques

Écrire un texte court et actif

Commencez par un verbe qui dit ce qui va se passer : « Déposer une demande », « Réserver une salle ». Un texte court évite d'être coupé.

Une action par bouton

Pour proposer plusieurs liens, posez plusieurs boutons, avec un style Plein pour l'action principale et Contour ou Texte pour les autres.

Garder vos visiteurs sur la page

Pour un formulaire ou une page courte, choisissez Une modale ou Un panneau : vos visiteurs retrouvent la page en fermant la fenêtre.

Réserver l'icône seule aux icônes explicites

Avec Icône seule, vos visiteurs ne lisent qu'un nom au survol. Choisissez une icône qui se comprend d'elle-même, comme E-mail ou Calendrier.

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 Bouton d'Action) :

• Le composant s'appelle désormais Jint - Bouton d'action dans le catalogue, dans la catégorie « Texte, média et contenu ».
• Le bouton ouvre une adresse web. L'ouverture d'une application Power Apps par son identifiant n'est plus proposée.
• Le texte, le style, la couleur, l'arrondi et l'alignement du bouton se règlent directement sur la page, avec la barre d'outils du bouton, et non plus dans le panneau.
• Les arrondis Semi-arrondi, Arrondi et Rond laissent place à Arrondi des coins, réglé au pixel.
• Le style « Sans contour » devient Texte.
• L'ombre du bouton n'est plus proposée.
• Nouveau : une icône à gauche, à droite ou seule, au choix parmi dix.
• Nouveau : une Taille personnalisée, réglée au pixel en hauteur et en largeur.
• 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.