Passen Sie die Experience von Anleitungsdetails in an UI Builder

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

    • Passen Sie mit UI Builderan, wie Ihre Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte der Karte „Empfohlene Aktionen“ aussieht. Die Detail-Experience kann Dinge wie Benutzereingaben und Drilldown-Aktionen umfassen.

    Vorbereitungen

    Erforderliche Rolle: sn_nb_action.next_best_action_author und ui_builder_admin, admin

    Warum und wann dieser Vorgang ausgeführt wird

    Sie beginnen mit der Erstellung einer UI-Seitenvariante einer Anleitungsdetail-Experience. Wenn Sie eine UI-Seitenvariante aus einer Seitenvorlage erstellen, beginnen Sie mit einer Basisstruktur, die Sie anpassen können. Durch Konfigurieren der Komponenten und Verwenden der Komponenteneigenschaften können Sie ändern, wie Ihre Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte aussieht.

    Prozedur

    1. Navigieren zu Alle > Empfohlene Aktionen > Aktionstypen > Anleitungen.
    2. Wählen Sie eine Anleitung aus der Liste „Anleitungen“ aus.
    3. Klicken Sie auf Detail-UI erstellen, um eine UI-Seitenvariante einer Anleitungsdetail-Experience zu erstellen.
      Diese Seite enthält einen leeren Container mit den in der folgenden Tabelle aufgeführten Eigenschaften.
      Tabelle : 1. Detail-Experience-Eigenschaften
      Eigenschaft Beschreibung
      guidanceInputs Die zum Ausführen der Anleitung erforderlichen Eingaben.
      guidanceOutputs Die Ausgaben der Anleitung.
      status Der Status der Anleitung.
      guidanceMessage Die Nachricht für die Detail-Experience.
      guidanceActions Die Anleitungsaktionen in der Detailansicht.
      errorMessages Die Fehlermeldung, die angezeigt werden soll, wenn die Empfehlung nicht angezeigt wird.

      Das folgende Beispiel zeigt Eigenschaften und ihre Beispielwerte für die Detail-Experience.

      {
  "guidanceInputs": {    
    "task": {
      "name": "task",
      "value": "a473d057cc3f1110f877c24a7dd07ec6"
    },
    "knowledge": {
      "name": "knowledge",
      "value": "e97ee81eff6002009b20ffffffffffe0"
    },
    "guidance_input_form_fields": {
      "additional_comments": {
        "label": "Additional Comments",
        "maxLength": "255",
        "hint": "This item may help you!",
        "name": "additional_comments",
        "recordValue": {
          "displayValue": "test",
          "value": "test"
        },
        "dictionary": {
          "type": "string",
          "dependentField": null,
          "dependentTable": null,
          "name": "additional_comments",
          "label": "Additional Comments",
          "canWrite": true,
          "canRead": true,
          "internalType": "string",
          "isMandatory": false,
          "isReadonly": false,
          "attributes": {
            "name": "edge_encryption_enabled",
            "value": true
          }
        }
      }
    }
  },
  "guidanceOutputs": {
    "attached_article": "kb_knowledge",
    "meta": [
      {
        "varName": "attached_article",
        "varType": "reference",
        "varTableName": "kb_knowledge",
        "varlabel": "Attached Article",
        "varDefaultValue": "",
        "varOrder": "100",
        "varActive": "true",
        "varDisplayValue": ""
      }
    ]
  },
  "status": "completed",
  "guidanceMessage": "You can attach this article to the case.",
  "guidanceActions": [
    {
      "label": "Dismiss",
      "actionId": "skip",
      "variant": "secondary"
    },
    {
      "label": "Attach Article",
      "action_sys_id": "f18738c8a4f70110f87726cbf49777ae",
      "variant": "primary",
      "isExecuted": true,
      "completionMessage": "KB Article was shared",
      "action_behaviour": "contextual_side_panel",
      "primary": true
    }
  ],
  "errorMessage": "This action couldn’t be completed."
}
    4. Klicken Sie in UI Builder auf Detail bearbeiten.
      Die UI-Seitenvariante wird in UI Buildergeöffnet, wo Sie Komponenten hinzufügen und konfigurieren können, um das Erscheinungsbild der Detail-Experience anzupassen. Weitere Informationen finden Sie unter Mit Komponenten in UI Builder arbeiten.
    5. Binden Sie die Eigenschaften der Vorschau-Experience an Ihre benutzerdefinierte Detail-UI.
      Datenbindungen befinden sich auf der Registerkarte Konfiguration des Konfigurationsbereichs in UI Builder. Weitere Informationen finden Sie unter Datenressourcen in UI Builder.
    6. Fügen Sie Skripts hinzu und binden Sie sie an Komponenten in Ihrer benutzerdefinierten Detail-UI, um Events zu senden, indem Sie einen Event Handler verwenden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen, zu überspringen oder als abgeschlossen zu markieren.
      Tabelle : 2. Detail-Experience-Ereignisse
      Behandelte Events Beschreibung
      GUIDANCE_ACTION_CLICKED Die Aktion, auf die geklickt wird. Dieses Ereignis übergibt die angeklickte Aktion an die Nutzlast.
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions[n] 
    } 
);
      Hinweis:
      Geben Sie in der Antwort in der Eigenschaft „guidanceActions[n]“ die Indexnummer der Aktion an, die Sie anwenden möchten.
      SKIP_GUIDANCE Überspringt die Anleitung.
      api.emit(
   ‘SKIP_GUIDANCE’
);
      GUIDANCE_NACHRICHT_VERÖFFENTLICHT Übergibt Daten an eine vorgelagerte Anwendung.
      api.emit( 
  ‘SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED’,
    { 
     name:'decision-tree-payload'
     jsonPayload: jsonObject
    } 
);
      GUIDANCE_ZEICHEN_ABGESCHLOSSEN Markiert eine benutzerdefinierte Anleitung als abgeschlossen.
      api.emit(
  'GUIDANCE_MARK_COMPLETE'
);
      ZURÜCK_ZURÜCK_GUIDANCE Kehrt zum vorherigen Knoten in einer Entscheidungsstruktur zurück.
      api.emit(
   ‘GO_BACK_GUIDANCE’
);

      Weitere Informationen finden Sie unter Client-Skripts definieren und an Komponenten binden.