Word with TypeScript
You can use the Yeoman Generator to create a Word add-in project using VS Code with TypeScript
The link above displays the contents of these three files:
package.json
manifest.xml
webpack.config.js
This page displays all the other important files in this project:
src\taskpane\taskpane.html
src\taskpane\taskpane.ts
src\taskpane\taskpane.css
src\commands\commands.html
src\commands\commands.ts
babel.config.json
tsconfig.json
.eslintrc.json
taskpane.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React Task Pane Add-in</title>
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
<link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-m ms-Fabric">
<div id="container"></div>
</body>
</html>
src/taskpane/index.tsx
This file contains the typescript that sits behind the html page.
import "office-ui-fabric-react/dist/css/fabric.min.css";
import App from "./components/App";
import { AppContainer } from "react-hot-loader";
import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
import * as React from "react";
import * as ReactDOM from "react-dom";
initializeIcons();
let isOfficeInitialized = false;
const title = "React Task Pane Add-in";
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component
title={title}
isOfficeInitialized={isOfficeInitialized}
/>
</AppContainer>,
document.getElementById("container")
);
};
/* Render application after Office initializes */
Office.initialize = () => {
isOfficeInitialized = true;
render(App);
};
if ((module as any).hot) {
(module as any).hot.accept("./components/App", () => {
const NextApp = require("./components/App").default;
render(NextApp);
});
}
taskpane.ts
/* global document, Office, Word */
Office.onReady((info) => {
if (info.host === Office.HostType.Word) {
document.getElementById("sideload-msg").style.display = "none";
document.getElementById("app-body").style.display = "flex";
document.getElementById("run").onclick = run;
}
});
export async function run() {
return Word.run(async (context) => {
/**
* Insert your Word code here
*/
// insert a paragraph at the end of the document.
const paragraph = context.document.body.insertParagraph("Hello World", Word.InsertLocation.end);
// change the paragraph color to blue.
paragraph.font.color = "blue";
await context.sync();
});
}
taskpane.css
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
}
.ms-welcome__header {
padding: 20px;
padding-bottom: 30px;
padding-top: 100px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
}
.ms-welcome__main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
align-items: center;
-webkit-flex: 1 0 0;
flex: 1 0 0;
padding: 10px 20px;
}
.ms-welcome__main > h2 {
width: 100%;
text-align: center;
}
.ms-welcome__features {
list-style-type: none;
margin-top: 20px;
}
.ms-welcome__features.ms-List .ms-ListItem {
padding-bottom: 20px;
display: -webkit-flex;
display: flex;
}
.ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
margin-right: 10px;
}
.ms-welcome__action.ms-Button--hero {
margin-top: 30px;
}
.ms-Button.ms-Button--hero .ms-Button-label {
color: #0078d7;
}
`
.ms-Button.ms-Button--hero:focus .ms-Button-label{
color: #005a9e;
cursor: pointer;
}
b {
font-weight: bold;
`
commands.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js">
</script>
</head>
<body>
</body>
</html>
commands.ts
/* global global, Office, self, window */
Office.onReady(() => {
// If needed, Office.js is ready to be called
});
/**
* Shows a notification when the add-in command is executed.
* @param event
*/
function action(event: Office.AddinCommands.Event) {
const message: Office.NotificationMessageDetails = {
type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
message: "Performed action.",
icon: "Icon.80x80",
persistent: true,
};
// Show a notification message
Office.context.mailbox.item.notificationMessages.replaceAsync("action", message);
// Be sure to indicate when the add-in command function is complete
event.completed();
}
function getGlobal() {
return typeof self !== "undefined"
? self
: typeof window !== "undefined"
? window
: typeof global !== "undefined"
? global
: undefined;
}
const g = getGlobal() as any;
// The add-in command functions need to be available in global scope
g.action = action;
babel.config.json
{
"presets": ["@babel/preset-typescript"]
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"baseUrl": ".",
"esModuleInterop": true,
"experimentalDecorators": true,
"jsx": "react",
"noEmitOnError": true,
"outDir": "lib",
"sourceMap": true,
"target": "es5",
"lib": [
"es2015",
"dom"
]
},
"exclude": [
"node_modules",
"dist",
"lib",
"lib-amd"
],
"ts-node": {
"files": true
}
}
.eslintrc.json
{
"plugins": [
"office-addins"
],
"extends": [
"plugin:office-addins/recommended"
]
}
© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext