SPFX webpart link embeded into teams website tab

Abhishek Negi 21

Below is the screen shot of Microsoft teams web browser version

Problem occurring (web part not loading) when opening this same teams tab in the Microsoft teams desktop application .

I have used Graph API to fetch data in SPFX web part and publish this webpage into share point site and link of the page is embedded into teams website tab

ChetanSharmamsft 1,026 Reputation points Microsoft Vendor

2022-02-09T19:09:57.703+00:00

Could you please share the repro steps and doc link that you are following, so that we can check it from our end?
Abhishek Negi 21 Reputation points

2022-02-09T23:39:32.123+00:00

I am following Graph Api to fetch teams member by passing team ID from query string
Link below
Could you please tell what is repro step and how to share
Meghana-MSFT 3,786 Reputation points Microsoft Vendor

2022-02-10T13:45:22.827+00:00
@Abhishek Negi - Could you please share the below details?

Your manifest. So that we can add that sharepoint tab locally and check it.

Screenshot of issue in Desktop

By repro steps we mean what are all the steps needed to performed to check the above issue at our end. Please share repro steps as well.
Abhishek Negi 21 Reputation points

2022-02-11T07:11:32.867+00:00
Above Screenshot of Teams desktop application which is not loading as the loader fades out after Teams members fetched via Graph API

Repro steps for above issue to check at your end

Create a SPFX web part and make use of Graph API link for Use Microsoft Graph in your SPFX solution -> using-microsoft-graph-apis

Make use of specific API for Fetching teams Member link -> team-list-members

For Embedding link into Teams website tab below is the Screenshot
.>> Copy the link after deploying the web part into site page

>Paste the link into Teams website Tab

`

Abhishek Negi 21

Manifest file here for the webpage

Manifest File code for this web part

` {
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "8bfc2513-d9f4-42c4-8512-113b789a6500",
  "alias": "GroupChatsWebPart",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportsFullBleed": true,
  "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "GroupChats" },
    "description": { "default": "GroupChats description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "GroupChats"
    }
  }]
}

Meghana-MSFT 3,786 Reputation points Microsoft Vendor

2022-02-15T17:26:26.807+00:00

We are looking into it. We will update you.

1 answer

Meghana-MSFT 3,786 Reputation points Microsoft Vendor

2022-02-16T12:02:35.903+00:00

@Abhishek Negi - Recommended option is to build Tab as mentioned here. Please try with this once.

Build Microsoft Teams tab using SharePoint Framework - Tutorial | Microsoft Learn
Please sign in to rate this answer.
Abhishek Negi 21 Reputation points

2022-02-17T23:08:17.31+00:00

I have gone through that documentation but my requirement is to make teams website tab with spfx webpart link embedded into that website tab

Wajeed-MSFT 231 Reputation points Microsoft Employee

2022-02-25T09:38:23.21+00:00

@Abhishek Negi - Website tabs aren't equivalent to a standard web browser. A number of sites, especially those requiring authentication, using popups, or complex HTML framing, will not work as expected when pinned as a website tab. Recommended option to load SharePoint tags is by creating Teams App as mentioned by @Meghana-MSFT .

Abhishek Negi 21 Reputation points

2022-04-26T17:08:00.803+00:00

Hi @Meghana-MSFT , I have tried build the tab using sharepoint framework as you have mentioned the link below and use the Graph API in the webpart but the issue is same not able to call Graph API in teams desktop version but able to call in desktop version

I have upload the question here also ms-graph-client-not-working-as-a-spfx-tab-in-desktop-teams

Meghana-MSFT 3,786 Reputation points Microsoft Vendor

2022-04-28T10:37:15.7+00:00

Could you please share your minimal code and repro steps, so that we can check this issue locally.

Abhishek Negi 21 Reputation points

2022-05-04T06:21:08.857+00:00

hi @Meghana-MSFT ,
Please check

Created SPFX webpart using below link

build-a-hello-world-web-part

For making this webpart as a tab used the following link

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

Used Graph API to fetch teams member by passing team ID using MS Graph Client and simply render on the webpage

Used following API to fetch team Members -- GET /teams/{team-id}/members

Used MS graph client in SPFX webpart using following link

use-msgraph

Meghana-MSFT 3,786 Reputation points Microsoft Vendor

2022-05-11T14:58:32.983+00:00

Thank you for the steps, we are looking into it.

Keshav-MSFT 11 Reputation points

2022-08-05T06:24:10.1+00:00

@Abhishek Negi please can you share full code in zip file ??

Abhishek Negi 21 Reputation points

2022-08-19T12:57:36.733+00:00

Hi @Keshav-MSFT can you tell me where to send the zip file for the SPFX webpart

Abhishek Negi 21 Reputation points

2022-08-19T12:59:28.853+00:00

Here is the Git link for the web part My teamMembers
myTeamMembers

ChetanSharmamsft 1,026 Reputation points Microsoft Vendor

2022-08-19T15:43:54.217+00:00

We don't have access to this GitHub link.
Can you please share it on this email address: microsoftteamsdev@microsoft.com <microsoftteamsdev@microsoft.com>;
Sign in to comment