Work Smarter Using Office 365 Connectors for Groups

Productivity and efficiency are often two of the most coined phrases we find ourselves talking and reading about when it comes to our working lives. They’re much discussed, much debated and often seen as areas which aren’t always tangible.

Now, while improved productivity could come from millions of dollars spent improving workflows, processes, infrastructure, or business systems, it doesn’t solely rely on cost. You can improve the smaller things you do in your daily life with the introduction of one new tool, a reviewed approach or renewed focus. One such area which won’t break the bank is Office 365 Connectors for Groups, but what are they?

What are Office 365 Connectors for Groups?

Quite simply, Office 365 Connectors for Groups allow you to bring real-time information and content into your Office 365 Groups based on events happening in 3rd party services. These third party services range from Bing, Twitter, Trello, GitHub, plus many more. Add to those custom services and applications and you start to see why Connectors are pretty cool.

So let’s take a practical example. Consider a marketing team which uses Office 365 Groups. By using Connectors, they can get real-time updates from Twitter or Bing News for example, fed straight into their respective group. It eliminates the need to search, which sounds simple, but, as we know, always takes up precious time and energy.

Once these latest updates – which can be linked to a particular hashtag – are delivered, the team can start a new discussion right away, attach files, or add an event to their group calendar.

Pretty neat, right?

You’re following the Microsoft UK account to find out when Future Decoded 2016 is being held, they release a post, Tweet and, before you know it, the Connector brings that useful information to you – meaning you don’t have to leave Office 365 to follow updates.

What we’re going to take a look at in this post is an in-depth look at Connectors and how to create a simple ASP.NET Web Application and connect it to an Office 365 Group.

A quick note before we get started: Office 365 Connectors for Groups is in developer preview, which means it should not be used in a full production environment.

As a result of the dev preview status, you may encounter some unexpected issues and behavior when working with Connectors, especially under different browsers. Microsoft will roll out updates on this, and some of them might break changes, so it’s recommended to pay attention to future release notes of Office 365 Connectors for Groups.

I recommend you test Office 365 Connectors with a separate browser tab opened with Office 365 tenant’s Outlook, otherwise you may face some authentication issues.

To be able to configure or build a Connector for Office 365 Group, we need to understand the main building blocks and mechanisms behind it:

• Who can create a connector?
• Built-in Connectors
• WebHooks and its role in Office 365 Connectors for Groups
• Office 365 Connector Card and its structure
• Office 365 Connect button

Who can create a Connector for Office 365 Groups?

Office 365 group members who have basic Power User skills can configure and use built-in Connectors. This doesn’t require any development effort. Once a member of the Group configures the Connector, it’ll be available for other members too. However, only the creator can modify it.

When it comes to building a Connector between an Office 365 Group and custom service or application, that doesn’t exist in the built-in list, development effort is then required. We’ll cover this in the blog.

Built-in Connector

Even though it’s still in developer preview, Office 365 released a list of very useful connectors. To be able to see the list, you can navigate to your Office 365 Group and add &EnableConnectorDevPreview=true to the URL of your group.

Then if you click on the “…” menu of your Group, you should see a “Connectors” menu item which will take you to the list of built-in connectors.

Here’s a screenshot of some already existing Connectors:

WebHooks and its role in Office 365 Connectors for Groups

Office 365 Connectors for Groups are all based on WebHooks. A WebHook is a well-known API concept in web development that allows you to connect services and applications to each other, and share event-driven real-time information between them. This is a pub/sub model, which means that services and applications can either publish information about the event on their side, or subscribe to get this information from other services, or both.

All the communication between services and applications is based on HTTP protocol and information posted from one service to another as a JSON payload.

Office 365 Connector acts as a receiver, which means it can subscribe and get notifications when something happens in the other service or application. So when one of the services posts the notification’s JSON payload, Office 365 Connectors handle and analyze it, after which a notification appears as an Office 365 Connector Card in Office 365 Group’s activity feed.

Office 365 Connector Card

A Connector Card is the visual representation of the information posted from other services and appears in a Group’s activity feed. It can be plain short text, or can be enhanced to include rich and formatted information. All this will be driven by JSON that will be posted by publisher service.

For more info, the Outlook team have provided this in-depth look at its structure.

Connector Card structure can be found in the below table, provided by the Microsoft Outlook team.

As you can see from above table, Connector Cards may consist of just a summary of information, or they can have rich formatted Sections and Actions.

Actions are a combination of name and URL. Actions will appear as buttons at the bottom of the card, allowing group members to perform some action against the information published to the group, e.g. taking a user to Trello’s task view.

Sections allow you to push formatted information to the Connector Card that will be published to Office 365 Group’s activity feed.

Office 365 Connect Button

The Office 365 Connect button is an easy approach to enable custom applications to connect to Office 365 Groups, and publish information when an event happens in the application.

This can be used in any web development technology; use of the .NET stack is not mandatory.

Building an Office 365 Connector using Asp.Net and Office 365 Connect button

So let’s get started. First thing, the prerequisites. You’ll need:

• Office 365 tenant
• Office 365 Group
• Microsoft Azure to host the Asp.Net web application
• Visual Studio

Building the solution:

1. Open Visual Studio and create a blank Asp.Net Web Application

2. Right click on the project name and choose ‘Add a new Item’. Choose to add a web form to the project and name it default.aspx.

3. Next, we need to add the Office 365 Connect button, which will allow users to connect and post to Office 365 Groups. To be able to do that, add the following code snippet to default.aspx and apply changes where necessary (see below).

There are three parameters mentioned above that should be replaced:

• app_name – Name of the application that you want to add Office 365 Connect button to.
• logo URL – this is the logo that will appear on the page where a user chooses which group to connect the application to. In this example, I have added a simple logo file called o365.png to my solution.
• callback_url – Address of the application where Office 365 Connector will return a Group’s publish url (webhook) to. This will be returned as a query string value.

4. Open default.aspx.cs, and implement the logic of what needs to be done when the webhook is retrieved.

First we need to get a webhook URL and Office 365 Group name:

5. Now, when we have the webhook url, we can post a Connector Card to Office 365 Groups using a simple HTTP post method with relevant JSON payload. In this example, I’ve also used the nugget package called RestSharp, which helps with executing HTTP calls from Asp.Net.

In real life projects, there should be a repository created for webhook URLs, so any time an event happens, it finds all webhook URLs that event information should be posted to.

6. The last step to complete is to enable SSL for the project, which can be done in Visual Studio’s property window:

If we publish the application to Azure and navigate to Azure’s web site URL using HTTPS in the address, then we’ll see the Office 365 Connect button.

Click on the ‘Connect to Office 365’ button and you’ll see a page to authenticate and choose the Office 365 Group to create a webhook for. There, you can see the logo and application name / URL we specified when we added the ‘Connect to Office 365 button’.

If I now choose the Marketing group and click on ‘Allow’, after a couple of seconds I’ll get two notifications in my Group’s conversation:

• Notification that the new webhook is configured
• Notification from ASP.NET application that we posted as HTTP method.

We also can see the Connector Card in the Marketing group:

The code used in this article can be enhanced to include custom actions and sections to be added to the Connector Card.

A cool way to improve your productivity

So there we are, in a few steps we can see the power and potential of Office 365 Group Connectors. By integrating and connecting Office 365 Groups with different systems and custom applications, you can become more efficient and more productive. A win for everyone. We look forward to seeing its full release sometime next year!