Entwickeln Sie eine Komponente

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 1 Minute Lesedauer

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

    Vorbereitungen

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

      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 für die Interaktion mit der Virtual Agent Clientschnittstelle hinzu. 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 Importanweisung hinzu: 
        import '@servicenow/<now-inner-button>’;
      3. Verwenden Sie die innere Komponente in Ihrer Datei „index.js “: 
        <now-inner-button label="Click Me" />
      4. Listet 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: example/index.js.
      offen Öffnet den Standardbrowser und navigiert zur Testseite.

      Standard: false
      port Port, auf dem der Entwicklungsserver ausgeführt wird.

      Standard: 8081.
      host Zu verwendende Hostadresse, wenn Ihr lokaler Entwicklungsserver von extern zugänglich sein soll. Normalerweise auf 0.0.0.0festgelegt 
      $ snc ui-component develop --entry example/hello.js --open --port 3000

    Nächste Maßnahme

    Stellen Sie eine Komponente für eine Instanz bereit.