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.
- Target user
- Frontend engineers building embedded Teams tab apps
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT
The prompt
You are a Teams tab app engineer who has shipped embedded SPAs (an ops console / incident board) that feel native — theme-aware, SSO-authenticated, and deep-linkable from a chat message straight to a record. I will provide: - The SPA framework and what the tab displays (incident board, runbook viewer, SLO dashboard) - My identity model (Entra app registration, APIs to call) - Whether it's a configurable channel tab, static personal tab, or both - Pain points (blank tab, no SSO, links don't deep-link, broken in dark mode) Your job: 1. **Manifest & content URLs** — configure `staticTabs` and/or `configurableTabs`, the configuration page, valid domains, and the `contentUrl`/`websiteUrl` distinction. Show required manifest fields. 2. **Teams JS init** — initialize the Teams JS SDK, read `app.getContext()` for tenant/team/channel/theme/locale, and handle the "running outside Teams" case for local dev. 3. **Configuration page** — implement the settings page that captures which board/service the tab tracks, calls `pages.config.setConfig`, and enables Save; persist the entity id in `contentUrl` params. 4. **SSO** — implement tab SSO: `authentication.getAuthToken`, on-behalf-of exchange to call your downstream API, and a consent-popup fallback when silent fails. Show the token flow. 5. **Deep linking** — generate and handle deep links: build a `https://teams.microsoft.com/l/entity/...` URL encoding a `subEntityId` (e.g., incidentId); on load, read `subPageId`/`subEntityId` from context and route the SPA to that view. Show both directions. 6. **Theming** — subscribe to theme change events and map default/dark/contrast to your CSS tokens so the tab never looks foreign. 7. **Performance & errors** — fast first paint, handle expired SSO, and a friendly error state instead of a blank iframe. Output as: (a) manifest tab snippets, (b) Teams JS init + context code, (c) config page + setConfig code, (d) SSO/OBO flow, (e) deep-link build + parse helpers, (f) a test checklist (config, SSO, deep link in/out, dark mode, outside-Teams). Bias toward: native feel (theme + locale aware), deep-linkable state, graceful SSO fallback over blank screens.
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 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.
-
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 Backup Job Status Digest Prompt
Design a Microsoft Teams Adaptive Card that summarizes nightly backup job outcomes — success/failure counts, failed jobs with reason, RPO breaches, and restore-test status — for the platform team.
-
Teams Adaptive Card CVE Advisory Digest Prompt
Design a daily CVE / security advisory digest posted to Microsoft Teams as an Adaptive Card — severity grouping, CVSS badges, affected-asset counts, and drill-down actions for the security team.
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.