Category Archives: Office 365

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

Bug in Outlook add-in commands showing command label instead of the add-in title on first use in a session

It seems there is a bug with the Outlook add-in commands when using the add-in from Outlook Web Access.

When using the add-in command (ribbon button) to open a task pane to show your add-in the label of the command button is shown at the top of the add-in where the add-in title should be. If you close the add-in and use the command button subsequent times in a session, then the add-ins title is correctly displayed.

Refreshing the browser window and again trying to use the add-in with show the command button label again (but just the first time the add-in is used).

I have been able to reproduce this issue with the Command Demo add-in from the Office Dev site:

1. Clone from GitHub https://github.com/jasonjoh/command-demo

2. Run locally using gulp serve-static (as per instructions in the GitHub repo)

3. Deploy the add-in manifest (as per instructions in the GitHub repo)

On first use of the add-in in a session (or after refreshing the browser window) the add-in title uses the label of the command button. In the case below the button label of “Display all properties” is shown.

image

If you close the add-in and then click on the same command button subsequent times then the correct add-in title of “Add-in Command Demo” is displayed.

image

This bug only seems to affect OWA, Desktop Outlook 2016 consistently displays the correct add-in title as shown below.

image

It would also be nice if the header we displayed in Desktop Outlook was consistent with OWA. As you can see from the screenshots above OWA shows the add-in icon in the header whereas Desktop Outlook just has the title without an icon.

I’ve logged this bug on UserVoice, if it’s causing pain for you please vote it up!

Issues launching Outlook add-ins directly to a SPA route using fragment URLs

Modern Single Page Applications (SPAs) run in the browser as a single HTML page and use JavaScript to dynamically load content and provide the functionality of the application without having to reload the entire browser window as the user is interacting with the application. To support navigating SPAs, a commonly used technique is to perform navigation (or routing as it is called in the Angular world) based on URL fragments.

The basic premise of how this works is that the URL that you see in the browser window always refers to the same HTML page hosting your SPA e.g. http://myserver/spa-app/index.html

As the user navigates around the application this is done using URL fragments (the bit after the #) e.g. http://myserver/spa-app/index.html#configurationpage or http://myserver/spa-app/index.html#customerspage

This allows the browser to not go back to the server to request a page refresh (because we are always on the same page http://myserver/spa-app/index.html) but the SPA can react to the change of URL by reading the Fragment of the URL and route the user to the correct area of the app. The browser history also keeps track of the Fragment URL so this can provide a nice navigation experience.

That was a very basic explanation and I suggest reading this good primer on Fragment URLs (or hashbangs as they are sometimes referred).

So this leads us to Outlook add-ins and the problem I’ve encountered. Lets illustrate this with an example so that the use case becomes clear.

Imagine we have a simple SPA that shows a To Do list. The main screen of the app (http://myserver/spa-app/index.html) just shows the To Do list. There is also a second screen in the app for creating new To Do items(http://myserver/spa-app/index.html#newitem).

In the Outlook add-in manifest you provide a URL to your page that Outlook will load up in response to the user activating your app. The Microsoft preferred way of triggering this in Outlook is via Commands that appear as buttons in the Outlook Ribbon (in the desktop version of Outlook). If we create such a Ribbon button and specify the URL of the main screen of the app (http://myserver/spa-app/index.html) everything works just fine. Within the app itself, it can navigate off to http://myserver/spa-app/index.html#newitem to show the screen to create a new item. But what if we want to provide Outlook Ribbon buttons that streamline the process and let the user go straight to creating a new to do item rather than first having to open the app, then navigate within the app to create the item? Having the main functions of you app accessible as Ribbon buttons in Outlook is a huge time saver for users.

So what happens when we try to use the new item URL Fragment behind a Ribbon button?

If we specify a URL of http://myserver/spa-app/index.html#newitem in the add-in manifest, the following is the URL that Outlook actually launches the add-in with:

http://myserver/spa-app/index.html?et=&_host_Info=Outlook|Web|1…_1480636166782|ocii1|https://outlook.office.com/owa/?realm=XYZ.com#&_serializer_version=1newitem&_xdm_Info=-133b2041_-3d735892_1480636166782|ocii1|https://outlook.office.com/owa/?realm=XYZ.com

 

Obviously this is going to wreak havoc with your SPA. The original URL Fragment #newitem looks to be encoded in the resulting URL as “&_serializer_version=1newitem” although how to reliably detect and extract this and then do the correct routing within your SPA is challenging!

European SharePoint Conference (Vienna, November 14-17)

eurpoean-sharepoint-conferece-cameron-dwyerI’m excited to have to opportunity to attend the European SharePoint Conference this week (November 14-17) in Vienna. Since the amalgamation of the Microsoft SharePoint Conference into the Microsoft Ignite Conference the last 2 years, I’m really looking forward to a dedicated SharePoint conference again. The SharePoint community has always been such a bright, vocal and welcoming community and this is the first time I’ve travelled to Europe for the event.

Over the last 3 years we’ve seen Microsoft focus heavily on marketing Office 365 and the different services it offers. SharePoint had been relegated to the background and we heard little about it, even though it was the central to many of the Office 365 services. With Jeff Teper back on the team I get a sense that SharePoint is now back in the spotlight and the rate of innovation and change in SharePoint is at a level that we haven’t seen for years.

It’s an exciting new world for SharePoint and I’m keen to talk to those attending the conference to see how the cloud and Office 365 is being adopted through Europe.

Personally I have spent a lot of time recently on non-Microsoft technologies as we look to create the products of the future that will be running under non-Microsoft web technology stacks and across all devices.

While we will be showing our industry leading OnePlace Solutions product suite (OnePlaceMail, OnePlaceDocs, OnePlaceLive) at the conference we will also be demonstrating some of the cutting edge work we are doing such as the cross device OnePlaceConnect Outlook add-in that I’d imagine is the first commercial product in the Office 365 space written in Angular 2 and utilizing the ahead-of-time compiler for a blazingly fast user experience.

I’m really looking forward to having some great conversations and meeting new people as well as some of our existing customers and partners.

we-love-sharepoint - CopyOnePlace Solutions is a Gold Sponsor of the event and I’ll be on the booth during the breaks throughout the conference, so if you are attending and have the opportunity then please come up to the OnePlace Solutions booth and say hi. We will also be giving away some swag and prizes so come and grab some of those as well!

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

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

 

2 Simple Techniques for Creating SharePoint Views Grouped by Date Columns

Here are 2 techniques for creating views in SharePoint when you want to group on dates. Throughout this article I’ll be using the example of email that have been saved to SharePoint where the email date has been stored in a SharePoint column called “Email Date”. The Email Date is saved with both a date and time component.

sharepoint-views-date-group-by-cameron-dwyer-01-email-date-column

Here’s the All Documents view of the library showing the Email Date column

sharepoint-views-date-group-by-cameron-dwyer-02-all-documents

If we try to use the Email Date column to group by in the view

sharepoint-views-date-group-by-cameron-dwyer-03-group-by-email-date

The view creates a group for each different day (the time component is ignored)

sharepoint-views-date-group-by-cameron-dwyer-03-view-grouped-by-date

2 Level Grouping: by Year and then by Month

This view is going to get very busy with a grouping for each day, so how about we split it up a bit by creating 2 levels of grouping, firstly by year and then by month.

Unfortunately we can’t just use the existing Email Date column to achieve this, instead we will create two calculated columns to use for the groupings (one for year and another for month).

To create the year column:

Create as a calculated column
Set the returned data type as Single line of text (this gives better formatting control and the year will still sort properly as text)
Set the formula to =TEXT([Email Date], “yyyy”)

sharepoint-views-date-group-by-cameron-dwyer-04-calculated-year-column

To create the month column:

Create as a calculated column
Set the returned data type as Single line of text (this gives better formatting control and by padding a single digit month with 0 will still sort properly as text)
Set the formula to =TEXT([Email Date],”mm (mmmm)”)

sharepoint-views-date-group-by-cameron-dwyer-04-calculated-month-column

Now if we create a new view (based on the All Documents view) and add two levels of grouping based on our new calculated columns

sharepoint-views-date-group-by-cameron-dwyer-05-view-group-by-year-then-month

Our new view now renders in SharePoint giving collapsible grouping at both the Year and Month levels

sharepoint-views-date-group-by-cameron-dwyer-06-view-result-group-by-year-then-month

This is now a lot easier to navigate and drill down, and it’s quite nice to see the counts against each grouping as well. In this example I set the groups (both Year and Month) to sort in descending order. This means that the latest will be at the top (notice 2016 is above 2015, and within 2016, February is above January).

Faking a 3 Level Grouping: by Year/Month Combined and then by Day

SharePoint has a limitation in that you can only create two levels of grouping. If we want to have a third level (under month) that grouped together all the email from the same day then we can’t just go and add a third level of grouping. What we can do instead though is create a slightly more complex calculated column that combines both the year and month and use it as our top level grouping. So let’s do that now by creating a Year/Month column:

Create as a calculated column
Set the returned data type as Single line of text (this gives better formatting control and we can carefully craft the text so it still sorts year/month properly as text)
Set the formula to =TEXT([Email Date],”yyyy-mm (mmmm)”)

sharepoint-views-date-group-by-cameron-dwyer-07-calculated-column-year-month

We are also going the need a calculated column to group on the specific day, so I’ll create the Day column

Create as a calculated column
Set the returned data type as Single line of text
Set the formula to =TEXT([Email Date],”dd (ddd, d mmm yyyy)”)

sharepoint-views-date-group-by-cameron-dwyer-08-calculated-column-day

Now we create our new view (based on the All Documents view) and add groupings based on the Year/Month column and the Day column. Again we will sort descending to get the latest at the top.

sharepoint-views-date-group-by-cameron-dwyer-09-view-settings-group-year-month-day

The resulting SharePoint view gives us the year/month breakdown at the first level and we can then drill down to a specific day within the month.

sharepoint-views-date-group-by-cameron-dwyer-10-view-group-by-year-month-day

I’m sure you can now go forward and add your own tweaks and formatting changes to get better date categorized views out of SharePoint.

 

%d bloggers like this: