Category Archives: Outlook

Sydney SharePoint User Group – The Transition to Modern Office Add-in Development

sharepoint-user-group-community-sydney-cameron-dwyerI had the pleasure this week of speaking at the Sydney SharePoint User Group on the topic of transitioning to the modern Office Add-in development model.

We discussed:

  • The existing COM/VSTO Office Add-in development model
  • The reasons and drivers for needing a new development model
  • What the modern Office Add-in development is and how it works
  • Benefits of the modern model
  • What this transition means for Office developers
  • A look at the typical modern add-in technology stack and discussing some of the options
  • The wider Office Developer Vision (Extending Office through add-ins + accessing Office 365 data via Graph)

Thanks to those who attended and as promised here’s a link to the slide deck from the nights presentation.

Transitioning to Modern Office Add-in Development (slide deck)

sharepoint-user-group-sydney-cameron-dwyer-office-add-in-dev

Advertisements

Microsoft Ignite 2017 Highlights for the Office & SharePoint Developer

What a massive week in Orlando for Office developers. So many sessions, so much new information, it really was a case of drinking from the fire hose!

Thankfully most sessions were recorded and are progressively being made available along with the relevant slide decks on https://myignite.microsoft.com/videos

If you only have time to watch one session my pick for the SharePoint/Office Developer would be Accelerate your digital transformation with SharePoint and OneDrive presented by Jeff Teper, Dan Holme, Omar Shahine, Naomi Moneypenny. This session was just non-stop announcements on what’s new in SharePoint, Office and OneDrive. Some of the announcements:

  • Office 2019 is coming (Office clients, SharePoint, Exchange, Skype for Business servers – all servers to be available on-prem) – preview due mid 2018
  • A SharePoint specific conference (backed by Microsoft) is coming back in 2018 – and yes it’s going to be in Las Vegas
  • SharePoint hub sites to group related sites together, share branding and navigation and provide rollup of some information
  • SharePoint site provisioning model to allow for scripted customizations during the provisioning process
  • SharePoint Company Theming and an online tool to help (https://aka.ms/spthemebuilder)
  • SharePoint File Preview webpart (supports over 270 file formats)
  • SharePoint Migration tool to move SharePoint content from on-prem to the the cloud (Office 365)
  • Improved external link sharing
  • OneDrive – deeper integration into Windows 10
  • Improved large list support
  • New version of the SharePoint mobile app

Going one level deeper into the Office/SharePoint developer world, here’s some of the news that came out regarding:

Microsoft Graph (Build smarter apps with Office using the Microsoft Graph (Yina Arenas))

  • Generally Available
    • SharePoint Lists
    • File Versions
    • People API
    • App-only support for OneDrive
    • Access to Outlook shared calendars, contacts and mail folders
  • In Preview
    • Graph Extensions for Azure Functions
    • Outlook Categories
    • Outlook Rules
    • Outlook Email Headers
    • Outlook Rooms

Office Add-ins (What’s new and what’s coming for Outlook add-ins (Wey Love, Harshit Kumur))

  • Generally Available
    • Outlook Add-ins for Android
    • Single sign-on API (Web clients)
    • Auto-open task pane
  • Preview
    • Single sign-on API for Outlook
    • Centralized Deployment for Outlook Add-ins
    • Adaptive card support in Outlook (OWA)

SharePoint Framework and Patterns and Practices

  • SharePoint Framework became available on-prem with SharePoint Server Feature pack 2 (this was released a couple of weeks before Ignite)
  • SharePoint Framework Extensions – custom snippets on every page (aka delegate controls) context buttons/actions, customized field rendering
  • Reusable controls and Office Fabric Core

One of the more complex areas of doing modern Office development is authentication and authorization (especially when connection back into Office 365 services). This story is becoming a lot simpler if you can go exclusively through the Graph API. Vittorio Bertocci did a very entertaining session (Office development: Authentication demystified) that really shows you an on-rails experience for how to accomplish this from many different technologies and context. It is well worth a watch and has the potential to save you a lot of time and head scratching. This area of Office development has changed drastically over the last couple of years and there is a lot of conflicting information on the web and much of it is out of date.

 

cameron-dwyer-msignite-2017-yina-arenas-graph

Yina Arenas

 

cameron-dwyer-msignite-2017-vittorio-bertocci-azure-active-directory-auth

Vittorio Bertocci

 

cameron-dwyer-msignite-2017-wey-love-outlook-extensibility

Wey Love

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 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 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.

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!

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

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!

 

 

%d bloggers like this: