Skip to content

Latest commit

 

History

History
 
 

csharp

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
SidePanel
SidePanel
 
 
README.md
README.md
 
 
SidePanel.sln
SidePanel.sln
 
 

README.md

page_type: sample description: Sample app which demonstrates how to use live share SDK inside meeting side panel. products:

  • office-teams
  • office
  • office-365 languages:
  • csharp extensions: contentType: samples createdDate: "07-07-2021 13:38:27"

Meetings SidePanel

This sample illustrates how to implement Side Panel In-Meeting Experience and uses Live Share SDK to share data in realtime.

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.

Prerequisites

Tools

  • .NET Core SDK version 3.1

    # determine dotnet version
dotnet --version
    • Ngrok (For local environment testing) Latest (any other tunneling software can also be used)
    # run ngrok locally
ngrok http -host-header=localhost 3001

  • 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

  1. Run ngrok - point to port 3001 ngrok http -host-header=rewrite 3978

  2. Create a new Bot by following steps mentioned in Build a bot documentation.

  3. Go to appsettings.json and add MicrosoftAppId, MicrosoftAppPassword and BaseUrl information.

  4. Update the manifest.json file with Microsoft-App-ID and BaseUrl value.

  5. Run your app, either from Visual Studio with F5 or using dotnet run in the appropriate folder.

  6. Navigate to samples\meetings-sidepanel\csharp\ClientApp folder and execute the below command.

    # npx @fluidframework/azure-local-service@latest

  7. 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.

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.