---
sourceDocument: Xanadu: Erstellen oder ändern Sie Anwendungen
sourceDocumentLink: https://www.servicenow.com/docs/r/de-DE/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - de-DE

ft:publication_title :

    - Xanadu: Erstellen oder ändern Sie Anwendungen

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Entwickeln Sie eine Komponente

# Entwickeln Sie eine Komponente {#ariaid-title1}

* Freigeben Version: Xanadu
* 
* Aktualisiert 1. August 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 Minute Lesedauer

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

## Vorbereitungen

* [Richten Sie Ihre Umgebung ein](https://www.servicenow.com/docs/_HmGtnR2vJJwlTiOigwRsg "Bereiten Sie Ihre lokale Umgebung vor, indem Sie die JavaScript-Laufzeitumgebung Node.js, den Knoten-Paketmanager (npm) und Erweiterung der UI-Komponenteinstallieren. Mit diesen Tools können Sie Komponenten lokal entwickeln und erstellen und in Ihrer -Instanz bereitstellen.")
* [Richten Sie Ihr Projekt ein](https://www.servicenow.com/docs/TvBrQ1nSAdEcZqDS0sW4tA "Erstellen Sie das Komponentenprojekt und den Satz von Dateien, die für die Entwicklung einer Komponente erforderlich sind. Sie können eine Verbindung zu Ihrer -Instanz herstellen und einen Anwendungsbereich für Ihre Komponente erstellen oder einen Bereich zur späteren Überprüfung reservieren.")
{#develop-component__ul_wb3_xbn_tkb}

## Warum und wann dieser Vorgang ausgeführt wird

Ein Tutorial zur Entwicklung einer Zählerkomponente finden Sie auf der [Developer Site](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/examples/counter).

## 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](https://www.servicenow.com/docs/5CN44m7Iiw0PXxHWJJVmaw "Erstellen Sie eine anwenderdefinierte Komponente [], um Eingaben zu sammeln oder Informationen auf der Clientoberfläche Virtual AgentVirtual Agent anzuzeigen .").
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"
                ],

   {#develop-component__substeps_k24_rsd_qjb}
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.  
   {#develop-component__table_lnx_bzt_vkb__entry__2}

   | 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.0`festgelegt |
   [ ]

   {#develop-component__table_lnx_bzt_vkb}  

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

## Nächste Maßnahme

[Stellen Sie eine Komponente für eine Instanz bereit](https://www.servicenow.com/docs/RRoag1j3d8Wk62ESclMe7g "Stellen Sie Ihre Komponente bereit, damit sie in Ihrer Instanz als Anwendungs-Plugin angezeigt wird.").
**Zugehörige Konzepte**   

* [Generator für anwenderdefinierte Komponenten](https://www.servicenow.com/docs/vWVQnmx~8lN~OTq11cdvTQ "Entwickeln Sie anwenderdefinierte Komponenten mit Next Experience UI Framework und Erweiterung der UI-Komponente.")