Office Development – Page 2 – Soft as in Software Blog

August 21, 2017

Office Development – Book: Building Office Add-ins using Office.js

While looking for references and/or resources to support my research on the ‘new’ Office Add-ins I repeatedly stumbled over the sample chapters of one book in particular:

Building Office Add-ins using Office.js

https://leanpub.com/buildingofficeaddins

The book is published on LeanPub and this means that it is work in progress. The author is continuously working on the manuscript and is potentially never finished. Even the pricing is flexible, the author specified a minimum and a recommended fee. You can decide if you want to pay the minimum, recommended or even a higher amount for the book. At this time, the minimum is set to $15.99 and the suggested price is set to $19.99 but as said you can up the price to $500 if you like Smile

You don’t have to worry the information provided is legit, the book is written by Michael Zlatkovsky who works at the Office Extensibility Platform team at Microsoft. The information is therefor right from the source, even better … Michael has been a key participant in the design of the new Office 2016 wave of Office.js APIs:

https://leanpub.com/u/Zlatkovsky

Michael and I go back quite some time already, I met Michael years ago, I thinks around 2012, when we were all still developing VSTO Add-ins. Michael always was very helpful and supporting when I needed information or struggled with issues.

Now get on over to LeanPub site and buy the book!

Did I mention already where to get it?
https://leanpub.com/buildingofficeaddins

I’m sure it will help you and me in learning the details of developing Office Add-ins using Office.js

August 19, 2017February 17, 2022

Office Development – Word.RequestContext vs Word.run

Yesterday we’ve seen the minimal code running to insert a bit of text at the selected Range using Word.RequestContext:

(() => {

   async function MinimalWordmethod() {

      // Create the client request context. You’ll do this for all Word add-ins.

      var ctx = new Word.RequestContext();

      // Do your things here, such as ..

      var range = ctx.document.getSelection();

      range.insertText("Test MinimalWordMethod", "After");

      await ctx.sync();

   }

   MinimalWordmethod();

})();

If you look however at the boilerplate code that is generated with a clean Yeoman project you find that RequestContext is never used, but instead of this you see Word.run(async (context) => { … });

Why is this and what is the difference? Well, I looked into this and found the answer on a piece of documentation from Michael Zlatkovsky, member of the Office Extensibility Platform team, here:

http://buildingofficeaddins.com/run

Michael explains it in his documentation but is written for Excel, however as you can read on the same page it is fully compliant with Word.run.

Here is a quote from the page:

You can think of the Excel.run as a boiler-plate preamble; it is the batch function that is the star of the show, but it needs a request context in order to start off the chain of OM calls. The Excel.run call is simply a means to that end, as it creates a new request context that it passes into the batch function.

Reading this quote explains that by using the <host>.run function you start a batch process, without the trouble of creating your context by yourself. The run function will take care of this for you. So instead of the code where you create your own context object as seen in the snippet above you should be able to run the following code:

(() => {
   async function MinimalWordmethod() {

         // Create the client request context. You’ll do this for al Word add-ins.
         await Word.run(async (context) => {

         // Do your things here, such as ..
         var range = context.document.getSelection();

         range.insertText("Test run MinimalWordMethod", "After");

         await context.sync();
      });
   }
   MinimalWordmethod();
})();

How to get the new minimal code running

Go back to the Yeoman project from yesterdays post, open the project folder and open the file app.ts in the src source folder.

Replace all the code from this file as seen in the top snippet with the code from the second, new snippet above. Save it and start your Add-in ‘server’ by running npm start in the root of your project.

Opening Word, with the installed Add-in will still show you the Add-in button:

By clicking the button the Taskpane is showing, just like we’ve seen before, but now you should see the words “Test run MinimalWordMethod” in your document:

Without creating your own context the Word.run function created its own context and the code still works. As you can see this helps you to take some effort out of your hand.

To be continued …

August 18, 2017

Office Development – Minimal Code in practice

Returning on my last ‘minimal code’ blog post, I promised to get back on this to see how this works in practice. One of my question marks I added to the post was that I wondered why the Yeoman boilerplate was using run instead of RequestContext where run passed a context parameter as opposed to the RequestContext where actively a context is requested before accessing the Word object model.

I think I found an answer to that, but will save this to a later date as I first want to make sure the minimal code I provided would work and I found some issues in the original posted code that didn’t seem to be correct.

Here is the updated code that should work in real life:

(() => {

async function MinimalWordmethod() {

// Create the client request context. You’ll do this for al Word add-ins.

var ctx = new Word.RequestContext();

// Do your things here, such as ..

var range = ctx.document.getSelection();

range.insertText("Test MinimalWordMethod", "After");

await ctx.sync();

}

MinimalWordmethod();

})();

How to get the minimal code running

If you go back to the Yeoman project instructions in this post (and fixed the certificate issues in post Office Development – Fixing Trusted Authority – Word Client and https://maartenvanstam.wordpress.com/2017/08/07/office-development-fixing-certificate-issue-with-openssl-certificate/) you should already have a working Word Add-in.

Open the project folder (or if you already deleted it quickly create a new one following my instructions from my earlier blogposts) and open the file app.ts in the src source folder.

Replace all the code from this file with the code above, save it and start your Add-in ‘server’ by running npm start in the root of your project.

Opening Word, with the installed Add-in (again, if you already dropped it follow my other blogposts earlier this month to install it) will show you the Add-in button:

By clicking the button the Taskpane is showing, just like we’ve seen before as we haven’t changed the Taskpane ‘web’ code, but now you should see the words “Test MinimalWordMethod” arriving in your document:

As you can see the code worked! Here is how:

MinimalWordmethod();

This line is automatically triggered when the code is running on startup of the Add-in. By doing so inside the MinimalWordmethod a context is requested in this line:

var ctx = new Word.RequestContext();

If the context is returned correctly you now can access the Word object model to access parts of the document. In this case we access the selected Range object and insert the text right after the Range:

var range = ctx.document.getSelection();
range.insertText("Test MinimalWordMethod", "After");

Instead of having this executed immediately like we’ve seen in VBA or VSTO, the text is only inserted after calling the sync method on the context. In the JavaScript APIs for Office calls to Office are handled asynchronously and to work with that the await and async keywords can be found in the code.

Very simple and basic code, but there are some drawbacks you need to keep in mind. For instance, because things are async, how do you know what the right order is how things are processed. And what about batch processing of boatloads of instructions? Will this all be handled correctly, and what if there are dependencies between the batched instructions? All of these questions arise when looking at this little piece of code, and we need to address all of that in later posts.

To be continued … It’s a never ending story Smile

August 16, 2017

Office Development – Word Add-in, minimal code

So far it has been fairly complex, installing lots of components and doing all sorts of things before you get things to work. But what do you need for code to do just the minimal thing in a Word Add-in?

Initially it is said that a context is required by requesting a new context:

var ctx = new Word.RequestContext();

With this context you can do things the things you’d like to do.

function MinimalWordmethod() {
// Create the client request context. You’ll do this for al Word add-ins.

var ctx = new Word.RequestContext();

// Do your things here, such as ..
var range = ctx.document.getSelection();

   ctx.executeAsync()
      .then(function () {})
      .catch(function(error){
         console.log("ERROR: " + JSON.stringify(error));
      });
}

Interesting part is that this RequestContext is not to be found in the Yeoman boilerplate, so it looks like it is initialized by the framework these days …

I want to find out where this happened in the Yeoman boilerplate. As far as I can tell the documentation is not all too clear about this.

To be continued too Winking smile

August 14, 2017

Office Development – Coding in Script Lab

One of the nice things in Script Lab is that you can connect it to GitHub allowing you to share your code snippets or import code snippets from other people. If you opened the Script Lab Task Pane you will notice this little person icon with an even smaller plus sign.

With this button you can authorize Script Lab to access your GitHub account where it needs read and write access to read or write Gists. According to GitHub:

Gists are a great way to share your work. You can share single files, parts of files, or full applications. You can access gists at https://gist.github.com.

A great option to either store your scripts that you created by Script Lab for your own use but even better: to share the code with others. Get feedback, or simply make someone happy by providing the code to the community!

Clicking the button will ask you for your permission on your GitHub account. The permissions are not all that shocking, you just give permission to create, edit and get Gists from your account to be able to show it in Script Lab.

After providing your authorization you can go into your GitHub account and see the permission you just granted to Script Lab:

From there you can also revoke the permissions if you think they shouldn’t need the access anymore. In general, it is a good idea to go in there every now and then to evaluate who can access your code and are they still in the position where they need access. Over time the number of permissions can grow while maybe you don’t use many of the services anymore. If so, time to clean up while you are at it!

Now that you provided access to your Gists you’ll notice the little person icon changed into your profile icon:

Clicking the little profile icon will allow you to see the attached GitHub account and if you like, just to sign out of your account. Cancel will bring you back into Script Lab (I probably would have titled the button “Close” instead of “Cancel”, not it gives you the impression that Cancel will disconnect the GitHub account from Script Lab, but it doesn’t).

Now, your GitHub account is connected to Script Lab you can share your code snippets to Gists on GitHub. This is done through the “ Share” button. The share button has options to:

Publish a new Public Gist (for everyone to see), a new Private Gist (for your eyes only), Copy to Clipboard or to export the snippets:

Using the option “New public gist” will push the content you created in Script Lab to GitHub. Make sure that before you do this the title property of the Script Lab project is what you want to call it. This will be adopted by GitHub as you’ll see a bit further down in this blogpost. The confirmation looks like this and will provide you the URL of the Gist that you just created. With this URL you can import the Gist at a later time.

If you take the URL and open it in the browser you’ll see your code on GitHub:

It created a new Gist, nicely formatted on GitHub and the menu changed into “Update existing gist”. If you edit your code, push the “Update existing gist” option Script Lab will go out to GitHub again and save the changes.

This is how it looks like on GitHub. Going into the revisions tab you can see that the line where I changed the color was updated. The line with color red was removed and replaced by the line with the color blue in it.

How to restore your gist?

On GitHub if you navigate to your gist you can find on the top right the URL that comes with the gist. Obviously you can also just use the URL you just used to navigate, but GitHub will provide you several other options such an embedded url to put it on your website or clone the code. Here we copy the URL:

Next you go into the Script Lab menu (the ‘hamburger’ menu top left) to show you the Import option. Clicking the Import option provides you with a new dialog where you can enter the snippet URL or GitHub Gist ID:

Enter the URL and import the snippet. Now your Script Lab is filled with the code from the Gist, ready for you to continue your coding.

In follow-up blogposts, I will use this to test and experiment with some of the JavaScript for Office (aka OfficeJS) APIs. I really like this export option to gists. Maybe I will build a small collection of snippets for all the tested APIs for later reference.

August 13, 2017

Office Development – Installing Script Lab

Yesterday in my blog a short introduction to Script Lab, the Microsoft Garage project to work in some sort of a playground to develop your JavaScript for Office scripts so you can test-drive your code that you plan to use in your Add-in.

Today I will go over the installation process of Script Lab. Step by step I’ll follow the instructions and see what this looks like. How hard can it be ‘ey?

To start installing navigate to https://aka.ms/getscriptlab. It looks like this:

Click the Add button to arrive at the guided installation page:

To stay in the mood, we select Word again. I’ll will be using other clients like Excel or PowerPoint soon, but to be consistent I’ll select Word again. This will provide you with a comparable environment and maybe you get used to it. Now, to open in Word click the “Open in Word” option. This will ‘warn’ you that you are about to switch applications:

As this is the plan, you want to move into Word instead of staying in Microsoft Edge. Select ‘Yes’ to go on. This will launch Microsoft Word 2016 (assuming you have Office 2016 installed):

A document is opened, but not without warning. Because you open the document from the dark and dangerous Internet you are provided with a warning and start in the Protected View of Office:

In this case we tend to trust Microsoft in this we continue our journey by pressing “Enable Editing” but now we run into a second warning because the document also contained a Task pane that wants to run the Script Lab Add-in.

Again to make you feel safe, you don’t want any add-in to kick in without your confirmation, you get the option to “Trust this add-in” or “See Details”.

If you click “See Details” they bring you back to base. The installer page is provided where you can read information about the add-in. I guess you already did that, otherwise you wouldn’t get this far in the installation process (unless you just trusted my simple introduction and went ahead ). For now, not all that interesting, so we close this and leave it for what it is.

We go ahead, and decide to trust this add-in. This will bring us the Script Lab tab:

Showing you a balloon with the text “Code, Run and share your Add-in snippets directly from Office” and a “Got It” button to confirm:

Click the Script Lab and you’ll see a ribbon appear with the options:

Code, Run, Tutorial, Help, Reference Docs and Ask the Community

The most obvious thing to do would probably be to go through the Tutorial, at least that was what I picked as a starting point. The interesting thing is however that the Tutorial brings you to an Excel environment to explain you what you can do with the Add-in:

You basically go through all the same steps again, but ending up in Excel showing you all the same options. Open a script-lab-tutorial.xlsx from script-lab.azureedge.net :

This is an Excel starter document with more information about the Add-in and guiding you through the options:

Again the little Protected View warning and the Enable Editing button.

It didn’t provide me with the Script Lab Add-in tab though, only the instructions that you also saw when running the Word installer, except now for Excel.

This wasn’t really what I was looking for, probably useful if I just started from Excel but I didn’t. I went through the GitHub issues and noticed that getting a Word Tutorial is still in planning. Some patience here.

For now, at least the Word Script Lab Add-in is installed and ready to use.

To be continued

August 12, 2017

Office Development – Microsoft Garage Script Lab

Up to now we researched creating and deploying a simple Office Add-in in Word Online and Word on your local machine. We still need to see how this Add-in can be deployed to a so called production environment, maybe even with a dev and staging level.

We also didn’t do much development so far. We just generated a boiler-plate project using Yeoman but we need to dive in some more and look at some real code to learn how your JavaScript for Office solutions would work.

To do so Microsoft released an interesting tool as a Microsoft Garage project called Script Lab. With this tool you can code, write your test scripts and interactively test the outcome of your work. Based on the Monaco editor, yes … the one that also powers VS Code, you get a lightweight editor with in-editor-help like IntelliSense inside your Office client application. Your code snippets can use a wide variety of options such as JavaScript, TypeScript, HTML, CSS and more.

The code can run from another pane giving you options to interact with the UI, address the JavaScript for Office API and providing monitoring options such as output to a console

When you are done coding, tested it and added all the comments you now can share your snippets to GitHub right from the tool ready to share to your peer developers. With the Import function, you can do the same with code you got from shared snippets that you received from others.

Microsoft Garage Script Lab lived for a long time internally starting off a simple personal project under a different name but eventually matured by a hackathon and many other improvements to the tool you see today. The list of supported environments is huge:

The add-in works in:

Excel 2013 Service Pack 1 or later, Excel 2016 for Mac, Excel 2016 or later, Excel Online, PowerPoint 2013 Service Pack 1 or later, PowerPoint 2016 for Mac, PowerPoint 2016 or later, PowerPoint Online, Project 2013 Service Pack 1 or later, Project 2016 or later, Word 2013 Service Pack 1 or later, Word 2016 for Mac, Word 2016 or later, Word Online.

Remember that (we’ve discussed this a couple of blogposts earlier) each of the Office versions support their own subset of the APIs. When using Office 2013 your options obviously are much more limited than when using Office 2016.

How to get the tool:

You can get the tool, or look at the code by browsing to GitHub:
https://github.com/OfficeDev/script-lab

Install the tool:
https://aka.ms/getscriptlab

Demo video:

[youtube https://www.youtube.com/watch?v=yt6os8zPUKc]

In follow-up blog posts, I’ll show how to install the Add-in and hopefully try to use and build some sample code to experiment with the JavaScript APIs for Office.

To be continued …

August 9, 2017

Office Development – Fixing Trusted Authority – Word Client

Yesterday we’ve seen an issue installing a Word Add-in when the certificate used in the Add-in is not (yet) trusted:

To solve this, we need to add the server certificate as a trusted authority to the certificate store. In my post Office Development – Fixing Certificate Issue with OpenSSL Certificate I already showed you how to create the certificate. I even announced that I had to add the certificate to the trusted root certificates but, in the end, never did that – resulting in the issue above.

Clean up the installed Add-in

First, let’s clean up the installed Add-in to re-do the installation later on to see if it installs correctly after adding the certificate to the trusted root certificates.

Go back to the File/Options/Trust Center/Trust Center Settings … button and click it

Select the Trusted Catalog Address, click Remove and click OK to close the dialog. You’ll get a message that it will be effective when you close and open Word again.

Close Word to get it done.

Now start the certificate manager:
C:\Windows\System32\certmgr.msc

Select the Trusted Root Certification Authorities node, right click, All Tasks, Import …

Click Next to continue

Select the server certificate from the Add-in folder that you created while generating the certificate. Click Open and add the certificate.

Click Next

And … Finish to complete the certificate installation.

Install the Word Add-in again

Repeating the steps from the previous post, go to File/Options/Trust Center/Trust Center Settings … button and click it.

Add the network share again, don’t forget to check the checkbox. Close the dialogs and if you get this message below, close Word and start it again.

Now go to the Insert Tab and click My Add-ins.

Repeating the sequence that we did in our previous post, go to the Insert tab and click My Add-ins.

From the SHARED FOLDER tab select your Add-in again and click Add. Immediately you see the button at the Home Tab in the Commands Group.

And if you now click the button, the Add-in is now loaded without issues. No more warnings for security issues or incorrectly named certificates. It just runs.

So, what have we learned today

– Make sure your security is in place. Prepare your certificates with the correct names on the certificate and add it to the trusted root certificates.

(Note: most of these issues are originated by creating self signed certificates. When using commercially generated certificates most of these certificates already come from trusted root certificates)

– Cleaning (removing) installed Add-ins is not so trivial as you might expect. We had to remove the Catalog entry, closing Office and reopen Office clears the Add-in. It would be easier if the user interface provided an option to remove the Add-in in an easier manner.

(Note: removing the Add-in from Word Online is even worse. I asked the question on StackOverflow where it was confirmed that there is no easy remove option)

Recap

So far, we installed NodeJS, Git, Yeoman and created a simple Add-in. Next, we tried to install it on Word Online, fixed some security issues, installed it on the Word local client, fixed some more security issues and finally installed it on the local Word client again, this time without issues.

Not much interaction yet between the Add-in and Word but we’ll look at that later.

To be continued …

August 9, 2017

Office Development–Running Word Add-in on your local Word client

In my last post Office Development – Running Word Online Add-in I explained how to install your Add-in to use in Word Online. Today we will bring the same Add-in into your local Word client installation, Word 2016:

To do so you first need to start your ‘web server’ again by calling

npm start

from the root of your Add-in folder.

Now you have your ‘web server’ up and running and we need to make this visible for Word. Word is able to ‘see’ Add-ins that are exposed by manifest files in a shared network location or web URL. Today we will use the shared network location to expose the manifest file.

To create a shared network location, you simply create a dedicated folder on your machine:

In this case I just created an extra folder in the Add-in project called addinshare.

Don’t forget to copy the manifest file “my-first-addin-manifest.xml” to the just created folder!

Now create the network share by opening the Explorer. Go to “This PC” and select from the menu/ribbon “Manage”

This will open the Computer Management tool. Browse in the left tree to Computer Management\System Tools\Shared Folders\Shares, select it:

Select Action, New Share:

Go to the folder that you dedicated for your Add-in

Click Next to continue

If you like change the name of the share, and click Next

For now, add All Users have read-only access (you might want to change the access rights later on but for demo purposes pick the default) and click Finish.

Click Finish again to close the dialog and close the Management Tool.

Now back to Word, goto the Trust Center under File, Options, Tab Trust Center, Button “Trust Center Settings …”

On the left side select “Trusted Add-in Catalog” and in the Catalog URL enter the network share from your computer \\<computername>\<sharename> that you just created in the previous steps. Click Add catalog to push it in the list.

When added to the list, check the checkbox Show in Menu to make it available in Word.

Note: Before clicking “Add catalog” it would be a good thing to check in Explorer that your folder spelling of the shared folder is correct and is opened without issues.

Click OK twice to close the dialogs. You may see this as well:

If all went right you should be able to add your Add-in to Word. Close all instances of Word and restart Word.

Go to the Insert Tab, just like you did in Word Online from the previous post and click My Add-ins:

Clicking the My Add-ins button in the ribbon will give you the dialog below if you select the option SHARED FOLDER (notice that Word recognized the share and provided you with this menu option. If the share wasn’t recognized the option for SHARED FOLDER would not appear).

What is up? Didn’t we fix the certificate issue? We had it running in the browser, didn’t we?

Well, yes … but what I forgot was to add the certificate to the list of trusted authorities. For now we can go on, we know it is safe but we need to fix this later on (food for another blogpost ).

Click Yes to confirm, select the MyFirstAddin an click Add.

After closing the dialog by clicking Add a new Ribbon item is added to your Word Home Tab:

Kinda useless information, you are already on the HOME tab … nevertheless, click the “Show Taskpane” button to get started. For me this resulted in:

Sh*t happens so I refreshed the page, to see what happened:

A bit better, but still not right. This time we recognized the “not secure” warning. My own fault, it still needs the trusted authority fix. For now, click More information:

This opens up the option to Go on to the webpage (not recommended). We know it is ok in this case, if the source was unknown you should just back out and close the add-in. In this case we created it, know it is secure so we go on to the website, although it was not recommended. We like to be a little bit stubborn at times and there you have it, it worked:

Quite a journey again, still not flawless but cause by my own doing. We now have the Add-in running in both Word Online and in Word 2016 on your local machine.

In our next step, I’ll add the certificate to the trusted authorities to redo this without issues, hopefully…

To be continued

August 7, 2017

Office Development – Running Word Online Add-in

What we’ve seen so far is that we installed NodeJS, Git, Yeoman and fixed a security issue. All if this to create a basic ‘hello world’ Add-in. I must be honest and admit that running your first VBA add-in was a lot easier and running out of the box with just a few lines of code.

But let’s go on. We did run the Add-in as a website, but not as a real Add-in in the Word client. The instructions explain that the easiest thing to do would be to use Word Online. So here we go:

Open Word Online, go to the Insert Tab

Click the Office Add-ins button

On the top right select “Manage My Add-ins” to upload the Add-in manifest

Click Browse to find the Add-in manifest file

After uploading the manifest, you should see the Show Taskpane button appear in the Commands Group and if you click the button the Task pane appears showing you exactly what you’ve seen in our earlier blogpost:

And there you have it … your first Add-in running in the Word client. Congratulations.

I do have to admit that it didn’t work immediately … I had to upload the manifest more than once to get it to work. At first my icon didn’t appear, the group did but the Task pane didn’t load either after clicking the ‘no icon’-button. Trying again solved it (no clue to why the first attempt failed).

Obviously, the scenario we’ve seen so far won’t work ‘in production’. The Add-in website is currently still running on your local machine at a specific port (3000 in this case) and adding the Add-in using Word Online is not directly the most optimal way to get your Add-in up and running.

Our journey of research is apparently not ready yet. We need to overcome the ‘demo’ instructions and see if we can get it closer to a production ready system. I think my next step would be to find out how to run the Add-in in the Word client running on the desktop. Maybe the next step after that to run it on a Mac.

This all is still just running the Add-in, we haven’t seen any interaction with the documents. No fear, we will get there … I’m sure so keep with me and hang in here.

To be continued …

Tag: Office Development

Office Development – Book: Building Office Add-ins using Office.js

Like this:

Office Development – Word.RequestContext vs Word.run

Like this:

Office Development – Minimal Code in practice

Like this:

Office Development – Word Add-in, minimal code

Like this:

Office Development – Coding in Script Lab

Like this:

Office Development – Installing Script Lab

Like this:

Office Development – Microsoft Garage Script Lab

Like this:

Office Development – Fixing Trusted Authority – Word Client

Like this:

Office Development–Running Word Add-in on your local Word client

Like this:

Office Development – Running Word Online Add-in

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this:

Sharing is caring:

Like this: