Fügen Sie eine Komponente zu hinzu Mitarbeiterbereich

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Verwenden Sie benutzerdefinierte Komponenten, um eine benutzerdefinierte Arbeitsbereich -Schnittstelle zu erstellen, die den spezifischen Anforderungen der Service Desk-Mitarbeiter Ihres Unternehmens entspricht.

    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 Schnittstelle zusammenführen.

    Hinzufügen von Komponenten zu einem Arbeitsbereich

    Nach der Bereitstellung in Ihrer Instanz können Sie Arbeitsbereich auf folgende Weise Komponenten hinzufügen.

    Fügen Sie eine Komponente zu einem Arbeitsbereich -Modal hinzu
    Verwenden Sie eine UI-Aktion, um eine benutzerdefinierte Komponente in einem modalen Fenster zu starten, damit ein Service Desk-Mitarbeiter nicht zu einem anderen Bildschirm navigieren muss, um eine Aufgabe auszuführen. Weitere Informationen finden Sie unter Komponenten in einem modalen Fenster rendern.
    Fügen Sie einer Arbeitsbereich -Zielseite mit UI Builder eine Komponente hinzu

    Verwenden Sie UI Builder, um benutzerdefinierte Zielseiten für Ihre Service Desk-Mitarbeiter zu erstellen. UI Builder ist ein Drag-and-Drop-Tool, mit dem Sie Arbeitsbereichskomponenten visuell anordnen können. Weitere Informationen finden Sie unter Benutzerdefinierte 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 zu hinzu UI Builder.

    Fügen Sie einer Arbeitsbereich -Datensatzansicht eine Komponente hinzu
    Sie können dem Komponentenbereich in der Datensatzansicht Arbeitsbereich benutzerdefinierte oder Standardkomponenten hinzufügen. Weitere Informationen finden Sie unter Datensatzansicht im Arbeitsbereich einrichten.

    Fügen Sie eine Komponente zu 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:
      Schlüssel Datentyp Beschreibung
      components.[component-name].uiBuilder Objekt Objekt, das die Komponente zu UI Builder hinzufügt.
      components.[component-name].uiBuilder.label Zeichenfolge Erforderlich. Der Anzeigename der Komponente in UI Builder.
      components.[component-name].uiBuilder.icon Zeichenfolge Erforderlich. Der Name des Symbols, das in UI Builder angezeigt wird.
      components.[component-name].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:
      Schlüssel 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 in UI Builderangezeigt werden soll, falls zutreffend.
      components.[component-name].properties[].description Zeichenfolge Eine kurze Beschreibung dessen, was die Eigenschaft tut oder wie sie verwendet wird.
      components.[component-name].properties[].readOnly Boolean Bei „true“ wird verhindert, dass ein Benutzer die Eigenschaft in UI Builder konfiguriert.

      Standard: false.
      components.[component-name].properties[].required Boolean Bei „true“ muss der Benutzer die Eigenschaft konfigurieren.

      Standard: false.
      components.[component-name].properties[].defaultValue Zeichenfolge Der Standardwert, wenn der Benutzer keinen Wert 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 in einer Instanz bereit.