Contoso Retail Dashboard

Summary

This is a sample end-to-end application, based on demo sample data and on a back-end sample REST API implemented as an Azure Function, that shows you how to create a Microsoft Teams personal app with SharePoint Framework, hosting the solution also in Outlook.com and in the Microsoft 365 Portal as a Microsoft 365 app. The solution also provides a sample Adaptive Card Extension (ACE) for Microsoft Viva Connection, still built with SharePoint Framework. The sample illustrates how to connect the ACE with the Teams personal app, providing custom arguments to the Teams personal app via deep links defined in the ACE. The solution also illustrates how you can leverage the Microsoft Teams Toolkit to create a Teams Message Extension to extend the Microsoft Teams Search, consuming a back-end API with Single Sign-On and OAuth.

Here you can see the Microsoft Teams personal app in action:

Here you can see the app hosted in Outlook.com:

Here you can see the app hosted in the Office Portal as a Microsoft 365 app:

Here you can see the ACE in action in Microsoft Viva Connection:

Here you can see the Teams Message Extension prompting the user to login:

Last but not least, here you can see the Teams Message Extension output when the user is loggen in and Single Sign-on is in place:

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

Solution

Solution	Author(s)
react-retail-dashboard	Paolo Pialorsi Paolo Pialorsi - PiaSys.com - @PaoloPia

Version history

Version	Date	Comments
1.3	November 23, 2023	Upgraded to SPFx 1.18.2
1.2	October 16, 2023	Added Teams Message Extension with SSO
1.1	June 06, 2023	Added back-end Azure Function
1.0	April 21, 2023	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository
• Ensure that you are at the solution folder
• in the command-line, within the contoso-retail-demo-spfx subfolder, run:
  • npm install
  • gulp serve

Include any additional steps as needed.

References

• Getting started with SharePoint Framework
• Build your first SharePoint Adaptive Card Extension
• Building for Microsoft teams
• Use Microsoft Graph in your solution
• Microsoft 365 Patterns and Practices