### NPM Scripts for Build, Test, and Deployment
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Complete set of npm scripts for managing the Office add-in lifecycle including production and development builds, development server startup, add-in debugging, unit and end-to-end testing, manifest validation, and code linting. Provides convenient commands for developers to build, test, and deploy the add-in.
```JSON
{
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"dev-server": "webpack serve --mode development",
"start": "office-addin-debugging start manifest.xml",
"stop": "office-addin-debugging stop manifest.xml",
"test": "npm run test:unit && npm run test:e2e",
"test:unit": "mocha -r ts-node/register test/unit/*.test.ts",
"test:e2e": "mocha -r ts-node/register test/end-to-end/*.ts",
"validate": "office-addin-manifest validate manifest.xml",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"convert-to-single-host": "node convertToSingleHost.js"
}
}
```
--------------------------------
### Initialize React App Component with Fluent UI
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Main application component that renders the Office add-in task pane using React and Fluent UI theming. It initializes the React root element when Office is ready and renders the App component with theme provider. The component displays a header, hero list with feature descriptions, and text insertion functionality.
```TypeScript
import App from "./src/taskpane/components/App";
import { FluentProvider, webLightTheme } from "@fluentui/react-components";
import { createRoot } from "react-dom/client";
// Initialize the add-in
const rootElement: HTMLElement | null = document.getElementById("container");
const root = rootElement ? createRoot(rootElement) : undefined;
Office.onReady(() => {
root?.render(
);
});
// App component structure
const App: React.FC = (props: AppProps) => {
const listItems: HeroListItem[] = [
{
icon: ,
primaryText: "Achieve more with Office integration"
},
{
icon: ,
primaryText: "Unlock features and functionality"
},
{
icon: ,
primaryText: "Create and visualize like a pro"
}
];
return (
);
};
```
--------------------------------
### Configure Webpack Development Server with HTTPS
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Webpack configuration for Office add-in development featuring HTTPS support with automatic certificate generation, hot module reloading, and CORS headers. Uses office-addin-dev-certs for certificate management and configures entry points for polyfill, React, task pane, and commands bundles.
```JavaScript
// webpack.config.js configuration
const devCerts = require("office-addin-dev-certs");
module.exports = async (env, options) => {
const dev = options.mode === "development";
const config = {
devtool: "source-map",
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
react: ["react", "react-dom"],
taskpane: {
import: ["./src/taskpane/index.tsx", "./src/taskpane/taskpane.html"],
dependOn: "react"
},
commands: "./src/commands/commands.ts"
},
devServer: {
hot: true,
headers: {
"Access-Control-Allow-Origin": "*"
},
server: {
type: "https",
options: await devCerts.getHttpsServerOptions()
},
port: 3000
}
};
return config;
};
// Start development server
// npm run dev-server
```
--------------------------------
### Office Add-in Manifest XML Configuration
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
This XML manifest file defines the core properties of an Office Add-in, including its unique ID, version, provider, and display information. It specifies which Office applications (hosts) the add-in supports (e.g., Word, Excel, PowerPoint, OneNote), the default URL for the add-in's task pane, and the required permissions (e.g., ReadWriteDocument).
```xml
05c2e1c9-3e1d-406e-9a91-e9ac648541431.0.0.0Contosoen-USReadWriteDocument
```
--------------------------------
### Text Insertion Component with React Hooks
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Interactive React component that provides a textarea input field and button for users to insert custom text into documents. Uses useState hook to manage text state and handles text change and insertion events asynchronously through props callback function.
```TypeScript
import TextInsertion from "./src/taskpane/components/TextInsertion";
import { Button, Field, Textarea } from "@fluentui/react-components";
import { useState } from "react";
// Usage in parent component
// Component implementation
const TextInsertion: React.FC = (props) => {
const [text, setText] = useState("Some text.");
const handleTextInsertion = async () => {
await props.insertText(text);
};
const handleTextChange = async (event: React.ChangeEvent) => {
setText(event.target.value);
};
return (
Click the button to insert text.
);
};
```
--------------------------------
### Universal Text Insertion Function
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
A universal function to insert text across different Office applications. It detects the host environment (e.g., Excel, OneNote, Outlook) and calls the appropriate implementation. This function relies on helper functions like 'insertTextInExcel', 'insertTextInOneNote', etc., which are not provided here.
```typescript
import { insertText } from "./src/taskpane/taskpane";
async function universalInsert() {
try {
await insertText("Cross-platform content");
} catch (error) {
console.error("Insertion failed:", error);
}
}
// Implementation with host detection
export async function insertText(text: string) {
Office.onReady(async (info) => {
switch (info.host) {
case Office.HostType.Excel:
await insertTextInExcel(text);
break;
case Office.HostType.OneNote:
await insertTextInOneNote(text);
break;
case Office.HostType.Outlook:
await insertTextInOutlook(text);
break;
case Office.HostType.Project:
await insertTextInProject(text);
break;
case Office.HostType.PowerPoint:
await insertTextInPowerPoint(text);
break;
case Office.HostType.Word:
await insertTextInWord(text);
break;
default:
throw new Error(`Don't know how to insert text when running in ${info.host}.`);
}
});
}
```
--------------------------------
### Create Text Box on PowerPoint Slide - TypeScript
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Creates a new text box on the currently selected PowerPoint slide, populating it with the given text. The text box can be styled with fill color, border color, weight, and dash style. Requires an active PowerPoint presentation context.
```typescript
import { insertText } from "./src/taskpane/powerpoint";
async function addTextBoxToSlide() {
try {
await insertText("Key Insights:\n- Point 1\n- Point 2");
console.log("Text box created successfully");
} catch (error) {
console.error("Failed to create text box:", error);
}
}
// Implementation details
export async function insertText(text: string) {
try {
await PowerPoint.run(async (context) => {
const slide = context.presentation.getSelectedSlides().getItemAt(0);
const textBox = slide.shapes.addTextBox(text);
textBox.fill.setSolidColor("white");
textBox.lineFormat.color = "black";
textBox.lineFormat.weight = 1;
textBox.lineFormat.dashStyle = PowerPoint.ShapeLineDashStyle.solid;
await context.sync();
});
} catch (error) {
console.log("Error: " + error);
}
}
```
--------------------------------
### Outlook Command Action Notification
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Displays a persistent informational notification message in the Outlook ribbon when a command button is executed. This code snippet demonstrates how to register an action and display a notification using Office.js.
```typescript
// Register in commands.ts
Office.actions.associate("action", action);
function action(event: Office.AddinCommands.Event) {
const message: Office.NotificationMessageDetails = {
type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
message: "Performed action.",
icon: "Icon.80x80",
persistent: true,
};
Office.context.mailbox.item?.notificationMessages.replaceAsync(
"ActionPerformanceNotification",
message
);
event.completed();
}
// Usage: Triggered by ribbon button click
// No direct invocation needed - registered with Office.actions.associate
```
--------------------------------
### Append Text to Word Document Body - TypeScript
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Appends a new paragraph containing the provided text to the end of the active Word document. This function relies on the Word JavaScript API and needs an active Word document context.
```typescript
import { insertText } from "./src/taskpane/word";
async function addParagraphToDocument() {
try {
await insertText("This is a new paragraph added to the document.");
console.log("Paragraph added successfully");
} catch (error) {
console.error("Failed to add paragraph:", error);
}
}
// Implementation details
export async function insertText(text: string) {
try {
await Word.run(async (context) => {
let body = context.document.body;
body.insertParagraph(text, Word.InsertLocation.end);
await context.sync();
});
} catch (error) {
console.log("Error: " + error);
}
}
```
--------------------------------
### Insert Text in Project Task Details
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Updates the name and notes of the currently selected task in Microsoft Project. It uses the 'insertText' function from './src/taskpane/project' and interacts with the Project Task API to set field values.
```typescript
import { insertText } from "./src/taskpane/project";
async function updateTaskDetails() {
try {
await insertText("Updated task notes with additional requirements");
console.log("Task updated");
} catch (error) {
console.error("Failed to update task:", error);
}
}
// Implementation details
export async function insertText(text: string) {
try {
Office.context.document.getSelectedTaskAsync((result: Office.AsyncResult) => {
let taskGuid: string;
if (result.status === Office.AsyncResultStatus.Succeeded) {
taskGuid = result.value;
const targetFields: Office.ProjectTaskFields[] = [
Office.ProjectTaskFields.Name,
Office.ProjectTaskFields.Notes,
];
const fieldValues: string[] = ["New task name", text];
for (let index = 0; index < targetFields.length; index++) {
Office.context.document.setTaskFieldAsync(
taskGuid,
targetFields[index],
fieldValues[index],
(result: Office.AsyncResult) => {
if (result.status === Office.AsyncResultStatus.Succeeded) {
index++;
} else {
console.log(result.error);
}
}
);
}
} else {
console.log(result.error);
}
});
} catch (error) {
console.error(error);
}
}
```
--------------------------------
### Insert Text into Outlook Email Compose Window - TypeScript
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Inserts text at the current cursor position within an Outlook email compose window. Supports both plain text and HTML content types via the Office JavaScript API for Outlook.
```typescript
import { insertText } from "./src/taskpane/outlook";
async function insertEmailContent() {
try {
await insertText("Best regards,\nJohn Doe\nSenior Manager");
console.log("Text inserted into email");
} catch (error) {
console.error("Failed to insert text:", error);
}
}
// Implementation details
export async function insertText(text: string) {
try {
Office.context.mailbox.item?.body.setSelectedDataAsync(
text,
{ coercionType: Office.CoercionType.Text },
(asyncResult: Office.AsyncResult) => {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
throw asyncResult.error.message;
}
}
);
} catch (error) {
console.log("Error: " + error);
}
}
```
--------------------------------
### Insert Text in OneNote Page Title
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Updates the title of the active OneNote page with the provided text. This function requires the 'insertText' function from './src/taskpane/onenote' and utilizes the OneNote API for page manipulation.
```typescript
import { insertText } from "./src/taskpane/onenote";
async function updatePageTitle() {
try {
await insertText("Meeting Notes - 2025-01-15");
console.log("Page title updated");
} catch (error) {
console.error("Failed to update title:", error);
}
}
// Implementation details
export async function insertText(text: string) {
try {
await OneNote.run(async (context) => {
const page = context.application.getActivePage();
page.title = text;
await context.sync();
});
} catch (error) {
console.log("Error: " + error);
}
}
```
--------------------------------
### Insert Text into Excel Cell - TypeScript
Source: https://context7.com/officedev/office-addin-taskpane-react/llms.txt
Inserts provided text into cell A1 of the active Excel worksheet and automatically adjusts the column width. This function utilizes the Excel JavaScript API and requires an active Excel context.
```typescript
import { insertText } from "./src/taskpane/excel";
async function insertDataIntoExcel() {
try {
await insertText("Q4 Revenue: $1.2M");
console.log("Text inserted successfully");
} catch (error) {
console.error("Failed to insert text:", error);
}
}
// Implementation details
export async function insertText(text: string) {
try {
await Excel.run(async (context) => {
const sheet = context.workbook.worksheets.getActiveWorksheet();
const range = sheet.getRange("A1");
range.values = [[text]];
range.format.autofitColumns();
await context.sync();
});
} catch (error) {
console.log("Error: " + error);
}
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.