Teams Meeting apps – Stage view basics

Recently I already covered some scenarios around apps in Microsoft Teams meetings. In this post I want to show the very basic behavior of the capability to present app content on the meeting stageView as part of the already covered in-Meeting experience.

• Setup
• Manifest
• Client-side code
• App installation
• Testing

Setup

What’s needed again is a simple Teams Tab solution. With the yeoman generator for Teams the setup would basically look like this:

yo teams for simple stageView Teams Tab

As this post covers the very basics of stageView vs sidePanel only static HTML content will be sufficient, so no need for SSO configuration or further stuff in this case. Of course that will work, too, if required. But focus on the basics now, more complex scenarios a bit later maybe.

The manifest

Having the basic Tab solution setup it is only a matter of the manifest file to show up in the right way. In the manifest the following configuration is necessary:

"configurableTabs": [
    {
      "configurationUrl": "https://{{PUBLIC_HOSTNAME}}/stageViewBasicTab/config.html?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team",
        "groupchat"
      ],
      "context": [
        "meetingChatTab",
        "meetingDetailsTab",
        "meetingSidePanel",
        "meetingStage"
      ],
      "meetingSurfaces": [
        "sidePanel",
        "stage"
      ]
    }
  ],

Under context meetingChatTab and meetingDetailsTab are not necessary. I simply left them to see something once I add the app to the meeting in pre-Meeting experience as well. For the scope groupChat is essential to be used in Meeting apps.

Client-side code

The next thing to implement is the client-side. A slight change to the default component coming from yo teams is the following:

export const StageViewBasicTab = () => {
    const [{ inTeams, theme, context }] = useTeams();
    const [entityId, setEntityId] = useState<string | undefined>();
    const [inStageView, setInStageView] = useState<boolean>(false);
...
    useEffect(() => {
        if (context) {
            setEntityId(context.entityId);
            if (context.frameContext! === microsoftTeams.FrameContexts.meetingStage) {
                setInStageView(true);
            }
            else {
                setInStageView(false);
            }
        }
    }, [context]);

    /**
     * The render() method to create the UI of the tab
     */
    return (
        <Provider theme={theme}>
            <Flex fill={true} column styles={{
                padding: ".8rem 0 .8rem .5rem"
            }}>
                <Flex.Item>
                    <div>
                        {inStageView && <Header content="Stage view tab" />}
                        {!inStageView && <Header content="Side panel tab" />}
                    </div>
                </Flex.Item>
                <Flex.Item>
                    <div>
                        <div>
                            <Text content={entityId} />
                            {inStageView && <Text content="Now this tab is rendered in stage view." />}
                            {!inStageView && <Text content="Now this tab is rendered outside stage view. You can share it in stage view by clicking the share icon above." />}
                        </div>

                        <div>
                            <Button onClick={() => alert("It worked!")}>A sample button</Button>
                        </div>
.....

The essential thing here is to detect the frameContext in which the Tab is currently rendered. This is done in the hook on the Teams context. Then later in the UI part different Header and different Text content is shown based on this inStageView state variable.

App installation

That’s all with the implementation basics. Once the solution is packaged and installed as an app in Teams, it can be added to any meeting. But at the time of writing this post the following is necessary:

• A meeting with at least one participant (not expected to be changed in future)
• A modern Teams physical Desktop client
  • No web, no virtual machine
  • See the red “Leave” button available as an indicator …

As shown in a previous post the app needs to be installed to the meeting by editing the meeting and clicking the (+) in the tabs on top at the right side. If context meetingChatTab and meetingDetailsTab in the manifest is set it should already show up some content.

Testing

But once joining the meeting an app icon should be visible in the meeting bar:

Meeting bar with custom app icon (5th from the left) to show up the side panel

Once that icon is clicked the side panel should show up:

Side panel with dedicated text and header

In the upper right the sharing icon can be clicked:

Sharing icon to show on stageView

And once clicked finally every participant should see the dedicated app content on stageView while the sharing person should also be able to stop the sharing. That’s the same behavior as sharing a screen out of the box:

Final result: App content on meeting stage view

This is the very basic setup of a Teams meeting app able to be shared on meeting stage view. Of course as any web app or specifically Teams tab it can also deal with more complex scenarios, access to backend data and so on. But also some collaborative aspects will be interesting for sure. Nevertheless consider some design specifics. Soon I will be back with a more detailed sample scenario but first I wanted to explain the basics which are also available in my github repository for your reference.

Markus is a SharePoint architect and technical consultant with focus on latest technology stack in Microsoft 365 Development. He loves SharePoint Framework but also has a passion for Microsoft Graph and Teams Development. He works for Avanade as an expert for Microsoft 365 Dev and is based in Munich. In 2021 he received his first Microsoft MVP award in M365 Development for his continuous community contributions. Although if partially inspired by his daily work opinions are always personal.

• Allgemein