How To Build Word Task Pane Add-In Using Angular?

Using the Office Add-ins platform, we can create solutions that expand Office programs and interact with content in Office documents. With Office Add-ins, we may extend and interact with Word, Excel, PowerPoint, OneNote, Project, and Outlook using web technologies like HTML, CSS, and JavaScript. Our solution will work in Office on a variety of platforms, including Windows, Mac, and iOS.

We’ll make a Word task pane add-in that: Inserts a variety of text; Formats text; in this blog.

Prerequisites:

• js is a server-side programming language (the latest LTS version)
• Yeoman’s the most recent version, as well as the Yeoman generator for Office Add-ins. Run the following line from the command prompt to install these tools globally.

npm install -g yo generator-office

Create Our Add-In Project:

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

yo office

To create our add-in project, enter the following information when required.

• Select a project type, such as Office Add-in Task Pane.
• Select a scripting language: JavaScript
• What would you like to call your plug-in? Which Office client application would you like to support my Office add-in? (Word)

The generator creates the project and installs supporting Node components after we finish the wizard.

Insert A Range Of Text:

We’ll programmatically test that our add-in supports the user’s current version of Word in this blogging phase and then put a paragraph into the page.

Code The Add-In:

1. In our code editor, open the project.
2. ./src/taskpane/taskpane.html is the file to open. This file contains the task pane’s HTML markup.
3. Delete any lines that appear after the opening </main> tag and before the closing </main> tag from the <main> element.
4. Immediately after the opening <main> tag, add the following markup.

<button class="ms-Button" id="insert-paragraph">Insert Paragraph</button><br/><br/>

5. ./src/taskpane/taskpane.js is the file to open. This file contains the Office JavaScript API code that allows the task pane and the Office client application to interact more easily.
6. Remove any references to the run button and the run() function by doing the following steps:

• • Find and delete the line document.getElementById("run").onclick = run;
  • Locate and delete the run() method in its entirety.

7. Locate the line if (info.host === Office.HostType.Word) in the Office.onReady method call and add the following code immediately after it. Note:

• • The first section of this code checks to see if the user’s version of Word supports a version of Word.js that includes all of the APIs used throughout this tutorial. Use the body of the conditional block in a production add-in to hide or deactivate the UI that would call unsupported APIs. This will allow the user to continue using the add-in components that are compatible with their Word version.
  • The insert-paragraph button’s event handler is added in the second portion of this code.

// Determine if the user's version of Office supports all the Office.js APIs that are used in the tutorial.
if (!Office.context.requirements.isSetSupported('WordApi', '1.3')) {
  console.log('Sorry. The tutorial add-in uses Word.js APIs that are not available in your version of Office.');
}
// Assign event handlers and other initialization logic.
document.getElementById("insert-paragraph").onclick = insertParagraph;

8. To the end of the file, add the following function.

• • The function that is provided to Word.run will include our Word.js business logic. This reasoning does not run right away. It is instead added to a list of pending commands.
  • All queued commands are sent to Word for execution using the context.sync method.
  • After the Word.run, there is a catch block. This is a best practice that should be followed at all times.

function insertParagraph() {
  Word.run(function (context) {
      // TODO1: Queue commands to insert a paragraph into the document.
      return context.sync();
  })
  .catch(function (error) {
      console.log("Error: " + error);
      if (error instanceof OfficeExtension.Error) {
          console.log("Debug info: " + JSON.stringify(error.debugInfo));
      }
  });
}

9. Replace TODO1 with the following code in the insertParagraph() function. Note:

• • The text for the new paragraph is the first parameter to the insertParagraph method.
  • The second argument specifies where the paragraph will be positioned within the body. “End” and “Replace” are other possibilities for inserting a paragraph when the parent object is the body.

var docBody = context.document.body;
docBody.insertParagraph("Office has several versions, including Office 2016, Microsoft 365 subscription, and Office on the web.","Start");

10. Check that all of the modifications we’ve made to the project have been saved.

Test The Add-In:

1. Start the local web server and tasks in a project our add-in by following the steps below.

npm run dev-server

• Run the following command in the root directory of our project to test our add-in in Word. This starts the local web server (if it isn’t already up and running) and loads our add-in into Word.

npm start

• Run the following command in the root directory of our project to test our add-in in Word on the web. When we run this command, the local web server will start (if it isn’t already operating).

npm run start:web

To use our add-in, create a new document in Word on the web and then side-load it using the instructions in Side-load Office Add-ins in Office on the Web.

2. To access the add-in task pane in Word, go to the Home tab and then to the Show Taskpane button in the ribbon.
3. Select the Insert Paragraph button from the task pane.
4. In the paragraph, make a change.
5. Select the Insert Paragraph button once more. Because the insertParagraph method inserts at the beginning of the document’s body, the new paragraph displays above the preceding one.

Format Text:

we’ll apply a built-in style to text, apply a custom style to text, and modify the font of text in this phase of the course.

Apply A Built-In Style To Text

1. ./src/taskpane/taskpane.html is the file to open.
2. After that line, find the <button> element for the insert-paragraph button and add the following markup.

<button class="ms-Button" id="apply-style">Apply Style</button><br/><br/>

3. ./src/taskpane/taskpane.js is the file to open. Locate the line that sets a click handler to the insert-paragraph button in the Office.onReady method call and add the following code after it.

document.getElementById("apply-style").onclick = applyStyle;

4. To the end of the file, add the following function.

function applyStyle() {
  Word.run(function (context) {
      // TODO1: Queue commands to style text.
      return context.sync();
  })
  .catch(function (error) {
      console.log("Error: " + error);
      if (error instanceof OfficeExtension.Error) {
          console.log("Debug info: " + JSON.stringify(error.debugInfo));
      }
  });
}

5. Replace TODO1 with the following code in the applyStyle() function. The code adds the style to a paragraph, but styles can also be applied to text ranges.

var firstParagraph = context.document.body.paragraphs.getFirst();

firstParagraph.styleBuiltIn = Word.Style.intenseReference;

Apply A Custom Style To Text:

1. ./src/taskpane/taskpane.html is the file to open. After that line, find the <button> element for the apply-style button and add the following markup.

<button class="ms-Button" id="apply-custom-style">Apply Custom Style</button><br/><br/>

2. ./src/taskpane/taskpane.js is the file to open. Locate the line that sets a click handler to the apply-style button in the Office.onReady method call and add the following code after it.

document.getElementById("apply-custom-style").onclick = applyCustomStyle;

3. To the end of the file, add the following function.

function applyCustomStyle() {
  Word.run(function (context) {
      // TODO1: Queue commands to apply the custom style.
      return context.sync();
  })
  .catch(function (error) {
      console.log("Error: " + error);
      if (error instanceof OfficeExtension.Error) {
          console.log("Debug info: " + JSON.stringify(error.debugInfo));
      }
  });
}

4. Replace TODO1 with the following code inside the applyCustomStyle() function. It’s worth noting that the code uses a custom style that isn’t yet available. In the Test the add-in phase, we’ll make a style called MyCustomStyle.

var lastParagraph = context.document.body.paragraphs.getLast();

lastParagraph.style = "MyCustomStyle";

5. Check that all of the modifications we’ve made to the project have been saved.

Conclusion:

In this blog, we put rays on Word task pane Add-in, how it helps in inserting and formatting a variety of text in a Word document. It will help to augment your rotini Word operations and offer you seamless productivity. Remember, if you are working in any word addin development company, this code tutorial surely helps you to build a word task pane add-in using Angular without any trouble.

About the Author:Tarun Gurang is a Sr. Digital Marketing Manager at .NET Development Company – iFour Technolab Pvt Ltd, having 8+ years of experience in SEO, Google AdWords, Bing Ads, FB advertising and other digital marketing strategies.

Find Me On Facebook | Twitter | LinkedIn