Entwickeln Sie eine Komponente

Fügen Sie Ihren Komponentencode hinzu, und testen Sie ihn mit einem lokalen Entwicklungsserver.

Vorbereitungen

• Richten Sie Ihre -Umgebung ein
• Richten Sie Ihr -Projekt ein

Warum und wann dieser Vorgang ausgeführt wird

Ein Tutorial zur Entwicklung einer Zählerkomponente finden Sie auf der Developer Site.

Prozedur

1. Navigieren Sie in Ihrem Projektverzeichnis zu src/.<component-name> /index.js .
   Dies ist die primäre Codedatei für eine Komponente.
2. Fügen Sie Ihren Komponentencode hinzu.

   Dieses Beispiel zeigt eine Hello World-Komponente.

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

   Um eine Komponente für Virtual Agentzu entwickeln, fügen Sie bestimmte Eigenschaften und Aktionen hinzu, um mit der Client-Schnittstelle Virtual Agent zu interagieren. Die erforderlichen Eigenschaften hängen vom Typ der Komponente ab, die Sie erstellen. Weitere Informationen finden Sie unter Entwickeln Sie eine Komponente für Virtual Agent.
3. Wahlweise: Fügen Sie innere Komponenten hinzu.
   Eine innere Komponente ist eine Komponente, die in einer anderen Komponente enthalten ist. Beispielsweise kann eine Kartenkomponente eine separate Schaltflächenkomponente enthalten. Die Schaltflächenkomponente wird zu einer inneren Komponente, die Sie im Kartenkomponentenprojekt importieren, installieren und definieren müssen.
   1. Installieren Sie das innere Komponentenpaket, indem Sie den Installationsbefehl mit dem Befehlszeilentool Ihres Systems ausführen:

      npm install @servicenow/<now-inner-button> 

   2. Fügen Sie am Anfang Ihrer Datei index.js eine Import-Anweisung hinzu:

      import '@servicenow/<now-inner-button>’;

   3. Verwenden Sie die innere Komponente in Ihrer Datei index.js :

      <now-inner-button label="Click Me" />

   4. Listen Sie die innere Komponente im Array „components.[component-name].innerComponents“ in der Konfigurationsdatei now-ui.json auf.

      {
        "components": {
          "now-chart-timeseries": {
            "innerComponents": [
              "now-inner-button"
            ],

4. Führen Sie den Entwicklungsserverbefehl aus, um Ihre Komponente in einem Testbrowser anzuzeigen.

   $ snc ui-component develop [--entry entry --open --port port --host host]

   Übergeben Sie Werte für diese Argumente.

   Name	Beschreibung
   Eintrag	Pfad zum Testmodul in Ihrem Komponentenprojekt. Standard: beispiel/index.js.
   offen	Öffnet den Standardbrowser und navigiert zur Testseite. Standard: false.
   port	Port, an dem der Entwicklungsserver ausgeführt wird Standard: 8081.
   host	Zu verwendende Hostadresse, wenn Ihr lokaler Entwicklungsserver von extern für andere zugänglich sein soll. In der Regel auf 0.0.0.0festgelegt

   $ snc ui-component develop --entry example/hello.js --open --port 3000

Nächste Maßnahme

Stellen Sie eine Komponente in einer Instanz bereitan.

Zugehörige Konzepte

• Benutzerdefinierter Komponentengenerator