Microsoft Ignite 2017 in Orlando – My top picks and tips

Microsoft’s premier technology conference Microsoft Ignite 2017 is quickly approaching and it’s set to be the largest Ignite conference yet (rumoured to be around 24,000 attendees).

OnePlace Solutions – Products that rock this world

I’m excited to be attending again with some of the awesome OnePlace Solutions team. OnePlace Solutions is again a sponsor and exhibitor at the conference so please come by and pay us a visit on the expo floor (booth 1724). We will be running live demos of our desktop product suite (a major release went out for this last week so you will be seeing brand new software) including OnePlaceMail, OnePlaceDocs, and OnePlaceLive.

In addition I’m super proud of the work we did earlier this year to launch OnePlaceMail for iPhone/iPad, and just last week we were a launch partner when Microsoft announced add-in availability for Outlook on Android.

opm-outlook-android-addin-officdev-512-475-cameron-dwyer

Fun & Giveaways – that are out of this world

Who doesn’t like building LEGO and winning prizes? Come and play our Lego game for your chance to win the LEGO® NASA Apollo Saturn V

microsoft-ignite-orlando-saturn-rocket-lego-cameron-dwyer

 

What’s at the Conference for Office Developers?

oneplace-solutions-logoHeaps, and heaps, and heaps. Trying to build a schedule in MyIgnite website is overwhelming with the shear number of sessions available BUT IT IS ALSO A MUST – don’t try to figure it out on the day, it will take a couple of hours to really look through the options and choose the right sessions for yourself. The conference centre is huge, so if you end up in the wrong session you could have a 30 minute walk to get to another session, not a situation you want to find yourself in. Here’s my picks for Office developers:

 

Microsoft Office 365 platform overview

Tristan Davis, Rob Howard

Learn about the latest that Office 365 has to offer developers and power users, from Microsoft Teams extensibility and the Microsoft Graph to Office add-ins and Office UI Fabric. We cover the full range of solution-building tools, from Microsoft PowerApps and Microsoft Flow to Visual Studio and Visual Studio Code. Get a demo-packed overview of the platform, and a guide to Office sessions you should see through the rest of the conference.

https://myignite.microsoft.com/sessions/55142?source=sessions

 

Make your app a native part of Office with Office Add-ins

Humberto Lezama

Microsoft Office Add-ins allow you to make your solution a native part of Office on every platform across desktop, web, and mobile applications. Learn how to build an Office Add-in, the new features we’ve recently launched and our future roadmap. This session covers how to enable native Office experiences using standard web developers tools, how your Add-in can run anywhere, and all the great distribution channels for publishing your app.

https://myignite.microsoft.com/sessions/54720?source=sessions

 

Building the modern SharePoint experience: Best practices from Microsoft for developing with SPFx

Chakkaradeep Chinnakonda Chandran, Waldek Mastykarz

With the SharePoint Framework, you can incorporate modern developer techniques to create fast, responsive components. Building on lessons from developing out-of-the-box components, in this session, we go under the hood to explore details of modern SharePoint client-side development tools to not only manage your developer environment but also give you an edge in building optimized and performant web parts and extensions. We also show how you can streamline deployment with SharePoint CDN facilities to strike the optimal mix of flexibility and performance for your projects.

https://myignite.microsoft.com/sessions/53866?source=sessions

 

Migrate your apps from legacy APIs to Microsoft Graph

Dan Kershaw, Jeff Sakowicz

Microsoft Graph is the single REST API endpoint for accessing your data in the Microsoft Cloud including from Azure Active Directory, Office 365, Intune, and more. In this session, learn about how Microsoft Graph can now enable you to create apps that were simply not possible before. Find out what is new with Microsoft Graph in addressing previous parity gaps with legacy endpoints, learn about the scenarios that you can build using Graph, and see how you can quickly migrate to using Graph.

https://myignite.microsoft.com/sessions/55419?source=sessions

 

Office development: Authentication demystified

Vittorio Bertocci

Tokens and Scopes and Protocols, Oh My! Come to this session to discover how easy it is to use the MSAL SDK to connect your applications and Office Add-ins to the Microsoft Graph, without any need to become a protocol expert. No matter what platform or dev stack you are targeting, you’ll be surprised by how little code it takes to authenticate users and take advantage of Microsoft’s rich cloud API. We cover a lot of great MSAL-focused tech, including MSAL.NET for UWP, Desktop and Xamarin, MSAL.NET for Agave plug-ins and MSAL JS. We also touch on MSAL for iOS and Android. It goes without saying – but we’ll say it anyway – that we also talk about Microsoft Graph!

https://myignite.microsoft.com/sessions/55110?source=sessions

 

Stay Updated and Hear the News as it Breaks

Follow @MS_Ignite on Twitter and use/follow the hashtag #MSIgnite to share your thoughts

Follow the 10 MVP “Community Reports”

Keep your eyes and ears open – news will be breaking all around you!

 

Enjoy Yourself and Have Fun

Take the opportunity to enjoy Universal for a private party (that doesn’t happen every day!)

See if any of the events from the Ultimate Events Party List take your fancy

Tweet your step count. I think I’m a chance of cracking 20,000 steps a day

 

I’ll be tweeting (@CameronDwyer) throughout the conference.

Hope to see you there.

 

microsoft-ignite-orlando-lego-astronauts-cameron-dwyer

Advertisements

How to fix mouse cursor disappearing in Visual Studio & Visual Studio Code

This is a problem I have come across each time I build a new virtual development machine with Visual Studio on it. The problem has been around for a few years now and I always have to search around for the steps to fix it each time it catches me.

I’ve seen this issue in the following versions of Visual Studio and the resolution is the same and works for them all:

  • Visual Studio 2012
  • Visual Studio 2015
  • Visual Studio 2017
  • Visual Studio Code

 

The Problem

When using Visual Studio the mouse cursor flickers badly or totally disappears when the mouse pointer is in the code editing area of Visual Studio (as shown in the screenshot below).

01-visual-studio-missing-cursor-area-cameron-dwyer

Moving the mouse cursor outside of this area makes it visible again, and it seems that the mouse pointer is unaffected when using other applications and on the Windows desktop itself.

I’ve found that the problem is much more prevalent when access Visual Studio on another machine (e.g. virtual development machine) via remote desktop.

The Solution

Thankfully the solution is quick and simple:

  • Open Control Panel | Appearance and Personalization | Personalization | Change mouse pointers
  • On the Pointers tab of the dialog change the Scheme to Windows Black (system scheme)

02-visual-studio-dissapearing-mouse-cursor-windows-scheme-black-cameron-dwyer

That’s it, your cursor should now be back and stable.

 

How to Debug Modern Office Add-ins on Devices (iPhone/iPad) using Firebug

firebug-debug-office-addins-ios-iphone-cameron-dwyerDebugging modern Office Add-ins with current tooling can be quite challenging. Although the technology of the add-ins you write is consistent and conforms to web standards (HTML, JavaScript, CSS), the way the add-in is hosted in the different Office clients makes it challenging to use debugging tools (as the add-in isn’t simply running in a web browser).

Debugging in Office Online (web browser versions of the Office products) is probably the simplest to use existing debug tools, and simply using F12 debug tools in IE, Edge, Chrome will give you access to the Console, DOM and inspection of HTML and CSS.

Desktop Office clients make it a bit harder since you can’t just start the F12 debugger tools because you are not in a full browser (like Edge or Chrome). Luckily Microsoft have provided a standalone version of the F12 tools (F12Chooser.exe) that you can use to attach to the running instance of the Desktop Office client.

https://dev.office.com/docs/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

Once you start talking about devices such as iPhones and iPads it begins to get even more difficult. Most documentation points you in the direction of Vorlon.JS which provides a good remote debugging experience, but involves a fair bit of setup, configuration and embedded scripts in your addin as well.

https://dev.office.com/docs/add-ins/testing/debug-office-add-ins-on-ipad-and-mac

Rather than go down the Vorlon.JS route, I’ve come up with the a technique which is more lightweight than the Vorlon.JS approach and instead uses Firebug Lite. Firebug Lite is an in-page debugging tool that can be added to a webpage by embedded JavaScript into your add-in. The example below adds a hyperlink to the page that will launch the Firebug debugger when clicked.

<a href="javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');">Firebug Lite</a>

 

Add-firebug-debugging-link-to-office-addin-cameron-dwyer

 

This link now appears in the add-in and clicking on it starts the Firebug Lite debugger in-page. Due to the amount of screen space (especially on an iPhone) it’s going to be a fiddly trying to do extensive debugging using your finger. Having access to the JavaScript console is really valuable and it also shows the status of AJAX calls being made and any resulting errors.

 

 

Firebug Console (iPhone)

Debug-Office-Addin-iPhone-JavaScript-Console-Cameron-Dwyer

 

Firebug DOM explorer (iPhone)

Debug-Outlook-Addin-DOM-JavaScript-Inspect-Cameron-Dwyer

 

Firebug HTML Inspector (Desktop Outlook)

Debug-Office-Addin-Desktop-Office-Outlook-Firebug-Cameron-Dwyer

How to Avoid Chrome Security Issues Developing Office Add-in Hosted on localhost

When developing add-ins for Office you are often serving the add-in from a local web server on a URL using the host name “localhost”. Office add-ins also require the web server to use SSL to serve the resources for the add-in. The Chrome security implementation will fire off a security error under most common development scenarios. This is when the domain of the SSL certificate does not match “localhost”.

You will see this problem manifest itself by causing your add-in to not start and show an error stating:

“Add-in Error  Something went wrong and we couldn’t start this add-in. Please try again later or contact your system administrator”

cameron-dwyer-chrome-debug-localhost-00b-add-in-error-couldnt-start

If you have the Developer Tools window open in Chrome you will see error messages getting output with the text:

“net::ERR_INSECURE_RESPONSE”

cameron-dwyer-chrome-debug-localhost-00a-net-err-insecure-response

There is a relatively easy workaround to this problem that you can implement on your development machine to allow Chrome to bypass this certificate check on URLs served from “localhost”.

Type the following into the Chrome browser URL bar:

chrome://flags/#allow-insecure-localhost

Enable the option:

“Allow invalid certificates for resources loaded from localhost. Mac, Windows, Linux, Chrome OS, Android

Allows requests to localhost over HTTPS even when an invalid certificate is presented.”

cameron-dwyer-chrome-debug-localhost-01-allow-insecure-localhost

After making this change you will need to restart Chrome.

cameron-dwyer-chrome-debug-localhost-02-relaunch-now

How to fix “The operation could not be completed” error adding references to Visual Studio 2017

The Issue

Using Visual Studio 2017 and attempting to add a reference to a project you receive an error stating “The operation could not be completed”.

cameron-dwyer-vs2017-add-reference-error-01-add-reference

cameron-dwyer-vs2017-add-reference-error-02-operation-could-not-complete

The Solution

It seems that to bring up the Add Reference dialog in Visual Studio 2017 the Microsoft.VisualStudio.Shell.Interop.11.0.dll needs to be regsitered in the GAC. You can follow these steps to register this assembly in the GAC:

Open the Develop Command Prompt for VS2017 (ensure you run the as administrator otherwise the GAC registration may fail)

cameron-dwyer-vs2017-add-reference-error-03-dev-command-prompt-as-admin

Change the current directory to the PublicAssemblies folder for your Visual Studio 2017 installation. Mine was:

C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\Common7\IDE\PublicAssemblies

Note: this path will be different for different versions of Visual Studio (e.g. you may find your path is C:\Program Files\Microsoft Visual Studio\2017\Community\Common7\IDE\PublicAssemblies)

cameron-dwyer-vs2017-add-reference-error-04-public-assemblies

Run the following command to register the assembly in the GAC:

gacutil -i Microsoft.VisualStudio.Shell.Interop.11.0.dll

cameron-dwyer-vs2017-add-reference-error-05-add-to-gac

Now restart VS2017 and try to add a reference to your project again and you should see the Add Reference dialog appear.

cameron-dwyer-vs2017-add-reference-error-06-add-reference-dialog-working

How to compare the MAPI property differences between Outlook emails

I was recently working on extracting mail from Outlook to an .msg file and later importing the .msg file back into Outlook. I was concerned that some of the non-obvious properties (there are a lot of non-visible MAPI properties stored on an email) would not be persisted or may change value in the process of the export/import. I thought this was going to be a daunting and time consuming process comparing the value of around 100 MAPI properties and playing spot the difference. Luckily the first thing I tried was the awesome OutlookSpy tool which I’ve found simply brilliant for assisting with Outlook development over the years. What I didn’t realise was that OutlookSpy has a build-in compare feature that will compare the MAPI properties of 2 mail items and highlight:

  • Properties missing/extra on the 2 objects being compared
  • Properties with different values on the on the 2 objects being compared
  • Properties with the same values on the on the 2 objects being compared

 

Steps compare the properties on 2 email messages using OutlookSpy

 

Select one of the emails to compare and select OutlookSpy | IMessage

cameron-dwyer-outlookspy-compare-01-IMessage

 

The IMessage window will appear showing all the MAPI properties on the item. From here select the Compare tab.

cameron-dwyer-outlookspy-compare-02-IMessageWindow

 

In order to compare this email against another email, the compare tab gives you a green area where you can drag and drop the PR_ENTRYID property from a different email message. So to do this leave the IMEssage window open on the compare tab.

cameron-dwyer-outlookspy-compare-03-CompareTab

 

Go and select the email you want to compare to in Outlook and select the OutlookSpy | IMessage button for this new email. You will be presented with the IMessage window and shown the MAPI properties for the new email. Locate the PR_ENTRYID MAPI property in the table (hint: click the column header to sort the table). Now drag and drop the PR_ENTRYID row from the table into the green drag/drop zone on the original IMessage window that you left open.

cameron-dwyer-outlookspy-compare-04-dragdrop-pr-entryid

 

Now the magic happens! The compare tab does a comparison of the 2 items and allows you to switch between properties with the same values, properties with different values, and missing or extra properties.

cameron-dwyer-outlookspy-compare-05-properties-same-on-both-email

 

cameron-dwyer-outlookspy-compare-06-properties-different-on-email

How to export multiple pages from OneNote to a single Word document

I needed to find a way to export a number of pages from a OneNote notebook into Word documents. The technique I used and will step through in this post was to:

  • Create a new OneNote section (temporarily in needed) to arrange the pages I wanted to export (one section per Word document I wanted)
  • Export the entire section into a Word (*.docx) file
  • Automatically fix up image sizing issues with a custom macro

image

Right-click on the section tab and select Export…

image

Change the export file type to be a Word document (*.docx)

image

This will export all pages from the OneNote section and append them all into one Word document. This is a pretty good result except for the pictures. In many cases the pictures are wider than the page width and look half missing.

image

The solution to quickly and easily address the image width problem in bulk is to create a Word macro to resize all images in a Word document that are too wide to fit on the page.

Here’s how we create the Word macro (this is in Outlook 2016)

The Developer toolbar needed for creating macros isn’t visible by default so to switch it on to File | Options | Customize Ribbon and ensure Developer is checked

image

You should now get the Developer toolbar appearing

image

Select Macros, give the new macro a name and select a scope for where to save the macro (this determines where it will be available later on).

image

You will now be dropped into the VB Macro Editor experience which looks nothing like Word! Don’t worry you just need to paste the following code in as shown

image

Here’s the macro code to copy/paste

Dim i As Long
With ActiveDocument
For i = 1 To .InlineShapes.Count
If PointsToCentimeters(.InlineShapes(i).Width) > 15 Then
With .InlineShapes(i)
.LockAspectRatio = msoTrue
.Width = CentimetersToPoints(15)
End With
End If
Next i
End With

The result should look like this, you can then save and close the macro editor window

image

Now back in Word, with your document open (with the oversized images) select Developer | Macros, select your new macro and click Run

image

Once the macro has completed all the images that were over 15cm in width will have been resized to fit on the page.

This assumes the pages are in portrait orientation and that the maximum width of an image should be 15cm

image

How to clear the Microsoft Outlook for Mac web browser cache and cookies

imageWhen working with Outlook for Mac the content of email messages are rendered in a web browser control that is specific to Outlook (it does not use Safari). So when you have a need to clear any cached data or cookies it is far from obvious how you should go about clearing this cache. I’m a newbie to Mac so maybe this is obvious to seasoned users! Here’s how I went about it.

  • Start the Finder application
  • Open the Go menu
  • You need to get to the hidden Library folder. To get the Library folder to show up under the go menu, hold down the option button on your keyboard
  • Now open the Library folder

image

  • Find the Containers folder under Library and expand it

image

  • You should be able to find a folder called com.Microsoft.OsfWebHost

image

 

  • To clear out the web browser cache I move the following to the trash:
    • com.Microsoft.OsfWebHost/Library/Caches/com.Microsoft.OsfWebHost (folder)
    • com.Microsoft.OsfWebHost/Library/Caches/Cookies/Cookies.binarycookies (file)

image

 

Restart Outlook and you should now have no cached files being used.

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

%d bloggers like this: