page_type | description | products | languages | extensions | urlFragment | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
sample |
Sample app which demonstrates how to use live share SDK inside meeting side panel. |
|
|
|
officedev-microsoft-teams-samples-meetings-sidepanel-csharp |
This sample illustrates how to implement Side Panel In-Meeting Experience and uses Live Share SDK to share data in realtime.
-
.NET Core SDK version 6.0
# determine dotnet version dotnet --version
-
Teams Microsoft Teams is installed and you have an account
-
Ngrok (For local environment testing) Latest (any other tunneling software can also be used)
-
Run ngrok - point to port 3978
ngrok http -host-header=rewrite 3978
-
Create AAD app registration in Azure portal and also 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.
-
Clone the repository
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
-
If you are using Visual Studio
- Launch Visual Studio
- File -> Open -> Project/Solution
- Navigate to
samples\meetings-sidepanel\csharp
folder - Select
SidePanel.sln
file and open the solution
-
Setup and run the bot from Visual Studio: Modify the
appsettings.json
and fill in the following details:<<Microsoft-App-ID>>
- Generated from Step 2 (Application (client) ID) is the application app id<<Microsoft-App-Secret>>
- Generated from Step 2, also referred to as Client secret<<Your_Domain_URL>>
- Your application's base url. E.g. https://12345.ngrok.io if you are using ngrok.
-
Modify the
manifest.json
in the/AppPackage
folder and replace the following details:- <> with any random GUID or your MicrosoftAppId from AAD app registration.
<<YOUR-MICROSOFT-APP-ID>>
with Application id generated from Step 2{{Base_URL}}
with base Url domain. E.g. if you are using ngrok it would behttps://1234.ngrok.io
then your domain-name will be1234.ngrok.io
.{{domain-name}}
with base Url domain. E.g. if you are using ngrok it would behttps://1234.ngrok.io
then your domain-name will be1234.ngrok.io
.
-
Run your app, either from Visual Studio with
F5
or usingdotnet run
in the appropriate folder. -
Navigate to
samples\meetings-sidepanel\csharp\ClientApp
folder and execute the below command.# npx @fluidframework/azure-local-service@latest
-
Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
- Go to Microsoft Teams. From the lower left corner, select Apps
- From the lower left corner, choose Upload a custom App
- Go to your project directory, the ./AppPackage folder, select the zip folder, and choose Open.
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.
-
On click of "Add" button, agenda point will be added to the agenda list.
-
On click of "Publish Agenda", the agenda list will be sent to the meeting chat.
- To learn more about deploying a bot to Azure, see Deploy your bot to Azure for a complete list of deployment instructions.