Share meeting stage in Team - Teams

Share meeting stage in Teams helps to enable and configure your apps for Teams meetings. It helps users to share meeting stage, allows meeting participants to add status details of past, present, and future tasks, enhancing Teams meeting experience.

Key features of share meeting stage in Teams

Add status details in the side panel.
Add details for collaboration.

This step-by-step guide helps you to share meeting stage in Teams to add status details for collaboration. You'll see the following output:

meetings stage view

Prerequisites

8 minutes remaining

Ensure you install the following tools and set up your development environment:

Microsoft Teams with valid account
Latest version of Visual Studio
Latest version of nodejs
Latest version of ngrok (only for devbox testing) or any equivalent tunneling solution

Note

After downloading ngrok, sign up and install authtoken.

You must have working knowledge of the following technologies:

Set up local environment

7 minutes remaining

Open Microsoft Teams Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.
Select Clone.

Note

If you encounter the error "Filename too long," apply the git command 'git config --system core.longpaths true' in your administrator terminal of choice.

Set up tunnel for local web server

6 minutes remaining

Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:

ngrok http --host-header=localhost 3978

Tip

If you encounter ERR_NGROK_4018, follow the steps, as displayed in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

tunnel using command prompt

Set up manifest file

5 minutes remaining

Navigate to manifest.json in node.js folder in cloned repository.
Open manifest.json in Visual Studio and make the following changes:
- Replace <<App-ID>> with your bot's Microsoft App ID.
- Replace <<BASE-URL>> to the fully qualified your ngrok domain name.
- Replace <<VALID DOMAIN>> with your fully qualified ngrok domain name.

Build and run client app using npm

4 minutes remaining

In your cloned repository, navigate to samples > meetings-stage-view > nodejs.
Copy the nodejs folder path.
Open a new Command Prompt window, change the current directory to the copied nodejs path.
Run the following command in the Command Prompt to download packages and dependencies:
```
 npm install
```
Run the following command in the Command Prompt to start the app:
```
npm start
```

Add meeting stage to Teams

3 minutes remaining

In your cloned repository, navigate to samples> meetings-stage-view> nodejs> Manifest.
Create a .zip with the following files that are present in the Manifest folder:
- manifest.json
- icon-outline.png
- icon-color.png
Create a Teams meeting with a few presenters and attendees.
After the meeting is created, go to the meeting details page and select Add an app.
In the pop-up window, select Manage apps.
Select Upload a custom app.
Select Open to upload the .zip file that you created in the Manifest folder.
Select Add.

The Manage apps section displays the list of applications.

Interact with the app in Teams

2 minutes remaining

Go to Teams meeting.
Select Add an app.

In the app selection page, the app is displayed as App In Meeting.
Select the App In Meeting.
Select Save.
Start the meeting.

The icon is visible in the meeting control bar.
To update the sprint status task, add:
- Assigned To
- Description
App in side panel view: