Build MS Teams Tab Using SharePoint Framework

By -

Create Teams Tab using SPFx:

In this post we will see how to add SPFx webpart to MS Teams tab.

In this post we will reuse the excising SPFx solution which we created in this post=> SPFx CRUD using Rest API. & modify few changes for MS Teams. & Below is the Final Output.

2 Important Changes in SPFx Solution:

    1.Webpart.Manifest.json: Under 
        "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab",],
        Add TeamsTab & Teams Personal App if it is not present already.

    2. Component File(.tsx): Check for microsoftTeams.context present or not (If present we can implement code for Teams)
        if(this.props.context.sdks.microsoftTeams != null){
              var test = this.props.context.sdks.microsoftTeams.context;
              message = "Welcome to SPFx Teams Tab";
        }
        else{
           message = "Welcome to SPFx SharePoint Webpart";
         }


    To get sppkg file run below command

  •   gulp build --ship

  •   gulp bundle --ship

  •   gulp package-solution --ship

    Upload sppkg in App catalog & Enable the app


"Add to Teams" in App Catalog:

    After enabling the App in App catalog > select Sppkg > Add to Teams > Click 'Add to all sites'
    Note: Before "Add to Teams" (i)we have to add this app to all sites(tenant level) or (ii)relevant            teams site collection.

    Adding as a Webpart in SharePoint Page: First we will add this webpart to the relevant site &        see how it show title(based on our If condition)

    Adding as a Teams Tab: Go to MS Teams site > Teams > + icon > Search your SPFx webpart > Add (Title displayed based on our If condition)



Refer this Video for more details

Comments

Post a Comment

Popular posts from this blog

SPFx with PnPJS CRUD Operations (V3)

By -
Image
Create new SPFx React webpart         Follow this post to create new SPFx solution & open it in VS Code.           Note: All file creation & Basic details of each files are available in this post. Final Output:      Here we will be getting all the SP list names into dropdown list & doing CRUD operations in the selected list. Install PnPJS:       Run this below command to install PnPJS. (Note: Here we use PnPJS Version 3, sp & graph objects have been deprecated. We will be using spfi         npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save Create "pnpjsConfig.ts":                In PnPJS Version 3 sp  and  graph  objects have been deprecated and will need to be replaced ( link ). So we are using this new config file. (RightClick on webpart folder>newFile>pnpjsConfig.ts) webpart.ts: Initial...
Read more

Add content type to SharePoint List/Library using REST API

By -
Add content type to SharePoint List/Library using REST API Use this below code to add content type to SharePoint Library using REST API. For this you need to use the content type ID. Below function will get the content type ID from content type name & we will pass the content type id to next function which will update content type to list/library. var   varContentTypeName = " Your Content Type name "; var   Listname = " Your List name where you want to add content type "; //This will get the content type ID from content type Name function  getContentTypeID() { var deferred = $.Deferred();     var  isCurrentUserIsApprover = false ; var  serverURL = _spPageContextInfo.webAbsoluteUrl; var  listURL = String.format(" {0}/_api/web/AvailableContentTypes?$select=Name,Id,StringId&$filter=Name eq '"+varContentTypeName+"' ",serverURL); $.ajax({ url: listURL, type: " GET ", async: false, headers:...
Read more

A type named 'SP.Data. could not be resolved by the model error

By -
Image
When we are trying to update task list we will get this error " A type named 'SP.Data. could not be resolved by the model error. When a model is available, each type name must resolve to a valid name must resolve to a a valid type" This happens because there is a space in the list name. To resolve this issue we need to get the exact list name to be used in "SP.Data" 1.Use the below URL in chrome browser <SiteUrl>/_api/web/lists/GetByTitle('List Name')/ For Example:  https://SiteURL/_api/web/lists/GetByTitle('Workflow Tasks')/ Some times in Chrome browser you may get Authentication error. For that first open the list from your Chrome browser & then use the above URL. 2.Find "SP.Data" -> now you will get the list name that you can be used in SP.Data.ListNameListitem
Read more