Office Add-Ins: Working with Tables in Word. Part 1: Creation

In this article I will show how the Word JavaScript API can be utilized to add tables to your word document using an Office Add-In. This will be a multi part blog post as there are a lot of nuances and interesting ways in which you can play with tables in Word.

Introduction

In previous articles I have written about how to interact with a Word document to search and replace and even save the word document to Salesforce. Going back to a more basic level we are going to look at how to build tables in word.

We will be using the new Script Lab  which is a new Playground Add-In which can be used for development and general tinkering with Add-Ins. This and other articles on the topic are for demonstration purposes and are not hardened for production use.

The reference

For more information on Tables and how what methods/properties are available check out the documentation page – Table Object (JavaScript API for Word)

Creating a table 

At the most basic level a table is created by instantiating the table object and adding values to it.

insertTable(rowCount: number, columnCount: number, insertLocation: string, values: string[][])

This can be done from a number of different parents:

  • The body
  • A range
  • A contentControl
  • A paragraph

The method requires the following:

  • rowCount – a number
  • columnCount – a number
  • insertLocation – Depends on parent – either (body: Start/End/Replace) or (range: Before/After)
  • values: 2 dimentional Array – [[“This is”, “a table”], [“this is”, “a new row”]]

Using these parameters we can create a table from within the Script lab using the following code:

$("#run").click(run);

async function run() {
    try {
        await Word.run(async (context) => {

            var body = context.document.body;
            var range = context.document.getSelection();
            var myArray = [["a", "b"], ["c", "d"]];
            var table = range.insertTable(2, 2, "Before", myArray);            

            // Synchronize the document state by executing the queued commands,
            // and return a promise to indicate task completion.
                await context.sync().then(function () {
                    console.log('Table added before the start of the range.');
                });;
        });
    }
    catch (error) {
        OfficeHelpers.UI.notify(error);
        OfficeHelpers.Utilities.log(error);
    }
}

 

 

Conclusion

Using the Script Lab we have seen how we can easily insert a table into a Word document using the Office Add-In API. In future articles we will look at looking for the table we want to modify and then manipulating tables.

 

 

Advertisements

19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js

We have been hosting the NWCJS meetup here at PSC Group for the past few months. We have had some great speakers talking about React Native, How Chrome works under the covers, ES6, Web Components and others. This time it is my turn to speak.

I am going to be talking about Office.js the framework library which is the underpinning of Office Add-Ins. I will be talking about how the framework works, how it’s intended to be used and present lots of examples of how you can use JavaScript alone to automate functionality within the Office suite of products (Word, Excel, Outlook etc). The Office.js library is intended to replace the main functionality of VBA but in a way that works not only on Windows machines, but also on the web and on Mac clients.

For more information on time and place check it out 🙂

Office.js

Thursday, Jan 19, 2017, 6:00 PM

PSC Group, LLC
1051 Perimeter Drive Suite 500 Schaumburg, IL

21 Javascripters Attending

Office.js – Using JavaScript to build functionality into Microsoft Office by Marky RodenMarky Roden is Principal Architect for the PSC Group LLC and Head of the PSC Labs emerging technologies group, tasked with using cutting edge technologies to transform solutions offerings for customers.**************Schedule 6:00 – begin arriving and sociali…

Check out this Meetup →

Building Office Add-ins using Office.js – the book, the website

I wanted to show some love for the new website and book by Michael Zlatkovsky. Michael is a Software Developer and Program Manager in the Microsoft Office Extensibility team. I met Michael at the MS MVP Summit back in October and we had a great conversation or two about Office Addins and their future development.

So Michael’s new leanpub book is called Building Office Add-Ins using Office.js and can be purchased through leanpub. The new supporting website http://buildingofficeaddins.com/ provides some of the key information from the book and gives a nice overview thereof while introducing the reader to the more technical aspects of using Office.js.

Michael’s a great guy and this is a very valuable resource for Office Add-In developers. I heartily recommend it.

Saving a word document directly from an Office Add-In into Salesforce.com

In this article I will demonstrate and discuss how to programmatically save a Word document directly into Salesforce.

Introduction

In previous articles we have looked at how to programmatically interact with a Word document from within an Office Add-In. In this case we will use the Office JavaScript API to access the file as a binary string and then convert it into a format compatible with Salesforce.com.

Turning your word document into a binary

This article in the Office dev center details how to Get the whole document from an add-in for PowerPoint or Word. We will use the bulk of that article up to the point where we send the slice. We are going to look at a modified sendSlice() function. The dev.office.com article details how you can access the binary contents of the word document, but falls short when it comes to getting the base64 encoded version of the file to be submitted to an external site. This is the complicated part !

Getting the right format for Salesforce

Unfortunately the salesforce documentation is not based around using JavaScript to access the REST APIs. It is based around using curl commands in UNIX. The sample page for Inserting or updating Blob Data explains how to upload a multipart message which includes both the meta-data values and the binary data for the file. For the record they also neglect to provide any guidance on how to get the binary of the file….!

Using the code posted on this stackoverflow post  we are able to turn a binary string into the necessary format to send the file to salesforce.

The final sendSlice() function is shown below. The significant thing to note is that the initial file must be sent to the ContentVersion sobject. Because this is a new document a parentId is not necessary and a ContentDocumentId is created. In a future article we will look at how to then associate this new file attachment is an existing object.

function sendSlice(slice, state) {
  updateStatus("In sendSlice");
  var data = slice.data;

  // If the slice contains data, create an HTTP request.
  if (data) {

    // Encode the slice data, a byte array, as a Base64 string.
    // NOTE: The implementation of myEncodeBase64(input) function isn't
    // included with this example. For information about Base64 encoding with
    // JavaScript, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding.

    var u8 = new Uint8Array(data);
    var b64encoded = btoa(String.fromCharCode.apply(null, u8));

    var objectData = {
      "Description": "Demo Upload Directly from Word",
      "Title": "sample.docx",
      "ReasonForChange": "Initial Upload",
      "PathOnClient": "sample.docx"
    }

    var boundary = 'boundary_string_' + Date.now().toString();
    var attachmentContentType = 'application/octet-stream';

    // Serialize the object, excluding the body, which will be placed in the second partition of the multipart/form-data request
    var serializedObject = JSON.stringify(objectData);

    var requestBodyBeginning = '--' + boundary
        + '\r\n'
        + 'Content-Disposition: form-data; name="entity_attachment";'
        + '\r\n'
        + 'Content-Type: application/json'
        + '\r\n\r\n'
        + serializedObject
        + '\r\n\r\n' +
        '--' + boundary
        + '\r\n'
        + 'Content-Type: ' + attachmentContentType
        + '\r\n'
        + 'Content-Disposition: form-data; name="VersionData"; filename="filler"'
        + '\r\n\r\n';

    var requestBodyEnd =
        '\r\n\r\n'
        + '--' + boundary + '--';

    // The atob function will decode a base64-encoded string into a new string with a character for each byte of the binary data.
    var byteCharacters = window.atob(b64encoded);

    // Each character's code point (charCode) will be the value of the byte.
    // We can create an array of byte values by applying .charCodeAt for each character in the string.
    var byteNumbers = new Array(byteCharacters.length);

    for (var i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }

    // Convert into a real typed byte array. (Represents an array of 8-bit unsigned integers)
    var byteArray = new Uint8Array(byteNumbers);

    var totalRequestSize = requestBodyBeginning.length + byteArray.byteLength + requestBodyEnd.length;

    var uint8array = new Uint8Array(totalRequestSize);
    var i;

    // Append the beginning of the request
    for (i = 0; i < requestBodyBeginning.length; i++) {
      uint8array[i] = requestBodyBeginning.charCodeAt(i) & 0xff;
    }

    // Append the binary attachment
    for (var j = 0; j < byteArray.byteLength; i++, j++) {
      uint8array[i] = byteArray[j];
    }

    // Append the end of the request
    for (var j = 0; j < requestBodyEnd.length; i++, j++) {
      uint8array[i] = requestBodyEnd.charCodeAt(j) & 0xff;
    }

    //Create the new file in Salesforce
    var url = "https://yourdomain.my.salesforce.com/services/data/v37.0/sobjects/ContentVersion/"

    return $.ajax({
      method: "POST",
      url: url,
      processData: false,
      data: uint8array.buffer,
      headers: {
        "Content-Type": 'multipart/form-data' + "; boundary=\"" + boundary + "\"",
        "Authorization": "Bearer " + app.getCookie(app.addinName)
      }
    }).error(function (data) {
      updateStatus("FAIL: " + JSON.stringify(data))
    }).success(function (data) {
      updateStatus("Success creating ContentVersion: " + data.id)
      closeFile(state)
    });

  }
}

 

Conclusion

In this article we have seen an example of how we can extend the functionality of an Office Add-In to access the binary data of a word document and then save it to a cloud provider (in this case Salesforce).

 

How to create Dynamic Workflow functionality in Outlook Add-Ins based on unique keys

In this article I will demonstrate how to use a regular expression to provide dynamic contexual assignment of an Outlook add-in. Using that regular expression we will be able to identify the necessary information to link the Add-In to some external dynamic workflow functionality.

Introduction

During the Collab365 presentation I demonstrated a workflow application which was a simple vacation request approval. In that demonstration I showed how we are able to detect a unique key inside of an email and then use that value to open the workflow within the add in (https://youtu.be/t6kRFV09TYs?t=1950).

In previous articles I have demonstrated how to create a contextual add-in and in this article we will look at how we can take that up a notch and make the context dynamic and useful.

I am going to demonstrate the capability in the context of a napacloud add-in so that you are able to work along.

Messing with RegEx

Regular Expressions are a weird an wonderfully powerful capability, generally reserved for people way smarter than me to figure out. Fortunately there are many example sites which can be used to help you figure out how you should build your regular expression.

I used http://scriptular.com/ which allowed me to test my regular expression until I made it work.

We need to create a unique key within out email so that it can be picked up by Outlook. We cannot use an existing URL though because there is already functionality associated with that.

r2

Using regular expressions in an Office Add-in

Inside of the napacloud tooling we are able to play with adding a regular expression to the context of the Add-In.

r1

So I insert my regular expression into the box, save and run. In this case (for demonstration I make the number of characters fixed to be 6)

r3

Test Email

I created a simple test email with a few expressions which COULD match……and when the Add-In runs – only only of the links is highlighted

r4

So now what?

Well what we want to happen is when the user clock on that Workflow Id: Ac9sXP link we want to take them to the right page within our Application (surfaced through the Add-In).

Within the Office.initialize we are able to determine functionality which happens when the user selects the Add-In. I used the same regular expression to match the desired Workflow Id

Office.initialize = function (reason) {
        $(document).ready(function () {
            Office.context.mailbox.item.body.getAsync(
		  "text",
		  { asyncContext:"This is passed to the callback" },
		  function callback(result) {
		    // Do something with the result
			var str = result.value; 
			var res = str.match(/Workflow\sId:\s[0-9|a-z|A-Z]{6}/g).toString();      				
			$("#content-main").html("The RegEx matched is---> "+res)
		  });
        });
    };

When you run the sample in the browser you get this

r5

More advanced

Once you have this string in JavaScript you can do a number of things with it, the two most obvious to me are:

  • Create an iFrame within the application and add the WorkflowID to the Query String
  • If you have an angular application you can then route the user to the correct document using the WorkflowID

Conclusion

In this article I showed how to create a contextual addin using a semi-complex Regular Expression. Then using that exposed value from the email we can surface dynamic functionality for the user.

The Code

I have posted the code from this sample napacloud out on GitHub for anyone who wants to download it an play with it

You can find it here:

https://github.com/markyroden/RegExInOutlookAddIn