with JavaScript


Install node.js and npm

more information
Check that node and npm are installed.

node -v 
npm -v

Generate package.json file

Open File Explorer and create the (C:\temp\officejs) folder.
Create a new subfolder called "word-javascript" (C:\temp\officejs\word-javascript).
Open a command prompt (as administrator).
Change to that folder and initialise npm.

cd c:\temp\notepad\word-javascript 
npm init

Press Enter to accept all the defaults.
This will create a "package.json" file in the folder.
(C:\temp\notepad\word-javascript).


Install Webpack

more information
This lets you bundle all your javascript files into a single file and provides a local development server.

npm install --save-dev webpack 
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin

This will create a new subfolder called "node_modules".
(C:\temp\notepad\word-javascript\node_modules).
The '--save-dev' switch will add these modules as a devDependency in the package.json file.


Install Babel

more information
This lets you transpile ES 2015 (ES6) Javascript into ES 2009 (ES5) Javascript code.

npm install --save-dev babel-loader 
npm install --save-dev @babel/core

View package.json file

Open a Microsoft Edge browser and drag the "package.json" file onto a new tab to view the contents.
Alternatively open NotePad++ and drag the "package.json" file onto it.

{ 
  "name": "word-javascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.2"
  },
}

Create index.html

Open File Explorer in the root folder (C:\temp\notepad\word-javascript).
Create a NotePad file with the following contents and save it as 'index.html'.
This file contains html code that links to webpackbundle.js.

<!DOCTYPE html> 
<html>
<body>
   <h1>Word Demo</h1>
   <div id="app"></div>
</body>
</html>

Create index.js

Open File Explorer in the root folder (C:\temp\notepad\word-javascript).
Create a NotePad file with the following contents and save it as 'index.js'.

window.onload = function Start() { 
   console.log('hello world');

   var app_1 = document.getElementById("app");
   app_1.innerHTML = '<b>hello world</b>';
}

Create webpack.config.js file

Open File Explorer in the root folder (C:\temp\notepad\word-javascript).
Create a NotePad file with the following contents and save it as 'webpack.config.js'.
This file tells webpack the location and filename of our top level/entry javascript file ("index.js").
This file tells webpack to bundle all the javascript files into a single file called "webpackbundle.js".

var HTMLWebpackPlugin = require('html-webpack-plugin');      
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
   template: __dirname + '/index.html',
   filename: 'index.html',
   inject: 'body'
});

module.exports = {
  entry: __dirname + '/index.js',
  output: {
      filename: 'webpackbundle.js'
  },
  module: {
    rules: [
      {
        test: /.js?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

The "webpackbundle.js" file will be automatically generated and used on the local server.
This file is not saved or accessible anywhere in the root folder (C:\temp\notepad\word-javascript).


Launch Browser

You are now in a position to launch webpack and start the local development server.
Open a command prompt (as administrator).
Change to the corresponding folder.

cd c:\temp\notepad\word-javascript 

Execute the following 2 commands.

node ./node_modules/webpack/bin/webpack --mode development 
node ./node_modules/webpack/bin/webpack serve --mode development

Open a Microsoft Edge browser and type in the URL - localhost:8080

alt text

Edit index.html

We need to add a reference to the Office.js file.
Drag the 'index.html' file into NotePad and make the necessary changes.
Add this additional script reference.

<!DOCTYPE html> 
<html>
<head>
   <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"
           type="text/javascript"></script>
</head>
<body>
   <h1>Word Demo</h1>
   <div id="app"></div>
</body>
</html>

Edit index.js

Include some javascript that will interact with the active document.
Drag the 'index.js' file into NotePad and make the necessary changes.
This code will add a table at the current position which has 3 columns and 4 rows.
Add another line to the window.onload event.
Include an empty Office.initialize function.
Include a loadWordData function that will run when the button is pressed.

window.onload = function Start() { 
   console.log('hello world');

   var app_1 = document.getElementById("app");
   app_1.innerHTML = '<b>hello world</b>';

   app_1.innerHTML = app_1.innerHTML +
'<br><input type="button" value="Add Data" onclick="loadWordData();" />';
}

Office.initialize = function (reason) {
}

window.loadWordData = loadWordData;
function loadWordData() {
   console.log('word data loaded');

   Word.run(function (ctx) {
       var myTable = new Office.TableData();
       myTable.headers = ["First Name", "Last Name", "Grade"];
       myTable.rows = [["Brittney", "Booker", "A"], ["Sanjit", "Pandit", "C"], ["Naomi", "Peacock", "B"]];
       Office.context.document.setSelectedDataAsync(myTable, { coercionType: Office.CoercionType.Table });

       return ctx.sync();
   });
}

Create manifest.xml

Create a NotePad file with the following contents and save it as 'manifest.xml'.

<?xml version="1.0" encoding="UTF-8"?> 
<OfficeApp
  xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
  xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
  xsi:type="TaskPaneApp">

  <Id> UNIQUE GUID </Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Better Solutions Limited</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="WordJavaScriptAddIn1" />
  <Description DefaultValue="WordJavaScriptAddIn1"/>
  <SupportUrl DefaultValue="https://bettersolutions.com"/>
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Document" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="http://localhost:8080/index.html" />
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

You must include a support URL.
Enter a valid GUID Id (visit www.guidgen.com)
Save the changes.


Load the Add-in - Desktop

The add-in can be sideloaded into your Word client.
You can then side load this add-in using a Shared Folder.
Select the Developer Tab and select "Add-ins".

alt text

The task pane will be displayed as soon as you press Add.
Press the "Add Data" button to insert a table into the active document.

alt text

GitHub Repo

You can view the project at - github.com/OfficeAddins/helloworld-word


© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext