Fügen Sie eine Komponente hinzu Mitarbeiterbereich

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 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

    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.

    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

    Legen Sie Eigenschaften in einer Konfigurationsdatei fest, um Ihre -Komponente zu UI Builder in Ihrer -Instanz hinzuzufügen.

    Vorbereitungen

    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:
      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. 
      {
  "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:
      Key Datentyp Beschreibung
      components.[component-name].properties Array <Object> 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. 
      {
  "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.