Excel with TypeScript

You can use the Yeoman Generator to create an Excel Add-in project using VS Code with TypeScript
The link above displays the contents of these three files:

package.json 
webpack.config.js
manifest.xml

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>Contoso Task Pane Add-in</title>

<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>

<!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>

<!-- Template styles -->
<link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
<header class="ms-welcome__header ms-bgColor-neutralLighter">
<img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
<h1 class="ms-font-su">Welcome</h1>
</header>
<section id="sideload-msg" class="ms-welcome__main">
<h2 class="ms-font-xl">Please sideload your add-in to see app body.</h2>
</section>
<main id="app-body" class="ms-welcome__main" style="display: none;">
<h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
<ul class="ms-List ms-welcome__features">
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Ribbon ms-font-xl"></i>
<span class="ms-font-m">Achieve more with Office integration</span>
</li>
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Unlock ms-font-xl"></i>
<span class="ms-font-m">Unlock features and functionality</span>
</li>
<li class="ms-ListItem">
<i class="ms-Icon ms-Icon--Design ms-font-xl"></i>
<span class="ms-font-m">Create and visualize like a pro</span>
</li>
</ul>
<p class="ms-font-l">Modify the source files, then click <b>Run</b>.</p>
<div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
<span class="ms-Button-label">Run</span>
</div>
</main>
</body>
</html>

taskpane.ts

/* global console, document, Excel, Office */ 

Office.onReady((info) => {
if (info.host === Office.HostType.Excel) {
document.getElementById("sideload-msg").style.display = "none";
document.getElementById("app-body").style.display = "flex";
document.getElementById("run").onclick = run;
}
});

export async function run() {
try {
await Excel.run(async (context) => {
/**
* Insert your Excel code here
*/
const range = context.workbook.getSelectedRange();

// Read the range address
range.load("address");

// Update the fill color
range.format.fill.color = "yellow";

await context.sync();
console.log(`The range address was ${range.address}.`);
});
} catch (error) {
console.error(error);
}
}

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:hover .ms-Button-label,
.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
});

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("action", message);

event.completed();
}

function getGlobal() {
return typeof self !== "undefined"
? self
: typeof window !== "undefined"
? window
: typeof global !== "undefined"
? global
: undefined;
}

const g = getGlobal() as any;
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