--- 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 --- # Fügen Sie eine Komponente hinzu Mitarbeiterbereich # Fügen Sie eine Komponente hinzu Mitarbeiterbereich {#ariaid-title1} * Freigeben Version: Xanadu * * Aktualisiert 1. August 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 Minuten Lesedauer Verwenden Sie anwenderdefinierte Komponenten, um eine anwenderdefinierte Schnittstelle Arbeitsbereich zu erstellen, die die spezifischen Anforderungen der Service Desk-Mitarbeiter Ihres Unternehmens erfüllt. Die Kommunikation mit Kunden über mehrere Kanäle kann zeitaufwändig sein. Um bei diesen Omni-Channel-Interaktionen effizient zu sein, benötigen Ihre Service Desk-Mitarbeiter eine einzige Ansicht der Kundeninformationen, um den Kontextwechsel zwischen mehreren Tools zu reduzieren. Durch die Entwicklung benutzerdefinierter Komponenten für Arbeitsbereichkann Ihr Team die Kommunikation aus mehreren Kanälen in einer einzigen Schnittstelle zusammenführen. ## Hinzufügen von Komponenten zu a Arbeitsbereich {#workspace-component__section_m3f_dgk_qkb} Nach der Bereitstellung in Ihrer Instanz können Sie Arbeitsbereich auf folgende Weise Komponenten hinzufügen. Fügen Sie einem Arbeitsbereich -Modal eine Komponente hinzu : Verwenden Sie eine UI-Aktion, um eine anwenderdefinierte Komponente in einem modalen Element zu starten, damit ein Service Desk-Mitarbeiter für eine Aufgabe nicht zu einem anderen Bildschirm navigieren muss. Weitere Informationen finden Sie unter Komponente in einem modalen Element rendern. Fügen Sie mit UI Builder einer Zielseite Arbeitsbereich eine Komponente hinzu : Verwenden Sie UI Builder, um anwenderdefinierte Zielseiten für Ihre Service Desk-Mitarbeiter zu erstellen. UI Builder ist ein Drag-and-Drop-Tool, mit dem Sie Komponenten des Arbeitsbereichs visuell anordnen können. Weitere Informationen finden Sie unter Anwenderdefinierte Zielseiten für Arbeitsbereiche erstellen. Konfigurieren Sie Eigenschaften in der Datei now-ui.json, um bereitgestellte Komponenten in UI Builder zu verwenden. Weitere Informationen finden Sie unter [Fügen Sie eine Komponente hinzu UI Builder](https://servicenow-prod.fluidtopics.net/Okf6jEBrb9~8EkkkYxEY5w#view-in-uib "Legen Sie Eigenschaften in einer Konfigurationsdatei fest, um Ihre -Komponente zu UI Builder in Ihrer -Instanz hinzuzufügen."). Fügen Sie einer Arbeitsbereich -Datensatzansicht eine Komponente hinzu : Sie können dem Komponentenbereich in der Datensatzansicht Arbeitsbereich anwenderdefinierte oder standardmäßige Komponenten hinzufügen. Weitere Informationen hierzu finden Sie unter Datensatzansicht im Arbeitsbereich einrichten. ## Fügen Sie eine Komponente hinzu UI Builder {#ariaid-title2} Legen Sie Eigenschaften in einer Konfigurationsdatei fest, um Ihre -Komponente zu UI Builder in Ihrer -Instanz hinzuzufügen. ### Vorbereitungen * [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.") * [Entwickeln Sie eine Komponente](https://servicenow-prod.fluidtopics.net/60dMB1wH13bjOzez8u7d0A "Fügen Sie Ihren Komponentencode hinzu, und testen Sie ihn mit einem lokalen Entwicklungsserver.") {#view-in-uib__ul_wb3_xbn_tkb} ### Prozedur 1. Öffnen Sie in Ihrem Projektverzeichnis now-ui.json. 2. Fügen Sie der Datei das Objekt `„components.[component-name].uiBuilder" hinzu`. Dieses Objekt fügt die Komponente zu UI Builderhinzu. Dieses Objekt enthält diese Schlüssel-Wert-Paare:{#view-in-uib__table_spf_5sb_5kb__entry__3} | Key | Datentyp | Beschreibung | |-|-|-| | components.\[component-name\].uiBuilder | Objekt | Objekt, das die Komponente zu UI Builder hinzufügt. | | komponenten.\[komponentenname\].uiBuilder.label | Zeichenfolge | Erforderlich. Der Anzeigename der Komponente in UI Builder. | | komponenten.\[komponentenname\].uiBuilder.icon | Zeichenfolge | Erforderlich. Der Name des Symbols, das in UI Builder angezeigt wird. | | komponenten.\[komponentenname\].uiBuilder.description | Zeichenfolge | Erforderlich. Eine Kurzbeschreibung der Funktionalität der Komponente. | [ ] {#view-in-uib__table_spf_5sb_5kb} { "components": { "card": { "uiBuilder": { "label" : "Card", "icon" : "chat-fill", "description" : "A visual card format for a record.", "associatedTypes": ["global.core"] }, 3. Wenn Ihre Komponente Eigenschaften enthält, fügen Sie der Datei das Array `„components.[component-name].properties" hinzu`. Dadurch werden die Eigenschaften als Konfigurationsoptionen für die Komponente in UI Builderhinzugefügt . Dieses Objekt enthält diese Schlüssel-Wert-Paare:{#view-in-uib__table_vdz_qzb_5kb__entry__3} | Key | Datentyp | Beschreibung | |-|-|-| | components.\[component-name\].properties | Array \ | Ein Array von Objekten, das alle Eigenschaften der Komponente und alle relevanten Informationen zu diesen Eigenschaften enthält. | | components.\[component-name\].properties\[\].name | Zeichenfolge | Name der Eigenschaft im Code Ihrer Komponente. | | components.\[component-name\].properties\[\].label | Zeichenfolge | Anzeigename der Eigenschaft, die ggf. in UI Builderangezeigt werden soll. | | components.\[component-name\].properties\[\].description | Zeichenfolge | Eine Kurzbeschreibung dessen, was die Eigenschaft bewirkt oder wie sie verwendet wird. | | components.\[component-name\].properties\[\].readOnly | Boolean | Bei „wahr" wird verhindert, dass ein Anwender die Eigenschaft in UI Builder konfiguriert. Standard: false. | | components.\[component-name\].properties\[\].required | Boolean | Bei „wahr" muss der Benutzer die Eigenschaft konfigurieren. Standard: false. | | components.\[component-name\].properties\[\].defaultValue | Zeichenfolge | Der Standardwert, wenn der Benutzer keinen angibt. | | components.\[component-name\].properties\[\].associatedTypes | Array | Beschreibt, wo in der UI Builder-Toolbox die Komponente angezeigt wird. Wert muss `„global.core" sein`. | | components.\[component-name\].properties\[\].typeMetadata | Objekt | Zusätzliche Konfigurationsdaten, die für einige Datentypen erforderlich sind, z. B. Referenzeigenschaften und Auswahllisten. | [ ] {#view-in-uib__table_vdz_qzb_5kb} { "components": { "properties": [ { "name": "backgroundColor", "label": "Background Color", "description": "Background Color", "readOnly": false, "required": false, "defaultValue": "lightgray" }, { "name": "cardType", "label": "Type of card", "description": "Type of card", "readOnly": false, "required": false, "defaultValue": "" } ] 4. Speichern Sie die Datei. ### Nächste Maßnahme [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."). **Zugehörige Konzepte** * [Generator für anwenderdefinierte Komponenten](https://servicenow-prod.fluidtopics.net/vWVQnmx~8lN~OTq11cdvTQ "Entwickeln Sie anwenderdefinierte Komponenten mit Next Experience UI Framework und Erweiterung der UI-Komponente.")