page_type	description	products	languages	extensions	contentType	createdDate
sample	Microsoft Teams meeting extensibility sample for iteracting with Side Panel in-meeting	office-teams office office-365	csharp		samples	07-07-2021 13:38:27

Meetings SidePanel

This sample illustrates how to implement Side Panel In-Meeting Experience.

User interactions(Meeting Organizer)

• Add New Agenda Item - Gives provision to add new Agenda point.
• Add - Adds the agenda from Textinput to the SidePanel agenda list.
• Publish Agenda - Sends the agenda list to the meeting chat.
• Meeting dialog / Content bubble - Send meeting dialog on page load

Prerequisites

Tools

• .NET Core SDK version 3.1

  # determine dotnet version
  dotnet --version

• Ngrok (Only for devbox testing) Latest (any other tunneling software can also be used)

  # run ngrok locally
  ngrok http -host-header=localhost 3978

• SignalR To update agenda in Real-Time

• Teams Microsoft Teams is installed and you have an account

• Register a bot with Azure Bot Service, following the instructions here.

• Ensure that you've enabled the Teams Channel

• While registering the bot, use https://<your_ngrok_url>/api/messages as the messaging endpoint.

  NOTE: When you create your bot you will create an App ID and App password - make sure you keep these for later.

1. Clone the repository

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

2. If you are using Visual Studio

• Launch Visual Studio
• File -> Open -> Project/Solution
• Navigate to samples\meetings-sidepanel\csharp folder
• Select SidePanel.sln file

3. Run ngrok - point to port 3978 ngrok http -host-header=rewrite 3978
4. Create a new Bot by following steps mentioned in Build a bot documentation.
5. Go to appsettings.json and add MicrosoftAppId, MicrosoftAppPassword and BaseUrl information.
6. Update the manifest.json file with Microsoft-App-ID and BaseUrl value.
7. Run your app, either from Visual Studio with F5 or using dotnet run in the appropriate folder.
8. Install the App in Teams Meeting

Interacting with the app in Teams Meeting

Interact with SidePanel by clicking on the App icon present on the top menu beside the "more actions" during a meeting.

1. Once the app is clicked, sidepanel appears with the default agenda list. Only organizer gets the feasibility to add new agenda points to the list using "Add New Agenda Item" button.
2. On click of "Add" button, agenda point will be added to the agenda list.
3. On click of "Publish Agenda", the agenda list will be sent to the meeting chat.