mobiletabsmicrosoft-teamscustom-application

Microsoft Teams Custom App doesn't work on mobile


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.


Solution

  • 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