Blog Archives
Global Office 365 Developer Bootcamp – Sydney 2018
I attended my first Office Developer Bootcamp on Friday last week. I wasn’t 100% sure of what to expect and had a little extra pressure as I was also presenting on Office Add-in development and assisting with the labs.
I ended up having a really fun day. Lots of great conversations had during the bootcamp at Microsoft office at North Ryde. I was a little surprised that the questions weren’t all technical and I fielded a few questions more related to the business side of commercialising add-ins. Thanks to all those that attended and to the great people behind organising the day (Ashish, Amr, John)
Here’s my slide deck from the ‘Developing Office Add-ins‘ talk.
Wonder what a Microsoft 1:1 hackathon looks like? OnePlace Solutions Teams/Graph Engagement Experience
I was fortunate enough to be involved in a 1:1 hack engagement with Microsoft recently where OnePlace Solutions hosted some eager Microsoft engineers for a week long engagement. The intention was to see how we could harness some of Microsoft’s new Teams extensibility options and the Graph API, and for Microsoft to identify limitations or areas for improvement.
The format of the event:
- brainstorming possible ideas ahead of the event itself
- discussion and selection of a few possible ideas
- splitting up into teams and scoping what were would try to achieve within the scope of the hack
- working in a compressed scrum process (daily stand-ups, task refinement and retros)
- present to a wider audience on the last day of the hack to show what had been achieved and the business benefit
It was amazing to see how quickly the Microsoft engineers were absorbed into our development team, brought up to speed with our existing code-base, and starting to deliver functionality.
The real takeaway and reason for writing this article it just to let everyone know what an awesome opportunity these engagements are from Microsoft, a bit of what you can expect and that I highly recommend getting involved if the opportunity arises.
What did I see as the biggest benefits to our business of doing this hack with Microsoft?
The tips, tricks and work pattern knowledge sharing that occurred only comes when you truly try to work together on a project and aren’t just academically sharing knowledge. We all work in different ways and by running the hack almost as a true project (in a condensed form) there is a lot more than just the coding that is being discussed. VSTS, scoping, work item tracking, design white-boarding sessions, daily stand ups, retros, git source control, review of pull requests. All this is outside of the actual coding and using the technology being hacked on, but it is also a critical piece of developing in an efficient, scalable and measurable way.
Accelerated and focused learning on new technologies. The speed of getting across where a technology like Teams extensibility is up to, what’s possible when applying to problems we are trying to solve, and that hard first mile of understanding the frameworks, dependencies, and tooling to get the first hello world skeleton running.
Outside of the technology it’s a great opportunity to meet and build relationships with people who share a similar passion and spend a lot of their time working to solve similar problems. At OnePlace Solutions we are a passionate bunch of technologists that enjoy working in a social and supportive environment – from what I’ve experienced the hack is a perfect match for the way we work, with Microsoft bringing the same mindset, energy and support to the hack. We spent as much time laughing and discussing topics outside of technology as we did on it. At the end of the day we are social creatures and I found the hack was a perfect environment that bought people together with a desire to want to work together on a common goal, to challenge and push each other to do more in a fun and supportive way, and have a good laugh at the same time. Having access to global Microsoft resources to get definitive answers quickly, removed the amount of wasted time and frustration which allowed productivity, enthusiasm and energy levels to remain high.
We dedicate an amount of time each sprint to R&D, which usually involves educating ourselves in what is possible with new technologies and APIs and often going as far as prototyping code to see what’s possible and where the limitations are. It’s hard to imagine a better return on investment than spending this R&D time with Microsoft in the format of a 1:1 hack.
So a huge thank you to the Microsoft engineers, we had a great time and my advice to anyone thinking of getting involved with these engagements is that they can have great value to your team.
Primer for Modern Office Development – start your journey here
Lets start with a little bit of history, the year was 2008, Windows PCs and Microsoft Office had been entrenched throughout organizations around the globe. We saved all our files on a network drive (if we were smart), or SharePoint if we were really smart and had a dedicated engineer that could keep up with patching it. Sales of Apple Mac had been increasing since the turn of the century and Microsoft had built a version of Office specifically for the Mac and had it running there since 1998. The development story for Microsoft Office had almost exclusively been a Windows only experience, it was quite a rich experience with Visual Studio Extensions for Office allowing Office add-ins to be written in managed code. But I see 2008 as a pivotal year, the landscape of IT usage was about to change in a very disruptive way… Apple had just launched the first version of the iPhone.
In the decade since this moment we have seen a shift towards an always connected, productive on any device world. Microsoft Office was changing dramatically to keep pace with the demands of this changing world. Office was already on the Mac, but fast forward to today (2018) and we have:
- Office for Windows – the original and still a powerhouse with all the bells and whistles
- Office for Mac – a very mature product suite that doesn’t lag far behind the Windows offering
- Office Online – any device with a web browser can not only read but also have a rich editing experience
- Office for iOS – native applications for iPhone and iPad
- Office for Android – native applications for Android devices
As you can see in those 10 years a lot had changed, and we don’t even know where our files are physically stored anymore, they are just up there, somewhere, in the Office 365 cloud.
That lead to 2 radical shifts for Office development:
- The development technology for extending Office needs to run everywhere that Office does. The one run-time technology that is consistent across all of these devices is the web browser. This meant the shift to web technologies and developing web application (HTML5, JavaScript, CSS). Sure each web browser has it’s own idiosyncrasies but the web development world had been working on ways around this for many years and we now have mature frameworks for building web based applications.
- We have an opportunity we never had before – users data stored in the Office 365 cloud (with a shiny new API to get to it – the Microsoft Graph API)
So when we talk about Office Development we talk about 2 distinct types of development:
- Extending the user experience within the Office applications (i.e. an add-in)
- A standalone application that accesses user data stored in the Office 365 cloud.
Where to from here?
The best starting place within the Microsoft documentation for developing Office add-ins is
https://docs.microsoft.com/en-us/office/dev/add-ins/
and for accessing user data via the Microsoft Graph
https://developer.microsoft.com/en-us/graph/docs/concepts/overview
Further reading
Office Dev Center
https://developer.microsoft.com/en-us/office
History of Microsoft Office
https://en.wikipedia.org/wiki/History_of_Microsoft_Office
History of Visual Studio Tools for Office
https://en.wikipedia.org/wiki/Visual_Studio_Tools_for_Office
History of Office Online
https://en.wikipedia.org/wiki/Office_Online
How to edit Markdown files in VSCode with live preview of changes
Visual Studio Code (VSCode) is a great tool for editing Markdown files. It’s not immediately obvious that VSCode comes out of the box with the capability to preview Markdown files and even provide a side by side live preview view so you can see the result as you are modifying the file.
In VSCode opening the file will provide the standard file editing experience (as shown on the right hand side of the image below). Without having to remember VSCode keyboard shortcuts, you can simply right click the markdown file and select Open Preview.
This will result in the preview of the markdown file being opened in a new tab.
We can go one step further using the Split Editor button in VSCode to get both the editing experience and preview side by side.
You now have a live preview, any changes made in the editor (left side) are immediately reflected in the preview (right side)
How to clear the Microsoft Outlook for Mac web browser cache and cookies
When 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
- Find the Containers folder under Library and expand it
- You should be able to find a folder called com.Microsoft.OsfWebHost
- 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)
Restart Outlook and you should now have no cached files being used.
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)
And here are all the properties of that same object using the Typescript definition file:
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.
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.
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.
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.
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:
