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

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!

How to avoid errors installing npm packages globally in Visual Studio Code

I like to use the Integrated Terminal Window inside Visual Studio Code, just because it’s there and it runs commands scoped to the project directory I’m in. I find it faster and more convenient than opening up another command windows or nodejs command window and then having to set the current directory to my project folder.

A common issue I hit is when installing npm packages globally; I get errors trying to do it from the Integrated Terminal Window.

 

Take the following npm command that tries to install the bower package globally:

npm install -g bower

 

vscode-npm-01-integrated-terminal-window-cameron-dwyer

 

Running the command throws the following error:

npm ERR! Error: EPERM: operation not permitted, mkdir 'C:\Program Files (x86)\nodejs\node_modules\.staging'

npm ERR! at Error (native)

npm ERR! { [Error: EPERM: operation not permitted, mkdir 'C:\Program Files (x86)\nodejs\node_modules\.staging']

npm ERR! errno: -4048,

npm ERR! code: 'EPERM',

npm ERR! syscall: 'mkdir',

npm ERR! path: 'C:\\Program Files (x86)\\nodejs\\node_modules\\.staging' }

This is because when you install npm packages globally they go into the nodesjs\node_modules directory in program files (rather than in the project folder where you are writing your code). Writing to folders under Program Files requires elevated privileges . To get around this using the Integrated Terminal window in Visual Studio Code just make sure when you start Visual Studio Code that you run as an Administrator.

vscode-npm-02-run-as-admin-cameron-dwyer

 

Further Reading

https://www.cnet.com/au/how-to/always-run-a-program-in-administrator-mode-in-windows-10/

http://windowsreport.com/make-files-apps-run-as-admin-windows-10/

http://winaero.com/blog/how-to-run-an-app-as-administrator-in-windows-10/

 

%d bloggers like this: