Développer un composant

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 1 minute 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 afin d’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 composant interne 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 dans votre fichier index.js : 
        <now-inner-button label="Click Me" />
      4. Répertoriez le composant interne 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 : exemple/index.js.
      ouvert Ouvre le navigateur par défaut et accède à la page de test.

      Valeur par défaut : false.
      port Port où le serveur de développement s’exécute.

      Par défaut : 8081.
      hôte Adresse de l’hôte à utiliser si vous souhaitez que votre serveur de développement local soit accessible en externe par d’autres utilisateurs. 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 sur une instance.