Introduction
En 2026, les add-ins Excel basés sur Office JavaScript API révolutionnent l'automatisation des tableurs. Contrairement aux VBA obsolètes, ces extensions web cross-platform (Windows, Mac, Web, Mobile) exploitent TypeScript pour des interactions fluides avec les workbooks. Imaginez générer des graphiques dynamiques sur des données modifiées en temps réel, ou valider des cellules via événements – c'est le quotidien d'un add-in expert.
Ce tutoriel expert vous guide pas à pas pour créer un add-in complet : lecture/écriture avancée de ranges, gestion d'événements de worksheet, création de charts conditionnels, et fonctions personnalisées. Vous apprendrez à sideloader pour tests locaux et publier sur AppSource. Résultat : un outil bookmarkable boostant votre productivité sur des projets réels comme dashboards financiers ou analyses data science. Prêt à transformer Excel en super-app ? (142 mots)
Prérequis
- Node.js 20+ et npm 10+
- Visual Studio Code avec extensions : Office Add-ins Toolkit, TypeScript Importer
- Excel 365 (desktop/web) pour sideload
- Connaissances avancées en TypeScript, Promises/async-await et DOM manipulation
- Compte Microsoft 365 Developer Sandbox (gratuit via portal.office.com)
Installer les outils de développement
npm install -g yo generator-office @microsoft/office-js @types/office-js
npm install -g office-addin-debugging
mkdir mon-addin-excel && cd mon-addin-excelCette commande installe Yeoman et le générateur Office pour scaffolding rapide, plus les types Office JS pour IntelliSense. Le dossier projet est créé vide pour contrôle total. Évitez les versions globales obsolètes : npm 10+ gère les peer deps sans conflits.
Générer le squelette du projet
Utilisez Yeoman pour bootstrapper un projet TypeScript avec task pane. Choisissez 'Excel' comme host, 'Task pane' comme type, et 'United States' pour localisation. Cela génère un manifest XML, HTML/TS pour l'UI, et webpack pour bundling.
Initialiser le projet avec Yeoman
yo office
# Suivez l'assistant :
# ? What is your solution name? ExcelAdvancedAddin
# ? Which type of Office Add-in would you like to create? Office Add-in Task Pane project using TypeScript
# ? Which type of Office project would you like to create? Excel Desktop (Edge Chromium), Excel Current Web, and Excel on iPad
# ? Would you like to open the project in VS Code now? YesYeoman crée un projet complet avec tsconfig.json, webpack.config.js et dossier src. Le choix multi-plateforme assure compatibilité. Lancez VS Code directement pour debugging intégré ; ignorez les templates basiques pour customisation experte.
Configurer le manifest XML complet
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
<Id>12345678-1234-1234-1234-123456789abc</Id>
<Version>1.0.0.0</Version>
<ProviderName>Learni Dev</ProviderName>
<DefaultLocale>fr-FR</DefaultLocale>
<DisplayName DefaultValue="Add-in Excel Avancé" />
<Description DefaultValue="Add-in expert pour automatisations Excel" />
<IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png" />
<SupportUrl DefaultValue="https://learni-group.com" />
<AppDomains>
<AppDomain>https://localhost:3000</AppDomain>
</AppDomains>
<Hosts>
<Host Name="Workbook" />
</Hosts>
<Requirements>
<Sets DefaultMinVersion="1.4">
<Set Name="ExcelApi" MinVersion="1.4" />
</Sets>
</Requirements>
<FormSettings>
<Form xsi:type="TaskPane">
<DesktopSettings>
<SourceLocation DefaultValue="https://localhost:3000/taskpane.html" />
<RequestedWidth>400</RequestedWidth>
</DesktopSettings>
</Form>
</FormSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>Ce manifest définit l'identité, UI et permissions. ExcelApi 1.4+ active événements avancés. Remplacez l'ID par un GUID unique (utilisez guidgen). ReadWriteDocument est minimal pour ranges/charts ; ajoutez ReadAllDocument si besoin. Validez avec Validate Office Add-ins.
Développer l'interface task pane
La task pane est une sidebar HTML/TS injectée dans Excel. Elle expose boutons pour actions expertes comme 'Analyser Range' ou 'Générer Chart'. Utilisez Office UI Fabric pour design pro.
Créer le fichier HTML de la task pane
<!DOCTYPE html>
<html>
<head>
<title>Add-in Excel Avancé</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<link rel="stylesheet" href="taskpane.css">
<script src="../node_modules/@fluentui/react/dist/css/fabric.min.css"></script>
</head>
<body>
<div id="taskpane-demo-header">
<img width="32" height="32" src="assets/logo-filled.png">
<h1>Bienvenue dans l'Add-in Expert</h1>
</div>
<hr>
<div id="function-buttons">
<button id="read-range">Lire Range A1:B10</button>
<button id="write-chart">Insérer Chart Dynamique</button>
<button id="add-event">Activer Événements Cellules</button>
<button id="custom-function">Exécuter Fonction Custom</button>
</div>
<div id="output"></div>
<script src="taskpane.js"></script>
</body>
</html>Ce HTML charge Office.js pour API et Fluent UI pour composants natifs. Boutons trigger des handlers TS. #output affiche logs en live. Ajoutez taskpane.css pour styles custom ; testez en sideload pour responsive sur mobile.
Implémenter les handlers basiques en TypeScript
import { Excel } from "office-js";
Office.onReady(() => {
document.getElementById("read-range")!.onclick = readRange;
document.getElementById("write-chart")!.onclick = insertChart;
});
async function readRange() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
const range = sheet.getRange("A1:B10");
range.load("values");
await context.sync();
const output = document.getElementById("output")!;
output.innerHTML = `<pre>${JSON.stringify(range.values, null, 2)}</pre>`;
});
}
async function insertChart() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
const range = sheet.getRange("A1:B10");
const chart = sheet.charts.add("ColumnClustered", range);
chart.setTitle("Chart Dynamique Généré");
await context.sync();
});
}Les handlers utilisent Excel.run pour batcher ops atomiques, évitant race conditions. load("values") + sync() est pattern standard ; analogie : comme un commit Git. Limitez ranges pour perf sur gros datasets (>10k cellules crashent).
Ajouter des événements avancés et fonctions custom
Événements : Surveillez changements cellules pour recalculs auto (ex: validation data). Custom Functions : Définissez formules Excel comme =MAFONCTION(A1) via sous-dossier functions. Nécessite ExcelApi 1.2+.
Gérer les événements de worksheet
async function addEvent() {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
sheet.onChanged.add(handleSheetChanged);
sheet.onSelectionChanged.add(handleSelectionChanged);
await context.sync();
document.getElementById("output")!.innerHTML = "Événements activés !";
});
}
function handleSheetChanged(eventArgs: Excel.WorksheetChangedEventArgs) {
console.log("Cellule modifiée :", eventArgs.address);
// Ex: Mettre à jour chart auto
insertChart();
}
function handleSelectionChanged(eventArgs: Excel.WorksheetSelectionChangedEventArgs) {
console.log("Sélection :", eventArgs.address);
}
document.getElementById("add-event")!.onclick = addEvent;
// Dans Office.onReady, ajoutez : document.getElementById("add-event")!.onclick = addEvent;Les handlers d'événements sont asynchrones et globaux ; utilisez eventArgs pour contexte précis (adresse, source). Déboguez avec console.log visible en F12 Excel. Déconnectez handlers avec remove() pour éviter memory leaks sur long sessions.
Définir une fonction personnalisée Excel
function MAFONCTION(maValeur: number): number {
/**
* @CustomFunction
* @param maValeur {number} Valeur à doubler.
* @returns Nombre doublé.
*/
return maValeur * 2;
}
/**
* Calcule somme avec param variable.
* @CustomFunction
* @param valeurs Array de nombres.
* @returns Somme.
*/
function SOMMEVARIABLE(...valeurs: number[]): number {
return valeurs.reduce((a, b) => a + b, 0);
}
export { MAFONCTION, SOMMEVARIABLE };JSDoc @CustomFunction expose à Excel comme formules. ...valeurs gère args dynamiques. Rebuild avec npm run build et sideload ; testez =MAFONCTION(5) → 10. Cachez fonctions pour perf : Office recalcule seulement sur deps changes.
Script de sideload pour tests locaux
npm install
npm run build
npx office-addin-debugging start https://localhost:3000/manifest.xml
# Ou manuellement : Excel > Insertion > Mon add-in > Charger depuis fichier > manifest.xmlBuild webpackifie TS→JS minifié. Debugging lance serveur HTTPS auto avec cert self-signed. Utilisez VS Code debugger pour breakpoints. Pour prod, remplacez localhost par domaine valide.
Bonnes pratiques
- Batch ops : Toujours encapsuler en
Excel.run(async (context) => { ... await context.sync(); })pour atomicité et perf (x10 gain). - Gestion erreurs : Wrappez en try/catch +
context.reSync(); loggez avecOffice.context.roamingSettingspour persistence. - Sécurité : Validez inputs ranges (ex:
range.getCellCount() < 10000) ; utilisezReadOnlyperms si possible. - Perf mobile : Limitez UI à 350px width ; testez sur Excel iPad pour touch events.
- I18N : Chargez locales dynamiquement via
Office.context.displayLanguage.
Erreurs courantes à éviter
- Pas de sync() : Ops asynchrones échouent silencieusement ; toujours
await context.sync(). - HTTPS forcé : Sideload refuse HTTP ; générez cert avec
mkcertpour localhost. - Versions API :
ExcelApi 1.1manque événements ; ciblez 1.4+ dans manifest. - Memory leaks : Oubliez
remove()sur handlers ; surveillez avec Task Manager Excel.
Pour aller plus loin
- Docs officielles : Office JS Excel API
- Avancé : Intégrez Power Query via API ou React pour task pane complexe.
- Déploiement : Soumettez à AppSource après certification.
- Découvrez nos formations Learni Dev pour Office Add-ins expert et certifications Microsoft.