Créer une page des paramètres (BÊTA)

​

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

├──src
│   ├── app/
│   │   └── settings/
│   │     └── Settings.tsx
│   │     └── settings-hsmeta.json
│   │     └── package.json
└──

​

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

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

​

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.

• Cliquez sur le nom de votre application pour accéder à la page de ses 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

​

Organisation du contenu

​

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