page_type | description | products | languages | extensions | contentType | createdDate | ||||
---|---|---|---|---|---|---|---|---|---|---|
sample |
Enable and configure your apps for Teams meetings to use in stage view |
|
|
samples |
11-10-2021 17:35:46 |
This App helps to enable and configure your apps for Teams meetings. This app covers Shared meeting stage using Live Share SDK. For reference please check Enable and configure your apps for Teams meetings
This sample also shows how to share specific parts of your app to the meeting stage. For reference please check Share app content to stage API
This capability is currently available in developer preview only.
- App in stage view.
- Sharing specific part of your app to the meeting stage.
- NodeJS
- ngrok or equivalent tunnelling solution
- Publicly addressable https url or tunnel such as ngrok or Tunnel Relay
-
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 both solutions i.e. samples/meetings-stage-view/nodejs/ and samples/meetings-stage-view/nodejs/Clientapp
npm start
-
Zip the contents of
AppPackage
folder into amanifest.zip
, and use themanifest.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.
You can use this app by following the below steps:
- Edit a meeting and select `+` icon at the top right corner.
- Search for your app `App in meeting` and add it.
- 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.
- You can now interact with the app.
- Add Details for collaboration.
- App in sidepanel.
- Sharing specific parts of app.