Integrating Existing Applications into Teams as an App not as Tab

More and more organizations in Commercial, Health Care, Education, Government, and other verticals have been implementing Teams. It is the hub for collaboration, for classroom engagement, for health care communication, and so much more. The month over month increase in MAU (Monthly Active Users) is proof that people are seeing and experiencing the value of Microsoft Teams.  Out of the box, Teams provides a massive value through features like conversations, file collaboration, video conferencing, and so much more. Microsoft has been increasing the functionality with vertical-specific value drivers like assignments and classroom teams in Education.

But the value of Teams driven is beyond the primary features of Teams. The second level apps like Planner, Flow, PowerBI, and more have increased the driven Teams further and more rooted in organizations by allowing Teams to be extended. The extensibility does not stop at Microsoft designed tools like Office 365 application. You can create your apps and add them as a tab in your teams using e.g. SharePoint Framework. You can view Web Applications in a separate tab in your favorite Team and/or channel and if you want to even in your private chat.

But what if your application you want to use doesn’t really feel like an application you can attach to a Team? Or maybe you want to give it a more prominent role within your Teams deployment. An organization might have built out a full onboarding guide for new employees. HR decided that since Teams in the first application, the ‘Getting Started’ had to be easy to access when new employees needed information. HR had spent a lot of time and $ in creating a successful onboarding guide, so there was little to no desire to redo the guide fully integrated into Teams. Even with no coding, the extensibility of Teams was powerful and intuitive enough to make the following setup a reality.

The organization has now a top button ‘Getting Started’ that links a new employee onboarding site containing all the information that a new employee might need. All the information is available from within Teams and available to people who need it i.e., new employees.

How can you make this available? We are going to build a Teams Wrapper around the existing Web Application. First of all, make sure that sideloading is active. Depending on where you are in the migration process of the Teams Admin portal you might need to do it either under Teams > Admin or if you still are on the old portal under Admin > Settings > Services and add-ins > Microsoft Teams > Apps > External Apps

  1. Go to the Teams Store
  2. Install(or open in case you installed the application) App Studio
  3. Click Open  next to the App option
  4. Click on ManifestEditor
  5. Create a new App
  6. Fill in all the App Details
  7. Click on Tabs under Capabilities
  8. Click Add under Personal Tab
  9. Fill in the Name and choose a new unique Entity ID
  10. Fill in the content URL and Website URL which is the URL of the application you want to wrap. Make sure you use the following construction for the “Content Url” https:// <tenantname><path to website>
  11. Make sure the valid domain section contains your root SPO URL
  12. Add the following Web app single sign-on. Use the same AppID. This is the App ID for SPO Addin “00000003-0000-0ff1-ce00-000000000000”Addin.png
  13. Save the application
  14. Click Test and distribute
  15. Install the App to test the application.
  16. Now the app is available under the ellipsis.

If you want to make the app available on the left menu in a higher position than what it is now, you need to use an app policy for this. This can be found under the Team admin section, app policy and add a pinned application. Assign the policy to a user and wait for 24h.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: