Étendre SharePoint avec du code et de l'IA

• Pourquoi ce module bonus
• Positionnement et public cible
• Format proposé
• Vue d'ensemble des 6 séquences
• Bonus 1 — Formatage JSON de colonnes et de vues
• Bonus 2 — Formules de colonnes calculées
• Bonus 3 — Expressions Power Automate
• Bonus 4 — Adaptive Cards JSON pour Teams
• Bonus 5 — Scripts PnP PowerShell de provisioning
• Bonus 6 — WebParts SPFx via IA
• Posture pédagogique transverse
• Points de vigilance communs
• Fichiers d'exemples livrés

• Tous les concepteurs pour les bonus 1, 2 et 3 (formatage visuel, formules, expressions).
• Concepteurs avec sensibilité technique pour les bonus 4 et 5 (cartes adaptatives, scripts PowerShell).
• Concepteurs en transition vers la conception technique pour le bonus 6 (WebParts SPFx).

• Intégré en demi-journée bonus après les 2 jours du tronc commun (3 h environ pour les 6 séquences).
• Réparti dans le tronc commun, en insérant chaque bonus au sein de la séquence parente correspondante.
• À la carte, en sélectionnant 2 ou 3 séquences les plus pertinentes pour le public.

• Objectif pédagogique : la compétence visée.
• Public cible : qui est concerné.
• Durée estimée : démo + exercice ou démo seule.
• Prérequis : ce qu'il faut savoir avant.
• Cas d'usage Solstice : comment l'intégrer au fil rouge.
• Étapes du formateur : la démonstration pas à pas.
• Prompts IA modèles : prêts à coller dans Claude / ChatGPT / Copilot.
• Code attendu : ce que l'IA doit produire (avec un fichier d'exemple livré).
• Application dans SharePoint : où coller, comment activer.
• Points de vigilance : les erreurs courantes.
• Pour aller plus loin : ressources Microsoft Learn.

• Avoir une liste ou bibliothèque SharePoint avec au moins une colonne de type Choix.
• Avoir un accès à un agent IA (Claude, ChatGPT, Copilot).

1. Présenter le contexte : "Notre colonne Statut est fonctionnelle mais visuellement plate. Nous voulons des pastilles colorées comme dans un outil professionnel."
2. Ouvrir un agent IA dans une fenêtre projetée.
3. Coller le prompt préparé (voir ci-dessous).
4. Récupérer le JSON retourné par l'agent.
5. Aller sur SharePoint dans la liste Plan d'action Solstice.
6. Cliquer sur l'en-tête de la colonne Statut > Paramètres de la colonne > Formater cette colonne.
7. Cliquer sur Mode avancé en bas du volet.
8. Coller le JSON dans la zone de texte.
9. Cliquer Aperçu, puis Enregistrer.
10. Constater l'effet immédiat : les valeurs s'affichent en pastilles colorées.

Génère un JSON de formatage de colonne SharePoint Online conforme à la spécification de formatting Microsoft, pour une colonne Choix nommée Statut avec ces valeurs :

• À faire (fond rouge #EF4444)
• En cours (fond orange #F59E0B)
• Terminé (fond vert #16A34A)
• Bloqué (fond gris #6B7280)

Format pastille arrondie avec texte blanc, police 600, padding 4px 12px, border-radius 12px. Réponds uniquement avec le JSON, sans explication.

• Dans la liste, cliquer sur l'en-tête de la colonne Statut.
• Menu déroulant > Paramètres de la colonne > Formater cette colonne.
• Bas du volet : Mode avancé.
• Coller le JSON dans la zone, cliquer Aperçu, puis Enregistrer.

• Une icône d'avertissement rouge si la date est dépassée.
• Une icône d'horloge orange si l'échéance est dans les 7 jours.
• Une icône de validation verte sinon.

• Toujours cliquer Aperçu avant Enregistrer : un JSON mal formé bloque l'affichage de la colonne.
• Vérifier les noms exacts des valeurs Choix : la moindre faute d'accent ou de casse fait échouer la comparaison.
• Ne pas coller le JSON sans le relire : l'IA peut inventer des propriétés qui n'existent pas dans le schéma SharePoint.
• Toujours tester d'abord sur un environnement de bac à sable avant la production.

• Documentation officielle : https://learn.microsoft.com/sharepoint/dev/declarative-customization/column-formatting
• Catalogue de formatages prêts à l'emploi (communauté) : https://github.com/pnp/sp-dev-list-formatting

• Une liste avec au moins deux colonnes typées (date, choix, nombre, texte).

1. Présenter le besoin : "Nous voulons voir d'un coup d'œil combien de jours il reste avant chaque échéance, sans calculer mentalement."
2. Ouvrir l'agent IA.
3. Coller le prompt (voir ci-dessous).
4. Récupérer la formule.
5. Aller sur SharePoint > Paramètres de la liste > Créer une colonne.
6. Type : Calculé (calcul basé sur d'autres colonnes).
7. Nom : Jours restants.
8. Coller la formule dans le champ Formule.
9. Type de retour : Nombre.
10. Valider, vérifier le calcul sur les éléments existants.

Donne-moi une formule de colonne calculée SharePoint qui retourne le nombre de jours entre aujourd'hui et la valeur de la colonne nommée Échéance. Réponds uniquement avec la formule sans explication.

• Statut d'échéance lisible : "En retard", "Urgent", "À venir" selon la position relative.
• Référence produit formatée : concaténation de plusieurs colonnes en un identifiant unique.
• Indicateur de priorité avec icônes Unicode : flèches vers le haut, droite ou bas.

• TODAY() ne se met à jour qu'à la modification de l'élément, pas en temps réel. Pour un compte à rebours réel, utiliser un formatage JSON (bonus 1) ou un flux Power Automate.
• Les colonnes calculées ne peuvent pas référencer une autre liste : pas de lookup. Si vous avez besoin de croiser des listes, passer par Power Automate.
• Le résultat d'une colonne calculée n'est pas filtrable côté serveur dans tous les cas. Tester vos vues.

• Documentation Microsoft : https://support.microsoft.com/fr-fr/office/exemples-de-formules-courantes-dans-les-listes-d97f1bcb-9a85-4e8d-bcd7-c6a36c46cb7b

• Avoir construit le flux d'approbation du TP 8.
• Comprendre la notion de contenu dynamique dans Power Automate.

• Inclure la date d'échéance dans le sujet du mail, formatée en français lisible.
• Calculer une date butoir à J+7 pour la réponse de l'approbateur.
• Construire une URL absolue vers le fichier dans le message Teams de notification.

1. Rouvrir le flux MKT_VisuelSolstice_Approuver créé au TP 8.
2. Identifier le point de blocage : "On veut afficher la date au format français, pas au format ISO."
3. Ouvrir un agent IA et coller le prompt.
4. Récupérer l'expression.
5. Dans Power Automate, modifier le titre de l'approbation : cliquer dans le champ, ouvrir le sélecteur de contenu dynamique > onglet Expression > coller l'expression.
6. Tester le flux : voir le résultat formaté correctement.

Donne-moi une expression Power Automate qui retourne la date actuelle au format français "23 mai 2026". Pas d'explication.

• Toujours tester en mode test avant d'activer le flux : une expression mal formée échoue silencieusement.
• Encapsuler les chaînes d'entrée dans coalesce() pour éviter les erreurs sur valeur nulle.
• Ajouter une étape Composer pour visualiser le résultat d'une expression avant de l'utiliser dans une action critique.
• Documenter les expressions complexes dans un commentaire de l'étape.

• Documentation Microsoft : https://learn.microsoft.com/power-automate/use-expressions-in-conditions
• Référence WDL : https://learn.microsoft.com/azure/logic-apps/workflow-definition-language-functions-reference

• Avoir construit le flux d'approbation du TP 8.
• Comprendre la structure JSON.

• Le nom du fichier rejeté.
• L'auteur du fichier.
• L'approbateur et la date du rejet.
• Le motif du rejet en encart.
• Deux boutons d'action : Ouvrir le fichier, Voir la bibliothèque.

1. Présenter avant/après : montrer la simple notification texte du TP 8, puis annoncer la version améliorée.
2. Ouvrir l'agent IA.
3. Coller le prompt préparé (voir ci-dessous).
4. Récupérer le JSON de la carte adaptative.
5. Valider la carte dans l'outil Microsoft Adaptive Cards Designer : https://adaptivecards.io/designer/
6. Dans Power Automate, remplacer l'action Teams existante par : Teams - Publier une carte adaptative dans une discussion ou un canal.
7. Coller le JSON dans le champ Message de la carte adaptative.
8. Tester le flux en provoquant un rejet pour voir la carte arriver dans Teams.

Génère une carte adaptative au format Adaptive Cards 1.5 conforme au schéma adaptivecards.io pour Microsoft Teams. La carte notifie l'auteur d'un visuel marketing du rejet de son fichier.

Contenu attendu :

• En-tête conteneur de style warning avec titre "Visuel rejeté" en attention.
• Message personnalisé à l'auteur.
• FactSet listant : nom du fichier, gamme, approbateur, date.
• Container emphasis avec le motif du rejet.
• Deux actions : "Ouvrir le fichier" (style positive) et "Voir la bibliothèque".

Utilise les variables dynamiques de Power Automate au format @{triggerOutputs()?['body/Author/DisplayName']} pour le nom et @{outputs('Démarrer_et_attendre_une_approbation')?['body/responses'][0]['comments']} pour les commentaires.

Réponds uniquement avec le JSON valide.

• Toujours valider la carte dans l'Adaptive Cards Designer avant de la coller dans Power Automate. Le designer signale les erreurs de schéma.
• Vérifier la version Adaptive Cards supportée par Teams : actuellement 1.5 pour Teams Desktop, 1.4 pour mobile.
• Les variables dynamiques utilisent une syntaxe spécifique à Power Automate : @{...}. Sans les accolades et l'arobase, elles ne sont pas évaluées.
• Tester sur plusieurs clients Teams (Desktop, Web, Mobile) car le rendu peut différer.

• Designer en ligne : https://adaptivecards.io/designer/
• Schéma officiel : https://adaptivecards.io/schemas/adaptive-card.json
• Échantillons : https://adaptivecards.io/samples/

• PowerShell 7 installé sur le poste du formateur.
• Module PnP.PowerShell installé : Install-Module -Name PnP.PowerShell -Force.
• Compte avec droits administrateur SharePoint sur le tenant.
• Application Entra ID enregistrée pour PnP (procédure documentée).

1. Présenter le problème : "Combien de temps avez-vous mis au TP 2 pour créer bibliothèques + colonnes + listes ? Imaginez le faire 5 fois par an pour 5 nouveaux projets."
2. Ouvrir l'agent IA.
3. Coller le prompt (voir ci-dessous).
4. Récupérer le script PowerShell.
5. Coller dans VS Code, sauvegarder en .ps1.
6. Adapter les paramètres (URL du tenant, nom du nouveau site).
7. Ouvrir PowerShell, exécuter Connect-PnPOnline -Url <admin-url> -Interactive.
8. Exécuter le script : ./provisioning-solstice.ps1.
9. Vérifier dans SharePoint : le nouveau site est créé avec toutes ses bibliothèques, colonnes et listes.

Génère un script PowerShell complet utilisant le module PnP.PowerShell pour provisionner un site SharePoint d'équipe nommé "Projet Solstice Q4 2026".

Le script doit :

• Créer un site d'équipe avec groupe Microsoft 365 privé.
• Créer deux bibliothèques : "Spécifications produits" et "Visuels marketing".
• Ajouter à chaque bibliothèque les colonnes : Gamme (Choix : Solstice Inox, Solstice Bronze, Solstice Lumen) et Statut (Choix).
• Activer le versioning et l'approbation intégrée sur "Visuels marketing".
• Créer un sous-dossier "Approuvés" dans "Visuels marketing".
• Créer une liste "Plan d'action Solstice" avec colonnes Échéance (Date), Statut (Choix), Responsable (Personne), Priorité (Choix).
• Ajouter trois éléments d'exemple dans la liste.

Inclure des commentaires en français, gérer les paramètres en variables en haut du script, afficher des messages de progression en couleur cyan.

• PnP.PowerShell évolue rapidement : vérifier la version installée et l'adapter aux dernières commandes.
• Toujours tester sur un tenant de bac à sable avant d'exécuter sur la production.
• Les droits d'administrateur sont nécessaires : prévoir les autorisations en amont.
• La connexion interactive ouvre une fenêtre de navigateur : peut ne pas fonctionner en environnement headless.
• Documenter la version du module PnP.PowerShell utilisée dans l'en-tête du script.

• Documentation officielle : https://pnp.github.io/powershell/
• Échantillons communautaires : https://github.com/pnp/script-samples

• Node.js LTS (version 18.x ou 20.x).
• Yeoman et générateur SPFx installés globalement.
• Gulp CLI.
• Catalogue d'applications activé sur le tenant.
• Compte avec droits administrateur de catalogue d'apps.

1. Présenter l'objectif : "Nous voulons un compte à rebours visible sur la page d'accueil. Ce n'est pas un WebPart natif. Sans IA, il faut un développeur. Avec IA, on peut s'en sortir nous-mêmes."
2. Lancer Yeoman dans un terminal pour générer le squelette (5 min).
3. Ouvrir l'agent IA, coller le prompt principal pour le code TypeScript / React.
4. Récupérer le code, le coller dans src/webparts/compteARebours/components/CompteARebours.tsx.
5. Lancer gulp serve pour tester localement dans le workbench SPFx.
6. Une fois validé, lancer gulp bundle --ship puis gulp package-solution --ship.
7. Déployer le .sppkg dans le catalogue d'apps du tenant.
8. Ajouter le WebPart sur une page moderne du site Solstice.

• Le code généré par l'IA n'est pas à coller aveuglément : toujours relire types, imports, syntaxe spécifique.
• Vérifier la version SPFx cible : préciser dans le prompt (par exemple SPFx 1.19).
• Tester en local avec gulp serve avant de packager.
• Avoir un tenant de bac à sable dédié pour les démos SPFx.
• Les WebParts SPFx vieillissent vite : documenter la version de chaque dépendance.

• Microsoft Learn SPFx : https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview
• Échantillons communautaires : https://github.com/pnp/sp-dev-fx-webparts

• L'IA n'est pas magique : elle se trompe, invente parfois des syntaxes, mélange des versions. Toujours valider.
• L'IA n'est pas un développeur : pour des cas complexes (sécurité, performance, intégrations métier critiques), elle reste un point de départ, pas un point d'arrivée.
• L'IA est un excellent traducteur entre votre intention métier et la syntaxe technique cible.
• Conserver le couple prompt + résultat dans un référentiel : c'est votre capital. La même intention exprimée différemment peut donner un meilleur code.
• Toujours tester sur un environnement non productif avant de déployer.
• Ne jamais coller de données sensibles dans un prompt envoyé à un agent IA externe (sauf agent privé entreprise comme Copilot for Microsoft 365).

• Confidentialité : ce que vous envoyez à un agent IA peut être logué. Ne jamais coller de comptes, de mots de passe, de données personnelles.
• Versioning du code généré : conserver dans OneDrive, un dépôt Git, ou tout référentiel central.
• Documentation : noter à côté de chaque code généré ce qu'il fait, le prompt source, la date.
• Validation collégiale : pour les codes destinés à la production, faire valider par un référent technique.
• Conformité : vérifier que l'usage d'un agent IA externe est conforme à la politique de votre organisation.