> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Referenz für App-Karten (BETA)
> Referenzinformationen für das Erstellen von App-Karten in der neuesten Version der Entwicklerplattform.
Im Folgenden finden Sie Referenzinformationen für das Erstellen von App-Karten
## Projektstruktur
Im Kontext eines Projekts werden App-Kartenkomponenten in einem `cards`-Verzeichnis innerhalb von `app/`definiert. Das `cards`-Verzeichnis sollte Folgendes enthalten:
* Eine JSON-Schemadefinitionsdatei für jeden Kartentyp (`*-hsmeta.json`).
* Eine React-Datei, die das Frontend der Karte darstellt. Dies kann eine `.jsx`- oder `.tsx`-Datei sein.
* Eine `package.json`-Datei zur Handhabung aller erforderlichen Abhängigkeiten.
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── cards/
└── my-app-card-hsmeta.json
└── my-app-card.jsx
└── package.json
```
## Schema der App-Karte
Fügen Sie in der `*-hsmeta.json`-Konfigurationsdatei für Ihre App-Karte die folgenden Eigenschaften hinzu.
```json theme={null}
{
"uid": "example-card",
"type": "card",
"config": {
"name": "Hello Example App",
"description": "A description of the card's purpose.",
"location": "crm.record.tab",
"entrypoint": "/app/cards/ExampleCard.jsx",
"objectTypes": ["contacts"]
}
}
```
Mit \* markierte Felder sind Pflichtfelder.
| Feld | Typ | Beschreibung |
| -------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `uid`\* | Zeichenfolge | Die eindeutige ID der Karte. Sie kann eine beliebige Zeichenfolge sein, sollte aber die Karte sinnvoll identifizieren. HubSpot identifiziert die Karte anhand dieser ID, sodass Sie den Titel der Karte ändern können, ohne historische oder zustandsbehaftete Daten, wie z. B. die Position im CRM-Datensatz, zu entfernen. |
| `type` | Zeichenfolge | Der Typ der Komponente, die in diesem Fall `card` sein sollte. |
| `config` | Objekt | Ein Objekt, das Konfigurationsdetails enthält. |
| `name`\* | Zeichenfolge | Der Titel der Karte, wie auf der Benutzeroberfläche von HubSpot angezeigt. |
| `description` | Zeichenfolge | Eine Beschreibung der Karte. |
| `previewImage` | Objekt: | Ein Objekt, das die `file`- und `altText`-Felder enthält. Das `file`-Feld ist der relative Pfad zum Vorschaubild. Gültige Dateierweiterungen sind png, jpeg, jpg oder gif. Die maximale Dateigröße beträgt 5.0 MB. Das `altText`-Feld ist eine Kurzbeschreibung des Bildes. |
| `entrypoint`\* | Zeichenfolge | Der Dateipfad des Front-End-React-Codes der Karte. |
| `location`\* | `crm.record.tab` \| `crm.record.sidebar` \| `crm.preview` \|`helpdesk.sidebar` | Wo die Karte auf der Benutzeroberfläche von HubSpot angezeigt wird. Sie können nur einen Ortswert angeben, aber einige `location`- und `objectTypes`-Kombinationen führen zu einer Unterstützung mehrerer Speicherorte. Weitere Informationen finden Sie im Abschnitt [*Unterstützte Speicherorte*](#supported-locations) weiter unten. |
| `objectTypes`\* | Array | Die Typen von CRM-Datensätzen, in denen die Karte angezeigt wird. Weitere Informationen finden Sie im Abschnitt [*Unterstützte Objekte*](#supported-objects) weiter unten. |
### Unterstützte Objekte
Geben Sie im `objectTypes`-Array der `*-hsmeta.json`-Konfigurationsdatei der Karte an, in welchen Arten von CRM-Datensätzen, die Karte angezeigt werden soll. Nachfolgend finden Sie die derzeit unterstützten CRM-Objekte, deren `objectType`-Wert und den [Mindestbereich](/apps/legacy-apps/public-apps/overview#scope-types), der Ihrer App hinzugefügt werden soll.
Bei Standardobjekten von HubSpot wird in Hinblick auf `objectType` nicht zwischen Groß- und Kleinschreibung unterschieden und sowohl der Singular als auch der Plural unterstützt. Zum Beispiel: `"CONTACT"` und `"contacts"` sind beide gültig.
| CRM-Objekt | objectType-Wert | Verwandter Bereich |
| -------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Kontakte | `CONTACT` | `crm.objects.contacts.read` |
| Unternehmen | `COMPANY` | `crm.objects.companies.read` |
| Deals | `DEALS` | `crm.objects.deals.read` |
| Tickets | `TICKETS` | `tickets` |
| Benutzerdefinierte Objekte | `p_objectName` (Groß-/Kleinschreibung beachten) | `crm.objects.custom.read` |
| App-Objekte | `app_object_uid` | Siehe [App-Objekt-Bereiche](/apps/developer-platform/add-features/app-objects/reference#scopes) |
Darüber hinaus werden die folgenden CRM-Objekte unterstützt, wenn sie [in der Objektbibliothek aktiviert wurden](https://knowledge.hubspot.com/object-settings/use-the-object-library):
| CRM-Objekt | objectType Wert | Zugehörige Bereiche |
| ---------------- | --------------- | ------------------------------- |
| Verabredungen | `APPOINTMENTS` | `crm.objects.appointments.read` |
| Kurse | `COURSES` | `crm.objects.courses.read` |
| Listings | `LISTINGS` | `crm.objects.listings.read` |
| Dienstleistungen | `SERVICES` | `crm.objects.services.read` |
### Unterstützte Speicherorte
Geben Sie im `location`-Feld der `*-hsmeta.json`-Konfigurationsdatei der Karte an, wo die sie in HubSpot angezeigt werden soll. Nachfolgend finden Sie die derzeit unterstützten Speicherorte.
* `crm.record.tab`: Platziert die Erweiterung in der mittleren Spalte von CRM-Datensatzseiten, entweder in einer der Standardregisterkarten von HubSpot oder in einer benutzerdefinierten Registerkarte. Wenn `objectType` auf `COMPANIES` festgelegt ist, ist die Karte auch im [Vorschaubereich des Sales-Workspace für Zielaccounts](https://knowledge.hubspot.com/prospecting/manage-companies-in-the-sales-workspace) verfügbar.
Falls Sie die mittlere Spalte zuvor angepasst haben, müssen Sie die [Ansicht der mittleren Spalte anpassen](https://knowledge.hubspot.com/object-settings/customize-records), um alle neu erstellten Erweiterungen sichtbar zu machen.
* `crm.record.sidebar`: Zeigt die Erweiterung in der rechten Seitenleiste von CRM-Datensatzseiten an. Erweiterungen in der Seitenleiste können keine [CRM-Datenkomponenten](/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/overview) verwenden. Wenn `objectType` auf `DEALS` festgelegt wurde, ist die Karte auch in der [Deal-Seitenleiste des Sales-Workspace](https://knowledge.hubspot.com/prospecting/create-and-manage-deals-in-the-sales-workspace) verfügbar.
* `crm.preview`: Zeigt die App-Karte im Vorschaubereich an, auf den Sie im gesamten CRM zugreifen können. Falls Sie diesen Speicherort verwenden, ist die Erweiterung in der `objectTypes`-Vorschau, wie in der [JSON-Konfigurationsdatei](#example-card-json) angegeben, verfügbar. Dazu gehört die Vorschau von Datensätzen innerhalb von CRM-Datensatzseiten, Indexseiten, Board-Ansichten und dem Listentool. Erfahren Sie mehr über das [Anpassen von Dashboards](https://knowledge.hubspot.com/object-settings/customize-record-previews).
* `helpdesk.sidebar`: Zeigt die Karte in den Ticket-Seitenleisten innerhalb des Helpdesk an. Dazu gehören sowohl die Ticket-Vorschau auf der Startseite des Helpdesks als auch die dortige rechte Seitenleiste der Ticket-Ansicht. Um eine Karte zu diesem Ort hinzuzufügen, müssen Sie [Ihre Helpdesk-Einstellungen so konfigurieren](https://knowledge.hubspot.com/help-desk/customize-the-right-sidebar-of-help-desk), dass die Karte enthalten ist.
Wenn Sie eine Erweiterung für diesen Speicherort erstellen, müssen Sie auch sicherstellen, dass die [JSON-Konfigurationsdatei der App](/apps/developer-platform/build-apps/app-configuration) `tickets` im `scopes`-Array und die [JSON-Konfigurationsdatei der Karte](#app-card-schema) `tickets` im `objectTypes`-Feld enthält.
* Helpdesk-Startseite:
* Helpdesk Ticke-Ansicht:
## Erstellen des React-Frontends
Die Benutzeroberfläche einer App-Karte wird durch eine React-Komponentendatei erstellt, entweder durch `.jsx` oder `.tsx`. Diese Datei befindet sich in dem `cards/`-neben der [JSON-Datei für die Kartenkonfiguration](#app-card-schema) (`*-hsmeta.json`). In der Kartenkonfigurationsdatei geben Sie den Pfad der React-Datei im `entrypoint` Feld an.
Nachfolgend finden Sie ein Beispiel für eine einfache App-Karte, die und `Button` [UI-Komponenten](/apps/developer-platform/add-features/ui-extensibility/ui-components/overview) zum Rendern des Karteninhalts sowie eine `Flex` Komponente zum Verwalten des Layouts enthält `Text` .
```jsx theme={null}
import React from "react";
import { Text, Button, Flex, hubspot } from "@hubspot/ui-extensions";
// Define the extension to be run within the Hubspot CRM
hubspot.extend(() => );
// Define the Extension component
const Extension = () => {
return (
This is a simple getting started UI extension with static text.
);
};
```
Die folgende Referenzdokumentation wird bereitgestellt, um das Erscheinungsbild und die Funktionalität von Karten zu verbessern:
* [Referenzdokumentation für UI-Erweiterungskomponenten](/apps/developer-platform/add-features/ui-extensibility/ui-components/overview)
* [SDK für UI-Erweiterungen](/apps/developer-platform/add-features/ui-extensibility/ui-extensions-sdk)
## E-Mail-Abhängigkeiten
Sie können Abhängigkeiten für Ihre App-Karte in einer `package.json`-Datei innerhalb des `cards/` Verzeichnisses aufnehmen. Wenn Sie eine App-Karte den `hs project add`-Befehl hinzufügen, wird standardmäßig eine `package.json` Datei mit den folgenden Abhängigkeiten für Sie erstellt:
* `@hubspot/ui-extensions`
* `react`
* `typescript`
Um Abhängigkeiten für Projektkomponenten mit einer `package.json`–Datei zu installieren, können Sie den `hs project install-deps`-Befehl in Ihrem Projektverzeichnis verwenden.
```json theme={null}
{
"name": "hubspot-example-extension",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"@hubspot/ui-extensions": "latest",
"react": "^18.2.0"
},
"devDependencies": {
"typescript": "^5.3.3"
}
}
```