In the previous blog, I have covered in detail about why we should learn about Microsoft Office JS script library.
Now it’s time to create and run our first Microsoft Office JS add-in. This guide is based on Microsoft’s Office Add-in page [https://github.com/OfficeDev/generator-office] but with few tweak
Prerequisites for installation
- Make sure you have installed the latest version of Node JS\, which you can download from https://nodejs.org/en/
-
Download and install Visual Studio code, it will come handy later. You can download from https://code.visualstudio.com/download
Let’s started
We are going to create a MS Office Add-in for word.
Open your command terminal and check the version of node installed
Node -v
Next step is to install the YeoMan (https://yeoman.io/ ) package for Node. Yeoman is a scaffolding tool, which mean it generates a template or blueprints of a project. NPM is a Node Package manager, as a name implies, can install or uninstall packages for Node JS. Run the below command to install Yeoman package (it’s called Yo).
npm install -g yo
Once the Yeoman package is installed, the next step is to create an Office template using Yeoman.
The name of the Office generator (template) is Office and the command is
Yo Office
The beauty of this command it, that it shows a command-based option list, and we can choose the template of our choice technology.
We are going to start simple and small, so let’s choose the Office Add-in Task Pane project and hit enter.
Task Pane : In Task pane, we click on an add-in button and it opens a pane with which we can interact.
In the next state Yeoman will ask you to choose the type of script, I am option for JavaScript because it’s easy and hit enter.
Next step is to choose the name of our project and let’s call it OfficeJS-Word and enter and at last it will ask for our application type, in our case it’s WORD. Choose word and hit enter.
And soon as you hit enter, it will start building the project.
Let’s run it
Once the project folder is created, go inside the folder.
And run the npm start
command
and if you face an error about sh: office-addin-debugging: command not found
, that meane that office-addin-debugging is missing from node and we have to install it manually.
Once the package is installed, run the npm start
command again.
Great! Now we can see some progress, that debugging the started and add-ins are asking for local machine’s credentials to install a CA certificate.
After providing the password, the word Opened, you can see a “Show Taskpane” button in the Word ribbon, it loaded the task pane but there is an error and it’s showing that there is no network or internet connectivity to side-load the Taskpane.
(You can also visit this blog post to deal with the command Office JS development issues http://microsoftofficeaddins.com/2021/07/30/microsoft-office-js-common-problems-solutions/ )
To resolve this issue, we have to run the npm run
dev-server
command . And then have to run the npm start
command again.
In the below screenshot, in the console 1 , I ran npm run
dev-server
command and in the second console npm start command.
And Voila! We created our first Microsoft Office JS add-in and it’s working .
Thanks for your time and to read this blog.
Keep Learning
Regards!
Aman Dhally