This example shows how to build and ACE with multiple card and quick views allowing chat interaction with a Microsoft Teams channel.
Highlights:
- multiple data fetches (list, details, sub-details [replies])
- simple technique for polling
- more complex state updates
- sending data (POST requests)
- built-in MS Graph client, and a simple module based wrapper
- Graph delta API for messages
- generator function as a pattern
- more complex view templates, multiple cards and quick views
- quickview push and pop
- various actions and on action handling
- adaptive card inputs
CardView listing message count
MessageListView Quick View showing the list of messages in channel
MessageDetailView Quick View showing list of replies with ability to reply
Get your own free development tenant by subscribing to Microsoft 365 developer program
None
| Solution | Author(s) |
|---|---|
| teams-chat-card | Microsoft |
| Version | Date | Comments |
|---|---|---|
| 1.0 | August 22, 2021 | Initial release |
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.
- Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
- npm install
- gulp serve --nobrowser
Edit the webpart and paste in the URL to a Team channel to enable the communications. You may have to refresh the page after pasting in the link.
- Extend Microsoft Viva Connections Learn Path
- Getting started with SharePoint Framework
- Building for Microsoft teams
- Use Microsoft Graph in your solution
- Publish SharePoint Framework applications to the Marketplace
- Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development