Personal custom Teams app -There was a problem with reaching this app

1
votes

I have created a custom teams Tab app using Teams App studio. It seems to have compiled correctly, but when installing into a team it fails with 'There was a problem with reaching this app'. I have tested on both the native and web teams client. I have also tested that the page being requested loads as an iframe in a normal web page. Please view json manifest below (obviously domain is an example) to see if there are any issues.

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",
    "manifestVersion": "1.6",
    "version": "1.0.0",
    "showLoadingIndicator": true,
    "id": "2a95e213-a4be-40e3-8777-cb800ebf7001",
    "packageName": "uk.ac.mydomain.amarapp",
    "developer": {
        "name": "Lloyd T",
        "websiteUrl": "https://mydomain.ac.uk",
        "privacyUrl": "https://emer.mydomain.ac.uk",
        "termsOfUseUrl": "https://emer.mydomain.ac.uk"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "AMAR App",
        "full": "AMAR app for Teams"
    },
    "description": {
        "short": "AMAR app for Teams",
        "full": "Access Amar within Teams"
    },
    "accentColor": "#8A038A",
    "staticTabs": [
        {
            "entityId": "0d3ffcd6-2068-22cd-b613-6bc1ffbf3fc5",
            "name": "AMAR App",
            "contentUrl": "https://amar.mydomain.ac.uk/absence/new",
            "websiteUrl": "https://amar.mydomain.ac.uk/",
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "amar.mydomain.ac.uk"
    ] }

enter image description here

2
microsoft-teams
Are you able to install the app? Could you please share a screenshot of the error message you see? – Gousia Begum
I am able to install the app. – Lloydie.t
Image added to original post – Lloydie.t
Where is your page hosted? Could you please try re-installing your app? – Gousia Begum
Could you please try removing the showLoadingindicator flag and re-upload the manifest? – Gousia Begum

2 Answers

1
votes

To my embrassment. I did not follow the guide properly and forgot to inculde MicrosoftTeams.min.js in the web page. Once included worked fine.

1
votes

Change

"showLoadingIndicator": true,

To

"showLoadingIndicator": false,

From the schema https://developer.microsoft.com/en-us/json-schemas/teams/v1.7/MicrosoftTeams.schema.json

A value indicating whether or not show loading indicator when app/tab is loading

if you keep it "true" you have to tell Teams in your code that your app is loaded in order to hide the indicator