Skip to content
CloudOps
Newsletter
All prompts
AI for Microsoft Teams Difficulty: Beginner ClaudeChatGPT

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.
Newsletter

Free: the DevOps AI Incident-Triage Cheat Sheet

Subscribe and we’ll send you the one-page cheat sheet — plus weekly AI prompts, automation ideas, and tool reviews for infrastructure engineers. One email a week. No spam, unsubscribe anytime.

  • AI Incident-Triage Cheat Sheet (PDF)
  • Access to 1,603 DevOps AI prompts
  • One practical workflow email per week