Skip to content
Kunal Kankariya
  • Home
  • About
Search

Home » Configure a Teams App with Power Apps and SharePoint as two separate tabs

Configure Teams App

Configure a Teams App with Power Apps and SharePoint as two separate tabs

1 Comment / Microsoft Teams, Power Apps, SharePoint / October 21, 2020 November 12, 2020

I was recently developing a Microsoft Teams application and ran into some issues during implementation where the requirement was to configure a teams app that contained, a Power Apps application and a modern SharePoint page as two separate tabs in the same app.

At the face of it, this seemed like a very easy to implement app and could be achieved by modifying the manifest and include two static tabs, only to realize that this didn’t seem so simple as I thought it was.

The challenge was authentication.

We know that a SharePoint page can be added as a Teams tab by modifying the manifest and adding the following to the manifest to achieve SSO

Content URL – https://[domainUrl]/_layouts/15/teamslogon.aspx?SPFX=true&dest=[pageUrl]

Valid Domains – sample.onmicrosoft.com

Web Application Info object with two attributes – id : 00000003-0000-0ff1-ce00-000000000000 and  resource: [domainUrl]

The complete manifest would look like this

{
    "$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": "7ad6f150-cba8-4c39-81ce-c4da8e4100d9",
    "packageName": "com.mytenant.portal.app",
    "developer": {
        "name": "Test App",
        "websiteUrl": "https://www.mytenant.com",
        "privacyUrl": "https://www.mytenant.com/privacy",
        "termsOfUseUrl": "https://www.mytenant.com/temsofuse"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "Portal App",
        "full": "Our modern portal"
    },
    "description": {
        "short": "My first portal application",
        "full": "My awesome portal application to embed modern SharePoint to our Teams setup"
    },
    "accentColor": "#FFFFFF",
    "staticTabs": [
        {
            "entityId": "19991",
            "name": "Portal",
            "contentUrl": "https://mytenant.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspx",
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "mytenant.sharepoint.com"
    ],
    "webApplicationInfo": {
        "id": "00000003-0000-0ff1-ce00-000000000000",
        "resource": "https://mytenant.sharepoint.com"
    }
} 

If we wanted to add a Power Apps application as another tab in the same app, we would have to modify the manifest to include another static tab and include the following json to the existing manifest

{
      "entityId": "c93d8c62-65b4-45b1-ad40-9bad889d315d",
      "name": "Move Mail",
      "contentUrl": "https://apps.powerapps.com/play/c93d8c62-65b4-45b1-ad40-9bad889d315d?tenantId=aabad8dd-1b74-4873-8416-847c79c39b62&source=teamstab&locale={locale}&channelId={channelId}&channelType={channelType}&chatId={chatId}&groupId={groupId}&hostClientType={hostClientType}&isFullScreen={isFullScreen}&subEntityId={subEntityId}&teamId={teamId}&teamType={teamType}&theme={theme}&userTeamRole={userTeamRole}",
      "websiteUrl": "https://apps.powerapps.com/play/c93d8c62-65b4-45b1-ad40-9bad889d315d?tenantId=aabad8dd-1b74-4873-8416-847c79c39b62",
      "scopes": ["personal"]
}

"validDomains": [ "mytenant.sharepoint.com","*.powerapps.com"]


"webApplicationInfo":{
    "id": "9362bc14-3e81-4ef9-8b77-f1c40afe68e0",
    "resource": "https://apps.powerapps.com"
  } 

Wait, how am I supposed to add another entry to the webApplicationInfo object as I already have one? The webApplicationInfo object isn’t an array, so how is anyone supposed to achieve seamless authentication across a Power Apps app and a SharePoint page in one Teams app.

I reached a dead end here.

The only workaround I had was to add the Power Apps app to a SharePoint page using the Power Apps WebPart and then surface the SharePoint page as a static tab in the Teams App using the method above.

Do you know of any other way that this issue can be resolved? If yes, please mention it in the comments section of this post. I will be happy to learn!

Popular Posts
  • Use msal-browser in SPFx solutions to access Graph API
  • Power Apps – Group vs Container Control
  • msal-browser – BrowserAuthError: monitor_window_timeout
  • Connect to a Secure Web API Using Power Apps Custom Connector – Part 1
  • Create SharePoint List From Excel

close

Oh hi there! 👋
It’s nice to meet you.

Subscribe to receive awesome content in your inbox, every week.

I don’t spam! Read my privacy policy for more info.

Thank you! Check your inbox or spam folder to confirm your subscription.

Spread the love

Related Posts:

  • Power Virtual Agent - Build and publish bot to your website
    Power Virtual Agent - Build and publish bot to your website
  • Create SharePoint List From Excel
    Create SharePoint List From Excel
  • Community plan - Power Apps
    Community plan - Power Apps
  • Connect to a Secure Web API Using Power Apps Custom Connector - Part 1
    Connect to a Secure Web API Using Power Apps Custom…
  • Connect To A Secure Web API Using Power Apps Custom Connector – Part 2
    Connect To A Secure Web API Using Power Apps Custom…
  • Power Apps - Group vs Container Control
    Power Apps - Group vs Container Control

Post navigation

← Previous Post
Next Post →

1 thought on “Configure a Teams App with Power Apps and SharePoint as two separate tabs”

  1. Naveen
    October 6, 2022 at 11:28 am

    i have tried so many combinations and i succussed for SharePoint page and Power apps but the SP page has Spfx web part we access the page but without webpart.

    For power apps add

    Content URL – “https://web.powerapps.com/webplayer/iframeapp?source=teamstab&appId=/providers/Microsoft.PowerApps/apps/your_Power_App_ID”

    Valid Domains – “apps.powerapps.com”,
    “web.powerapps.com”,
    “*.login.microsoftonline.com”,
    “microsoft.sharepoint.com”,
    “microsoft.sharepoint-df.com”,
    “spoppe-a.akamaihd.net”,
    “spoprod-a.akamaihd.net”,
    “resourceseng.blob.core.windows.net”,
    “msft.spoppe.com”

    “webApplicationInfo”: {
    “id”: “475226c6-020e-4fb2-8a90-7a972cbfc1d4”,
    “resource”: “https://service.powerapps.com/”
    }

    Reply

Leave a Comment Cancel Reply

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

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

Connect

Categories

  • .Net (2)
  • Authentication (2)
  • Azure Logic Apps (1)
  • Information Governance (1)
  • Information Protection (3)
  • Microsoft Teams (1)
  • msal (2)
  • Power Apps (6)
  • Power Automate (1)
  • Power Virtual Agent (3)
  • SharePoint (5)

Tag Cloud

AAD ALM Azure Azure App Azure DevOps Azure Logic Apps Bot browserautherror Build Tools canvas app CDS Computer Vision container controls Custom Connector Excel group Information governance Information protection Lists m365 microsoft 365 Microsoft Information Protection MIP msal msal-broswer MS Teams oAuth Office 365 Plans Power Apps PowerApps Power Automate Power Platform Power Virtual Agent Pricing PVA Secure security & compliance Sensitivity Labels SharePoint Spfx Web API webinar webparts
Copyright © 2023 Kunal Kankariya
  • Privacy Policy
  • Home
  • About