0

I've already develop one custom Microsoft Teams app that correctly works on Desktop, but it doesn't work on mobile app. It only display the page about the debug.

This is the tab into mobile app:

enter image description here

how can I solve it? Thanks

This is the tab into desktop app:

enter image description here

This is one part of the code of my home tab for my personal app:

class Tab extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        user: null,
        loading: true,
        isLogged: false,
        error: null,
        layout: true
    }
}

componentDidMount() {
    const params = new URLSearchParams(this.props.location.search);
    let teamsUser = {
        Tid: params.get('tid'),
        Aaid: params.get('aaId')
    }

    getUser(teamsUser).then((userResponse) => {
        this.setState({
            user: userResponse,
            loading: false,
            isLogged: true
        })
    }).catch((error) => {
        logger.warn(JSON.stringify(error));
        this.setState({
            error: error,
            loading: false
        })
    });
}

setLogged = (user) => {
    this.setState({
        user: user,
        isLogged: true,
        loading: false
    })
}

render() {
    let content;

    const { user, loading, isLogged, error } = this.state;

    if (loading) {
        content = <Loading></Loading>
    } else if (error) {
        throw Error(error)
    }
    else if (isLogged) {
        content = <Catalogue user={user}></Catalogue>
    } else {
        content = <UserLogin setLogged={this.setLogged}></UserLogin>
    }

    return (
        <Layout>
            {content}
        </Layout>
    );
}
}
export default Tab

and this is my manifest where I put the url with the tid and aaid:

        {
      "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
      "manifestVersion": "1.9",
      "version": "1.0.0",
      "id": "86af4197-14c8-4439-a440-3d33b4567f54",
      "packageName": "com.microsoft.teams.extension",
      "developer": {
        "name": "Teams App, Inc.",
        "websiteUrl": "https://localhost:3000",
        "privacyUrl": "https://localhost:3000/privacy",
        "termsOfUseUrl": "https://localhost:3000/termsofuse"
      },
      "icons": {
        "color": "color.png",
        "outline": "outline.png"
      },
      "name": {
        "short": "AppLocal",
        "full": ""
      },
      "description": {
        "short": "Short description for Personal App.",
        "full": "Full description of Personal App."
      },
      "accentColor": "#FFFFFF",
      "staticTabs": [
        {
          "entityId": "index",
          "name": "Catalogue",
          "contentUrl": "https://localhost:3000/catalogue?tid={tid}&aaId={userObjectId}",
          "websiteUrl": "https://localhost:3000/catalogue",
          "scopes": [
            "personal"
          ]
        },
        {
          "entityId": "live",
          "name": "Live",
          "contentUrl": "https://localhost:3000/live?tid={tid}&aaId={userObjectId}",
          "websiteUrl": "https://localhost:3000/live",
          "scopes": [
            "personal"
          ]
        },
        {
          "entityId": "about",
          "scopes": [
            "personal"
          ]
        }
      ],
      "permissions": [
        "identity",
        "messageTeamMembers"
      ],
      "validDomains": [
        "localhost:3000",
        "localhost"
      ]
    }

I hope the above mentioned code can help you help me.

Leonardo
  • 69
  • 7
  • Hi @Leonardo - Could you please confirm are you developing configurable Tab or personal Tab. Also debug your Tab in mobile using dev tool and follow this [documentation](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/developer-tools#access-devtools-from-an-android-client) for more info. – Mamatha-MSFT Apr 16 '21 at 07:55
  • Yes, it is a personal and messagging extension app. I've already deploy that app from azure and launch it from my mobile phone. I've read that a possible cause could be the way the content url is written. my url is written like this: https://domain/catalog? tid = {tid} & aaId = {userObjectId}. Should I change anything? – Leonardo Apr 16 '21 at 08:42
  • Can you please use content URLl as `domain/catalog` instead of `domain/catalog? tid = {tid} & aaId = {userObjectId}. ` – Mamatha-MSFT Apr 16 '21 at 13:42
  • I added tid & userObjectIdto into the url because I need these in my personal app for run. If I took them off, how could I get them back? I have already tried with the get context function but in my case it has always worked badly being asynchronous. I've try it now and it return the same thing written above also if I put the url on the browser desktop. – Leonardo Apr 16 '21 at 13:54
  • Now I've tried to call url with the params added manually but the response was the same. It correctly run if I launch the app from Visual Studio Code or from Microsoft Teams desktop app. I don't be able to understand where is my error. This was added to my tenant store. Can was this the error? – Leonardo Apr 16 '21 at 14:14
  • Could you please share the code snippet of personal tab and manifest. – Mamatha-MSFT Apr 19 '21 at 11:42
  • @Mamatha-MSFT I've add some code as you've ask me. I hope you can help me. Thanks. – Leonardo Apr 20 '21 at 08:04
  • I have tested with your code and I replaced localhost URL with ngrok URL it's working fine. Running the application locally does not give you access to Teams app functionality. So could you please try with [ngrok url](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/debug#locally-hosted) and let me know if the issue still persists. – Mamatha-MSFT Apr 24 '21 at 14:20
  • Is the issue got resolved. – Mamatha-MSFT Apr 27 '21 at 18:57
  • Hi @ Mamatha-MSFT, sorry if I answer only now, I had not seen the notification on the comment. Yes I solved it, my error was in the App.js file. Inside, I had a wrong path that redirected to another page (the page published above). Thank's for all – Leonardo Apr 29 '21 at 09:25

2 Answers2

1

I have tested with your code and I replaced localhost URL with ngrok URL it's working fine. Running the application locally does not give you access to Teams app functionality. So could you please try with ngrok url.

Mamatha-MSFT
  • 577
  • 3
  • 4
0

I solved it, my error was in the App.js file. I had a wrong path that redirected to another page (the page published above) when try to open the url outside Microsoft Teams. I have remove it and all work's fine. Thank's for all

Leonardo
  • 69
  • 7