Développer un composant

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 2 minutes de lecture

    • Ajoutez le code de votre composant et testez-le à l’aide d’un serveur de développement local.

    Avant de commencer

    Pourquoi et quand exécuter cette tâche

    Pour obtenir un didacticiel sur le développement d’un composant de compteur, consultez le site développeur.

    Procédure

    1. Dans le répertoire de votre projet, accédez à src/<component-name>/index.js.
      Il s’agit du fichier de code primaire d’un composant.
    2. Ajoutez votre code de composant.

      Cet exemple montre un exemple de composant Hello World.

      import {createCustomElement} from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';

const view = (state, {updateState}) => {
	return (
		<div>Hello World!</div>
	);
};

createCustomElement('hello-world', {
	renderer: {type: snabbdom},
	view,
	styles
});
      Pour développer un composant pour Agent virtuel, ajoutez des propriétés et des actions spécifiques pour interagir avec l’interface Agent virtuel client. Les propriétés requises dépendent du type de composant que vous créez. Pour plus d’informations, consultez Développer un composant pour Agent virtuel pour plus d’informations.
    3. Facultatif : Ajoutez des composants internes.
      Un composant interne est un composant inclus dans un autre composant. Par exemple, un composant de carte peut inclure un composant de bouton distinct. Le composant du bouton devient un composant interne que vous devez importer, installer et définir dans le projet de composant de carte.
      1. Installez le package de composants internes en exécutant la commande install à l’aide de l’outil de ligne de commande de votre système : 
        npm install @servicenow/<now-inner-button>
      2. Ajoutez une instruction import en haut de votre fichier index.js : 
        import '@servicenow/<now-inner-button>’;
      3. Utilisez le composant interne de votre fichier index.js : 
        <now-inner-button label="Click Me" />
      4. Dressez la liste des composants internes dans les composants [ component-name].innerComponents dans le fichier de configuration now-ui.json . 
        {
  "components": {
    "now-chart-timeseries": {
      "innerComponents": [
        "now-inner-button"
      ],
    4. Exécutez la commande du serveur de développement pour afficher votre composant dans un navigateur de test. 
      $ snc ui-component develop [--entry entry --open --port port --host host]

      Transmettez des valeurs pour ces arguments.

      Nom Description
      entry Chemin d’accès au module de test dans votre projet de composant.

      Par défaut : example/index.js.
      ouvert Ouvre le navigateur par défaut et accède à la page de test.

      Valeur par défaut : faux.
      port Port dans lequel le serveur de développement est exécuté.

      Par défaut : 8081.
      hôte Adresse de l’hôte à utiliser si vous souhaitez que d’autres personnes puissent accéder à votre serveur de développement local de façon externe. Généralement défini sur 0.0.0.0 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

    Que faire ensuite

    Déployer un composant dans une instance.