Seamlessly Integrate SharePoint Framework Web Part in MS Teams

Integrate SharePoint Web Part in MS Teams: Collaboration and seamless integration are critical in today’s digital environment for increasing productivity and optimizing procedures. SharePoint and Teams have emerged as prominent platforms for collaboration and communication among Microsoft’s formidable range of technologies. SharePoint provides a comprehensive platform for information management and team collaboration, whereas Microsoft Teams transforms how we interact and collaborate.

Microsoft has started supporting the Teams Tab/Personal app from SharePoint Framework version 1.8. Now we can convert any SharePoint Framework widget created with Framework 1.8 and above to Microsoft Teams by making a few changes in the web part.

The main steps are:

Open the manifest file of the web part and add “Teams tab” (or) “Teams Personal APP” to the supportedHosts property.
Deploy the solution in the app catalog.
Select the solution and click the “Sync to Teams” button.

Now the web part is displayed in Teams.

Once the web part is hosted in the Teams tab, it has access to the Teams SDK through the web part context.

Starting with the SharePoint Framework 1.8, scaffolding will also include an additional /teams folder in the solution structure, with default configuration for your web parts, so that you can get start developing the Teams tab as easily as possible.

Step 1: Adding Teams Tab/Personal App support

To begin with, open the web part and add Teams Personal App (or) Teams Tab in Supportedhosts.

Step 2: Manifest file and configuration

Next, we have to get the manifest file for teams from here and add the file into the Teams folder.

Step 3: Update the ID

Update the ID (GUID) to ensure uniqueness and proper identification of your web part during the integration process.

Step 4: Deploy the App

Now it’s time to deploy your app.

Go to command line

gulp bundle –ship
gulp package-solution –ship

This will create the package (.sppkg) file that we need to deploy to the SharePoint Online app catalog site.

The .sppkg file is created in a subdirectory of the project folder under /sharepoint/solution.
The package file looks like this:

Step 5: Upload to SharePoint App Catalog

After you have successfully executed the deployment commands, upload the packaged solution to the SharePoint App Catalog.

Step 6: Sync Solutions to Teams

To include your SharePoint Framework Web Part in Teams, navigate to the App Catalog, locate your solution, and sync it with Teams.

Step 7: Enter Microsoft Teams

Now let’s switch to Microsoft Teams, the heart of collaboration. Launch the Teams app and select the channel you want to use.

Step 8: Add a New Tab

Click + to add a new tab within the selected channel and find the name of the application/web part to add a new tab.

Step 9: Search and Select

Search for your app or web part by name and select it from the list of options. The SPfx app (web part) will be added to the Teams tab.

The SPfx app (web part) will be added to the Teams tab.

Step 10: Universality of the web part

Now we can also use the same web part for SharePoint Online. This gives you greater flexibility and efficiency in collaborating and sharing content across platforms. Integrate SharePoint Web Part in Microsoft Teams has become important part while working within the organizaiton.

The integration of SharePoint Framework Web Parts into Microsoft Teams is a huge step forward in improving communication and optimizing procedures. Organizations can achieve new levels of productivity and efficiency by effortlessly merging the capabilities of SharePoint with Teams.

Upgrade form the inconvenience of jumping between applications to the advanced collaborative work. Explore the possibilities of Integrate SharePoint Web Part in MS Teams and experience a never-before-seen level of integration. Unleash your team’s true potential and harness the power of cooperation now.

About HR365

HR365 leads and serves the industry in application development with focus on Power Apps, Microsoft Teams Apps, SharePoint Apps, Intranet branding, legacy app migration, and has out of box ready to deploy such as Employee Directory 365, Employee Onboarding 365, Helpdesk 365, Contract Management 365, Asset Management 365, Performance Management 365, Timesheet 365, Expense Tracker 365, Time Off Manager 365, and Custom Application. Click Here for more. HR365 can help you in Integrate SharePoint Web Part in MS Teams in case you need any assistance.