Fallstudie 03 / 05 · spfx · Version 1 live seit September 2026

CRM-Webpart

Ein CRM, das in SharePoint lebt: Leads, Kontakte und Wiedervorlagen in Microsoft 365

Ein CRM für eine kleine Beratung, gebaut als SharePoint-Framework-Webpart: Leads, Firmen, Kontakte, Aufgaben und Berichte liegen in SharePoint-Listen, und die ganze App ist eine nummerierte Datei, die ein kleiner Loader aus einer Bibliothek holt. Produktentwurf, Ansichten und Geschäftsregeln stammen aus dem HTML-Prototyp der Führungskraft; ich habe den Lösungsweg entschieden, die SharePoint-Schicht, den Loader und die Einrichtungsskripte gebaut und das CRM ausgeliefert. Version 1 ist seit September 2026 live; Version 2 ist gebaut und paketiert.

SPFxTypeScriptSharePoint RESTPnP PowerShellesbuildVitest
15 + 2SharePoint-Listen, dazu 2 Bibliotheken
8Ansichten
6Pipeline-Phasen in Version 2
89automatisierte Tests im Code
Rolle
Entwicklung, als Werkstudent bei S01 Projektmanagement GmbH: Lösungsweg, SharePoint-Schicht, Release, Einrichtung
Produktentwurf
HTML-Prototyp der Führungskraft: Ansichten, Geschäftsregeln und Aussehen
Nutzende
die Inhaberin oder der Inhaber der Beratung im Tagesgeschäft; die Führungskraft gibt Releases frei und lädt sie hoch
Plattform
SharePoint Online in Microsoft 365, im Browser; ab Version 2 auch auf Smartphones und Tablets
Status
Version 1 live seit dem 29. September 2026; Version 2 (hier beschrieben) ist gebaut, paketiert und wartet auf die Freigabe
01 / warum es das gibt

Ein Prototyp, dessen Daten in einem einzigen Browser lagen

Das CRM begann als HTML-Prototyp der Führungskraft in einer einzigen Datei: Leads, Kontakte und Wiedervorlagen auf einer Seite, die Daten im lokalen Speicher eines einzelnen Browsers. Einen gemeinsamen Datenspeicher gab es nicht, und eine Sicherung bedeutete manuellen Export.

Es gab keinen zulässigen Weg, ihn im Microsoft 365 des Unternehmens zu betreiben. SharePoint schaltet benutzerdefinierte Skripte innerhalb von 24 Stunden wieder ab, das Unternehmen hat keine Premium-Lizenz für Power Apps, und eine Canvas-App konnte das freigegebene Design nicht abbilden. Der unterstützte Weg ist ein SharePoint-Framework-Webpart; ich habe die Optionen verglichen und mich dafür entschieden.

Anfragen kommen als E-Mails und als Projektanzeigen von Personalagenturen, und sie neu abzutippen dauert; deshalb liest die App eine eingefügte E-Mail und schlägt Firma, Kontakt und Lead vor. Das Nachfassen hing früher am Gedächtnis; jetzt wird ein Lead ohne offenen nächsten Schritt markiert.

Wer es nutzt

Gebaut für eine Person im Tagesgeschäft: die Inhaberin oder den Inhaber der Beratung. Die App unterscheidet keine Rollen. Die Führungskraft gibt jedes Release frei; nur sie lädt es hoch.

Was der Betrieb kostet

Nichts über Microsoft 365 hinaus: kein Server, keine zusätzliche Lizenz, und nichts verlässt den Tenant.

02 / so funktioniert es

Wie das Webpart lädt, läuft und speichert

Architekturdiagramm: CRM-Webpart Ein Loader-Webpart auf der CRM-Seite fragt die App-Bibliothek nach der neuesten App-Datei und startet sie. Die App hält ihre Datensätze in einem Store im Arbeitsspeicher und speichert Änderungen der Reihe nach über einen REST-Adapter in die Listen und die Dateiablage. Einrichtungsskripte legen Listen, Bibliotheken und Seite an. SPFX Loader-Webpart wählt die neueste App-Datei SHAREPOINT App-Bibliothek nummerierte Datei je Release TYPESCRIPT · SHADOW DOM CRM-Anwendung 8 Ansichten, zwei Sprachen TYPESCRIPT Store und Persister Regeln, geordnetes Speichern SHAREPOINT REST REST-Adapter schreibt nur geänderte Spalten SHAREPOINT 15 CRM-Listen die Datenbank SHAREPOINT Dateiablage Ordner je Datensatz PNP POWERSHELL Einrichtungsskripte richtet die Site ein MAX. 3 VERSUCHE HOCHLADEN = RELEASE Architekturdiagramm: CRM-Webpart Ein Loader-Webpart auf der CRM-Seite fragt die App-Bibliothek nach der neuesten App-Datei und startet sie. Die App hält ihre Datensätze in einem Store im Arbeitsspeicher und speichert Änderungen der Reihe nach über einen REST-Adapter in die Listen und die Dateiablage. Einrichtungsskripte legen Listen, Bibliotheken und Seite an. SPFX Loader-Webpart wählt die neueste App-Datei SHAREPOINT App-Bibliothek nummerierte Datei je Release TYPESCRIPT · SHADOW DOM CRM-Anwendung 8 Ansichten, zwei Sprachen TYPESCRIPT Store und Persister Regeln, geordnetes Speichern SHAREPOINT REST REST-Adapter schreibt nur geänderte Spalten SHAREPOINT 15 CRM-Listen die Datenbank SHAREPOINT Dateiablage Ordner je Datensatz PNP POWERSHELL Einrichtungsskripte richtet die Site ein MAX. 3 VERSUCHE HOCHLADEN = RELEASE
  1. 1Site einrichtenDie PnP-PowerShell-Skripte legen Listen, Bibliotheken, Navigation und Seite an. Ein Prüfskript vergleicht die Site anschließend mit dem Schema.
  2. 2CRM-Seite öffnenDer Loader fragt die App-Bibliothek nach ihren Dateien und wählt die App-Datei mit der höchsten Nummer.
  3. 3App startenDer Loader führt diese Datei in einem Shadow DOM aus, und die App liest alle Listen parallel über den REST-Adapter.
  4. 4Im CRM arbeitenÄnderungen gehen in den Store im Arbeitsspeicher, der die Regeln prüft und den Bildschirm sofort neu zeichnet.
  5. 5Im Hintergrund speichern MAX. 3 VERSUCHEDer Persister sendet Änderungen der Reihe nach an SharePoint, mit bis zu drei Versuchen. Lehnt SharePoint einen Datensatz ab, wird er zurückgesetzt und die Meldung von SharePoint angezeigt.
  6. 6Neue Version ausliefern HOCHLADEN = RELEASEDie Führungskraft legt die nächste nummerierte Datei in der Bibliothek ab. Beim nächsten Öffnen der Seite läuft sie, und Löschen ist der Rollback.
03 / datenmodell

Wie die Datensätze in SharePoint zusammenhängen

Datenmodell: CRM-Webpart Eine Firma hat viele Kontakte und viele Leads, als Endkundenfirma oder als Vermittlungsfirma. Ein Kontakt ist Hauptkontakt vieler Leads und kann bei vielen Leads zusätzlich als weiterer Kontakt geführt werden. Ein Lead hat viele Verlaufseinträge, Aufgaben, Dateien und Links. Quartalsergebnisse werden aus den Datensätzen gezählt und als eigene Zeilen abgelegt. Firmen eine pro Firma PK App-Schlüssel Name (eindeutig) Firmentyp Stadt Land Kontakte eine pro Person PK App-Schlüssel FK Firma Name Kontaktart Bewertung 0–5 Leads eine pro Anfrage PK App-Schlüssel Phase, Priorität, Betrag FK Endkundenfirma FK Vermittlungsfirma FK Hauptkontakt Verlauf eine pro Aktivität PK App-Schlüssel Art Text Datum FK Lead Aufgaben eine pro Aufgabe PK App-Schlüssel Titel Fällig, erledigt, Priorität FK Datensatz (Art + Schlüssel) Dateien und Links eine pro Datei oder Link PK App-Schlüssel FK Gehört zu (Art + Schlüssel) Beschreibung Datei oder URL Quartalsergebnisse eine pro Quartalsabschluss PK Quartal Abgeschlossen am OKR-Wert Eingefrorene Kennzahlen Rückblick
  • Firmen Liste

    eine pro Firma

    • PKApp-Schlüssel
    • Name (eindeutig)
    • Firmentyp
    • Stadt
    • Land
    • 1 Firma → viele Kontakte
    • 1 Firma → viele Leads (als Endkundenfirma)
    • 1 Firma → viele Leads (als Vermittlungsfirma)
  • Kontakte Liste

    eine pro Person

    • PKApp-Schlüssel
    • FKFirma
    • Name
    • Kontaktart
    • Bewertung 0–5
    • 1 Kontakt → viele Leads (Hauptkontakt)
    • viele Kontakte ↔ viele Leads (weitere Kontakte)
  • Leads Liste

    eine pro Anfrage

    • PKApp-Schlüssel
    • Phase, Priorität, Betrag
    • FKEndkundenfirma
    • FKVermittlungsfirma
    • FKHauptkontakt
    • 1 Lead → viele Verlaufseinträge
    • 1 Lead → viele Aufgaben
    • 1 Lead → viele Dateien und Links
  • Verlauf Liste

    eine pro Aktivität

    • PKApp-Schlüssel
    • Art
    • Text
    • Datum
    • FKLead
  • Aufgaben Liste

    eine pro Aufgabe

    • PKApp-Schlüssel
    • Titel
    • Fällig, erledigt, Priorität
    • FKDatensatz (Art + Schlüssel)
  • Dateien und Links Bibliothek

    eine pro Datei oder Link

    • PKApp-Schlüssel
    • FKGehört zu (Art + Schlüssel)
    • Beschreibung
    • Datei oder URL
  • Quartalsergebnisse Liste

    eine pro Quartalsabschluss

    • PKQuartal
    • Abgeschlossen am
    • OKR-Wert
    • Eingefrorene Kennzahlen
    • Rückblick

Vereinfacht: Sieben Kästen stehen für acht der 17 SharePoint-Objekte (Dateien und Links vereinen eine Bibliothek und eine Liste). Nicht gezeichnet: Veranstaltungen, Marktbeobachtung und Tagessatz-Vergleichswerte (gleiches Muster), die OKR-Liste, vier angelegte Listen, die keine Ansicht nutzt, und die App-Bibliothek (Code, keine Daten). Das ist Version 2; Version 1 hatte 14 Listen. Gestrichelter Rahmen: Dokumentbibliothek oder Dateiablage.

Ein App-Schlüssel pro Datensatz

Jeder Datensatz hat einen eigenen App-Schlüssel. So bleiben die SharePoint-IDs intern, und Verknüpfungen überstehen Umbenennungen. Verlauf, Aufgaben, Dateien und Links zeigen über Art und App-Schlüssel auf jeden beliebigen Datensatz.

Feste Namen, deutsche Bezeichnungen

Technische Namen ändern sich nie; deutsche Anzeigenamen liegen darüber, sodass sich Listen und Spalten umbenennen lassen, ohne die App zu stören.

Kennzahlen: gezählt, dann eingefroren

Die Trefferquote ist der Anteil gewonnener Leads an allen gewonnenen und verlorenen Leads des Zeitraums; zurückgezogene Leads bleiben außen vor. Beim Abschluss eines Quartals werden die Zahlen in einer Zeile der Quartalsergebnisse eingefroren.

04 / entscheidungen

Abwägungen, die den Aufbau bestimmt haben

Ein kleiner Loader und eine versionierte App-Datei

Nur ein Loader-Webpart von 17 KB läuft über den App-Katalog des Tenants und wird einmalig von der Administration installiert. Das CRM selbst ist eine nummerierte Datei in einer Bibliothek der Site: Hochladen ist das Release, Löschen der Rollback, und Schemaänderungen fügen immer nur hinzu. Abwägung: Die Schreibrechte auf diese Bibliothek müssen streng eingeschränkt werden.

SharePoint-Listen als Datenbank

Listen mit festen technischen Namen, deutschen Anzeigenamen darüber und einem von der App erzeugten Schlüssel pro Datensatz: kein externes Hosting, kein Server, keine zusätzliche Lizenz. Abwägung: Die App muss die Integrität selbst sichern, sie geht von einer schreibenden Person zur Zeit aus, und der letzte Schreibvorgang gewinnt.

Optimistisch speichern, nur Änderungen senden

Jede Änderung landet zuerst im Store im Arbeitsspeicher, und der Bildschirm zeichnet sofort neu; ein Persister vergleicht dann Vorher und Nachher und sendet nur die geänderten Spalten, der Reihe nach im Hintergrund. Abwägung: Ein fehlgeschlagenes Speichern fällt erst spät auf, als Meldung und mit dem Zurücksetzen dieses einen Datensatzes.

Prototyp übernehmen statt neu schreiben

Kein Framework, ein Shadow DOM und Übersetzung per Wörterbuch: So erscheint das freigegebene Design exakt, und spätere Überarbeitungen des Prototyps lassen sich weiter einspielen. Abwägung: Der größte Teil des Codes ist der übernommene Prototyp und nicht typgeprüft.

05 / mein beitrag

Was ich gemacht habe

  • Die Lösungswege verglichen (Power-Apps-Code-Apps, gehostetes HTML, Canvas-App, externe Website), mich für SPFx auf SharePoint-Listen entschieden und die Gründe festgehalten.
  • Die SharePoint-Schicht in striktem TypeScript gebaut, mit REST-Adapter, Persister samt Wiederholungen und Rollback sowie Dateiablage, und mit 39 Unit-Tests getestet.
  • Das Loader-Webpart und den Release-Mechanismus gebaut und die PnP-PowerShell-Skripte geschrieben, die die Site einrichten und gegen das Schema prüfen.
  • Den Prototyp der Führungskraft übernommen, der Produktentwurf, Ansichten und Geschäftsregeln liefert, und ihn von Revision 18 bis Revision 48 sowie durch die Rückmeldungen vom 14. Oktober 2026 aktuell gehalten; SharePoint-Speicherung, Deutsch und Englisch, das Smartphone-Layout und eine Sandbox ergänzt.
  • Die E-Mail-Erkennung erweitert, sodass sie auch Projektanzeigen von Personalagenturen versteht.
  • Die Dokumentation geschrieben (Konzept, Übergabe, Datenmodell auf Deutsch und Englisch, Release-Ablauf, Go-live-Checkliste, Testplan, Release Notes) und für den Go-live vorübergehend die Site-Eigentümerrolle übernommen.
06 / ergebnis

Version 1 live seit September 2026, Version 2 paketiert

Version 1 ist seit dem 29. September 2026 live, 13 Tage nach dem ersten Commit am 16. September. Version 2 wurde am 14. Oktober gebaut und am 15. Oktober 2026 paketiert; sie wartet auf die Freigabe durch die Führungskraft. Die Live-Demo läuft mit dem Code von Version 2 und erfundenen Daten der fiktiven Nordstern Projektmanagement GmbH, gespeichert im Browser statt in SharePoint.

Live-Demo öffnen