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

Upgrading from Angular 2 RC5 to RC7 – watch out for required NPM version

I skipped RC6 and made the jump straight from RC5 to RC7.

First step was to upgrade the versions of my dependencies (both the “dependencies” and “devDependencies”) in the package.json file. To get the magic recipe of what versions of each dependency were needed I referred back to the QuickStart guide on the Angular.io website.

{
"name": "myapp",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.7",
"@angular/compiler": "2.0.0-rc.7",
"@angular/compiler-cli": "0.6.1",
"@angular/core": "2.0.0-rc.7",
"@angular/forms": "2.0.0-rc.7",
"@angular/http": "2.0.0-rc.7",
"@angular/platform-browser": "2.0.0-rc.7",
"@angular/platform-browser-dynamic": "2.0.0-rc.7",
"@angular/router": "3.0.0-rc.3",
"@angular/upgrade": "2.0.0-rc.7",
"systemjs": "0.19.27",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.21",
"angular2-in-memory-web-api": "0.0.19",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.2.0",
"gulp": "3.9.1",
"lite-server": "^2.2.2",
"typescript": "^1.8.10",
"typings": "^1.3.2"
}
}

Running npm install with the upgraded dependencies was failing for me with the following error:

npm ERR! argv "c:\\Program Files (x86)\\nodejs\\node.exe" "c:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.4.3
npm ERR! npm v2.15.1
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package typescript@1.8.10 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer @angular/compiler-cli@0.6.1 wants typescript@^2.0.2
npm ERR! Please include the following file with any support request:
npm ERR! C:\Projects\….\npm-debug.log

From the Angular.io documentation https://angular.io/docs/ts/latest/guide/npm-packages.html it states than you must have node 4.x.x or higher, and npm 3.x.x or higher.

You can see from the error message above that I have node v4.4.3 (good) and npm v2.15.1 (bad).

So my fix was to upgrade npm to at least v3. I followed this information in this thread to upgrade npm to the latest available version by:

Opening cmd.exe as administrator
Navigating to C:\Program Files (x86)\nodejs
Running this command: npm install npm@latest

Running an npm install on the project now works after upgrading npm to v3.10.7. I now a warnings relating to some peer dependencies instead of the failures.

npm WARN optional Skipping failed optional dependency /lite-server/browser-sync/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN optional Skipping failed optional dependency /karma/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN @angular/compiler-cli@0.6.1 requires a peer of typescript@^2.0.2 but none was installed.

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

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

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

clip_image004

 

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

image

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

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

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

image

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

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

image

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

Fingers crossed.

Day zero resources for upgrading from Angular 2 RC4 to RC5

Angular 2 RC5 is now available!

For those looking to get their hands dirty from day 1, I’ve compiled some links of resources that are already available that helped me along the way.

 

What’s New

NgModule

The biggest change is the new NgModule which will impact the bootstrapping of your application and the way components reference directives and pipes.

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

 

RC5 Changelog

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09

 

Ahead of Time (AoT) Compiler

A more detailed look at the offline (AoT) compiler, lazy loading and other changes in RC5

http://angularjs.blogspot.com.au/2016/08/angular-2-rc5-ngmodules-lazy-loading.html

 

How to Upgrade

RC4 to RC5 Migration steps

https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

 

Update Dependencies

A quick way to update your dependencies from RC4 to RC5 is to take a look at the Angular.io sites’ Quick Start project which has already been updated to use RC5. Change your to be the same, run npm install and you are away.

https://angular.io/docs/ts/latest/quickstart.html

clip_image001

 

Follow the Examples

All of the Plunker examples from Angular.io website documentation seem to have been updated to use RC5 and show the new patterns and serve as good examples of how you should be doing things the RC5 way. For example, there have been some changes in routing which can be seen in this Plunker:

https://angular.io/resources/live-examples/toh-5/ts/plnkr.html

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

Solving issues Scaling Remote Desktop on High DPI screens (Surface Pro)

The high density (DPI or Dots Per Inch) of modern screens such as a Surface Pro can cause numerous issues when trying to use Remote Desktop Connection (RDC) to remotely connect to another machine. Add an external monitor to the mix and you’ll be pulling your hair out before long at all.

These are the typical issues you can expect to run into:

  • Can’t get the remote desktop to fill up the entire screen
  • Remote desktop is tiny and you can’t make it any bigger
  • Text and images in remote desktop are really small
  • Mouse cursor in remote desktop is very small or very large
  • Blurry text in remote desktop
  • Blurry images in remote desktop
  • Can’t move remote desktop between screens without issues (e.g. between Surface screen and external monitor)

windows-dpi-scaling-remote-desktop-cameron-dwyer-01-small-remote-desktop

Screenshot (click to enlarge): Remote Desktop Connection on Surface Pro 4, trying to maximize the remote desktop just pushes it to the top right corner of the Surface screen, the icons and text are so small you can hardly read them.

 

windows-dpi-scaling-remote-desktop-cameron-dwyer-2-small-remote-desktop-full-screen

Screenshot (click to enlarge): Remote Desktop Connection on Surface Pro 4, if you try to put the remote desktop into full screen mode, you end up with the same tiny text and images just centred on the Surface screen with a black background around it.

 

windows-dpi-scaling-remote-desktop-cameron-dwyer-03-blurry-text-large-fonts-small-cursor

Screenshot (click to enlarge): Remote Desktop Connection on Surface Pro 4 opened on an external monitor. Trying to show the Remote Desktop on an external monitor is often affected by; Blurry text/images/fonts (such as the Word ribbon), some really oversized text (such as the window title), tiny mouse cursor (or reverse, sometimes I get a massive cursor)

 

Almost all the symptoms above are due to differences in DPI and resolutions between:

  • The host machine
  • The remote machine session
  • The host screen and the external screen

I have transitioned across to using a Surface Pro 4 as my main work machine, I don’t do much development work directly on the Surface, rather I have a few virtual machines running on servers in the office and in Azure. As soon as I tried to RDC to these virtual machines I immediately started running into these problems.

The closest thing I have found to a silver bullet that addresses most of these issues in one hit is to stop using the Remote Desktop Connection client that comes built into Windows 10. Instead I now use a separate free product that Microsoft has available called Remote Desktop Connection Manager.

Remote Desktop Connection Manager has the added benefits of:

  • A navigation list of machines you regularly connect to make it super fast to open and switch between connections
  • Persistence of connection credentials
  • Lots more configuration options (compared to the standard RDC)

windows-dpi-scaling-remote-desktop-cameron-dwyer-04-desktop-connection-manager

Screenshot (click to enlarge): Remote Desktop Connection Manager layout

 

windows-dpi-scaling-remote-desktop-cameron-dwyer-05-remote-desktop-scaled-correctly

Screenshot (click to enlarge): Connecting using Remote Desktop Connection Manager I now get the remote desktop completely filling up my Surface screen, and at a resolution and DPI that is useable. Text, images and cursor all appear crisp and as expected! Extending out to an external monitor is much more successful than with the standard RDC. Again in full screen mode, the remote desktop takes up the entire screen and scaling happens without leaving you with blurry text, images and cursor.

 

windows-dpi-scaling-remote-desktop-cameron-dwyer-06-session-full-screen

Screenshot (click to enlarge): Remote Desktop Connection Manager full screen option is a bit hidden away under the Session menu

 

windows-dpi-scaling-remote-desktop-cameron-dwyer-07-display-options

Screenshot (click to enlarge): Remote Desktop Connection Manager also provides a much richer set of configuration options regarding the display if it doesn’t just work for you immediately as well.

 

One important thing to note is that some scaling of the remote desktop occurs when the remote session is established. This only happens when you disconnect and reconnect. So if you have a session open on one of your screens (e.g. Surface screen) and then move that across to an external monitor it may not fill up the whole external screen when you try to go full screen. If you disconnect and reconnect while on the external monitor you will now be able to go full screen on the external monitor. Remote Desktop Connection Manager has a quick way of doing this (just right-click and select Reconnect server).

 

windows-dpi-scaling-remote-desktop-cameron-dwyer-08-reconnect-session

Screenshot: Reconnect server option

 

The handling of DPI and associated scaling behaviour is different based on the version of the operating system. I have been using Remote Desktop Connection Manager from my Windows 10 Surface Pro 4 connecting to a mix of Windows Server 2012 and Windows 10 virtual machines. You may not have as much success if you add other operating system versions into the mix.

While it’s not perfect (I still find problems now and then and taking screenshot of remote connections usually come out smaller or larger than you would expect), its a lot better than just using the standard remote desktop connection client built into Windows.

 

Further reading:

https://blogs.msdn.microsoft.com/rds/2013/12/16/resolution-and-scaling-level-updates-in-rdp-8-1/

https://blogs.msdn.microsoft.com/rds/2015/06/29/zoom-windows-10-remote-desktop-connections-to-older-versions-of-windows-to-improve-your-experience-on-a-hi-dpi-client-display/

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.

 

The modern digital workplace must focus on the user

modern-digital-workplace-cameron-dwyer

I was recently interviewed by the team at LiveTiles to get my thoughts on the modern digital workplace.

  • What does the digital workplace mean to me?
  • What do I see as the benefits and challenges of the digital workplace?
  • What trends have I seen and what do I think the future holds for the digital workplace?

Read the answers to these questions and more in the full article What to expect from the modern workplace.

The problem now isn’t digitizing information, the problem is how to get the right information to the right people at the right time [with] the right tool.”

 

%d bloggers like this: