Zum Hauptinhalt springen
Dernière modification : 8 octobre 2025
Vous pouvez créer une page de paramètres basée sur React pour votre application sur la dernière version (2025.2) de la plateforme de développement, vers laquelle les utilisateurs qui installent votre application peuvent accéder et personnaliser pour leur compte. Ce guide vous explique comment créer un composant de paramètres, à l’aide de React, qui remplace l’expérience de paramètres précédente. Si vous déployez votre nouveau composant de paramètres, les utilisateurs qui installent votre application verront immédiatement votre nouvelle extension de paramètres au lieu d’une page de paramètres créée précédemment. Avant de commencer, suivez le guide de démarrage rapide pour créer votre première application sur la dernière version de la plateforme de développement.
Remarque :Si vous avez déjà créé une page de paramètres pour votre application, vous devrez remanier votre expérience des paramètres à l’aide des nouvelles options de configuration décrites dans ce guide. Il est recommandé de noter tous les éléments d’interface dans la version de production actuelle de votre application avant de commencer à configurer votre nouveau composant de paramètres sur la dernière version de la plateforme de développeur. Une fois que vous passez au nouveau composant de paramètres de votre application, vous perdrez l’accès à l’interface utilisateur de configuration WYSIWYG précédente que vous utilisiez auparavant.

​
Créer et configurer des fichiers de composants de paramètres

Tout d’abord, dans votre répertoire /app, créez un répertoire /settings/, puis ajoutez-y les trois fichiers suivants : 
├──src
│   ├── app/
│   │   └── settings/
│   │     └── Settings.tsx
│   │     └── settings-hsmeta.json
│   │     └── package.json
└──
Modifiez ces trois fichiers pour inclure le code du boilerplate dans les blocs de texte prédifini ci-dessous.

​
Settings.tsx

import React from 'react';
import { EmptyState, Text } from '@hubspot/ui-extensions';
import { hubspot } from '@hubspot/ui-extensions';

hubspot.extend <
  'settings' >
  (({ context }) => {
    return <Settings context={context} />;
  });

const Settings = ({ context }) => {
  // TODO: Update this JSX code to include the components that fit your settings page.
  return (
    <EmptyState title="Nothing here yet!" layout="vertical">
      <Text>
        Contact '{context.extension.appName}' for upcoming development plans.
      </Text>
    </EmptyState>
  );
};

​
settings-hsmeta.json

{
  "uid": "settings_extension",
  "type": "settings",
  "config": {
    "entrypoint": "/app/settings/Settings.tsx"
  }
}

​
package.json

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

​
Charger et installer le composant Paramètres

Pour charger le composant Paramètres dans votre projet :
  • Dans votre répertoire app/, exécutez hs project install-deps pour créer un fichier package-lock.json qui accélérera la création de l’extension de paramètres téléchargée et garantira que toutes les dépendances dans votre environnement de développement local et la production correspondent.
  • Ensuite, exécutez hs project upload. Accédez à la page de détails de votre projet de développeur en accédant à Développent > Projects, puis en cliquant sur le nom de votre projet.
  • Votre composant Paramètres devrait maintenant être répertorié sur la page des détails.
Composant Paramètres chargés sur la page des détails du projet

​
Afficher la page des paramètres dans votre compte de test de développeur

  • Pour vérifier que le composant Paramètres fonctionne correctement, accédez à un compte de test de développeur dans lequel vous avez installé votre application, cliquez sur l’icône du Marketplace, puis sur Applications connectées.
Accéder aux applications connectées dans le compte de test de développeur
  • Cliquez sur le nom de votre application pour accéder à la page de ses paramètres.
État vide pour le composant Paramètres de base dans le compte de test
Vous pouvez désormais continuer à configurer votre composant Paramètres comme vous le feriez avec une carte d’application. Toutes les limitations existantes liées à la création d’extensions d’interface utilisateur s’appliquent également à la création d’une page de paramètres.
  • Utilisez hubspot.fetch pour utiliser votre back-end afin d’enregistrer et de récupérer les paramètres. Découvrez-en davantage sur cette approche dans la documentation héritée.
  • Consultez la documentation de référence sur les composants standard pour savoir comment utiliser les composants React lors de la création de votre extension, ou utilisez le composant dans le Kit de conception Figma.
  • Utilisez la commande hs project dev pour créer de manière itérative votre page des paramètres et prévisualiser vos modifications localement.

​
Meilleures pratiques en matière de composants

Les sections ci-dessous décrivent plusieurs bonnes pratiques à garder à l’esprit lorsque vous créez l’expérience des paramètres de votre application.

​
Organisation du contenu

Si votre extension Paramètres dispose de suffisamment de contenu pour justifier la séparation et l’organisation de toutes les données de paramètres de l’utilisateur, vous devez envisager d’utiliser les composants Panneau, Modal, Accordéon et Onglets en conséquence. Réfléchissez à la manière dont vous souhaitez présenter et organiser vos paramètres et les données correspondantes qui doivent être récupérées pour chaque composant.

​
Onglets

Si vous utilisez des onglets, utilisez la variante d’onglet default. L’extension des paramètres est déjà contenue dans un onglet de variante fermé, et une deuxième couche d’onglets fermés entrera visuellement en conflit avec le design.
Exemple d'onglets imbriqués sur la page des paramètres
Le bloc de texte prédéfini suivant explique comment structurer vos onglets. 
<Tabs>

<Tab title="First Tab">
<Text>Here is the content of the first tab.</Text>
</Tab>
<Tab title="Second Tab">
<Text>This is where the content of the second tab goes.</Text>
</Tab>

</Tabs>
⌘I