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, enabling participants to add status details of past, present, and future tasks, thereby enhancing the 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 can see the following output:

Screenshot shows the final output of meeting stageview.

Prerequisites

8 minutes remaining

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

	Install	For using...
	Microsoft Teams	Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call all in one place.
	Visual Studio 2022	You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version.
	Node.js and NPM	Back-end JavaScript runtime environment. For more information, see Node.js version compatibility table for project type.
	Dev tunnel	Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. Or You can also use ngrok as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm devDependencies).

Note

After downloading ngrok, sign up and install authtoken.

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

Create a tunnel

dev tunnel
ngrok

Open Visual Studio.
Select Create a new project.
In the search box, enter ASP.NET. From the search results, select ASP.NET Core Web App.
Select Next.
Enter Project name and select Next.
Select Create.

An overview window appears.
In the debug dropdown list, select Dev Tunnels (no active tunnel) > Create a Tunnel....

A pop-up window appears.
Update the following details in the pop-up window:
1. Account: Enter a Microsoft or GitHub account.
2. Name: Enter a name for your tunnel.
3. Tunnel Type: From the dropdown list, select Temporary.
4. Access: From the dropdown list, select Public.
Select OK.

A pop-up window appears showing that dev tunnel is successfully created.
Select OK.

You can find the tunnel you've created in the debug dropdown list as follows:
Select F5 to run the application in the debug mode.
If a Security Warning dialog appears, select Yes.

A pop-up window appears.
Select Continue.

The dev tunnel home page opens in a new browser window and the dev tunnel is now active.
Go to Visual Studio, select View > Output.
From the Output console dropdown menu, select Dev Tunnels.

The Output console shows the dev tunnel URL.

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 provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

The window shows the HTTPS URL.

Screenshot shows the ngrok HTTPS URL.

Set up manifest file

5 minutes remaining

Go to manifest.json in node.js folder in cloned repository.
Open manifest.json in Visual Studio and make the following changes:
- Replace <<TEAMS_APP_ID>> with your bot's Microsoft App ID.
- Replace <<TAB_DOMAIN>> with your ngrok or dev tunnel domain name.
- Replace <<VALID DOMAIN>> with your ngrok or dev tunnel domain name.

Build and run using npm

4 minutes remaining

nodejs
ClientApp

In your cloned repository, go to samples > meetings-stage-view > nodejs.
Copy the nodejs folder path.
Open a new Command Prompt window and 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
```

In your cloned repository, go to samples > meetings-stage-view > nodejs > ClientApp.
Copy the ClientApp folder path.
Open a new Command Prompt window, change the current directory to the copied ClientApp 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, go to samples> meetings-stage-view> nodejs> appManifest.
Create a .zip with the following files that are present in the appManifest folder:
- manifest.json
- outline.png
- color.png
Create a meeting with a few presenters and attendees.
After the meeting is created, join the meeting.
Go to the meeting details page and select the Apps icon to add an app.
In the pop-up dialog, select Manage apps.
Select Upload an app.
Go to samples> meetings-stage-view> nodejs> appManifest.
Select Open to upload the .zip file that you created in the appManifest folder.
Select Add.
Select Set up a tab.

The Manage apps section displays the list of applications.

Interact with the app in Teams

2 minutes remaining

Go to Teams meeting.
Select Apps.

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

The icon is visible in the meeting window.
Select + from the Sprint Status. A Status Details dialog appears.
Enter Assigned To and Description.
Select Add.

App in side panel view: