Eigene Navigations-Kacheln anlegen

Im SpeamCore-Dashboard können Sie als Admin eigene Kacheln ergänzen — zum Beispiel zu externen Tools (HubSpot, Microsoft Teams, Trello), zu mandanten-spezifischen Web-Anwendungen oder zu vordefinierten Aktions-Workflows. Diese Anleitung führt Sie durch das Anlegen, die Icon-Auswahl und die Zuweisung an die richtigen Mitarbeiter.

Wann mache ich das?

• Vertrieb fragt nach Schnellzugriff auf das CRM (z. B. HubSpot, Salesforce).
• Niederlassung hat eigene Web-Tools (Fuhrpark-Verwaltung extern, Stadtwerke-Portal).
• GF wünscht prominente Verlinkung zu Strategie-Dokumenten in SharePoint.
• Wiederkehrende Workflows sollen direkt von der Startseite angetriggert werden.

i

Voraussetzung

• Sie sind mit Admin-Account in SpeamCore eingeloggt.
• Berechtigungen create:CustomNavigationTile und (für Rollen-Zuweisung) view:CustomNavigationTileAssignment.
• Die Ziel-URL (bei type = url) ist bekannt und erreichbar — am besten vorher im Browser testen.
• Für Rollen-Zuweisung: Die zuweisende Rolle existiert bereits (siehe Rollen).

So legen Sie eine eigene Kachel an

1

Modul öffnen und + Neu klicken

In der Sidebar im Bereich Administration auf Eigene Kacheln (/custom-navigation-tiles). Sie sehen die Liste aller bestehenden Custom-Tiles im Mandanten.

Klick auf + Neu oben rechts öffnet das Anlage-Modal.

2

Name und Typ festlegen

Feld	Was reinkommt
Name (Pflicht)	Anzeigename auf der Kachel und im Sidebar-Suchfeld. Kurz und sprechend — z. B. „HubSpot", „Teams", „Stadtwerke Esslingen".
Typ (Pflicht)	url für externe Verlinkungen, advanced für komplexere Aktions-Workflows.

Faustregel:

• url — Wenn die Kachel einfach einen anderen Browser-Tab öffnet. 95 % der Fälle.
• advanced — Nur, wenn parametrisierte Aktionen oder mandanten-spezifische Konfiguration nötig sind. Wird unter /custom-navigation-tiles/:id/advanced als Sub-Route gepflegt.

3

Icon-Selector mit Cross-Library-Suche

Klick auf das Icon-Feld öffnet den Icon-Selector als zentriertes Modal. Sie haben zwei Möglichkeiten:

Variante A — Direkt suchen (empfohlen):

1. Im Suchfeld oben einen Begriff eintippen, z. B. hubspot, team, home, flame.
2. SpeamCore durchsucht 31 Icon-Bibliotheken parallel (Tabler, Font Awesome 5/6, Material Design, Ionicons, Heroicons, Remix, BoxIcons, Bootstrap, Ant Design, Feather, Lucide, Simple Icons, Phosphor, GitHub Octicons, weitere).
3. Treffer werden nach Library gruppiert angezeigt — max. 36 pro Library, damit das Modal flüssig bleibt.
4. Klick auf das gewünschte Icon übernimmt es.

Variante B — Library-Browse:

1. Im Modal eine Library wählen (z. B. „Tabler", „Lucide").
2. Innerhalb der Library scrollen oder lokal suchen.
3. Klick auf das gewünschte Icon übernimmt es.

Das Icon wird intern als String gespeichert (z. B. TbBrandHubspot, FaHouse, LuRocket). Bei späteren Anzeigen in Sidebar, Dashboard und Suche lädt SpeamCore die richtige Library automatisch nach.

KI

Library-Cache

Die erste Suche in einer Library lädt die Icon-Bibliothek einmalig nach (Lazy-Load). Bei Folgesuchen sind die bereits geladenen Libraries sofort verfügbar — der Modal-Wechsel ist dann blitzschnell.

4

URL und Open-Verhalten

Bei type = url:

Feld	Was reinkommt
URL (Pflicht)	Vollständige URL mit Protokoll, z. B. https://app.hubspot.com/.
URL Open Mode (Pflicht)	new_tab (Standard, empfohlen), same_tab (öffnet im selben Tab), popup (kleines Browser-Fenster).

Faustregel:

• new_tab für 95 % der externen Tools — User behält SpeamCore offen.
• same_tab nur für interne SpeamCore-Workflows.
• popup für kurze Single-Page-Tools (z. B. ein internes Mini-Tool).

Speichern. Die Kachel ist angelegt, aber noch niemandem zugewiesen — sie taucht nirgends auf, bis Sie das nachholen.

5

Zuweisen — drei Wege

Eine Custom-Tile wird über Zuweisungen sichtbar. Sie haben drei Zieltypen:

Typ	Wirkung	Wann nutzen?
Mitarbeiter	Kachel nur für einen einzelnen Account sichtbar	Wenige Mitarbeiter, sehr individuelle Tools
Abteilung	Kachel für alle MA mit aktiver Rolle in der Abteilung	Abteilungs-spezifische Tools (Buchhaltung, Lager)
Rolle	Kachel für alle MA mit dieser Rolle	Funktion-/rollen-basierte Tools (Vertrieb, Außendienst, HR)

Weg A — Über das Tile-Detail (Standard):

1. Im Tile-Detail auf Sub-Tab Assignments wechseln (/custom-navigation-tiles/<id>/assignments).
2. + Zuweisen klicken → Picker mit Mehrfach-Auswahl.
3. Ziel-Typ wählen (Mitarbeiter, Abteilung oder Rolle) und passende Einträge auswählen.
4. Speichern. Die Assignments erscheinen in der Tab-Liste mit Typ und Name.

Weg B — Über das Rolle-Detail (neu in Welle 114, empfohlen für Rollen-basierte Tiles):

1. /roles/<id> öffnen.
2. Auf den Tab Custom Tiles wechseln (zeigt Count-Badge mit Anzahl zugewiesener Tiles).
3. Tile-Picker öffnen → mehrere Tiles auf einmal zur Rolle hinzufügen. Bereits zugewiesene Tiles sind deaktiviert.

Vorteil von Weg B: Wenn Sie zehn Tiles für die Vertriebs-Rolle pflegen wollen, müssen Sie nicht zehn Mal in die Tile wechseln — alles aus der Rolle heraus.

KI

Mehrere Zuweisungen kombiniert

Eine Tile darf an Mitarbeiter UND Abteilung UND Rolle zugewiesen sein. Die Sichtbarkeits-Logik ist OR — sieht ein User die Tile aus einer der Zuweisungen, sieht er sie überhaupt. Doppel-Zuweisungen (z. B. „Vertriebs-Rolle UND einzelner Vertriebler") sind unkritisch.

6

Test — bevor Sie an die User kommunizieren

Bevor Sie die User informieren, prüfen Sie die Kachel im UI:

1. Eigenes Dashboard öffnen (z. B. / oder /home). Wenn Sie selbst die Zuweisung haben, sehen Sie die Tile.
2. Icon prüfen — wird das gewählte Icon korrekt gerendert? Falls nicht: zurück in den Icon-Selector und einen anderen Icon-Namen wählen.
3. Klick-Verhalten testen — öffnet sich der richtige Tab/Fenster? Bei new_tab Pop-up-Blocker erlauben.
4. Sidebar-Suche — Tile-Name eingeben und prüfen, ob er gefunden wird.

Bei Fehler: Tile-Detail öffnen, Felder korrigieren, neu speichern.

Weg 2 — Custom-Tile per KI-Chat anlegen

KI

KI ist Hilfestellung — Kontrolle bleibt beim Admin

Die KI kann Fehler machen — falsche URL, unpassendes Icon, verschluckte Zuweisung. Sie ist nur eine erleichternde Hilfestellung; die Sicherheits- und Berechtigungs-Verantwortung bleibt beim Admin. Custom-Tiles werden auf der Startseite prominent angezeigt — ungeprüfte URLs können Phishing-Vektoren sein.

Beispiel-Prompt:

Lege eine eigene Kachel an: Name „HubSpot", URL https://app.hubspot.com,
Icon Hubspot-Logo, Open-Mode neuer Tab. Weise sie der Rolle „Vertrieb"
zu. Vorher die Liste der Vertriebler — ich gebe nochmal frei.

Die KI bereitet den Aufruf vor, listet die zu erwartenden Effekte und wartet auf Ihre Bestätigung.

Was tue ich, wenn etwas schiefgeht?

!

Kachel erscheint nicht auf der Startseite

Drei häufige Ursachen: (1) Keine Zuweisung — der User ist weder direkt noch über Abteilung/Rolle berechtigt. (2) Status der Tile ist inaktiv (falls Status-Feld gepflegt). (3) FE-Cache — Browser-Refresh mit Ctrl+Shift+R / Cmd+Shift+R.

!

Icon wird nicht angezeigt — leeres Quadrat statt Symbol

Der gespeicherte Icon-Bezeichner ist nicht aufzulösen. Zurück in den Icon-Selector, ein anderes Icon wählen. Wenn das Problem reproduzierbar ist: Library-Präfix prüfen (z. B. Tb, Fa, Md) — manuell editierte Strings können dem Format nicht entsprechen.

!

URL führt auf 404 / Fehler-Seite

URL kopieren und im Browser direkt testen. Bei externen Diensten mit Login (z. B. HubSpot) muss der User dort eingeloggt sein — die Tile öffnet nur die URL, sie löst kein SSO aus.

!

Custom-Tiles-Tab in der Rolle fehlt

Berechtigung view:CustomNavigationTileAssignment fehlt. Im Rollen-Modul des aktuellen Users prüfen oder Service-Account konsultieren.

!

Tile-Suche findet meine Kachel nicht

Die Sidebar-Suche prüft den name und optionale Such-Aliase. Wenn ein Mitarbeiter einen abweichenden Begriff sucht (z. B. „CRM" statt „HubSpot"), kann der Admin im Tile-Detail Aliase hinterlegen.

Tipps aus der Praxis

• Vor Anlage abstimmen — Marketing/GF zustimmend, sonst Wildwuchs an Startseiten-Kacheln.
• Naming konsistent — gleiche Naming-Konvention für ähnliche Tile-Typen („HR Tool – Bewerbungen", „HR Tool – Personalakte", …).
• Icons aus einer Familie — wenn mehrere Tiles für eine Persona, möglichst aus derselben Library für visuelle Konsistenz.
• Quartalsweise Audit — /custom-navigation-tiles durchgehen, ungenutzte Tiles archivieren.
• Rolle statt Mitarbeiter — bei mehr als 2-3 Empfängern lieber über die Rolle zuweisen, sonst Pflege-Hölle bei Personalwechsel.

Verwandte Tutorials

• Setup-Wizard durchklicken — wo CustomTiles bei Mandanten-Anlage initialisiert werden
• Berechtigungen verwalten — Rollen-/CASL-Grundlagen
• Settings und Customization — andere Mandanten-Customizations

Für Admins: technische Details

• Modul-Doku: Eigene Navigations-Kacheln.
• Datenmodell: CustomNavigationTile (Tile selbst) und CustomNavigationTileAssignment (Zuweisung mit parentType = Employee / Department / Role).
• Icon-Rendering: DynamicIcon-Komponente lädt die react-icons-Library lazy. Cache auf Modul-Ebene, max. 36 Treffer pro Library bei Cross-Search.
• API-Endpoints: POST /api/custom-navigation-tiles, POST /api/custom-navigation-tile-assignments, DELETE /api/custom-navigation-tile-assignments/:id.
• Tab-Count am Rolle-Detail: separater Aggregations-Endpoint GET /api/count/CustomNavigationTileAssignment?filter=parentType,equals,Role&filter=parentId,equals,<id>.
• CASL-Subjects: CustomNavigationTile:create/update/delete, CustomNavigationTileAssignment:view/create/delete. FE: FE_CustomNavigationTile:view.