Outlook Signature Add-in

I recently got a question about this add-in created as a sample by the Microsoft Office Developer Team. It is provided as a sample and is a challenging bit of code to follow. It all started because I was trying to provide some advice to someone who is new to the OfficeJS world (but not Office development in general). They wanted to build a cross-platform add-in for a cause. After tinkering with it for a few hours, I managed to get it to work. But then I looked it over and it was quite a bit of tinkering on my part.

In most cases I create Add-ins based on React, but because I have done a lot of Trello development of late, I have gotten into more of a pure ES6 vibe. The code provided in the add-in as I stated was hard to follow because I think I am losing my jQuery and ES5 JavaScript skills.

Anyway, as I said, I spent a few hours today and worked on getting it into ES6 format by moving most of the code into classes, removing redundant code, removing redundant HTML pages, consolidating CSS and adding a lot of additional JSDoc comments throughout the code.

Hopefully, this version is a bit easier to follow for those that develop in a more modern ES6 style.

NOTE: This looks and behaves exactly the same, but I have not thoroughly tested it. So, it might be a bit rough here and there. If you encounter issues please let me know. 😁

Outlook Calendar for Trello is Released

I have really enjoyed writing this bit of code because it stretched from Trello API to Office 365 API, two of my favorite programming interfaces. This Power-Up is similar to the default Trello Calendar Power-up, the key difference being is that it connects to your Outlook Calendar. So, you can see all your Trello Tasks and your Outlook appointments/meetings, side by side in one place, you can link your appointments to Trello cards and vice-versa. With a month view and a weekly view, you can manage your calendar easily by dragging and dropping your Trello Cards on the calendar to create linked appointments for specific tasks all in one place.

Check it out here:

https://trello.com/power-ups/637307154b117e05a423c8a1

Determine MIME type from base64

In writing my new Outlook Add-in (Send to Trello), I got stuck on attachments. The first version did not include an attachments option because of two unique problems that compounded each other:

  1. The Office Add-in API no longer provides a Media Type/MIME Type with an attachment request. I am able to get the “blob()” from Office, but other than the file extension there is not a way to determine the type. But sometimes a file does not have an extension, or the extension is wrong, etc.
  2. The Trello API will not let you upload without supplying a MIME type, you cannot just give it a Base64 string as an attachment and let them figure it out.

So, I found out something interesting while researching a workaround. Most every base64 string of a specific file type starts with the same “prolog” of text. Using this, combined with the fallback of the file extensions, I was able to get attachments to work (for the attachment types supported by Trello). So, v1.02 will now include attachments.

Anway, as for the workaround I found, this might be ugly, but wanted to share it anyway:

/**
* Returns the data type based on the base64 string
* @param {String} base64String
* @param {String} fileName
* @returns {String}
*/
detectMimeType(base64String, fileName) {
var ext = fileName.substring(fileName.lastIndexOf(".") + 1);
if (ext === undefined || ext === null || ext === "") ext = "bin";
ext = ext.toLowerCase();
const signatures = {
JVBERi0: "application/pdf",
R0lGODdh: "image/gif",
R0lGODlh: "image/gif",
iVBORw0KGgo: "image/png",
TU0AK: "image/tiff",
"/9j/": "image/jpg",
UEs: "application/vnd.openxmlformats-officedocument.",
PK: "application/zip",
};
for (var s in signatures) {
if (base64String.indexOf(s) === 0) {
var x = signatures[s];
// if an office file format
if (ext.length > 3 && ext.substring(0, 3) === "ppt") {
x += "presentationml.presentation";
} else if (ext.length > 3 && ext.substring(0, 3) === "xls") {
x += "spreadsheetml.sheet";
} else if (ext.length > 3 && ext.substring(0, 3) === "doc") {
x += "wordprocessingml.document";
}
// return
return x;
}
}
// if we are here we can only go off the extensions
const extensions = {
xls: "application/vnd.ms-excel",
ppt: "application/vnd.ms-powerpoint",
doc: "application/msword",
xml: "text/xml",
mpeg: "audio/mpeg",
mpg: "audio/mpeg",
txt: "text/plain",
};
for (var e in extensions) {
if (ext.indexOf(e) === 0) {
var xx = extensions[e];
return xx;
}
}
// if we are here – not sure what type this is
return "unknown";
}

New Outlook Add-in: Send to Trello

I have been using Trello for a while now and one of the features I have found most useful is to take an email I received and turn it into a Kanban item on my backlog to address later. This allows me to archive the email but keeps it on my “Trello radar” as I work at my own pace through my personal backlog.

Recently, Trello removed their add-in from the Microsoft Office store. If you have the add-in installed, you will see this error:

Well, since they say necessity is the mother of all invention and I really had to fill the gap as it is part of my routine, I rolled my own. 🤓 To add a degree of difficulty, I wrote this in VS Code in Linux running in Windows Subsystem for Linux (WSL). See my previous post. It was a fun exercise as I am on vacation and using the time tom learn new things, engage in self-improvement and relax (coding is relaxing to me 🤓🤓🤓). In the end, I learned something and created something for everyone to enjoy.

Say hello to the recently published: Send to Trello Outlook Add-in.

Give it a try and let me know what you think.

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.

Office Open XML File Viewer

In case you did not know, Office files that end with an (x), like PPTX, XLSX and DOCX, or an (m), like PPTM, XLSM, DOCM are actually ZIP files. If you rename these files to .ZIP, you can open them up and see all the component that make up what is now an the Office Open XML File Specification.

Years ago I was working on a project where we were programmatically modifying Office documents using the Open XML Toolkit. I got sick and tired of renaming the files to .ZIP, looking inside, making corrections as needed, and then renaming the file back. So I created this tool. I used it – a lot, and then… Well, I forgot about it.

I recently started working on a project where I needed to quickly get into the contents of an Office file to see if the changes being made were correct. I also needed to do light editing of the internal XML parts at times. And I seemed to remember doing all this before. I searched and search and then I found this old project. I have been using it a couple weeks now and figured it might be a good thing to share with the community. So I published it on GitHub:

https://github.com/davecra/OpenXmlFileViewer

The details for install and usage are in the README.md. Once installed, you will have to register it for each file type. Once setup, you would right-click on the file, select Open With and then click OpenXmlFileViewer.

OpenXmlFileViewer on the PowerPoint (pptx) right-click, Open With menu

You will be able to browse the parts like you would files in File Explorer:

The Office Open XML File Viewer application window

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

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

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