--- sourceDocument: Xanadu: Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/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 --- # Generator für anwenderdefinierte Komponenten # Generator für anwenderdefinierte Komponenten {#ariaid-title1} * Freigeben Version: Xanadu * * Aktualisiert 1. August 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer Entwickeln Sie anwenderdefinierte Komponenten mit Next Experience UI Framework und Erweiterung der UI-Komponente. Komponenten sind wiederverwendbare Bausteine, mit denen Sie eine anwenderdefinierte Anwenderoberfläche erstellen. Next Experience Design System enthält eine Reihe von anpassbaren Komponenten, die Sie in Ihre anwenderdefinierte Anwenderoberfläche ziehen können. Entwickeln Sie eigene Komponenten, wenn Sie das Gesuchte in der Bibliothek Next Experience Design System nicht finden können. Um die Bibliothek Next Experience Design System anzuzeigen, rufen Sie auf [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/reference/libraries/sandiego/now-components). ## Vorteile der Erstellung von anwenderdefinierten Komponenten {#custom-components__section_vc3_rrj_xkb} Durch die Entwicklung benutzerdefinierter Komponenten können Sie: * Personalisieren Sie eine UI entsprechend den Anforderungen Ihres Service Desk-Mitarbeiters, Ihres Kunden und Ihres Unternehmens. * Durch schnellen Zugriff auf wichtige Daten und Informationen können Sie Ihre Mitarbeiter effektiver arbeiten lassen und Kontextwechsel reduzieren. * Passen Sie sich der individuellen Omni-Channel-Umgebung Ihres Unternehmens an, indem Sie APIs verwenden, um Ihre Daten zu konsolidieren. {#custom-components__ul_n3w_trj_xkb} Sie können beispielsweise eine Komponente erstellen, die die Fälle anzeigt, die einem SLA zugeordnet sind, oder die die aktiven Chats in einer bestimmten Warteschlange nachverfolgt. Sie können Next Experience UI Framework und Erweiterung der UI-Komponente verwenden, um die benötigte Komponente zu entwickeln und mithilfe der [HTTP-Effekt-API](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/ui-framework/api-reference/effect-http)auf Daten von Ihrer Plattform zuzugreifen. Sie können Plattformdaten auch mit GraphQL abfragen, indem Sie ein anwenderdefiniertes Schema erstellen. Weitere Informationen finden Sie unter [Geskriptete GraphQL](https://www.servicenow.com/docs/access?context=scripted-graph-ql&version=xanadu&pubname=xanadu-api-reference&ft:locale=en-US). ## Was Sie wissen müssen, bevor Sie beginnen {#custom-components__section_xjb_y5h_3kb} Bevor Sie mit dem Entwerfen und Erstellen Ihrer Komponente beginnen, vergewissern Sie sich, dass Sie über Folgendes verfügen: * Allgemeine Kenntnisse über Konzepte, Entwicklung und Design von Webkomponenten. * JavaScript-Wissen zum Definieren des Komponentenverhaltens. * Kenntnisse über Node Package Manager (npm). * Die aktuelle Version von Node.js, die auf Ihrem lokalen Computer installiert ist. Weitere Informationen finden Sie unter [Node.js.](https://nodejs.org) * ServiceNow CLI muss auf Ihrem Computer installiert sein. {#custom-components__ul_ozv_4d3_3kb} ## Next Experience UI Framework {#custom-components__section_gc4_2cw_pkb} Next Experience UI Framework ist ein JavaScript-Framework, mit dem Sie Ihre Apps erweitern und Webkomponenten erstellen können, die in Ihren Anwendungen wiederverwendet werden können. Mit Next Experience UI Framework können Sie: * Erstellen Sie eine einzelne Komponente, die Sie an mehreren Stellen in Ihren Anwendungen verwenden können. * Kapseln Sie den Umfang der Komponente, um Konflikte mit anderem Code zu vermeiden. * Fügen Sie Ihrer Komponente Eigenschaften, Slots und Aktionen hinzu, damit Anwender die Komponente jedes Mal anpassen können, wenn sie sie in einem Arbeitsbereichverwenden. {#custom-components__ul_ujt_xk5_rkb} Weitere Informationen finden Sie unter [ServiceNow® Developer Site](https://developer.servicenow.com/dev.do#!/guides/sandiego/now-experience/ui-framework/getting-started/introduction). ## Erweiterung der UI-Komponente und Entwicklungs-Flow {#custom-components__section_wdv_hsv_pkb} Erweiterung der UI-Komponente ist eine Erweiterung von ServiceNow CLI, mit der Sie anwenderdefinierte Komponenten mit Next Experience UI Frameworkentwickeln können. Erweiterung der UI-Komponentebietet folgende Möglichkeiten: * Erstellen Sie den Satz von Dateien, die für die Entwicklung einer Komponente oder eines Projektgerüstserforderlich sind. * Starten Sie einen lokalen Entwicklungsserver, um Ihre Komponente zu testen. * Erstellen Sie ein Komponentenprojekt, und stellen Sie es in einer Instanz ServiceNow bereit. {#custom-components__ul_dfn_wb4_rkb} ## Anwendungsbereich {#custom-components__section_qjj_w4t_tkb} Wenn Sie eine Komponente Next Experience UI Framework bereitstellen, wird sie in einer bereichsbezogenen Anwendung in der -Instanz bereitgestellt. Sie können einen Anwendungsbereich für die Komponente angeben, die als Namespace-Bezeichner verwendet werden soll. Verwenden Sie die Richtlinien für Namespace-Bezeichner für die Anwendungsentwicklung in der -Instanz. Weitere Informationen finden Sie unter [Anwendungsbereich](https://servicenow-prod.fluidtopics.net/jsLrU6dTqXTyxWpjyXRTDA "Die Definition von Anwendungsbereichen schützt Anwendungen, indem der Zugriff auf Anwendungsdateien und -daten identifiziert und eingeschränkt wird."). Beachten Sie bei der Reservierung eines Anwendungsbereichs die folgenden Anforderungen: * Maximal: 18 Zeichen. * Fall: Fall * Format: `x_customerprefix_componentname`, wobei: * „`customerprefix` " ist der Wert in der Systemeigenschaft glide.appcreator.company.code in Ihrer Instanz. * „`componentname` " ist der Wert, der im `Namensparameter` der Komponente angegeben wurde, als Sie das Projekt erstellt haben. {#custom-components__ul_vbz_5rt_tkb} {#custom-components__ul_c2x_jrt_tkb} Wenn Sie beim Erstellen Ihres Komponentenprojekts keinen Anwendungsbereich angeben, erstellt Now CLI einen für Sie. Alternativ können Sie dem Parameter `scopeName` in der Datei now-ui.json einen Wert hinzufügen. Weitere Informationen finden Sie unter [Ändern Sie den Anwendungsbereich einer Komponente](https://servicenow-prod.fluidtopics.net/zUwUE8DVad~nZapPOIpr8Q "Ändern Sie den Anwendungsbereich einer Komponente, wenn bei der Bereitstellung Ihrer Komponente in einer Instanz Umfangsprobleme auftreten. Sie können beispielsweise einen Anwendungsbereich festgelegt haben, der bereits verwendet wird oder ungültig ist, während Sie eine Komponente im Offline-Modus erstellt haben."). ## Referenzhandbuch {#custom-components__section_zjs_lyz_xkb} Das Now CLI-Referenzhandbuch finden Sie auf der [Developer Site](https://developer.servicenow.com/dev.do#!/guide/sandiego/now-experience/cli/getting-started/). * **[Richten Sie Ihre Umgebung ein](https://servicenow-prod.fluidtopics.net/_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://servicenow-prod.fluidtopics.net/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. * **[Verwenden Sie einen Proxy-Server mit Erweiterung der UI-Komponente](https://servicenow-prod.fluidtopics.net/0YDZkmDRSFkemNZNc62LFw)** Verwenden Sie einen Proxy-Server mit Now CLI, um eine separate Datenquelle für Ihre Komponente zu definieren. Bei Verwendung eines Proxy-Servers leitet die Instanz Now CLI-Anforderungen an den Proxy-Server weiter. * **[Entwickeln Sie eine Komponente](https://servicenow-prod.fluidtopics.net/60dMB1wH13bjOzez8u7d0A)** Fügen Sie Ihren Komponentencode hinzu, und testen Sie ihn mit einem lokalen Entwicklungsserver. * **[Entwickeln Sie eine Komponente für Virtual Agent](https://servicenow-prod.fluidtopics.net/5CN44m7Iiw0PXxHWJJVmaw)** Erstellen Sie eine anwenderdefinierte Komponente \[\], um Eingaben zu sammeln oder Informationen auf der Clientoberfläche Virtual AgentVirtual Agent anzuzeigen . * **[Fügen Sie eine Komponente hinzu Mitarbeiterbereich](https://servicenow-prod.fluidtopics.net/Okf6jEBrb9~8EkkkYxEY5w#workspace-component)** Verwenden Sie anwenderdefinierte Komponenten, um eine anwenderdefinierte Schnittstelle Arbeitsbereich zu erstellen, die die spezifischen Anforderungen der Service Desk-Mitarbeiter Ihres Unternehmens erfüllt. * **[Stellen Sie eine Komponente für eine Instanz bereit](https://servicenow-prod.fluidtopics.net/RRoag1j3d8Wk62ESclMe7g)** Stellen Sie Ihre Komponente bereit, damit sie in Ihrer Instanz als Anwendungs-Plugin angezeigt wird. * **[Ändern Sie den Anwendungsbereich einer Komponente](https://servicenow-prod.fluidtopics.net/zUwUE8DVad~nZapPOIpr8Q)** Ändern Sie den Anwendungsbereich einer Komponente, wenn bei der Bereitstellung Ihrer Komponente in einer Instanz Umfangsprobleme auftreten. Sie können beispielsweise einen Anwendungsbereich festgelegt haben, der bereits verwendet wird oder ungültig ist, während Sie eine Komponente im Offline-Modus erstellt haben.