Part 1: Tailor your Teams experience

If you have had thoughts on custom apps for Teams to be able to give your end users a more tailored experience within Teams or with a launch of Teams you’d like to have all your adoption content right in the client so that end users quickly can train themselves when they work in Teams.
This article will guide you how to create your first custom app. Zero coding.

This example will show you how to embed SharePoint Communication sites as tabs in a Teams app.

Prerequisites

  • Teams “App Studio” app
  • SharePoint Communication site with content (adoption site or intranet)

Step 1 – Start App Studio

Lets open up “App Studio” and in the “Manifest editor” tab click on “Create a new app”.

Step 2 – App details

In the “App details” form we provide information regarding our app with information.
App details required (filled in with your information):

  • Short name (30 characters or less): HR dep
  • Full name: Human Resources department app
  • App ID: Generated by clicking on generate button
  • Package name: HRdepApp
  • Version: 1.0.0
  • Short description (max 80 characters): Adoptcollaboration.com’s HR department app.
  • Full description: Adoptcollaboration.com’s HR department app including tabs with HR specific resources.

Developer details required (filled in with your information):

  • Name: adoptcollaboration.com
  • Website: https://www.adoptcollaboration.com
  • Privacy statement: https://www.adoptcollaboration.com/privacy
  • Terms of use: https://www.adoptcollaboration.com/termsofuse

Branding:

We need to create two icons for the app.
First icon needs to be a full-color icon saved as png-picture in 192×192 pixels. Create this icon with a background color.
Second icon needs to be a “transparent outline” icon and should also be saved in the png format and the pixels should be 32×32. This icon should have transparent background since this picture is used in the Teams app navigation bar.
Last we can choose a Accent color that matches with our icon color.

Step 3 – App capabilities

Under capabilities we can add what type of capabilities our app should have, like tabs, bots, connectors or messaging extensions. In this guide we will choose tabs.

Under tabs we have two options, Team tab and personal tab.
Team tab is used if the app is installed as a tab in a team channel meanwhile personal tabs is used when a user opens the app itself.

Under add a personal tab click “Add”.

Personal tab details:

Name: HR Intranet
Entity ID: HRintranetTab1 (needs to be a unique tab id)
Content URL: https://<tenantname>.sharepoint.com/sites/HumanResourcesdepartment/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/HumanResourcesdepartment/
Website URL: https://<tenantname>.sharepoint.com/sites/HumanResourcesdepartment

After you have hit Save, let’s create another personal tab and use an external source.

Name: HR Role description
Entity ID: HRRoleDescTab1 (needs to be a unique tab id)
Content URL: https://en.wikipedia.org/wiki/Human_resources
Website URL: https://en.wikipedia.org/wiki/Human_resources

Now there is two personal tabs showing under Capabilities and tabs.

Step 4 – Finish app development

Now we will complete the app code with some finishing touches.

Language
If you would like your app to support multiple languages you can add them in the “Languages” section under “Finish”. You can easily download a template and from that understand how to add another language.
You should at least set the default language of the app you have created and a region.

Domains and permissions
In this section you will see domains that is used by your tabs.
Only thing we need to configure is SSO for this example apps intranet tab.

Single-Sign-On: https://<tenantname>.sharepoint.com

Test and distribute
Install the app only for you to try it out to see eventual errors in your app.
When you have installed the app you can try the app in all your clients, desktop, web and mobile.

previous arrow
next arrow
Slider

Distribute the app

In this section we can choose between two different types of distribution from a developer side. For internal apps you should choose download.

When we have chosen download we will receive a zip-package containing three files, the two png-pictures we created for the app icon and a json-file.

The json-file includes all code for our Teams app, we can see our personal tabs as staticTabs.

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",
    "manifestVersion": "1.6",
    "version": "1.0.0",
    "showLoadingIndicator": false,
    "id": "d76aa575-44b4-44bd-a8f0-ccd131e00c3f",
    "packageName": "HRdepApp",
    "developer": {
        "name": "adoptcollaboration.com",
        "websiteUrl": "https://www.adoptcollaboration.com",
        "privacyUrl": "https://www.adoptcollaboration.com/privacy",
        "termsOfUseUrl": "https://www.adoptcollaboration.com/termsofuse"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "HR dep",
        "full": "Human Resources department app"
    },
    "description": {
        "short": "Adoptcollaboration.com's HR department app.",
        "full": "Adoptcollaboration.com's HR department app including tabs with HR specific resources."
    },
    "accentColor": "#FFFFFF",
    "staticTabs": [
        {
            "entityId": "HRIntranetTab1",
            "name": "HR Intranet",
            "contentUrl": "https://<tenantname>.sharepoint.com/sites/HumanResourcesdepartment/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/HumanResourcesdepartment/",
            "websiteUrl": "https://<tenantname>.sharepoint.com/sites/HumanResourcesdepartment/",
            "scopes": [
                "personal"
            ]
        },
        {
            "entityId": "HRRoleDescTab1",
            "name": "HR Role description",
            "contentUrl": "https://en.wikipedia.org/wiki/Human_resources",
            "websiteUrl": "https://en.wikipedia.org/wiki/Human_resources",
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "<tenantname>.sharepoint.com",
        "en.wikipedia.org"
    ]
}

If we choose “Submit” our app will be submitted to the Teams app store catalogue and wait for approval by Microsoft. If the app is approved the app will be available for anyone outside your organisation.

In Part 2: Tailor your Teams experience I’ll explain how to distribute the app. The article will be released in the coming days.

Leave a Reply

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