Simplify building apps in Microsoft Teams Part 1 – Overview and Concepts

10-20 min read(long)

Developing Apps and extensions for business processes in Microsoft Teams is easy and flexible. This provides a greater opportunity for Organisations to build and sustain solutions without worrying about additional hosting for integration or custom build applications. The bigger challenge lies in creating the apps and solutions in Teams. In this blog series, we will look at how to improve Team development using the SIMplE framework.

Since this is the first part of the series, we will try get familiar with the Microsoft Teams Dev landscape and some of the qualms with it. In this blog, we will briefly look at Microsoft Teams Dev landscape and some of the challenges around the Teams platform. In the next upcoming blogs, we will look at how to improve this using the framework I am proposing – SIMplE

Note: SIMplE framework is not coined or promoted by Microsoft. This is a concept I came up with by working with many agile projects for Microsoft Teams Development. Actually not only Microsoft Teams projects but other projects too can benefit from it. Feel free to use it as necessary in projects. Happy to gather feedback.

Microsoft Teams Dev concepts

Microsoft Teams varied solution landscape provides us with greater flexibility to create and provides solutions at multiple ways, but it brings up a new challenge for developers such as,

• What is the best option to implement a particular requirement – should it be a Bot or an App or a Tab?
• What is the easiest and faster way to implement the solutions? Since Teams is all about quicker and faster outputs right 🙂
• How to manage deployment and incremental releases in sync without overriding user experience
• How to create a scope of scalability and flexibility with any custom components

Hence in this blog series, we will look at how to simplify and build custom Microsoft Teams solutions in a faster and efficient way using the SIMplE Framework.

In this blog, lets’ start with an idea of the Teams development landscape and look at the broad level components in Microsoft Teams. Microsoft Teams provides a wide variety of components that we could extend for building any custom requirements. Below is the high level list of these components:

• Personal Apps / Tabs
• Channel Tabs
• Bots
• Messaging Extensions
• Connectors
• Task Modules
• External Hosted apps

The above options are spread out in Teams across various scopes as listed below

• Teams Channels
• Personal Chat
• Group Chat
• Personal Tabs

Below is a brief graphical representation of the Developer landscape in Teams. As it is evident in the image, the components are distributed across multiple layers and hence can be hosted and managed at each level.

Lets’ look in brief to understand what each of the scopes and components is in the scope of building a Microsoft Teams solution

Scopes

Team Channels

Team Channels are channels in Teams where we can host apps (tabs) and bots for custom solutions. We could also add message extensions that could work on a post or a conversation. As such, channels provide a great way to restrict context of discussion to a particular topic or requirement.

Some of the examples of custom components :

1. Custom Apps with third party integrations
2. Message extensions to search particular content
3. Bots to have 1:1 questions or to act on a particular requests such as booking a meeting on best available time on one’s calendar

Personal chat

Personal chats are 1:1 chats with any user in the company or guest. This is a great way to share content with users and allow to use custom apps/bots for applications
Some of the example of components :

1. Custom Apps with third party integrations with personal scope
2. Message extensions for searching content through a repository for both the users have access to.
3. Bots as 1:1 conversational agents to ask queries and support, for e.g. retriving user information from any system, FAQ etc.

Note: Adding bot to a personal chat with a another user makes the chat a group chat as the Bot is also treated as a user. So the best way to use bots in personal 1:1 chat is to use via Messaging extension, so could be restricted to chat messages only but giving up direct interactions

Group chats

Groups chats are chat with 1: many users. Similar to personal chats these have the same scope but the bots could act here as a user in the conversation instead of a passive agent.

Personal Tabs

Personal Tabs allow to provision a single page app or business purposed app in Microsoft teams that work on the current user context. These are same like Teams tab/apps but don’t need a Team to be hosted. This gives more of a personal context to the app. The benefit is that we could use Microsoft Teams to host apps that are specific to user personal use with deploying additional applications.
Some of the business requirements could be:

1. Custom business apps that can work with O365 sign on.
2. Dashboard apps that show business specific information
3. A page from your Intranet or web apps where the code is still hosted on your hosted platform, just displayed in Teams

So above scopes gives us an idea on where to use the components and how to restrict the usage of them.

Now let’s look at the components in more detail.

Components

Personal Apps / Tabs

Personal Apps are similar to Personal Tabs in functionality, so please refer to Personal Tabs above for more informaiton. Technically, personal apps are custom built single page applications hosted on your Teams environment.
To get an understanding on configuring Personal Apps using Microsoft graph, please check here
Below are few of the key features of Personal Apps

1. Personal Apps need a web application which could be hosted in Azure, AWS or any other hosting locations such as SharePoint. If the app is on an on-prem server, then we might have to take into account trusted locations and information exchange with the app in Teams environment
2. These need an Azure AD app if it needs user contextual information from teams or O365 environment
3. Will need an app package file either generated from App Studio or text editor with the details of the app. More details about will be in an upcoming blog.
4. Personal apps cannot be shared with other users
5. The layout could be full width of the screen except the top and left hand navigation as seen in the screenshot above
6. Uninstalling a personal app mayn’t remove the user cache so when installed again the user might be able to restore earlier information
7. Personal Tabs are not configurable
8. Access to install the app can be controlled through policies. We will look at these options in another upcoming blog.

Note: Some of the Microsoft Graph Apis to programmatically deploy apps are still in beta release, so they might change.

Channel Tabs

Apps, pages, and solutions could be hosted on the team channel tabs similar to Personal Apps. The context of the component is however related to the teams and channels it is on, so we could fetch the teams context and work on it. Architecturally the structure is same as in case of the personal apps just the scope is shifted to Teams channels.
To get an understanding on configuring tabs using Microsoft graph, please check here
Additional to the features of the personal apps, below are few more additions to channel tab apps:

1. The scope in Channel tabs is Teams context and can fetch channel and teams information
2. The tab can be shared with other users as links
3. One of the configurations for tab will need link to the content, website and uninstall links. This will help clean up any additional content related to the tab
4. The tabs can be configured dynamically with properties
5. Requires app package and deployment as Personal Apps. Please see above for more information

Bots

Bots are conversational AI interfaces which could be used to have 1:1 (personal chats) or 1: many (conversations or posts) chats and information sharing with an user. Bots could be dialog based and can be used with Azure Cognitive services to help with intelligence by language understanding, image processing or even with complex information processing. For more information on bot concepts, please check this blog.
Some of the key features of bots are:

1. Bots can be involved by mentioning their name
2. Bots can work in all scopes such as personal chat, group chat and teams channel
3. Bots can be auto triggered using proactive messaging.
4. Support for accepting files, images, speech and text based inputs from users
5. Bots can support adaptive cards
6. Bots need Azure hosting for the code and then an Teams app package to be installed for a team or organisation
7. Bots can be resued on other channels and not only teams

Messaging extensions

Messaging extensions are apps that can be invoked from the message/conversation menu while writing a message or replying them. Below is a quick screeshot of it. For e.g. an user can post a gif image or praise a colleague in a message put on teams, what could be better way to praise them 🙂

Some of the considerations for messaging extensions are as follows:

1. Allows to create content rich infomation on teams
2. Can be used to invoke bots and other components
3. Allows to interact an app in a conversation
4. Support for personal, group or team scope during messaging
5. It could be either based on a search text (Search) or from conversation context or menu (Action)
6. Support for configurable settings that could be set while installing a messaging extension
7. This also supports custom sign-in for connectors or third party services

Connectors

Connectors are external connections that will allow a team or channel to receive notifications, alerts or information from outside the teams environment. This is really helpful for keeping up-to-date with information for your users so that they don’t have to go find from other sources. Some of the examples of connectors could be responses to a form survey that was shared externally, share information from external systems, environment alerts, important notices that need to be broadcasted.

Some of the key considerations for Connectors are as follows:

1. Connectors support actionable messages so action can be taken back to the source if supported
2. Connectors also support rich cards so can be arranged or aligned to user requirements
3. Connectors can be set per channel

Task Modules

Task modules allow to create modal pop-up experience in Teams when using a bot, connector or messaging extension. Task modules allow to put information easily on a Teams channel or app in a modal dialog without need of a custom app.
Some of the key features of Task modules are:

1. Task modules can act as active forms and advanced than adaptive cards
2. Task modules are like tabs inside a pop-up window
3. The Task modules could be send via email or embed on a page and invoked via deep links
4. Task modules support color and icon options to brand it as per purpose

Conclusion

In this blog, we got a high level overview of the components and scopes provided by Microsoft Teams for development. As we saw, there are various options to create custom applications on Teams. In the upcoming blogs in this series we will look at ins and outs of the components and pains of building apps. And then, we will see how we could use the Simple Framework to simplify it.

Happy Coding !!!