Erste Schritte
KI verbinden
Integrationen
Self-Hosting
Contacts, Organizations, Deals, Services und Tasks nutzen dasselbe Layout in der Customermates Web-App (Liste, Drawer, Detail), mit stabilen Anchor-Ids für AI-Agents, die die UI steuern.
Customermates hat fünf Datensatztypen: Contacts, Organizations, Deals, Services und Tasks. Sie nutzen alle dasselbe Screen-Layout, deshalb dokumentiert diese Seite sie gemeinsam, für Menschen und für AI-Agents, die die UI steuern.
Jeder Datensatztyp hat dieselben drei Oberflächen:
/{type} (zum Beispiel /contacts), locale-präfixiert wie https://customermates.com/en/contacts. Suche, Filter, Sortierung und Massenaktionen leben hier.?open={entityType}:{id} an die Listen-URL an (zum Beispiel /contacts?open=contact:{id}), um einen Datensatz über der Liste zu bearbeiten./{type}/{id} (zum Beispiel /contacts/42) für den vollen Datensatz, Custom Fields und das Löschen.Zeilen tragen nie eine DOM-Id. Öffne einen Datensatz über seine URL oder den Drawer-Deep-Link, nie durch Klick auf eine per Id gesuchte Zeile.
Jeder Datensatztyp hat seine eigene Route und seine eigenen Toolbar-Ids, mit dem Typ als Präfix. Die vier Toolbar-Steuerelemente verhalten sich überall gleich: Add öffnet den Anlege-Drawer, Search filtert die Liste live, Filter öffnet das Filter-Popover (Filter-Syntax), und Display options steuert Spalten, Sortierung und Ansichtsmodus.
| Datensatztyp | Route | entityType | Sidebar | Toolbar: add, search, filter, display options |
|---|---|---|---|---|
| Contacts | /contacts | contact | #nav-contacts | #contacts-add, #contacts-search, #contacts-filter, #contacts-display-options |
| Organizations | /organizations | organization | #nav-organizations | #organizations-add, #organizations-search, #organizations-filter, #organizations-display-options |
| Deals | /deals | deal | #nav-deals | #deals-add, #deals-search, #deals-filter, #deals-display-options |
| Services | /services | service | #nav-services | #services-add, #services-search, #services-filter, #services-display-options |
| Tasks | /tasks | task | #nav-tasks | #tasks-add, #tasks-search, #tasks-filter, #tasks-display-options |
Diese Ids teilen sich alle Datensatztypen.
| Aktion | Wo | Anchor id | Was passiert |
|---|---|---|---|
| Speichern (Drawer) | Drawer-Footer | #drawer-save | Speichert Änderungen im Drawer |
| Speichern / Zurücksetzen (Detail) | Detail-Topbar | #entity-save / #entity-reset | Speichert oder verwirft Änderungen |
| Felder bearbeiten | Detail-Topbar | #entity-edit-fields | Schaltet die Feldbearbeitung um |
| Custom Field hinzufügen | Detail-Topbar | #entity-add-custom-field | Legt eine Custom Column an |
| Löschen | Detail-Topbar | #entity-delete | Öffnet das Bestätigungs-Modal |
| Löschen bestätigen / abbrechen | Bestätigungs-Modal | #confirm-delete / #confirm-delete-cancel | Unwiderrufliches Löschen oder Abbruch |
| Massenlöschung | Auswahlleiste nach Checkbox-Auswahl | #mass-delete | Löscht alle ausgewählten Zeilen |
Notizen sind ein beschriftetes Feld im Formular. Dort bearbeiten, dann speichern.
Jeder Datensatztyp kann benutzerdefinierte Custom Columns tragen. Es gibt keine fest im Typ verankerten Workflow-Felder, also weder eine produktseitige Deal-Stage noch einen produktseitigen Task-Status. get_record_schema gibt zurück, welche Columns ein Workspace für den jeweiligen Typ konfiguriert hat.
Eine singleSelect-Custom-Column kann eine Board-Ansicht (Kanban) steuern. #{type}-display-options wechselt die Liste zwischen Tabelle und einem Board, gruppiert nach einer gewählten singleSelect-Column. Im Board ziehst du einen Datensatz zwischen den Spalten, um den Wert dieser Column zu ändern; das Pendant im Drawer oder Detail-Formular ist, das Feld zu setzen und zu speichern. Das gilt für jeden Datensatztyp mit mindestens einer singleSelect-Column, nicht nur für Deals.
Der Demo-Workspace bringt Beispiel-Columns mit, um das Muster zu zeigen, etwa eine "Status"-Column bei Deals sowie "Status"- und "Priority"-Columns bei Tasks. Das sind vorbefüllte Beispiele, kein festes Verhalten. Benenne sie um, ändere ihre Optionen, füge weitere hinzu oder entferne sie pro Workspace.
Datensätze verknüpfen sich mit anderen Datensätzen über beschriftete Relations-Felder im Formular. Wähle die Datensätze, dann speichern.
document.querySelector('#deals-add'). Ids sind über Sprachen und Viewports identisch, sichtbare Labels nicht./{type}/{id} für die volle Seite oder /{type}?open={entityType}:{id} für den Drawer. Versuche nicht, eine Zeile anzuklicken.singleSelect-Column setzen, ist ein Tool-Call statt einer Klickstrecke.