Office Add-ins Documentation

To deliver a native-feeling experience in multiple regions, you can localize display strings, manifest metadata (names, descriptions, icons), and page content. The Office Add-ins platform supports three complementary approaches:

1. Office JavaScript API: Detect the user's display or content locale at runtime to show the correct strings.
2. Manifest overrides: Declare locale-specific names, descriptions, icons, and source pages in the manifest so the platform selects the correct values automatically.
3. Visual Studio/.NET globalization: Use ASP.NET AJAX resource files and JavaScript Date and Number extensions for culture-aware formatting.

A standard React-based Excel add-in project generated via Yeoman contains these key files:

• manifest.xml or manifest.json: Located in the root directory; defines the add-in's settings, permissions, and capabilities.
• src/taskpane/taskpane.html: The HTML framework for the task pane.
• src/taskpane/components/: Contains the React components that define the task pane UI.
• src/taskpane/taskpane.css: Contains the CSS styles for the task pane.
• src/taskpane/components/App.tsx: The primary file containing the Office JavaScript API code used to interact with Excel.

A standard Yeoman-generated OneNote task pane project includes these key files:

• ./manifest.xml: Defines the add-in's settings, permissions, and capabilities.
• ./src/taskpane/taskpane.html: The HTML markup for the task pane UI.
• ./src/taskpane/taskpane.css: The CSS styles for the task pane.
• ./src/taskpane/taskpane.js: The core logic using the Office JavaScript API to interact with OneNote.

Guidelines for creating Outlook add-ins for Android and iOS. The goal is to create add-ins that feel native to each platform while maintaining brand consistency.

Key components of a mobile add-in include:

• Branding area
• Navigation bar
• Section title
• Cells or input fields
• Actions

Note: The general Office Add-in design principles apply in addition to these mobile-specific patterns.

A project generated with the Yeoman generator for the unified manifest includes these key files:

• ./manifest/manifest.json: Defines the settings and capabilities of the add-in.
• ./src/taskpane/taskpane.html: Contains the HTML markup for the task pane UI.
• ./src/taskpane/taskpane.css: Contains the CSS for the task pane.
• ./src/taskpane/taskpane.ts: Contains the TypeScript code that uses the Office JavaScript library to interact with Outlook.
• ./src/command/command.html: A template file edited by WebPack at build time to load the command's JavaScript.
• ./src/command/command.ts: Contains the logic for custom ribbon buttons (commands).

Outlook add-ins are web-based solutions that extend the functionality of the Outlook client. They consist of a manifest (describing integration points like buttons, task panes, or events) and JavaScript/HTML code (providing the UI and business logic).

Key characteristics:

• Cross-platform: The same logic works across Web (Microsoft 365, Outlook.com), Desktop (New Outlook on Windows, Classic Outlook on Windows, Mac), and Mobile (iOS, Android).
• Sandboxed: Web components run in a browser or webview control sandbox.
• Network dependent: They require a network connection to run.
• Deployment: Can be acquired via the Microsoft Marketplace or sideloaded for testing.

A project generated with the Angular template contains several key files:

• manifest.xml: Located in the root directory, this file defines the add-in's settings, permissions, and capabilities.
• ./src/taskpane/app/app.component.html: Contains the HTML markup for the task pane UI.
• ./src/taskpane/taskpane.css: Contains the CSS styles applied to the task pane.
• ./src/taskpane/app/app.component.ts: Contains the TypeScript code and Office JavaScript API calls used to interact with Excel.

The prepend-on-send and append-on-send features allow Outlook add-ins to automatically insert content (such as sensitivity labels, legal disclaimers, or marketing headers) into the body of a message or appointment when the user sends the item.

Requirement Sets

• Append-on-send: Requires requirement set 1.9.
• Prepend-on-send: Requires requirement set 1.13.

This repository contains the source files for Office JavaScript API concepts, quick starts, tutorials, and how-to guides.

For the best reading experience, view the hosted documentation on Microsoft Learn.

Note: If you are looking for the actual Office JavaScript API reference documentation (the technical specifications of the API methods, properties, and types), those source files are located in a separate repository: office-js-docs-reference.

UX design patterns for Office Add-ins are organized into functional groups based on common user experiences. You can browse these categories to find best-practice solutions for specific add-in workflows:

• First-run experience (FRE): Patterns for onboarding new users.
• Authentication: Patterns for handling user sign-in and identity.
• Navigation: Patterns for moving through your add-in's interface.
• Branding Design: Patterns for balancing Microsoft brand elements with your own brand identity.

Note: Example screens in the design pattern documentation are designed for a resolution of 1366x768.