Published: Trello Taskpane for Word

I have done it! I have published my very first Office Web Add-in to the Microsoft Store. After years and years of blogging about it, I wrote an add-in for something I needed. It is true that necessity is the mother of all invention.

The add-in is called the Trello Taskpane for Word. It is a simple add-in that connects Word to your Trello boards, so that you can insert information you have collected in Trello into your documents. I do research on the web for various topics and send snippets and pages to Trello cards where I organize and refine them. Then I found myself copy/pasting the information from Trello into Word getting lost on the task switching. Now, I can remain in Word, select the cards I want, and insert them without ever leaving Word. How’s that!

It was also a fun exercise for me to combine the two types of extensions I have found to enjoy writing (Office and Trello). More importantly, it is a useful tool that I think might benefit other writers that use Trello, or writers looking for a new way to keep their notecards and thoughts in a more digital, accessible from anywhere type of format.

Have fun and let me know what you think!

5entences Add-in Released

I have been spending some of my free time writing add-ins for Office and Power-Ups for Trello. I just completed two add-ins for Office. One is going through the process with AppSource and I will blog about it soon enough. The other cannot go though AppSource because it uses the Block On Send interface for Outlook. The add-in I just release is the 5entences Add-in for Outlook.

I have been inspired by various books I have read that all cross-pollinate the idea that we use e-mail all wrong or too much. Cal Newport’s “A World without Email” and Tim Ferris’ “4 Hour Workweek” are just two examples. And I believe it was Tim’s book that first touched on brevity in email. And thus, this website was born: five.sentenc.es.

From those books, and website, I had an idea. Why not add “training wheels” to the idea of email brevity? So, I wrote the 5entences Add-in for Outlook as a simple to use add-in that tries to help you keep your email responses brief and to the point.

It has been a fun side project as I was delving deeper into writing React code and using prebuilt React controls, so I wanted to share it with everyone. Maybe we can make email fun again.

Disabling your Web Add-in if you have an Equivalent COM/VSTO Add-in

In previous post, I described how you can add code to your VSTO/COM add-in to disable your Web Add-in loaded from maniferst via the Office Portal:
Removing Web Add-in Ribbon Customization in Outlook for Windows (theofficecontext.com)

Well with Outlook for Windows, Office 365, version 16.0.13728.36136, you can now disable your Web Add-in via Policy settings.

Download Administrative Template files (ADMX/ADML) and Office Customization Tool for Microsoft 365 Apps for enterprise, Office 2019, and Office 2016 from Official Microsoft Download Center

Here is the path in the policy editor for this setting:

Once in the policy editor, you would set the value. If your OfficeJS Web Add-in has a GUID of {c5bc7737-0d79-4302-9e73-2a614941e914} and the COM add-in is called “My Full Featured Outlook Add-in“, you would set the values like this:

Specifically, the registry key it puts in place is this:

PATH: HKCU\SOFTWARE\Policies\Microsoft\Office\16.0\Outlook\addins\equivalentcomaddin
KEY (string/REG_SZ): {OfficeJS GUID}
VALUE: Prog.ID

For example, if I have an Outlook Web Add-in called “My Outlook Add-in” and it has the following manifest entry:

<?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:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" 
          xsi:type="MailApp">
	<Id>c5bc7737-0d79-4302-9e73-2a614941e914</Id>

Let’s say I have a full VSTO add-in called “My Full Featured Outlook Add-in” and it is registered as the following:

If you were to look at the Policy key after it is set you would have an entry like this:

KEY: {c5bc7737-0d79-4302-9e73-2a614941e914}
VALUE: My Full Featured Outlook Add-in

If it were an older traditional COM Add-in, like the top item: AccessAddin.DC, then it would look like this:

KEY: {c5bc7737-0d79-4302-9e73-2a614941e914}
VALUE: AccessAddin.DC

That is all you have to do if you have the newest builds of Outlook for Windows.

NOTE: Coming later in the year, will be an option to add this entry to your Web Add-in Manifest file the way you can with Excel and Word. 
NOTE: This is all covered in the latest Office add-ins community call.

easyEws Updated to 1.0.20

This was more than a patch this time. It was a minor update to two functions:

  • sendMailItem
  • sendPlainTextEmailWithAttachment

There was an issue reported (#12) where the sendMailItem function was not working in IE11. This was because it was created to take an inline object (ES6). Well on IE11 (which only supports ES5), it broke.

So, I fixed sendMailItem to support ES5 and also took the opportunity to add two often requested features of this function:

  • It will now allow you to submit HTML body content or Text. It will also parse the HTML for you if you submit it as is.
  • It will also now allow you to send both file attachment (new), and mail item attachments (original).

Please see the documentation for more information on the updates to this function: https://github.com/davecra/easyEWS#sendMailItem

Also I updated the sendPlainTextEmailWithAttachment function. Under the covers this uses the sendMailItem function. So I had to update it to use the new format so it would work as well. There was no change to it’s features/functionality however.

I did not get to the last item I have had requests for:

  • ability to specify recipients as To/CC/BCC. I will update this at some future date. Also, please let me know if you would like to see this.

Overall, the goal is to have the sendMailItem() function be a full multi-purpose function at some point. It is almost there, but please keep the suggestions coming.

easyEws v1.0.19 Released

There were a couple small bug fixes in the splitGroupsRecursivelyAsync() function. Thank you to Jack for making me aware of the issue as it has now been corrected.

The CDN to the latest versioned instance of the library:

https://cdn.jsdelivr.net/npm/easyews/easyEws1.0.19.js

Here is a link to my GitHub:

https://github.com/davecra/easyEWS

And it is also able to be installed from NPM with the command:

npm install easyews

OfficeJS: Get the current user’s Username

While working on a customers proof of concept, we determined that we needed to know who the current user opening the add-in is. In most scenarios where there is a Store Add-in, you have the user log in. But we are in a enterprise environment, have an embedded taskpane and did not want to nag the user every single time they opened the document.

Outside of the BETA API set, there actually is not a way to do this in Word, Excel and PowerPoint. In the current BETA API (soon to be released), is the new Single sign-on (SSO) API. Detailed here:

https://docs.microsoft.com/en-us/office/dev/add-ins/develop/sso-in-office-add-ins

I know, I know… you do not want to have to have the user sign-on and neither did we. But actually you do not need to. You make a call to getAccessToken() – after you have gone through the rather complex process of setting up your application in Azure AD – and in the returned token is the user information. Here is all you need for code to get to the username:

export async function getUserName() {
try {
let tokenData = await OfficeRuntime.auth.getAccessToken({ allowSignInPrompt: false, forMSGraphAccess: true });
var parts = tokenData.split(".");
var token = JSON.parse(atob(parts[1]));
return token.preferred_username;
}
catch (exception) {
console.log(exception.message);
}
}
view raw getUsername.js hosted with ❤ by GitHub

easyEws Updated to v1.0.17

There is one major change and one fix in this update:

  1. The library no longer has any dependencies on jQuery. As such all parsing is done with DOMParser and all loops are traditional (for, versus $.each()).

    NOTE: This is a fairly major change as it touches the core asyncEws call, which is at the very core over every call in the library. If you have an issue with this build, please point to the previous build of the library directly. See more below…
  2. The sendPlainTextEmailWithAttachment() function was fixed to submit parameters as a Object versus individually.

The GitHub repository has all previous versions. For example, to access the primary CDN, go to:

https://cdn.jsdelivr.net/gh/davecra/easyEws/easyEws.js

If you need to access a specific version (like the last one):

https://cdn.jsdelivr.net/gh/davecra/easyEws/easyEws1.0.16.js

Please let me know if you have any questions or issues.

Office Web Add-in Debugging in VS Code

Another recent announcement that has me excited is the ability to debug Office Web Add-ins directly from VS Code. Before this recent announcement, it was a hit or miss proposition. There was Visual Studio 2019, that did a pretty good job. But I liked the lightweight simplicity of VS Code. Visual Studio 2019 seemed too too heavy-weight. It’s hard to put my finger on how or why, but I really enjoy VS Code for Web Add-in development so much better. Except for debugging…

So, to debug, I actually did most of my dev/test in the web versions of Office (Excel online, Outlook online, etc.). Then came the Edge Developer Tools Preview which helped debug task pane add-ins in the full clients. But that did not help with things like the On Send event in Outlook or other UI-less functions. So, it was a struggle at times.

Now that has all changed!!!

The process is a tad more complicated than I like, but it does work. Essentially, you need to:

  1. Run VS Code as administrator
  2. Install the extension in VS Code by pressing CTRL + SHIFT + X and searching for the “Microsoft Office Add-in Debugger”
  3. Add the following code to the .vscode\launch.json file to enable Office Debugging in your project. You will need to update line #7, and replace the uppercase HOST text with the host application for your Office add-in.
{ 
   "type": "office-addin", 
   "request": "attach", 
   "name": "Attach to Office Add-ins", 
   "port": 9222, 
   "trace": "verbose", 
   "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0", "webRoot": "${workspaceFolder}", 
   "timeout": 45000 
}

NOTE: If you create a new Office project with Yeoman, you will not need to add this line, it will be part of the default template going forward.

  1. Press CTRL+SHIFT+D to then open the Debug pane, select Attach to Office Add-in option from the drop down list at the top of the pane, and press F5 to start debugging.
  2. You can now set breakpoints, see variable values, etc.
Attach to Office Add-ins menu option

Script Lab for Outlook. Yeah!

OMG! This is a day I have been waiting for.

I do a LOT of Outlook Web Add-in development. A lot. I have made the move from Visual Studio to Visual Studio Code, from C# to JavaScript and have not looked back. However, there are a few things that make development in this new area difficult and that is rapid prototyping.

For C#, I could always go into VBA and see how the object model would behave when I needed to test a hypothesis. I was able to use VBA as a laboratory for ideas before I codified them into solid C# code in a VSTO Add-in. But there was no such laboratory in the JavaScript web add-in world, until now…

…Script Lab for Outlook has been released. And the best part, it is available in Outlook on Windows, Outlook on Mac and Outlook on the web!

Script Lab in Outlook for Windows
Script Lab for OWA

If you do a lot of Outlook development this will be a godsend. You will now be able to go into Script Lab and test your code ideas before you add them to your more complex add-in.

Open Outlook, go into the Office Store and type “Script Lab” and Script Lab for Outlook should come up in your list. Select and install it. Then open a message in Outlook and you should see the Script Lab items on the Home tab.

Happy coding!