Passen Sie eine Anleitungsdetail-Experience in an UI Builder

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 2 Minuten Lesedauer

    • Passen Sie mit UI Builderan, wie Ihre Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte der Karte Empfohlene Aktionen angezeigt wird. Die Detail-Experience kann Elemente wie Benutzereingaben und Drilldown-Aktionen enthalten.

    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 die Darstellung Ihrer Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte ändern.

    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 zur Durchführung 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 Details bearbeiten.
      Die UI-Seitenvariante wird in UI Buildergeöffnet. Dort können Sie Komponenten hinzufügen und konfigurieren, um das Erscheinungsbild der Detail-Experience anzupassen. Weitere Informationen finden Sie unter Mit Komponenten in UI Builder arbeiten.
    5. Binden Sie die Experience-Eigenschaften der Vorschau an Ihre anwenderdefinierte Detail-UI.
      Datenbindungen befinden sich auf der Registerkarte „ Konfig “ des Konfigurationsbereichs in UI Builder. Weitere Informationen finden Sie unter Datenressourcen in UI Builder.
    6. Fügen Sie Skripts in Ihrer anwenderdefinierten Detail-UI hinzu, und binden Sie sie an Komponenten, um Ereignisse zu senden, indem Sie einen Ereignishandler verwenden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen, zu überspringen oder als abgeschlossen zu markieren.
      Tabelle : 2. Detail-Experience-Ereignisse
      Ereignisse behandelt 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.find(action => action.label == "guidance action label"); 
    } 
);
      Hinweis:
      Geben Sie in der Eigenschaft „guideActions[n]“ in der Antwort 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_Mark_Complete Markiert eine anwenderdefinierte Anleitung als abgeschlossen.
      api.emit(
  'GUIDANCE_MARK_COMPLETE'
);
      „GO_BACK_GUIDANCE“. Wechselt zum vorherigen Knoten in einer Entscheidungsstruktur zurück.
      api.emit(
   ‘GO_BACK_GUIDANCE’
);

      Weitere Informationen finden Sie unter Clientskripts definieren und an Komponenten binden.