Category Archives: Office

Beware the Office.js Dialog API falling silent under IE11

Issue Description

I’ve been leveraging the Office.js Dialog API recently and found a scenario where I just couldn’t get it to behave properly. At the moment this appears to be either a bug or limitation of the Dialog API. I found that the calling MessageParent() from the dialog fails to trigger the registered callback method in the host add-in when running in IE11 (on both Win 7 and Win 8.1)

Following are the steps to reproduce the issue with the Dialog API under IE11 where the messageParent() method fails to trigger the corresponding event back in the host add-in.

 

Steps to Reproduce

To reproduce the issue I’ve taken the Dialog API example from dev.office.com and hosted in Azure.

https://github.com/OfficeDev/Office-Add-in-Dialog-API-Simple-Example

Then I updated the manifest to point to the location where I hosted it, and then tried to use it in the different environments (I made no code changes to the example).

For these repo steps I just opened Word Online in IE11 and side loaded the manifest. The issue also exists using Office Desktop on a machine with IE11 installed (but not Edge) as Office will then be trying to use IE11 and you get a similar issue.

On Windows 10 in Chrome or Edge (works as expected)

clip_image002

clip_image004

On IE11 on WIn 7 & Win 8.1 Fails to Communicate back to Parent Add-in

Now if I use the same manifest and try it from Win 8.1 IE11 the pop up dialog fails to send the message back to the parent add-in when you press a button.

clip_image006

If you close the dialog, the dialog close event method does get triggered back in the parent add-in (this is the same behaviour that we observed when developing our add-in).

clip_image007

clip_image008

I am aware of the documented issue of the Dialog API not working in mixed zones under IE (especially with difference in protected mode between the host page and the add-in/dialog URLs).

In the scenario above the host (Word Online) page is in the Internet Zone with Protected Mode off

clip_image009

And the add-in is also running in the Internet Zone with Protected Mode off

clip_image010

Vote for our app in the Office 365 Hack Productivity competition!

image

 

Microsoft is currently running a Hack Productivity competition for creating apps that leverage Office 365 Add-ins and/or APIs to deliver an app that increases user productivity.

I’ve been working with the awesome dev team at OnePlace Solutions to cook up a modern Outlook Add-in that will run on any device and allow a user to quickly and easily save email and/or attachments from Outlook to SharePoint/Office 365 Groups.

We think it’s an awesome productivity app as it makes use of the “dead-time” you get during the day when you haven’t got time to do any heavy work but have your phone or tablet handy. This allows you to do those tasks like filing emails into your Project Management System in SharePoint while catching the train to work, or saving that updated document you’ve been sent into your Legal Matter Management System in SharePoint while waiting for your doctor’s appointment.

We are using all the cool technologies to make the magic happen. Running as a super fast Angular 2 Outlook Add-in and looking very slick thanks to the Office UI Fabric! We are utilizing the Microsoft Graph, SharePoint and Exchange services of Office 365 and hosting the app 100% on Microsoft’s Azure Cloud.

We didn’t just cobble together an app for the Hackathon, we built this app to be ready for the prime time and it will become a commercial product offering in the very near future. We have released the app into the Office Store as a preview where you can take a look at what we’ve built and try it out for yourself.

Please take a look and vote for our submission to the Hackathon

Get the OnePlaceMail for SharePoint Online preview app from the Office Store today.

 

OnePlaceMail for SharePoint Online – screenshot 1OnePlaceMail for SharePoint Online – screenshot 2OnePlaceMail for SharePoint Online – screenshot 3

 

Learn more about the app by visiting the OnePlace Solutions website

http://www.oneplacesolutions.com/oneplacemail-for-office365-sharepoint-online.html

image

Microsoft Ignite 2016 – Ready, Set, Connect

we-love-sharepoint - CopyOnePlace Solutions is proud to be an exhibitor and sponsor again this year at the Microsoft Ignite conference in Atlanta. Ignite is Microsoft’s premier conference this year for Office 365, SharePoint, Exchange, Azure, Windows and related technologies.

I’ll be on the OnePlace Solution booth (#563) during the conference talking about our suite of products that bring SharePoint and Office 365 to where you work such as Outlook, Word, Excel, PowerPoint, Adobe Acrobat, and Windows Desktop.

CROSS_PLATFOMI’m very excited to be unveiling our latest product OnePlaceConnect at the conference. OnePlaceConnect is focused on bringing cloud based solutions such as Office 365 and SharePoint directly into the applications you use, on whatever device you use them (yes that means on your iPad/Android tablets, phones, Mac and of course your Windows devices).

 

Registration is now open to participate in the OnePlaceConnect Preview and be one of the first to get your hands on the new product.

 

The following are some really useful resources that I often refer people to at conferences.

OnePlaceMail – Intro video

OnePlaceDocs – Intro video

OnePlaceLive – Scenarios Unleashed (Project Management, Legal Matter Management)

OnePlaceLive – Email Tracking video

 

It’s always fun meeting new people at conferences and hearing of successes, challenges and battle wounds you’ve had with technology. It’s also awesome to catch up with existing customers and partners while I’m in the US as well, so please drop by the OnePlace Solutions booth if you get a chance.

We will have some swag at the booth, and we have new and improved hacky sacks/footbags/juggling balls to give away this conference. I’m more excited than I probably should be about those!

microsoft-band2We will also be giving away a Microsoft Band 2, so make sure you drop by for your chance to win.

Have a great conference and hope to see you at the booth or one of the many events.

cameron-dwyer-msauignite-2015-gold-coast

Reach out to me @CameronDwyer on Twitter during the conference.

 

 

MSIgnite_ATL_Twitter

How to access properties of Office.js objects that don’t exist in the Typescript definition file

When developing Office Add-ins and using Typescript, I’ve found the Office.js Typescript definition file available at DefinatelyTyped to only support a fraction of the objects and properties that are available within the Office.js library.

To give you an idea of what I mean, here is a list of properties that are available on the Office.context.mailbox.item object (according to the API documentation in the Outlook Dev Center)

clip_image004

 

And here are all the properties of that same object using the Typescript definition file:

image

I was left wondering where the rest of the properties were. They simply don’t exist in the Typescript definition file. So this leaves us in a bit of a bind, because we are using Typescript we can’t just reference a property that doesn’t exist in the Typescript definition file (even though we know the property will exist at run-time). The Typescript compiler will do it’s job well and throw up a compile time error that the property does not exist.

Without going to the effort of taking the Office.js Typescript definition file and extending it yourself to start filling it out you may want to consider the following work around.

We can declare an object in Typescript without a specific type by specifying it’s type as any. If we do this to an object within the Office.js library we can get an un-typed handle to the object. As the object in now un-typed, we can call any property of that object we like (whether it exists or not). Below is the code that will give us access to the subject of the email that is not available in the Typescript definition file.

image

If the property exists at runtime then great, if not then we will get a run-time error. It is definitely a step backwards and is why we use Typescript in the first place!

It would get a bit unwieldy if you used this technique throughout your code, and I’d like to think that as we get updated Office.js Typescript definition files that we can remove this type of code from our project and access the properties in a properly typed way. To isolate your use of this technique to a central location and facilitate removing the code later on, I’d suggest creating a class that takes in the object (e.g. Office.context.mailbox.item) then inside the class it gets the un-typed handle to the item and provides methods or properties that return the missing properties (with the bonus that the values returned can have a type associated with them). Below is an example of a class with static methods that provide typed access to missing properties on a mailbox item.

image

Hopefully the Office team will see the value in publishing current and complete Typescript definition files so we don’t have to write code like this in future.

Fingers crossed.

Getting the Angular 2 Router Working for an Office Addin

 

I have simple Angular 2 Office Addin and attempting to use the Angular 2 Router to route between two components. My two components are called ViewOne and ViewTwo.

Here’s what the UI for the Office Addin looks like:

office-addin-angular2-router-pushState-cameron-dwyer-01-addin-ui

When the using the Router to navigate, the following errors related to the this._history.pushState function are thrown to the JavaScript console

office-addin-angular2-router-pushState-cameron-dwyer-02-zone-js-error

The error message text is:

EXCEPTION: Error: Uncaught (in promise): TypeError: this_history.pushState is not a function

The same page displays without any error if it is not running as an Office Addin (rather if I just run the same router code on a standalone web page).

My best guess is that this error is due to the Office Addin framework and the fact that the Angular 2 app is running inside a sandbox iframe. I have tried running the same Angular app in a sandbox iframe on an otherwise generic html page however and I can’t reproduce the error so I think it is unique to something within the Office Addin framework.

This particular error has to do with the Angular 2 app trying to push the URL change to the web browsers history (to support back/forward navigation). In an Office Addin this doesn’t really make much sense as the Addin isn’t in control of the whole page so we wouldn’t want the Addin taking over the browsers URL history anyway.

In order to stop the Angular 2 router trying to make this call to the browser you can use a custom location strategy. In my case I was already using the HashLocationStrategy (rather than the default HTML5 routing strategy).

I went to the Angular 2 GitHub repo and found the source code for the HashLocationStrategy and created a new class in my Angular 2 app called CustomHashLocationStrategy. I just dumped all the source code into the new file, changed the name of the class and removed the two lines of code that try to update the web browsers history as shown below.

office-addin-angular2-router-pushState-cameron-dwyer-03-location-strategy

Now when bootstrapping my Angular 2 app I use my new CustomHashLocationStrategy instead of the HashLocationStrategy. Here’s what that change looks like in code.

Before (click for full size image):

office-addin-angular2-router-pushState-cameron-dwyer-04-bootstrap-before

After (click for full size image):

office-addin-angular2-router-pushState-cameron-dwyer-04b-bootstrap-after

After this change I can now navigate between the 2 routes without any errors being thrown to the console.

office-addin-angular2-router-pushState-cameron-dwyer-05-addin-ui-working

The code shown in this article in the Angular 2 Router in RC1. I also had the same issue using the “Router-Deprecated” in RC1, the same solutions worked for me using the deprecated router.

I also tested that this fix worked across Chrome, IE, Edge and Windows Desktop Office Client.

 

Further reading:

http://stackoverflow.com/questions/36182807/angular-2-routed-apps-hosted-in-iframes

https://www.illucit.com/blog/2016/05/angular2-release-candidate-1-rc1-changes/

https://angular.io/docs/ts/latest/guide/router.html

Light up your Outlook Mailboxes with advanced Email Tracking features

I’m preparing to head down to Melbourne for the The Digital Workplace Conference (the new Australian SharePoint Conference). This will be the first conference since the 7.3 release of OnePlaceMail and OnePlaceLive. I’m pretty excited about the new Email Tracking features which goes well beyond simply allowing users to transfer email and attachment from Outlook to SharePoint. This goes to a whole new level. Save an email to SharePoint (or Office 365) and all other recipients of the email can see in real time that you have file it to SharePoint and can open up the location in SharePoint. No more having multiple people trying the file the same email to SharePoint to find that someone has already save it there. Or worse, people saving it to different locations in SharePoint and having the files duplicated.

If you haven’t checked out the OnePlace Solutions suite in the last few months you may have also missed the suggested and predictive email filing capabilities that analyze the filing patterns of users and will suggest or predict locations in SharePoint that are likely locations you would want to save the email. If you’re not going to make it to see us at the Melbourne conference (or simply can’t wait that long to see what I’m talking about) here’s a short video on the Email Tracking feature. See for yourself how just one feature can make the Digital Workplace so much easier for a user, then imagine a whole suite of products packed with features like this, then come and see me at the conference!

 

 

Outlook Add-in Ribbon Commands: Resolution to Manifest XML Schema Errors

While taking a look at the new Outlook Addin Ribbon Commands I came across these schema validation errors trying to deploy the addin once I added the VersionOverrides element. In particular I was getting this error message:

Failed to deploy the manifest file to the Exchange server.  This app can’t be installed. The manifest file doesn’t conform to the schema definition. The element ‘Resources’ in namespace ‘http://schemas.microsoft.com/office/mailappversionoverrides’ has invalid child element ‘Images’ in namespace ‘http://schemas.microsoft.com/office/officeappbasictypes/1.0′. List of possible elements expected: ‘ShortStrings, LongStrings’ in namespace ‘http://schemas.microsoft.com/office/officeappbasictypes/1.0′... The element ‘Resources’ in namespace ‘http://schemas.microsoft.com/office/mailappversionoverrides’ has invalid child element ‘Images’ in namespace ‘http://schemas.microsoft.com/office/officeappbasictypes/1.0′. List of possible elements expected: ‘ShortStrings, LongStrings’ in namespace ‘http://schemas.microsoft.com/office/officeappbasictypes/1.0′.

 

After a bit of trial and error I discovered that the issue was to do with the order of child elements within the Resources element. It appears that there is a strict order that must be adhered to.

Here’s the code that was causing the error. Notice that I was defining Urls before Images.

 

image

 

I simply swapped this around to define Images first, then Urls and the xml then passed the validation check and I was on my way. Here’s the working code:

image

 

Outlook 2016 – Use Case of Saving a File and Attaching to a new Email

This may just be the smallest and yet most appreciated new features of Outlook 2016. The attach file ribbon button has a dropdown that lets you select recent files saved from any other application. Sounds ridiculously simple, but in practice it is a real time saver.

Here’s the use case. I’m working on a file or I’m reading a file I’ve just downloaded from the internet and I want to send it to someone on an email.

Simply compose a new email and on the Attach File button dropdown the file will be the most recent file in the list. No need to even think about where it is saved, very slick.

image

Working with Non-Office File Types in SharePoint & Office 365

Office 365 and SharePoint work quite nicely when you are working with Microsoft Office file types. Things like Word, Excel and PowerPoint files. Once you really start using SharePoint however, you want to store many more types of files in SharePoint. This is natural and you can actually get the files into SharePoint without too much hassle.

Editing and working on Office file types is pretty good. Just click on the file in SharePoint and you can now choose to do the edits directly in the browser (with online versions of the Office products) or edit the files in the full desktop version of the Office products.

But what’s the story with file types that don’t open in, or are not associated with the Office products?

Well that’s when things get a little clunky, and in this post I’m going to show you how OnePlaceDocs Explorer turns virtually any software application into a “SharePoint” aware application that you can use to open/edit and save files that live in SharePoint. No longer are you just restricted to using the Office application that were designed to work with SharePoint, now you can edit files in any application you want.

So what is OnePlaceDocs Explorer? It is a bit like Windows File Explorer except it is purpose built for looking at SharePoint and Office 365 environments rather than files on your local computer or network.

To give you some orientation, the screenshot below shows OnePlaceDocs Explorer and points out the 3 pane layout which is similar to Windows File Explorer.

edit-files-directly-from-sharepoint-01-office-365-explorer-cameron-dwyer

 

Let’s look at a common scenario…

Editing Images Files in SharePoint/Office 365

It’s actually very difficult to edit image files that are stored in SharePoint. If you try to open the file, the web browser simply displays the image in the browser (because it natively knows how to). This doesn’t help you when you want to edit the image though. Your options are to either:

  • Download the image from SharePoint to your local computer, edit it in your image editing program of choice, then manually upload the file back to SharePoint replacing the existing file
  • Sync the whole library offline via OneDrive and then you can work with the file as though it is a normal file on your desktop. Saving changes to the local file will sync back to SharePoint.

Here’s the OnePlaceDocs Explorer way.

Select the image file and select Open With (from the ribbon or context menu action)

edit-files-directly-from-sharepoint-02-open-with-cameron-dwyer

Select any application from the list of applications installed on your computer that recognise this file type. I’ll choose good old Microsoft Paint just to prove that a very basic application that has no interoperability with SharePoint will work fine.

edit-files-directly-from-sharepoint-03-open-with-paint-cameron-dwyer 

Paint now starts up and the image stored in SharePoint is sitting there ready for me to edit.

edit-files-directly-from-sharepoint-04-open-with-paint-original-cameron-dwyer

I’ll make a few changes and just save using the standard save action in Paint or pressing CTRL+S.

edit-files-directly-from-sharepoint-05-open-with-paint-edited-awesome-cameron-dwyer

Believe it or not, that is it.

If we return to OnePlaceDocs Explorer we can see in the changes showing in the preview pane.

edit-files-directly-from-sharepoint-06-changes-in-preview-pane-cameron-dwyer 

Just to prove that it really has changed the file in SharePoint, I’ll open this document library in a web browser.edit-files-directly-from-sharepoint-07a-open-in-browser-cameron-dwyer

We can then find the same file in SharePoint

edit-files-directly-from-sharepoint-07b-open-in-browser-cameron-dwyer

And there’s my modified image.

edit-files-directly-from-sharepoint-08-modified-file-in-sharepoint-cameron-dwyer

Editing the file using OnePlaceDocs Explorer really wasn’t any different to opening a file from my local computer. So now you have no excuse for not putting those files in SharePoint where they belong!

This same technique can be used to open any type of file with any installed application. Another common scenario is opening PDF files with Adobe Acrobat or another PDF authoring tool.

Does Microsoft have an InfoPath Forms Replacement in the Works

imageIt’s been one of the most asked questions since the death of InfoPath; What is InfoPath’s replacement?

There are some great 3rd party forms products that have been around for a long time now (namely Nintex and K2). Microsoft has been keeping very tight lipped on any official replacement to InfoPath and Forms in general and the community has been left feeling like they had been abandoned by Microsoft by not providing any replacement for their investment in InfoPath.

In a Office 365 Developer Podcast this week Jeremy Thake makes some very interesting comments (in the last 5 minutes of the podcast) indicating that Microsoft have been working on an InfoPath forms replacement it’s just been running way behind schedule. Interestingly he points to the technology behind Project Sienna possibly being an eventual replacement for InfoPath.
https://blogs.office.com/2015/07/16/office-365-developer-podcast-episode-054-panel-discussion-on-sharepoint-development/

This podcast also mentions that we may hear (and see) something more official announced in October. Could this be the news that everyone has been waiting for? That Microsoft will have an official replacement for InfoPath. Let’s hope so. SharePoint (and Office 365) as a platform really need a rich forms technology at it’s core. Businesses look to SharePoint to replace those paper based workflows within the organisation so it’s kind of important to have a Forms technology natively within SharePoint to facilitate that wouldn’t you think?

%d bloggers like this: