Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
page_type description products languages extensions contentType createdDate
sample
Enable and configure your apps for Teams meetings to use in stage view
office-teams
office
office-365
nodejs
samples
11-10-2021 17:35:46

Meetings Stage View

This App helps to enable and configure your apps for Teams meetings. This app covers Shared meeting stage. For reference please check Enable and configure your apps for Teams meetings

This capability is currently available in developer preview only.

  • App in stage view.

Stage View Screen

Prerequisites

To try this sample

  • Clone the repository

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
  • In a terminal, navigate to samples/meetings-stage-view/nodejs

  • Install modules

    npm install
    
  • Run ngrok - point to port 3978

    ngrok http 3978 -host-header=localhost:3978
    
  • Modify the manifest.json in the /AppPackage folder and replace the following details

    • <<App-ID>> with some unique GUID
    • <<BASE-URL>> with your application's base url, e.g. https://1234.ngrok.io
    • <<VALID DOMAIN>> with your app domain e.g. *.ngrok.io
  • Run solution

    npm start
    
  • Zip the contents of AppPackage folder into a manifest.zip, and use the manifest.zip to deploy in app store or add to Teams as in step 4.

  • 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.
    • Select Add in the pop-up dialog box. Your tab is uploaded to Teams.

Interacting with the app in Teams

You can use this app by following the below steps:
- Edit a meeting and select `+` icon at the top right corner.

Add icon in meeting

- Search for your app `App in meeting` and add it.

Select App

- Join the meeting and click on the app icon at the top
- This will open a sidepanel with `Share` icon at top to share the app for collaboration in stage view.

App icon

Share Icon

- You can now interact with the app.

Features of this sample

  • Add Details for collaboration.

Add Button

Add Details

  • App in sidepanel.

App in sidepanel