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

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 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

    Beginnen Sie mit der Erstellung einer UI-Seitenvariante einer Experience mit Anleitungen. 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 die Darstellung Ihrer Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte ändern.

    Prozedur

    1. Navigieren zu Alle > Empfohlene Aktionen > Aktionstypen > Anleitungenan.
    2. Wählen Sie eine Anleitung aus der Liste „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. Eigenschaften der Detail-Experience
      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 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": {},
    "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 in 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 in Ihrer anwenderdefinierten Detail-UI Skripts hinzu, und binden Sie sie an Komponenten, 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 Geben Sie in der Antwort 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 Anleitungsaktionen. 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 Sie Client-Skripts, und binden Sie sie an Komponenten .