Seminar Squidex – Erweiterungen mit Custom Editors, Sidebars und Plugins

Standardfelder und die integrierte Redaktionsoberfläche decken viele Anforderungen ab. Spezifische Fachprozesse benötigen jedoch teilweise eigene Editoren, kontextbezogene Seitenleisten oder weitergehende Erweiterungen. Solche Anpassungen greifen unmittelbar in Bedienbarkeit, Sicherheit, Versionskompatibilität und Betrieb ein.

Das Seminar entwickelt mehrere Erweiterungen von der Anforderungsanalyse bis zum abgesicherten Rollout. Kommunikationsschnittstellen, Eingabevalidierung, Identität, Hosting, Testbarkeit und Upgrade-Strategie werden als zusammenhängendes Erweiterungskonzept behandelt.

Zielgruppe

Erfahrene Webentwickler, Squidex-Plattformteams, Integrationsarchitekten und technische Verantwortliche für maßgeschneiderte Redaktionsoberflächen

Voraussetzungen

Sichere Kenntnisse in JavaScript oder TypeScript, HTML, CSS, Web-Sicherheit und Squidex-Content-Modellen; Erfahrung mit Frontend-Build- und Deploymentprozessen

Seminarziele

• Erweiterungsbedarf gegenüber Modellierung, Skripting und externer Anwendung abgrenzen.
• Custom Editors mit sicherem Daten- und Zustandsaustausch entwickeln.
• Sidebars für kontextbezogene Prüfungen und externe Funktionen umsetzen.
• Plugin- und Integrationsgrenzen mit klarer Authentifizierung und Fehlerbehandlung gestalten.
• Erweiterungen automatisiert testen, versionieren, deployen und upgradefähig betreiben.

Inhaltsübersicht

1. Zielgruppe und Voraussetzungen
2. Seminarziele
3. Erweiterungsarchitektur und Entscheidungsrahmen
4. Custom Editor: Einbettung und Lebenszyklus
5. Custom Editor: Validierung und Benutzerführung
6. Sidebars und kontextbezogene Werkzeuge
7. Authentifizierung und sichere externe APIs
8. Plugins, Skripting und Integrationsbausteine
9. Automatisierte Tests und Qualitätsabnahme
10. Deployment, Versionierung und Upgrade-Strategie
11. Praxisprojekt und Abnahme

1. Erweiterungsarchitektur und Entscheidungsrahmen

Dieser Themenblock verbindet fachliche Entscheidung, konkrete Konfiguration und überprüfbare Abnahme. Die Schritte werden an einer durchgängigen Beispiel-App umgesetzt und mit geeigneten Positiv- und Negativfällen kontrolliert.

Schrittweises Vorgehen

1. Fachliche Lücke, betroffene Persona und erwarteten Nutzen präzisieren.
2. Konfiguration, Schemaänderung, Skript, Custom Editor, Sidebar und externe Anwendung vergleichen.
3. Datenfluss, Vertrauensgrenzen und Verantwortlichkeiten visualisieren.
4. Wartungs-, Sicherheits- und Upgradeaufwand vor der Umsetzung bewerten.
5. Abnahmekriterien für Bedienbarkeit, Funktion und Betrieb festlegen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

2. Custom Editor: Einbettung und Lebenszyklus

Der Abschnitt wird als vollständiger Arbeitsablauf bearbeitet: Ausgangslage erfassen, Zielzustand festlegen, Konfiguration umsetzen, Verhalten testen und die betriebliche beziehungsweise redaktionelle Übergabe dokumentieren.

Schrittweises Vorgehen

1. Editor-Anwendung mit stabiler Build- und Hostingstruktur vorbereiten.
2. Einbettung, Initialisierung und Kommunikation mit der Redaktionsoberfläche nachvollziehen.
3. Aktuellen Feldwert lesen, lokal bearbeiten und kontrolliert zurückschreiben.
4. Lade-, Fehler- und Read-only-Zustände explizit behandeln.
5. Editor für verschiedene Feldkonfigurationen wiederverwendbar machen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

3. Custom Editor: Validierung und Benutzerführung

Die Inhalte werden nicht isoliert demonstriert. Jede Entscheidung wird anhand von Auswirkungen auf Redaktion, API, Sicherheit, Betrieb und spätere Änderungen bewertet und anschließend praktisch validiert.

Schrittweises Vorgehen

1. Fachliche Eingaberegeln in nachvollziehbare UI-Schritte übersetzen.
2. Lokale Validierung von serverseitigen Schema-Regeln trennen.
3. Fehlertexte, Hilfen und Tastaturbedienung barrierearm gestalten.
4. Zwischenstände und unbeabsichtigten Datenverlust kontrollieren.
5. Grenzfälle mit leeren, ungültigen und veralteten Werten testen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

4. Sidebars und kontextbezogene Werkzeuge

Im Mittelpunkt steht ein reproduzierbares Vorgehen. Konfiguration, Testdaten, Prüfschritte und Abnahmekriterien werden so festgehalten, dass der Ablauf in einer eigenen Umgebung wiederholt werden kann.

Schrittweises Vorgehen

1. Sidebar-Anwendungsfall auf Content-, Schema- und Benutzerkontext begrenzen.
2. Kontextdaten sicher lesen und nur benötigte Informationen anzeigen.
3. Externe Qualitätsprüfung oder Vorschau kontrolliert anstoßen.
4. Ergebnisse mit Status, Details und erneuter Prüfung darstellen.
5. Fehlende Berechtigungen und nicht verfügbare Zielsysteme abfangen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

5. Authentifizierung und sichere externe APIs

Dieser Themenblock verbindet fachliche Entscheidung, konkrete Konfiguration und überprüfbare Abnahme. Die Schritte werden an einer durchgängigen Beispiel-App umgesetzt und mit geeigneten Positiv- und Negativfällen kontrolliert.

Schrittweises Vorgehen

1. Browserseitige und serverseitige Vertrauensgrenzen eindeutig festlegen.
2. Secrets aus dem Frontend entfernen und über einen Backend-for-Frontend-Dienst kapseln.
3. OIDC- beziehungsweise Client-basierte Zugriffe mit minimalen Rechten umsetzen.
4. Eingaben, Ausgaben, Ursprünge und Content-Security-Policy absichern.
5. Missbrauchsfälle mit manipulierten Nachrichten und unzulässigen Requests testen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

6. Plugins, Skripting und Integrationsbausteine

Der Abschnitt wird als vollständiger Arbeitsablauf bearbeitet: Ausgangslage erfassen, Zielzustand festlegen, Konfiguration umsetzen, Verhalten testen und die betriebliche beziehungsweise redaktionelle Übergabe dokumentieren.

Schrittweises Vorgehen

1. Erweiterungslogik nach Ausführungsort und Verantwortungsbereich zerlegen.
2. Skripting für kleine deterministische Fachlogik einsetzen.
3. Externe Dienste für langlaufende, privilegierte oder zustandsbehaftete Funktionen verwenden.
4. Plugin- beziehungsweise Erweiterungskonfiguration versionieren und validieren.
5. Kompatibilitätsgrenzen und Fallback-Verhalten dokumentieren.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

7. Automatisierte Tests und Qualitätsabnahme

Die Inhalte werden nicht isoliert demonstriert. Jede Entscheidung wird anhand von Auswirkungen auf Redaktion, API, Sicherheit, Betrieb und spätere Änderungen bewertet und anschließend praktisch validiert.

Schrittweises Vorgehen

1. Unit-Tests für Mapping, Validierung und Zustandslogik erstellen.
2. Komponententests für Nachrichten- und API-Kommunikation aufbauen.
3. End-to-End-Szenarien in der eingebetteten Redaktionsoberfläche ausführen.
4. Security-, Accessibility- und Fehlertests in die Abnahme integrieren.
5. Testdaten und Mock-Dienste reproduzierbar bereitstellen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

8. Deployment, Versionierung und Upgrade-Strategie

Im Mittelpunkt steht ein reproduzierbares Vorgehen. Konfiguration, Testdaten, Prüfschritte und Abnahmekriterien werden so festgehalten, dass der Ablauf in einer eigenen Umgebung wiederholt werden kann.

Schrittweises Vorgehen

1. Artefakte signiert beziehungsweise nachvollziehbar bauen und ausliefern.
2. Konfiguration pro Umgebung ohne Quellcodeänderung bereitstellen.
3. Versionen, Rückwärtskompatibilität und Rollback-Regeln definieren.
4. Canary- oder Pilot-Rollout mit Telemetrie und Abbruchkriterien durchführen.
5. Kompatibilität nach Squidex- und Browserupdates regelmäßig prüfen.

Prüfpunkte

• Die Konfiguration erfüllt den beschriebenen fachlichen Zweck ohne unnötige Sonderfälle.
• Berechtigungen, Fehlerzustände und Auswirkungen auf abhängige Komponenten sind geprüft.
• Ergebnis, offene Punkte und Wiederholungsweg sind nachvollziehbar dokumentiert.

Praxisprojekt und Abnahme

Eine fachliche Redaktionsprüfung wird als Custom Editor und Sidebar umgesetzt, abgesichert, getestet und mit einem kontrollierten Rollout bereitgestellt.

Arbeitsschritte

1. Erweiterungsentscheidung und Vertrauensgrenzen dokumentieren.
2. Custom Editor mit Wertübergabe, Validierung und Fehlerzuständen entwickeln.
3. Sidebar mit externer Qualitätsprüfung über ein Backend-for-Frontend ergänzen.
4. Security-, Accessibility-, Komponenten- und End-to-End-Tests ausführen.
5. Versioniertes Deployment mit Telemetrie und Rollback praktisch durchführen.

Abnahmekriterien

• Der fachliche Anwendungsfall ist mit repräsentativen Daten vollständig durchgespielt.
• Fehler-, Berechtigungs- und Wiederanlaufszenarien sind kontrolliert geprüft.
• Konfiguration, Tests und Verantwortlichkeiten sind so dokumentiert, dass der Transfer in eine eigene Umgebung möglich ist.