Référence des cartes d'application (BÊTA)

​

Structure du projet

• Un fichier de définition de schéma JSON pour chaque type de carte (*-hsmeta.json).
• Un fichier React qui restitue l’interface de la carte. Il peut s’agir d’un fichier .jsx ou d’un fichier .tsx.
• Un fichier package.json pour gérer toutes les dépendances nécessaires.

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

​

Schéma de carte d’application

{
  "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"]
  }
}

Les champs marqués par * sont requis.

​

Objets pris en charge

​

Emplacements pris en charge

• crm.record.tab : place l’extension dans la colonne centrale des pages de fiches d’informations CRM, soit dans l’un des onglets par défaut de HubSpot, soit dans un onglet personnalisé. Lorsque objectType est défini sur COMPANIES, la carte sera également disponible dans le panneau d’aperçu des comptes cibles de l’espace de travail des ventes.

Afficher capture d'écran

• crm.record.sidebar : affiche l’extension dans la barre latérale droite des pages de fiches d’informations CRM. Les extensions de la barre latérale ne peuvent pas utiliser les composants de données CRM. Lorsque objectType est défini sur DEALS, la carte sera également disponible dans la barre latérale des transactions de l’espace de travail des ventes.

Afficher capture d'écran

• crm.preview : affiche la carte d’application dans le panneau d’aperçu auquel vous pouvez accéder via le CRM. Lorsque vous utilisez cet emplacement, l’extension sera disponible lors de la prévisualisation du objectTypes spécifié dans le fichier de configuration JSON. Cela inclut la prévisualisation des fiches d’informations à partir des pages de fiches d’informations CRM, des pages d’index, des vues de tableau de bord et de l’outil Listes. Découvrez-en davantage sur la personnalisation des aperçus.

Afficher capture d'écran

• helpdesk.sidebar : affiche la carte dans la barre latérale des tickets du centre de support. Cela inclut le panneau d’aperçu des tickets sur la page d’accueil du centre de support et la barre latérale droite de la vue de ticket dans le centre de support. Pour ajouter une carte à cet emplacement, vous devez configurer les paramètres de votre centre de support pour qu’il inclue la carte.

Afficher captures d'écran

• Accueil du Centre de support :

• Vue ticket du centre de support :

​

Création de l’interface React

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>
  );
};

• Document de référence sur les composants d’extensions d’interface utilisateur
• Kit de développement logiciel pour les extensions d’interface utilisateur

​

Gestion des dépendances

• @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"
  }
}