MS Teams Integration Office 365 SharePoint and Azure Functions – Part 1

Target AudienceDeveloper
CategoriesTeams / Azure | UI Fabric React | Flow
Read Time10 minutes
Understand time including reading links1 hr

Everything is in GitHub

This is a multiple part blog post that explains how to:

  • Update a SharePoint list
  • Trigger a MS Flow, which kicks off another flow to call a Azure Functions to Create a new site collection
  • Provisions the PNP Template of other site collection

In previous blog posts I explained how to:

Display list data in a Teams Tab

External API integration

These links stated above are worth reviewing to get familiar with React apps and Teams development.

Steps:

  1. Let’s Create MS teams app using SharePoint Frame work React app. This is explained on previous blog posts
  2. Once you create the app run below command to install PNP Js.
    npm install @pnp/spfx-controls-react –save
  3. Add below import statement and a code to make use of PNP People Picker control.import { PeoplePicker, PrincipalType } from “@pnp/spfx-controls-react/lib/PeoplePicker”;
  4. I am suing Office UI Fabric React HTML Input’s like Textbox, Dropdown, Alert and Stack as components as shown below.
     
  5. Add some code to post data to SharePoint list to post input data into desired list.
  6. Once you add all the Code in Place, Navigate back to the manifest.jason file replace supportedHosts Line with this,“supportedHosts”: [“SharePointWebPart”, “TeamsTab”],
  7. Now we are all set to deploy our app run below commands to create a package.

gulp clean

gulp bundle –ship

gulp package-solution –ship

  1. Make sure you have tenant admin access or Admin Access to your organization teams while deploying the SPPKG file.
  2. Add SPPKG file that was generated from above commands into Tennent App Catalog and Click Sync button from the ribbon as shown below.
  3. Open you teams and navigate to the team where you wanted to add this teams tab.
  4. Click on the + icon and a dialog will open up with Add a tab title.
  5. Select the Teams WebPart with your title from the list of app has and click it.it will open a new dialog as show below and click install to add it.

This will be the final output.

MS Teams Integration Office 365 SharePoint and Azure Functions – Part 1
  1. Entered input Data will be posted to SharePoint list. 
      

Check it out the code on GitHubhttps://github.com/peterwardsoho/Teams-Site-Request

About the Author:

An experienced, highly motivated, technically skilled SharePoint Solution architect. Most comfortable taking the lead and delivering cost effective solutions

Reference:

Ward, P. (2020). MS Teams Integration Office 365 SharePoint and Azure Functions – Part 1. Available at: https://wardpeter.com/ms-teams-integration-office-365-sharepoint-and-azure-functions-part-1-2/ [Accessed: 26th November 2020].

Check out more great Microsoft Teams Content here or join our mailing list to stay up to date.

Share this on...

Rate this Post:

Share: