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.
Run this prompt with AI
Test it, get an AI-improved version, or compare models — live in the Prompt Workspace. No copy-paste.
Related prompts
-
Teams In-Meeting Side Panel Incident Copilot Prompt
Build an in-meeting Teams app (side panel + shared meeting stage) that acts as a live incident copilot — tracking timeline, action items, and current owner while a war-room call is in progress.
-
Teams Adaptive Card Host Config and Cross-Theme Rendering Prompt
Author and validate an Adaptive Card host config so cards render correctly across Teams light, dark, and high-contrast themes and across desktop, web, and mobile
-
Teams Tab Configuration Page & Content URL Auth Prompt
Design a configurable Teams channel tab: the configuration page that captures settings and sets the content URL, plus secure SSO auth for the embedded content frame.
-
Teams Channel Tab SPA & Deep Linking Prompt
Build a configurable channel tab single-page app for Teams with proper context handling, theming, SSO, and deep links that jump users to a specific incident or runbook view.
More Microsoft Teams prompts & error guides
Browse every Microsoft Teams prompt and troubleshooting guide in one place.
Reading prompts? Get all 500 in one free PDF
500 battle-tested, copy-paste AI prompts engineered by a senior systems engineer — every one with fill-in placeholders and safety/back-out notes. Drop your email and it's yours.
- 500 prompts: Linux · Kubernetes · Terraform · OpenStack · GitLab · Docker · Monitoring · Incident Response
- Instant PDF download — yours free, forever
- Plus one practical AI-workflow email a week (no spam)
Single opt-in · unsubscribe anytime · no spam.