Connect with us


How To Port Your Internet App To Microsoft Groups — Smashing Journal

About The Authors

Tomomi Imura (@girlie_mac) is an avid open internet expertise advocate and a full-stack engineer, who’s at present working as a Cloud Advocate at Microsoft in San …
Extra about
Tomomi & Daisy

In your listing of locations the place individuals may entry your internet app, Groups might be quantity “not-on-the-list”. Nevertheless it seems that making your app accessible the place your customers are already working has some profound advantages. On this article, we’ll have a look at how Groups makes internet apps a first-class citizen, and the way it lets you work together with these apps in fully new methods. 

Maybe you might be utilizing Microsoft Groups at work and need to construct an app that runs inside Groups. Or perhaps you’ve already printed an app on one other platform and need to achieve extra customers on Groups. On this article, we’ll see the right way to construct a brand new internet software in Groups, and the right way to combine an present one — with only a few traces of code.

You don’t want any prior expertise to get began. We’ll use bare-minimum HTML code and toolsets to construct a Groups tab (the only model of an app in Groups). When you’re strolling via this tutorial, if you wish to dive deeper, take a look at the on-demand movies from Be taught Collectively: Growing Apps for Groups. It seems that making your internet software accessible the place your customers are already working has some advantages, together with a attain of over 115 million day by day lively customers. Let’s dive in!

Microsoft Groups as a platform

Chances are you’ll be acquainted with Groups as a collaborative communication instrument, however as a developer, you could possibly additionally view it as a improvement platform. In truth, Groups supplies an alternate method to work together with and distribute your present internet functions. That is primarily as a result of the instrument has at all times been designed with the online in thoughts. One of many key advantages of integrating internet apps into Groups is offering a extra productive method for customers — your colleagues and Groups customers all over the world — to get the work executed.

Integration via tabs, embedded internet apps

Whereas there are various completely different paths to constructing and deploying Groups apps, one of many best is to combine your present internet apps with Groups via what is known as “tabs.” Tabs are principally embedded internet apps created utilizing HTML, TypeScript (or JavaScript), client-side frameworks similar to React, or any server-side framework similar to .NET.

Tabs assist you to floor content material in your app by primarily embedding an online web page in Groups utilizing <iframes>. The appliance was particularly designed with this functionality in thoughts, so you possibly can combine present internet apps to create customized experiences for your self, your group, and your app customers.

One helpful function about integrating your internet apps with Groups is which you can just about use the developer instruments you’re possible already acquainted with: Git, Node.js, npm, and Visible Studio Code. To broaden your apps with further capabilities, you should use specialised instruments such because the Groups Yeoman generator command line instrument or Groups Toolkit Visible Studio Code extension and the Microsoft Groups JavaScript consumer SDK. They assist you to retrieve further data and improve the content material you show in your Groups tab.

Construct a tab with an present code pattern

Let’s get began with the fundamentals. (If you wish to take it a step additional to really deploy your app, you possibly can bounce to the Be taught Collectively movies) to be taught extra.

To simplify the steps, let’s check out a code pattern, so as an alternative of the tooling outlined above, the one belongings you’ll want are:

On this article, we’re going to make use of a web-based IDE referred to as Glitch, which lets you host and run this mission rapidly within the browser, so that you don’t have to fret in regards to the tunneling or deployment at the moment. For the full-scale method from begin to end, you possibly can take a look at a complete tutorial on Microsoft Docs, which incorporates examples of a barely extra superior messaging extension or a bot.

Though Glitch is a good instrument for tutorial functions, this isn’t a scalable surroundings so, in actuality, you’ll additionally want a method to deploy and host your internet companies. In a nutshell, when you are creating, you’ll want to arrange a neighborhood improvement with a localhost tunneling, such because the third social gathering instrument ngrok, and for manufacturing, you’ll have to deploy your app to a cloud service supplier, for instance, Microsoft Azure Internet Companies.

Additionally, you should use on-premises infrastructure to host your internet companies, however they have to be publicly accessible (not behind a firewall). For this text, we’ll deal with the right way to make your internet app accessible on Groups, so let’s return to Glitch for now!

First, let’s go to the pattern code web page and remix the mission. Remixing is like forking a repo on GitHub, so it generates a replica of the mission for you, letting you modify the code nevertheless you need with out messing with the unique.

Remix the pattern code web page first. We’ll use it a beginning basis for our mission. (Giant preview)

After you have your personal mission repo, you’ll additionally routinely get your personal internet server URL. For instance, in case your generated mission identify is achieved-diligent-bell, your internet server URL could be After all, you possibly can customise the identify if you’d like.

Double-check your mission identify within the left higher nook. (Giant preview)

Internet companies up and operating, you’ll have to create an app bundle that may be distributed and put in in Groups. The app bundle to be put in to the Groups consumer comprises two icons and a JSON manifest file describe the metadata to your app, the extension factors your app is utilizing, and tips that could the companies powering these extension factors.

Create an app bundle

Now, you’ll need to create an app bundle to make your internet app accessible in Groups. The bundle contains:

📁 your-app-package
 └── 📄 manifest.json
 └── 🖼 shade.png (192x192)
 └── 🖼 define.png (32x32)

When creating your app bundle, you possibly can select to create it manually or use App Studio, which is a helpful app inside Groups that helps builders make Groups apps (sure, meta certainly). App Studio will information you thru the configuration of the app and create your app manifest routinely.

After you have put in the App Studio app in your Groups consumer, open the app. You may launch it by clicking the three dots within the left menu bar.

Launch the App Studio app by clicking the three dots within the left menu bar. (Giant preview)

Then, click on the Manifest Editor tab from the highest and choose Create a brand new app.

Proceed with the Manifest Editor within the prime navigation and choose ‘Create a brand new app’. (Giant preview)

You’ll have to fill out all of the required fields together with the app names, descriptions, and so forth.

Fill in some particulars, similar to app names and descriptions. (Giant preview)

Within the App URLs part, fill out your privateness and TOU internet pages. On this instance, we’re simply utilizing the placeholder URL,

Configure your private tab by deciding on Capabilities > Tabs from the left menu.

Now, you possibly can configure the capabilities of the tab. (Giant preview)

Click on the Add button underneath Add a private tab and enter the information. Underneath Content material URL, enter your webpage URL (on this case, it ought to be https://[your-project-name]

You’ll need so as to add your content material URL — the one we’ve outlined earlier. (Giant preview)

Within the index.html file has a number of traces of static HTML code:

<h1>Hey world! </h1>
<p>That is the bare-minimum setting for MS Groups Tabs.</p>

Be at liberty to tweak the content material within the index.html as you need. That is the content material to be displayed in your Groups consumer. Lastly, go to End > Check and distribute.

Now you need to be prepared to complete, take a look at and distribute. (Giant preview)

When you get any errors, you’ll have to return and repair them. In any other case, you possibly can proceed by clicking “Set up”. And voilà, now you could have your personal private tab!

Right here we go: our first Tab is able to go. (Giant preview)

Further options with Groups SDK

This code pattern solely comprises the naked minimal HTML code pattern to simply present you the right way to configure Groups to show your internet app in Tabs. However after all, your internet apps don’t must be static, and you’ll use internet frameworks similar to React if you want! (There are extra deep-dive examples utilizing React which you can dive into as effectively.)

Groups has its personal JavaScript SDK to supply further performance too, similar to loading a configuration popup for groups, get person’s locale information, and so forth.

One helpful instance is detecting the “theme” of a Groups consumer — Groups has three themes, gentle (default), darkish, and high-contrast mode. You’ll assume CSS ought to deal with the theming, however bear in mind, your internet app is displayed inside the Groups’ iframe, so that you would want to make use of the SDK to deal with the colour change.

You may embrace the JavaScript both from npm:

npm set up --save @microsoft/teams-js

Or embrace in your HTML:

<script src="https://statics.groups.cdn.workplace.web/sdk/v1.8.0/js/MicrosoftTeams.min.js"></script>

Now you possibly can detect the present theme with the getContext methodology. And that is how one can decide the physique textual content shade:


microsoftTeams.getContext((context) => {
  if(context.theme !== 'default') {"#fff";  }

The theme will be modified by a person after loading, so to detect the theme change occasion, add the next code snippet:

microsoftTeams.registerOnThemeChangeHandler((theme)=> {
  if(theme !== 'default') {"#fff";"inherit";
And so we’ve switched from a light-weight mode to darkish mode. (Giant preview)

Hopefully, this easy tutorial helped you to get began with the primary steps. When you’d prefer to proceed creating for Groups, you possibly can add extra capabilities similar to including Groups-native UI elements, search options, messaging extensions, and conversational bots, to construct extra interactive functions.

For a complete information utilizing the really helpful toolsets (Visible Studio Code, Yeoman Generator, and so forth.), take a look at Groups Developer Docs the place you possibly can be taught extra about tabs, messaging extensions, bots, webhooks, and the opposite capabilities that the Groups developer platform supplies.

Subsequent Steps

With only a few clicks, you possibly can combine your apps into Groups and create new experiences to your customers. And when you’ve developed apps and deployed them to Groups, you’ll have the potential of reaching a large viewers of customers that use Groups day by day.

You may get began constructing right this moment or be taught extra from Be taught Collectively: Growing Apps for Groups with on-demand movies and demos throughout constructing apps for Groups.

Smashing Editorial(vf, il)

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *