Entwicklerdokumentation – Sparks for Teams

Sprache: Deutsch | English

---

App-Store und Teams-Widgets

Sparks bietet einen eigenen App-Store in Chats und Kanälen (Suche, Kategorien, integrierte Apps, Website-URL). Zusätzlich können Sie ein Microsoft-Teams-manifest.json importieren. Es gibt keinen Microsoft Teams App Store 1:1 — professionelle SSO-Apps brauchen eine Partner-Freigabe der Sparks-Azure-Client-ID.

Szenario	Aufwand / Hinweis
Eigene Widgets (von Ihnen gehostet)	Gering — TeamsJS wie in Teams, Same-Origin in Sparks
Bereits in Teams angeheftete Tabs	Graph zeigt sie in MS Chat/Channels (und verknüpften Matrix-Räumen), wenn Microsoft-Login und optional TeamsTab.Read.All
Einfache Drittanbieter-Tabs	Manifest importieren; funktioniert gut ohne strenge Token-Audience-Prüfung
Professionelle SSO-Store-Apps	App muss Sparks als Authorized Client whitelisten; sonst nur eingeschränktes Token

Nutzerhilfe: Dialog Tab hinzufügen, Custom Tabs.

---

MS-Teams-Widgets für Sparks for Teams anpassen

Sparks unterstützt Tabs und Widgets, die dem Microsoft Teams App-Manifest-Schema folgen. Viele Teams-Tab-Apps lassen sich mit geringen oder keinen Änderungen einbinden.

Voraussetzungen

• Manifest: Ein gültiges Teams App-Manifest (JSON) — Import im App-Store („Teams-Manifest importieren“)
• Tabs: Statische Tabs (staticTabs) oder konfigurierbare Tabs (configurableTabs)
• Domains: Alle verwendeten URLs müssen in validDomains eingetragen sein (HTTPS)

Manifest-Struktur (Auszug)

{
  "id": "your-app-id",
  "version": "1.0.0",
  "manifestVersion": "1.16",
  "name": { "short": "App Name", "full": "Full App Name" },
  "description": { "short": "...", "full": "..." },
  "developer": {
    "name": "Your Company",
    "websiteUrl": "https://example.com",
    "privacyUrl": "https://example.com/privacy",
    "termsOfUseUrl": "https://example.com/terms"
  },
  "icons": { "outline": "outline.png", "color": "color.png" },
  "staticTabs": [
    {
      "entityId": "tab1",
      "name": "Tab Name",
      "contentUrl": "https://your-domain.com/tab",
      "websiteUrl": "https://your-domain.com/tab",
      "scopes": ["personal", "groupchat", "team"]
    }
  ],
  "validDomains": ["your-domain.com"]
}

Überblick: Paket und Hosting

Die folgenden Abbildungen fassen zusammen, wie Manifest, Tab-URLs und die Sparks-Oberfläche zusammenspielen.

Paketinhalt: manifest.json, Icons und HTTPS-Webinhalt der Tabs; das Manifest verknüpft staticTabs / configurableTabs mit validDomains.

Sparks lädt den Tab in einem Sandbox-iframe; dort rufen Sie wie in Teams microsoftTeams.app.initialize() auf.

Wichtige Anpassungen

Aspekt	Hinweis
Teams JavaScript SDK	Sparks injiziert einen kompatiblen Polyfill (initialize, getContext, getAuthToken, Theme, pages.config, Notify). Rufen Sie microsoftTeams.app.initialize() nach dem Laden auf.
contentUrl / websiteUrl	Muss HTTPS sein und in validDomains stehen.
Scopes	personal, groupchat, team – Sparks unterstützt diese Kontexte.
iframe-Sandbox	Tabs laufen in iframes; keine nativen Plugins.
SSO (getAuthToken)	Ohne webApplicationInfo liefert Sparks ein allgemeines MSAL-Token. Mit webApplicationInfo versucht Sparks den app-spezifischen Scope — dafür muss Ihre Azure-App die Sparks-Client-ID als Authorized Client freigeben.
Import	Im Raum: Tab hinzufügen / Apps → „Teams-Manifest importieren“ (JSON-Datei).

Partner-SSO (Azure)

1. In der App-Registrierung der Tab-App: Expose an API → Authorized client applications → Sparks-Client-ID eintragen.
2. Im Manifest webApplicationInfo.id und resource korrekt setzen.
3. Manifest in Sparks importieren; Nutzer mit Microsoft anmelden.

Microsoft-Dokumentation (Original)

• Build tabs for Teams – Übersicht Tabs
• App manifest schema for Microsoft Teams – Manifest-Schema
• Create a personal tab – Statische Tabs
• Create a channel or group tab – Konfigurierbare Tabs
• Teams JavaScript client library – SDK-Referenz
• Create tab pages (content, configuration, removal) – Content-Seite

---

Meeting-Video und Hintergrundeffekte (Vistameet-Teams)

Für Arbeit am Client-Repository Vistameet-Teams:

Thema	Hinweis
@livekit/track-processors	Blur und virtueller Hintergrund. Im Repo: ^0.7.2; auf npm zuletzt 0.7.2 (vor Updates: npm view @livekit/track-processors version). Exakte Pins siehe package.json (livekit-client usw.).
Prozessor beenden	Hintergrundeffekt sauber entfernen: LocalVideoTrack.stopProcessor() (LiveKit). Ohne diesen Schritt kann die Kamera-Vorschau nach dem Deaktivieren von Blur/Hintergrundbild hängen bleiben.

Nutzerhinweise (Auto/GPU/CPU, Vollfläche): Meeting beitreten.

---

Matrix-Chat: Nachricht weiterleiten (Vistameet-Teams)

Benutzerdokumentation: Dialog Nachricht weiterleiten.

Technische Implementierung im Client-Repository Vistameet-Teams:

Thema	Hinweis
UI	ForwardDialog — gemeinsam für Chat (MessageBubble) und Matrix-Kanal (ThreadBox)
Versand	chatStore.sendMessage → matrixService.sendMessage; neue m.text-Nachricht mit Präfix forwardedMessageFrom
Protokoll	Kein Matrix-Forward-Event (m.forward); Klartext, keine Anhänge
Kanal vs. Chat	Chat blendet Quellraum aus (excludeRoomId); Kanal nicht

---

n8n und Automatisierung

Umfassendes Entwicklerhandbuch (API-Keys, REST /api/v1/automation, Incoming/Outgoing Webhooks, Custom Nodes, Betrieb):

• n8n-Automatisierung

Technische Kurzreferenz und OpenAPI liegen im App-Repo Vistameet-Teams unter docs/N8N.md und docs/openapi/sparks-automation-v1.yaml.

---

Verwandte Seiten

• Benutzerhandbuch
• n8n-Automatisierung
• Bereich: Einstellungen – Apps