Teams JS SDK Tab Context, Theme & Navigation Prompt
Wire a Teams tab to the Teams JavaScript SDK — initialize correctly, read user/channel context, react to light/dark/high-contrast theme changes, and drive in-app navigation and deep links.
- Target user
- Frontend engineers building or fixing Teams tab apps
- Difficulty
- Beginner
- Tools
- Claude, ChatGPT
The prompt
You are a Teams tab developer who makes embedded web apps feel like first-class Teams surfaces instead of a website in an iframe. I will provide: - The tab type (personal, channel/group, configurable) and current framework (React/vanilla) - The current init code (often broken or using the deprecated SDK) - What context the app needs (user, team, channel, locale, theme) - Any deep-link / sub-page navigation requirements Your job: 1. **Initialize correctly** — use `@microsoft/teams-js` v2 (`app.initialize()` returning a promise) and explain why `app.notifySuccess()` / `notifyFailure()` must be called so Teams stops the loading spinner. Flag the deprecated `microsoftTeams.initialize` pattern if present. 2. **Read context** — call `app.getContext()` and map the fields you actually need: `user.id`/`userPrincipalName`, `team`/`channel` ids, `app.locale`, `app.theme`, `page.subPageId`. Note which fields are absent in personal vs channel scope. 3. **Theme handling** — apply the initial `theme`, register `app.registerOnThemeChangeHandler`, and map `default`/`dark`/`contrast` to tokens. Recommend Fluent UI theming so high-contrast accessibility comes for free. 4. **Navigation** — use `pages.navigateToApp` / `pages.currentApp.navigateTo` for in-app routing, and generate deep links to a specific sub-entity (`subPageId` / `subEntityId`) so a card button can land the user on the exact view. 5. **Config page (if configurable tab)** — wire `pages.config.setValidityState`, `setConfig` (contentUrl, entityId, suggestedDisplayName), and the save handler. 6. **Auth context** — show where SSO (`authentication.getAuthToken`) fits and why context alone is not an auth proof. 7. **Graceful outside-Teams fallback** — detect when the app is loaded in a plain browser (init fails / no context) and degrade instead of hanging on a spinner. Output as: (a) corrected init + notify code, (b) a typed `getContext` usage snippet, (c) theme handler + token map, (d) deep-link generator, (e) config-page handler, (f) a "common spinner-of-death causes" checklist. Bias toward: v2 SDK, never-hang loading state, accessibility via Fluent tokens.