Skip to content

Latest commit

 

History

History

msgext-product-support-sso-ts

README.md

page_type description products languages
sample
This sample demonstrates how to use build a plugin for Microsoft Copilot for Microsoft 365 using TypeScript and Teams Toolkit for Visual Studio Code that returns data from SharePoint Online via Microsoft Graph.
office-teams
copilot-m365
typescript

Overview Contoso Products message extension sample - TS

This sample implements a Teams message extension that can be used as a plugin for Copilot for Microsoft 365. The message extension allows users to query items in the Products list in the Product support SharePoint Online team site via Microsoft Graph.

💡 This is the TypeScript version of the Product support message extension sample written in .NET and C#

Get started with the template

Prerequisites

To run the template in your local dev machine, you will need:

Minimal path to awesome

Prepare SharePoint Online

  • Create a new SharePoint Team site
    • Site type: Team site
    • Site name: Product support
    • Site address: productmarketing
  • Download the Product Support provisioning template source files and extract the contents of the ZIP to a folder
  • Open a PowerShell terminal session
  • Install PnP PowerShell, execute Install-Module PnP.PowerShell -Scope CurrentUser
  • Connect to the SharePoint Online Admin Center site and follow the authentication steps, execute Connect-PnPOnline -Url https://<tenant>-admin.sharepoint.com -DeviceLogin, replacing <tenant> with the hostname of your SharePoint Online tenant
  • Change to the folder where you extracted the source files to
  • Apply the template to the Product support SharePoint site, execute Invoke-PnPTenantTemplate -Path .\productsupport.pnp
  • Open a browser window and navigate to the Product support site
  • In the Products list, create indexes on the Title and RetailCategory columns

Prepare and run project

  • Clone this repo and open the root folder in VSCode
  • In env folder copy the contents of .env.local.sample file and create a file with name .env.local and paste the contents to it.
  • In env folder copy the contents of .env.local.user.sample file and create a file with name .env.local.user and paste the contents to it.
  • Update SPO_HOSTNAME in file .env.local, replacing <tenantname> with the hostname of your SharePoint Online tenant.
  • Press F5 and follow the prompts to sign in to your Microsoft 365 tenant and Azure subscription
  • Select the Azure subscription you want to provision the Azure AI Bot Service to
  • Select an existing resource group or create a new one. If you create a new resource group, select a region closest to your location

NOTE: When Teams Toolkit prepares the app it will provision a new Azure AI Bot Service into the resource group which uses the F0 SKU which grants unlimited messages to be sent to standard channels, this includes Microsoft Teams and Microsoft 365 channel (Outlook and Copilot) and does not incur a cost.

Test

  • In Microsoft Teams, open the Copilot app
  • Open the prompts flyout and enable Contoso products plugin
  • Enter Find Contoso products aimed at individuals in the message box and press Enter
  • Copilot will respond with a message saying that it cannot find any information about a Contoso products aimed at individuals in the enterprise search results
  • Click Sign in to Contoso products to start the sign-in flow and consent to the permissions requested by the app
  • Enter Find Contoso products aimed at individuals in the message box and send it
  • Copilot will respond with a message referencing Contoso consumer products
  • Hover over a reference to view an Adaptive Card with the product details and photo.
  • You can select the Take action button to edit the details and confirm by selecting Save
  • The card refreshes and the data is successfully saved.

working app finding products

What's included in the template

Folder Contents
.vscode/ VSCode files for debugging
appPackage/ Templates for the Teams application manifest
env/ Environment files
infra/ Templates for provisioning Azure resources
src/ The source code for the search application

The following files can be customized and demonstrate an example implementation to get you started.

File Contents
src/searchApp.ts Handles the business logic for this app template to query npm registry and return result list.
src/index.ts index.ts is used to setup and configure the Message Extension.

The following are Teams Toolkit specific project files. You can visit a complete guide on Github to understand how Teams Toolkit works.

File Contents
teamsapp.yml This is the main Teams Toolkit project file. The project file defines two primary things: Properties and configuration Stage definitions.
teamsapp.local.yml This overrides teamsapp.yml with actions that enable local execution and debugging.

Extend the template

Following documentation will help you to extend the template.