6 | Discover what Office Add-ins can do for you today!
7 |
8 | -
9 |
10 | Achieve more with Office integration
11 |
12 | -
13 |
14 | Unlock features and functionality
15 |
16 | -
17 |
18 | Create and visualize like a pro
19 |
20 |
21 |
22 |
23 | Modify the source files, then click Run.
24 |
25 | Run
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/taskpane/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 | import * as excel from "./excel.app.component";
3 | import * as onenote from "./onenote.app.component";
4 | import * as outlook from "./outlook.app.component";
5 | import * as powerpoint from "./powerpoint.app.component";
6 | import * as project from "./project.app.component";
7 | import * as word from "./word.app.component";
8 | /* global Office */
9 |
10 | @Component({
11 | selector: "app-home",
12 | templateUrl: "./app.component.html",
13 | })
14 | export default class AppComponent {
15 | welcomeMessage = "Welcome";
16 |
17 | async run() {
18 | switch (Office.context.host) {
19 | case Office.HostType.Excel: {
20 | const excelComponent = new excel.default();
21 | return excelComponent.run();
22 | }
23 | case Office.HostType.OneNote: {
24 | const onenoteComponent = new onenote.default();
25 | return onenoteComponent.run();
26 | }
27 | case Office.HostType.Outlook: {
28 | const outlookComponent = new outlook.default();
29 | return outlookComponent.run();
30 | }
31 | case Office.HostType.PowerPoint: {
32 | const powerpointComponent = new powerpoint.default();
33 | return powerpointComponent.run();
34 | }
35 | case Office.HostType.Project: {
36 | const projectComponent = new project.default();
37 | return projectComponent.run();
38 | }
39 | case Office.HostType.Word: {
40 | const wordComponent = new word.default();
41 | return wordComponent.run();
42 | }
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/taskpane/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from "@angular/core";
2 | import { BrowserModule } from "@angular/platform-browser";
3 | import AppComponent from "./app.component";
4 |
5 | @NgModule({
6 | declarations: [AppComponent],
7 | imports: [BrowserModule],
8 | bootstrap: [AppComponent],
9 | })
10 | export default class AppModule {}
11 |
--------------------------------------------------------------------------------
/src/taskpane/app/excel.app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | /* global console, Excel */
4 |
5 | @Component({
6 | selector: "app-home",
7 | templateUrl: "./app.component.html",
8 | })
9 | export default class AppComponent {
10 | welcomeMessage = "Welcome";
11 |
12 | async run() {
13 | try {
14 | await Excel.run(async (context) => {
15 | /**
16 | * Insert your Excel code here
17 | */
18 | const range = context.workbook.getSelectedRange();
19 |
20 | // Read the range address
21 | range.load("address");
22 |
23 | // Update the fill color
24 | range.format.fill.color = "yellow";
25 |
26 | await context.sync();
27 | console.log(`The range address was ${range.address}.`);
28 | });
29 | } catch (error) {
30 | console.error(error);
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/taskpane/app/onenote.app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | @Component({
4 | selector: "app-home",
5 | templateUrl: "./app.component.html",
6 | })
7 | export default class AppComponent {
8 | welcomeMessage = "Welcome";
9 |
10 | async run() {
11 | /**
12 | * Insert your OneNote code here
13 | */
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/taskpane/app/outlook.app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | @Component({
4 | selector: "app-home",
5 | templateUrl: "./app.component.html",
6 | })
7 | export default class AppComponent {
8 | welcomeMessage = "Welcome";
9 |
10 | async run() {
11 | /**
12 | * Insert your Outlook code here
13 | */
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/taskpane/app/powerpoint.app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | /* global Office, console */
4 |
5 | @Component({
6 | selector: "app-home",
7 | templateUrl: "./app.component.html",
8 | })
9 | export default class AppComponent {
10 | welcomeMessage = "Welcome";
11 |
12 | async run() {
13 | /**
14 | * Insert your PowerPoint code here
15 | */
16 | Office.context.document.setSelectedDataAsync(
17 | "Hello World!",
18 | {
19 | coercionType: Office.CoercionType.Text,
20 | },
21 | (result) => {
22 | if (result.status === Office.AsyncResultStatus.Failed) {
23 | console.error(result.error.message);
24 | }
25 | }
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/taskpane/app/project.app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | /* global Office, console*/
4 |
5 | @Component({
6 | selector: "app-home",
7 | templateUrl: "./app.component.html",
8 | })
9 | export default class AppComponent {
10 | welcomeMessage = "Welcome";
11 |
12 | async run() {
13 | try {
14 | // Get the GUID of the selected task
15 | Office.context.document.getSelectedTaskAsync((result) => {
16 | let taskGuid;
17 | if (result.status === Office.AsyncResultStatus.Succeeded) {
18 | taskGuid = result.value;
19 |
20 | // Set the specified fields for the selected task.
21 | const targetFields = [Office.ProjectTaskFields.Name, Office.ProjectTaskFields.Notes];
22 | const fieldValues = ["New task name", "Notes for the task."];
23 |
24 | // Set the field value. If the call is successful, set the next field.
25 | for (let index = 0; index < targetFields.length; index++) {
26 | Office.context.document.setTaskFieldAsync(taskGuid, targetFields[index], fieldValues[index], (result) => {
27 | if (result.status === Office.AsyncResultStatus.Succeeded) {
28 | index++;
29 | } else {
30 | console.log(result.error);
31 | }
32 | });
33 | }
34 | } else {
35 | console.log(result.error);
36 | }
37 | });
38 | } catch (error) {
39 | console.error(error);
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/taskpane/app/word.app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from "@angular/core";
2 |
3 | /* global Word */
4 |
5 | @Component({
6 | selector: "app-home",
7 | templateUrl: "./app.component.html",
8 | })
9 | export default class AppComponent {
10 | welcomeMessage = "Welcome";
11 |
12 | async run() {
13 | return Word.run(async (context) => {
14 | /**
15 | * Insert your Word code here
16 | */
17 |
18 | // insert a paragraph at the end of the document.
19 | const paragraph = context.document.body.insertParagraph("Hello World", Word.InsertLocation.end);
20 |
21 | // change the paragraph color to blue.
22 | paragraph.font.color = "blue";
23 |
24 | await context.sync();
25 | });
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/taskpane/taskpane.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the project root for license information.
4 | */
5 |
6 | html,
7 | body {
8 | width: 100%;
9 | height: 100%;
10 | margin: 0;
11 | padding: 0;
12 | }
13 |
14 | ul {
15 | margin: 0;
16 | padding: 0;
17 | }
18 |
19 | .ms-welcome__header {
20 | padding: 20px;
21 | padding-bottom: 30px;
22 | padding-top: 100px;
23 | display: -webkit-flex;
24 | display: flex;
25 | -webkit-flex-direction: column;
26 | flex-direction: column;
27 | align-items: center;
28 | }
29 |
30 | .ms-welcome__main {
31 | display: -webkit-flex;
32 | display: flex;
33 | -webkit-flex-direction: column;
34 | flex-direction: column;
35 | -webkit-flex-wrap: nowrap;
36 | flex-wrap: nowrap;
37 | -webkit-align-items: center;
38 | align-items: center;
39 | -webkit-flex: 1 0 0;
40 | flex: 1 0 0;
41 | padding: 10px 20px;
42 | }
43 |
44 | .ms-welcome__main > h2 {
45 | width: 100%;
46 | text-align: center;
47 | }
48 |
49 | .ms-welcome__features {
50 | list-style-type: none;
51 | margin-top: 20px;
52 | }
53 |
54 | .ms-welcome__features.ms-List .ms-ListItem {
55 | padding-bottom: 20px;
56 | display: -webkit-flex;
57 | display: flex;
58 | }
59 |
60 | .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
61 | margin-right: 10px;
62 | }
63 |
64 | .ms-welcome__action.ms-Button--hero {
65 | margin-top: 30px;
66 | }
67 |
68 | .ms-Button.ms-Button--hero .ms-Button-label {
69 | color: #0078d7;
70 | }
71 |
72 | .ms-Button.ms-Button--hero:hover .ms-Button-label,
73 | .ms-Button.ms-Button--hero:focus .ms-Button-label{
74 | color: #005a9e;
75 | cursor: pointer;
76 | }
77 |
78 | b {
79 | font-weight: bold;
80 | }
--------------------------------------------------------------------------------
/src/taskpane/taskpane.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 
3 |