Unlocking Microsoft Teams Extensibility - Building a Teams Tab with SPFx - Storing Data in SharePoint and Using a Custom API

Why Choose SPFx for Teams Tabs?

SPFx provides several advantages for scenarios where SharePoint is the primary data storage solution:

• Dual Compatibility: SPFx web parts can be hosted as Teams Tabs and work equally well in SharePoint.
• Integrated Authentication: SPFx integrates with Microsoft Identity for secure API calls.
• Efficient Data Storage: Use SharePoint lists or document libraries as a backend for structured or file-based data.
• Seamless Updates: Any updates to the SPFx solution are automatically reflected in both Teams and SharePoint.

Use Case Overview

Imagine building a custom Teams Tab for task management where:

• Data Storage: Tasks are stored in a SharePoint list.
• Custom API: The app integrates with an external API to fetch additional task-related information.
• Cross-Platform Usability: The solution should work both in Teams and as a SharePoint web part.

Here’s how to achieve this with SPFx.

Setting Up Your SPFx Solution

1. Create a New SPFx Web Part

1. Install the latest SPFx Yeoman generator:

   Copycopy code to clipboard
   npm install -g @microsoft/generator-sharepoint

2. Scaffold a new SPFx project:

   Copycopy code to clipboard
   yo @microsoft/sharepoint

   • Solution Name: TeamsTabWithSPFx
   • Framework: Choose React.
   • Component Type: Web Part.
   • Target Environment: SharePoint Online only.
   • Include Teams Features: Yes.

3. Run the project locally:

   Copycopy code to clipboard
   gulp serve

2. Configure Teams Integration

SPFx allows you to package your web part for use in Teams:

1. Update the serve.json file to include Teams URLs for local testing.
2. Deploy the web part to your app catalog.
3. Add the Teams manifest configuration via the SPFx package options.

Connecting to SharePoint for Data Storage

1. Set Up a SharePoint List

Create a custom SharePoint list to store task information with the following columns:

• Title: Single line of text.
• AssignedTo: Person or Group.
• DueDate: Date and Time.
• Status: Choice (e.g., To Do, In Progress, Done).

2. Use PnP JS for Data Operations

Install PnP JS for streamlined SharePoint data operations:

Copycopy code to clipboard
npm install @pnp/sp @pnp/logging

Example code to retrieve tasks:

Copycopy code to clipboard
import { sp } from "@pnp/sp";

sp.web.lists.getByTitle("Tasks").items.select("Title", "AssignedTo", "DueDate", "Status").get()
  .then((tasks) => {
    console.log(tasks);
  })
  .catch((error) => {
    console.error("Error fetching tasks:", error);
  });

Integrating with a Custom API

1. API Setup and Permissions

Before integrating the custom API, you need to register the API in Azure AD and expose it:

1. App Registration: Go to the Azure Portal, navigate to Azure Active Directory > App registrations, and register a new application. This application will represent your API.

2. Expose the API: Once the app is registered, expose your API by creating an App role or defining scopes that your SPFx web part will request access to.

3. Grant API Permissions: In the app registration, add the appropriate API permissions. Typically, you will need:

   • API permissions for Graph (if interacting with Microsoft Graph) or any other custom APIs.
   • Delegated permissions like User.Read or any custom scopes that allow the app to access data on behalf of the user.

4. Grant Admin Consent: After setting the permissions, ensure that admin consent is granted for these API permissions.

5. Access the API: When making calls from SPFx, you need to use the AadHttpClient to request access tokens for your registered API.

2. Call the API from SPFx

Use the Microsoft Graph or fetch API for secure communication:

Example:

Copycopy code to clipboard
fetch("https://api.example.com/tasks", {
  method: "GET",
  headers: {
    Authorization: `Bearer ${token}`,
    "Content-Type": "application/json",
  },
})
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error("API call failed:", error);
  });

3. Handle Authentication

Leverage the AadHttpClient provided by SPFx for secure token acquisition:

Copycopy code to clipboard
import { AadHttpClient } from '@microsoft/sp-http';

this.context.aadHttpClientFactory.getClient('https://api.example.com')
  .then((client: AadHttpClient) => {
    return client.get('https://api.example.com/tasks', AadHttpClient.configurations.v1);
  })
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error("API call failed:", error);
  });

Deploying and Testing

1. Package and Deploy the Solution

1. Build and bundle the SPFx package:

   Copycopy code to clipboard
   gulp bundle --ship
   gulp package-solution --ship

2. Upload the .sppkg file to the SharePoint App Catalog.

2. Test in Teams and SharePoint

1. Add the SPFx web part as a Teams Tab.
2. Test its functionality in both SharePoint and Teams to ensure a consistent experience.

Conclusion

Using SPFx for building custom Teams Tabs with SharePoint storage and custom API integration is a powerful approach for organizations leveraging the Microsoft 365 ecosystem. By exposing your API and configuring proper API permissions, you ensure secure and reliable access to external data while maintaining a consistent experience across platforms. Start exploring SPFx today to build your next Teams solution!