nodejs

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

Prerequisites

• Node.js version 10.14 or higher

  # determine node version
  node --version

• socket.io to update data in real time.

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

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

• 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

   • In a terminal, navigate to samples/meetings-sidepanel/nodejs

     cd samples/meetings-sidepanel/nodejs

   • Install modules

     npm install

   • Start the bot

     npm start

2. If you are using Visual Studio code

   • Launch Visual Studio code
   • Folder -> Open -> Project/Solution
   • Navigate to samples/meetings-sidepanel/nodejs folder
   • Select meeting-sidepanel Folder

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 .env file and add MicrosoftAppId and MicrosoftAppPassword information.

6. Run your app, either from Visual Studio code with npm start or using Run in the Terminal.

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

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

3. On click of "Publish Agenda", the agenda list will be sent to the meeting chat.