Skip to content
    Categories
    Select Category

    Welcome to Teams Tuesday

    A podcast about mastering the best of what other people have already figured out with M365.

    Teams Tuesday focuses on insights and lessons that never expire. You’ll walk away from every episode with actionable insights that help you get better results and be more productive.

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

    3 min read

    Target Audience

    Developer

    Categories

    Teams / Azure | UI Fabric React | Flow

    Read Time

    10 minutes

    Understand time including reading links

    1 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.

    New call-to-action

     

    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.

     

    1. Entered input Data will be posted to SharePoint list.

       

       

       

       

    Check it out the code on GitHub

    https://github.com/peterwardsoho/Teams-Site-Request

    Other useful Links:

    Use Office UI Fabric React components in your SharePoint client-side web part

    HOW TO GET STARTED WITH REACT FOR BUILDING ADVANCED SPFX SOLUTIONS

    SharePoint Framework aka SPFx Web Part Using React And REST API

    Comments are closed.