Monthly Archives: July 2018

Wonder what a Microsoft 1:1 hackathon looks like? OnePlace Solutions Teams/Graph Engagement Experience

microsoft-teams-logo.jpg

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.

How to Inspect Dynamic HTML Elements (that keep disappearing!) in Chrome

I still find styling HTML elements difficult at times, trying to figure out where the styling is being inherited from and exactly which elements I need to apply styles to. The Developer Tools in Chrome go a long way to assisting with this. For this tip I’ll assume you are familiar with Chrome Developer Tools for inspecting HTML elements and CSS styles.

What I wanted to focus on was those frustrating elements that only exist on the page (in the Document Object Model) while a certain element has the “focus”. This often happens with navigation menu options or dropdown controls, where you have the menu options or dropdown options visible on the screen but as soon as you click something in Developer Tools (to go exploring), the menu options or dropdown options disappear and don’t exist on the page anymore! This is usually because an event such as the blur event is fired when you click outside the element and this removes the elements from the page that you are trying to inspect.

This tip might not work in all scenarios but it has gotten me out of trouble on a few occasions.

Here’s an example scenario. On the left side of the screenshots you can see the OnePlaceMail (Outlook Add-in) displayed in Chrome, on the right hand side is Developer Tools inspector window. I’m using a 3rd party control for my “Content Type” dropdown (it’s the Kendo UI for Angular library)

When collapsed it’s easy to inspect the kendo-dropdownlist element (that holds the selected value of ‘Document’. At this stage the menu options that will appear when I click on the dropdown don’t even exist in the DOM.

css-dynamic-inspection-chrome-cameron-dwyer-01-kendo-dropdown

When I do click to expand the dropdown, the image below shows that a new kendo-popup element appears in the DOM (and it contains sub-elements to represent each of the options). But the problem is if we now try to use the Developer Tools and expand that kendo-popup element to see those sub-elements then the dropdown collapses (because I’ve click off it) and the kendo-popup element is removed from the DOM and we’re left with nothing to inspect!

css-dynamic-inspection-chrome-cameron-dwyer-03-kendo-dropdown-expanded

So to work around this in the Developer Tools inspector, right click on the element that is driving the elements to appear/disappear (kendo-dropdownlist) and select Break on | subtree modifications.

css-dynamic-inspection-chrome-cameron-dwyer-06-break-on-subtree-modifications

Now go to the web page and click on the dropdown to show the dropdown options. They are shown (elements added to the DOM) but the Developer Tools inspector now goes into a paused state. The web page is effectively frozen.

css-dynamic-inspection-chrome-cameron-dwyer-07-break-on-subtree-modifications-paused

While in this paused state, you can now return to the elements tab and we can expand and explore that pesky kendo-popup element that was dynamically created. This time however the dropdown won’t collapse itself as we click around in the inspector.

css-dynamic-inspection-chrome-cameron-dwyer-08-break-on-subtree-modifications-paused-stays-expanded

I hope you find this tip useful

 

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:

  1. 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.
  2. 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:

  1. Extending the user experience within the Office applications (i.e. an add-in)
  2. 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

 

 

%d bloggers like this: