How to build simple PowerPoint task pane add-in using Angular?

Introduction

The office add-ins platform can be used to create solutions that enhance the functionality of office apps and interact with the content in documents. With Office Add-ins, you can extend and interact with word, Excel, PowerPoint, OneNote, Project, and Outlook with familiar web technologies like HTML, CSS, and JavaScript.

Office Add-ins can do essentially all of the functions that a webpage does in a browser.

Use the Add-ins platform in Office to

Add New functionality to office clients -

Bring in external data, automate Office documents, and offer third-party functionality in Office clients, among several other things. For example, Microsoft Graph API, to perform communication.

Create new interactive, rich objects that could be integrated into office documents -

Embed maps, charts, and collaborative visualizations in Excel spreadsheets and Presentation slides for customers to use.

PowerPoint add-ins

On multiple platforms, including Windows, iPad, Mac, and also the web, PowerPoint add-ins are used to provide appropriate analysis for your users' presentations. You can create one of two types of PowerPoint add-ins:

Content add-ins enable you to also include dynamic HTML5 content in your presentations.
Using task pane add-ins to bring in reference data or integrate data into the show via a service.
This blog will guide you through the process of creating a PowerPoint Add-in or Visual Studio for Office.

The Visual Studio process generates a Visual Studio solution, although the Yeoman generator produces a Node.js project that can be handled in Visual Studio Code or any other editor.

Create the add-in

Using the Yeoman generator for Office add-ins or Visual Studio, you can create an office add-in.

Visual Studio Code or any other editor can manage the Yeoman generator's Node.js project, whereas Visual Studio produces a Visual Studio solution.

The latest version of Yeoman and also the Yeoman generator for Office Add-ins are now released. Run the following code from the command prompt to install these tools globally.

npm install -g yo generator-office

To create the add-in project
To use the Yeoman generator to generate an add-in project, just use the following command.

yo office

To create your add-in project, execute the following information as necessary.

The generator creates the project and deploys supporting Node components after you complete the wizard.

Read More: How To Create Word Add-in With Angular 2+?

Explore the Project

Sample code for a basic task pane add-in is included in the add-in project you generated with the Yeoman generator.

Open the project in your code editor and browse over all the files listed below if you want to understand more about the components of your add-in project.

Proceed to the next section when you're ready to test your add-in.

• The ./manifest.xmlThe settings and capabilities of the add-in are specified by a file in the project's root directory.
• The ./src/taskpane/taskpane.html The HTML markup for the task pane is included in this file.
• The ./src/taskpane/taskpane.css The CSS for the task pane's content is contained in this file.
• The ./src/taskpane/taskpane.js The Office JavaScript API code in this file facilitates the communication between the task pane and the Office client application.
• Install the dependencies for your add-in in the project's root folder.
• npm install
• Run the following command in the root directory of your project to test our add-in in PowerPoint on a browser. When you perform this command, the local web server will start (if it’s not already working).
• Insert a new blank slide in PowerPoint, go to the Home tab, and then click the Show Taskpane button in the toolbar to keep bringing up the add-in task pane.

[Image of PowerPoint slide]

[Image of PowerPoint slide]

Create the add-in project in Visual Studio

1. In visual studio, create a New Project in Visual Studio.
2. Using the search box, enter add-in. Select PowerPoint Web Add-in and then Next.
3. Name your project and select create.
4. Pick add new functions to PowerPoint in the building office add-in dialogue window, then finish to finish the project.
5. Visual Studio generates a solution, as well as the solution's two projects, which are presented in the solution explorer.

Searching for Powerpoint Add-in Development Solutions? Enquire Today.

Update the code

Home.html defines the HTML that will be presented in the task pane of the add-in.

Replace the element in home.html with the following markup and save the file.

<p> </p>
<p> </p>
<div id="content-header"><div class="padding"><h1>Welcome</h1></div></div>
<p> </p>
<p> </p>
<p> </p>
<div id="content-main"><div class="padding"><p>Select a slide and then choose the buttons to below to add content to it.</p>
<h3>Try it out</h3><button class="ms-Button" id="insert-image">Insert Image</button><button class="ms-Button" id="insert-text">Insert Text</button></div></div>

Open the home.js file in the web application project's root folder.

The script for the add-in is provided in this file.

Save the file before replacing the entire contents with the code following.

'use strict';
(function () {
Office.onReady(function() {

$(document).ready(function () {

$('#insert-image').click(insertImage);
$('#insert-text').click(insertText);
});
});
function insertImage() {
Office.context.document.setSelectedDataAsync(getImageAsBase64String(), {
coercionType: Office.CoercionType.Image,
imageLeft: 50,
imageTop: 50,
imageWidth: 400
},
function (asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
console.log(asyncResult.error.message);
}
});
}  
function insertText() {
Office.context.document.setSelectedDataAsync("Hello World!",
function (asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
console.log(asyncResult.error.message);
}
});
}
function getImageAsBase64String() {
return 'iVBORw0KGgoAAAANSUhEUgAAAZAAAAEFCAIAAABCdiZrA';
}
})();

Open the home.css file in the web app project's folder.

This file contains the add-custom in's styles.

Save the file after replacing the entire contents with the following code.

#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px; 
overflow: hidden;
}
#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto; 
}
.padding {
padding: 15px;
}

Update the manifest

In the add-in project, open the XML manifest file. The settings and capabilities of the add-in are described in this file.

The providername element has a placeholder value. Replace it with your name.

The Displayname object's defaultvalue parameter has a placeholder. Replace it with a Ppt taskpane add-in.

<providername>John Doe</providername>
<defaultlocale>en-US</defaultlocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<displayname defaultvalue="my office add-in">
<description defaultvalue="a task pane add-in for powerpoint">
</description></displayname>

[Output:1]

Conclusion

PowerPoint is a magnificent platform that used by thousands of businesses. Therefore, creating custom functionalities to swift operations is imperious. In this blog, we have learned how to create an add-in for PowerPoint and efficiently enhance new features.