Passen Sie eine Experience für Anleitungsdetails in an UI Builder

  • Freigeben Version: Australia
  • Aktualisiert 12. März 2026
  • 2 Minuten Lesedauer

    • Passen Sie mit an, wie Ihre Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte der Karte empfohlene Aktionen aussieht UI Builder. Die Detail-Experience kann Dinge wie Anwendereingaben 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 Experience mit Anleitungen-Details. Wenn Sie eine UI-Seitenvariante aus einer Seitenvorlage erstellen, beginnen Sie mit einer Basisstruktur, die Sie anpassen können. Indem Sie die Komponenten konfigurieren und die Komponenteneigenschaften verwenden, können Sie ändern, wie Ihre Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte aussieht.

    Prozedur

    1. Navigieren zu Alle > Empfohlene Aktionen > Aktionstypen > Anleitungenan.
    2. Wählen Sie eine Anleitung aus der Liste der Anleitungen aus.
    3. Wählen Sie Aus Erstellen Sie eine Detail-UI Dient zum Erstellen einer UI-Seitenvariante einer Guidance-Detail-Experience.
      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 Eingaben, die zum Ausführen der Anleitung erforderlich sind.
      guidanceOutputs Die Ausgaben der Anleitung.
      Status Der Status der Anleitung.
      guidanceMessage Die Nachricht für die Detail-Experience.
      guidanceActions Die Leitfadenaktionen in der Detailansicht.
      errorMessages Die Fehlermeldung, die angezeigt werden soll, wenn die Empfehlung nicht angezeigt werden kann.

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

      {
    "guidanceInputs": {},
    "guidanceOutputs": {
        "meta": []
    },
    "status": "waiting",
    "guidanceMessage": "",
    "guidanceActions": [
        {
            "label": "Attach",
            "action_sys_id": "1e8392aa436f0210f81d92621ab8f291",
            "variant": "primary",
            "isExecuted": false,
            "completionMessage": "Knowledge article successfully attached.",
            "action_behaviour": "contextual_side_panel",
            "primary": true
        }
    ],
    "errorMessage": "",
    "actionConfigurations": {},
    "guidanceId": "",
    "tableName": "sn_customerservice_case",
    "bare": true,
    "scrollable": "none"
}
    4. Wählen Sie Aus Bearbeiten Sie Details in UI Builder .
      Die UI-Seitenvariante wird in geöffnet UI Builder, Wo Sie Komponenten hinzufügen und konfigurieren können, um das Erscheinungsbild der Detail-Experience anzupassen. Weitere Informationen finden Sie unter Arbeiten mit Komponenten im UI Builder .
    5. Binden Sie die Eigenschaften der Vorschau-Experience an Ihre anwenderdefinierte Detail-UI.
      Datenbindungen befinden sich in Konfiguration Registerkarte 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 anwenderdefinierten Detail-UI, um Ereignisse zu senden, indem Sie einen Ereignis-Handler verwenden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen, zu überspringen oder als abgeschlossen zu markieren.
      Tabelle : 2. Detail-Experience-Ereignisse
      Behandelte Ereignisse Beschreibung
      GUIDANCE_ACTION_CLICKED Die ausgewählte Aktion. Dieses Ereignis übergibt die ausgewählte 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:
      In GuidanceActions[n] Eigenschaft in der Antwort: Geben Sie die Indexnummer der Aktion an, die Sie anwenden möchten.
      SKIP_GUIDANCE Überspringt die Anleitung.
      api.emit(
   ‘SKIP_GUIDANCE’
);
      GUIDANCE_MESSAGE_PUBLISHED Ü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 Kehrt zum vorherigen Knoten in einer Entscheidungsstruktur zurück.
      api.emit(
   ‘GO_BACK_GUIDANCE’
);
      ACTION_TRIGGER_PROPAGIERUNG Ermöglicht Ihnen das Hinzufügen eines UI-spezifischen Verhaltens für Leitfadenaktionen. Dieses Ereignis propagiert die Nutzlastdetails an das übergeordnete Element, in dem dieses Ereignis verarbeitet werden kann.
      api.emit(
    ‘SN_NEXT_BEST_ACTION_LIST_CONNECTED #ACTION_TRIGGERED‘, {
   "actionSysId":api.context.props.guidanceId,
   "actionName": api.context.props.actionConfigurations[api.context.props.guidanceId][“actionName”]
   "actionType": "guidance",
   "eventName": "<eventName>",
   "payload": {}

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