> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Référence des cartes d'application (BÊTA)
> Informations de référence pour la création de cartes d'application sur la dernière version de la plateforme de développement.
Vous trouverez ci-dessous des informations de référence pour la création de cartes d'application
## Structure du projet
Dans le contexte d'un projet, les composants de carte d'application sont définis dans un répertoire `cards` dans `app/`. Le répertoire `cards` doit contenir :
* 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.
```shell theme={null}
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
Dans le fichier de configuration `*-hsmeta.json` de votre carte d'application, ajoutez les propriétés ci-dessous.
```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"]
}
}
```
Les champs marqués par \* sont requis.
| Champ | Type | Description |
| -------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `uid`\* | Chaîne | l'identifiant unique de la carte. Il peut s'agir de n'importe quelle chaîne, mais doit identifier la carte de manière significative. HubSpot identifiera la carte par cet ID afin que vous puissiez modifier le titre de la carte sans supprimer les données historiques ou d'état, telles que la position sur la fiche d'informations CRM. |
| `type` | Chaîne | le type de composant, qui devrait être `card` dans ce cas. |
| `config` | Objet | un objet contenant des détails de configuration. |
| `name`\* | Chaîne | le titre de la carte, tel qu'il apparaît dans l'interface utilisateur de HubSpot. |
| `description` | Chaîne | une description de la carte. |
| `previewImage` | Objet | un objet contenant les champs `file` et `altText`. Le champ `file` est le chemin relatif vers l'image d'aperçu. Les extensions de fichier valides sont png, jpeg, jpg ou gif. La taille maximale du fichier est de 5.0 Mo. Le champ `altText` est une courte description de l'image. |
| `entrypoint`\* | Chaîne | le chemin du fichier du code React front-end de la carte. |
| `location`\* | `crm.record.tab` \| `crm.record.sidebar` \| `crm.preview` \|`helpdesk.sidebar` | Emplacement de la carte dans l'interface utilisateur de HubSpot Vous ne pouvez indiquer qu'une seule valeur d'emplacement, mais certaines combinaisons `location` et `objectTypes` entraînent la prise en charge de plusieurs emplacements. Consultez la section [*Emplacements pris en charge*](#supported-locations) ci-dessous pour plus de détails. |
| `objectTypes`\* | Tableau | les types de fiches d'informations CRM sur lesquels la carte apparaîtra. Consultez la section [*Objets pris en charge*](#supported-objects) ci-dessous pour plus de détails. |
### Objets pris en charge
Dans le tableau `objectTypes` du fichier de configuration de la carte `*-hsmeta.json`, indiquez les types de fiches d'informations CRM dans lesquels la carte apparaîtra. Voici les objets CRM actuellement pris en charge, leur valeur `objectType` et le [domaine](/docs/apps/legacy-apps/public-apps/overview#scope-types) minimum à ajouter à votre application.
Pour les objets standards de HubSpot, les valeurs `objectType` ne sont pas sensibles à la casse et le singulier et le pluriel sont pris en charge. Par exemple, `"CONTACT"` et `"contacts"` sont tous deux valides.
| Objet CRM | objectType valeur | Domaine associé |
| -------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| Contacts | `CONTACT` | `crm.objects.contacts.read` |
| Entreprises | `COMPANY` | `crm.objects.companies.read` |
| Transactions | `DEALS` | `crm.objects.deals.read` |
| Tickets | `TICKETS` | `tickets` |
| Objets personnalisés | `p_objectName` (sensibles à la casse) | `crm.objects.custom.read` |
| Objets d'application | `app_object_uid` | voir [les domaines des objets d'application](/docs/apps/developer-platform/add-features/app-objects/reference#scopes) |
En outre, les objets CRM suivants sont pris en charge s'ils ont été [activés dans la bibliothèque d'objets](https://knowledge.hubspot.com/object-settings/use-the-object-library) :
| Objet CRM | objectType valeur | Domaines associés |
| ----------- | ----------------- | ------------------------------- |
| Rendez-vous | `APPOINTMENTS` | `crm.objects.appointments.read` |
| Formation | `COURSES` | `crm.objects.courses.read` |
| Listings | `LISTINGS` | `crm.objects.listings.read` |
| Services | `SERVICES` | `crm.objects.services.read` |
### Emplacements pris en charge
Dans le champ `location` du fichier de configuration de la carte `*-hsmeta.json`, indiquez où la carte doit s'afficher dans HubSpot. Vous trouverez ci-dessous les emplacements actuellement 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](https://knowledge.hubspot.com/prospecting/manage-companies-in-the-sales-workspace).
Si vous avez déjà personnalisé la colonne du milieu, vous devrez [personnaliser l'affichage de la colonne du milieu](https://knowledge.hubspot.com/object-settings/customize-records) pour rendre visibles les extensions nouvellement créées.
* `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](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/crm-data-components/overview). 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](https://knowledge.hubspot.com/prospecting/create-and-manage-deals-in-the-sales-workspace).
* `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](#example-card-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](https://knowledge.hubspot.com/object-settings/customize-record-previews).
* `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](https://knowledge.hubspot.com/help-desk/customize-the-right-sidebar-of-help-desk) pour qu'il inclue la carte.
Lors de la création d'une extension pour cet emplacement, vous devez également vous assurer que le [fichier de configuration JSON de l'application](/docs/apps/developer-platform/build-apps/app-configuration) inclut `tickets` dans le tableau `scopes`, et que le [fichier de configuration JSON de la carte](#app-card-schema) inclut `tickets` dans le champ `objectTypes`.
* Accueil du Centre de support :
* Vue ticket du centre de support :
## Création de l'interface React
L'interface utilisateur d'une carte d'application est créée par un fichier de composant React, soit `.jsx` ou `.tsx`. Ce fichier se trouve dans le répertoire `cards/` avec le [fichier JSON de configuration de carte](#app-card-schema) (`*-hsmeta.json`). Dans le fichier de configuration de carte, vous indiquerez le chemin du fichier React dans le champ `entrypoint`.
Vous trouverez ci-dessous un exemple de carte d'application simple, qui comprend des [composants d'interface utilisateur](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview) `Text` et `Button` pour restituer le contenu de la carte, ainsi qu'un composant `Flex` pour gérer la mise en page.
```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.
);
};
```
La documentation de référence suivante est fournie pour le développement de l'apparence et de la fonctionnalité des cartes :
* [Document de référence sur les composants d'extensions d'interface utilisateur](/docs/apps/developer-platform/add-features/ui-extensibility/ui-components/overview)
* [Kit de développement logiciel pour les extensions d'interface utilisateur](/docs/apps/developer-platform/add-features/ui-extensibility/ui-extensions-sdk)
## Gestion des dépendances
Vous pouvez inclure des dépendances pour votre carte d'application dans un fichier `package.json` du répertoire `cards/`. Par défaut, lors de l'ajout d'une carte d'application via la commande `hs project add`, un fichier `package.json` sera créé pour vous avec les dépendances suivantes :
* `@hubspot/ui-extensions`
* `react`
* `typescript`
Pour installer des dépendances pour les composants du projet avec un fichier `package.json`, vous pouvez exécuter la commande `hs project install-deps` dans le répertoire du projet.
```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"
}
}
```