Referenz für App-Karten (BETA)

​

Projektstruktur

• 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.

project-folder/
└── src/
    └── app/
        ├── app-hsmeta.json
        └── cards/
            └── my-app-card-hsmeta.json
            └── my-app-card.jsx
            └── package.json

​

Schema der App-Karte

{
  "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.

​

Unterstützte Objekte

​

Unterstützte 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 verfügbar.

Show Screenshot

• crm.record.sidebar: Zeigt die Erweiterung in der rechten Seitenleiste von CRM-Datensatzseiten an. Erweiterungen in der Seitenleiste können keine CRM-Datenkomponenten verwenden. Wenn objectType auf DEALS festgelegt wurde, ist die Karte auch in der Deal-Seitenleiste des Sales-Workspace verfügbar.

Show Screenshot

• 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 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.

Show Screenshot

• 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, dass die Karte enthalten ist.

Show screenshots

• Helpdesk-Startseite:

• Helpdesk Ticke-Ansicht:

​

Erstellen des React-Frontends

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(() => <Extension />);

// Define the Extension component
const Extension = () => {
  return (
    <Flex direction="column" gap="medium">
      <Text>
        This is a simple getting started UI extension with static text.
      </Text>
      <Button onClick={() => console.log('Button clicked!')}>Click me!</Button>
    </Flex>
  );
};

• Referenzdokumentation für UI-Erweiterungskomponenten
• SDK für UI-Erweiterungen

​

E-Mail-Abhängigkeiten

• @hubspot/ui-extensions
• react
• typescript

{
  "name": "hubspot-example-extension",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "@hubspot/ui-extensions": "latest",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}