Passen Sie eine Vorschau-Experience für Anleitungen in an UI Builder

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 2 Minuten Lesedauer

    • Passen Sie eine Vorschau der Karte „empfohlene Aktionen“ an, die im kontextbezogenen Seitenbereich angezeigt wird, indem Sie verwenden UI Builder. Die Vorschau-Experience enthält einen Tipp, ein Symbol, eine Nachricht und eine Aktionsschaltfläche.

    Vorbereitungen

    Erforderliche Rolle: sn_nb_action.next_best_action_author und ui_Builder_admin, admin

    Warum und wann dieser Vorgang ausgeführt wird

    Sie erstellen zunächst eine UI-Seitenvariante einer Vorschau-Experience für Anleitungen. Wenn Sie eine UI-Seitenvariante aus einer Seitenvorlage erstellen, beginnen Sie mit einer Basisstruktur, die Sie anpassen können. Mithilfe der Komponenteneigenschaften können Sie ändern, wie Ihre Empfehlungskartenvorschau 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 Vorschau-UI Dient zum Erstellen einer UI-Seitenvariante einer Vorschau-Experience für Anleitungen.

      Diese Seite enthält einen leeren Container mit den in der folgenden Tabelle aufgeführten Eigenschaften. Das Framework für empfohlene Aktionen besteht CustomExpProps Objekt als Eigenschaft für die anwenderdefinierte Experience.

      Tabelle : 1. Vorschau der Experience-Eigenschaften anzeigen
      Eigenschaft Beschreibung
      Sys-ID ID der Empfehlung.
      name Titel der Vorschau-Experience.
      Beschreibung Nachricht für die Vorschau-Experience.
      EmpfehlungHint Text, der dem Service Desk-Mitarbeiter mitteilt, warum eine Empfehlung vorgeschlagen wird.
      CallToActions Einstellungen für die Anleitungsaktion.
      ActionTypeBezeichnung Bezeichnung für den empfohlenen Aktionstyp.
      icon Symbol für die Empfehlungskarte.
      ActionStateBezeichnung Externer Name des Aktionsstatus.
      ActionStateValue Interner Name des Aktionsstatus.
      Vorschaufelder Die Felder, die in der Vorschau-Experience der Anleitung angezeigt werden sollen.
      errorMessage Fehlermeldung, die angezeigt werden soll, wenn die Empfehlung nicht angezeigt werden kann.

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

      "customExpProps": {
        "sysId": "e8421a2a436f0210f81d92621ab8f2da",
        "name": "Attach and share article",
        "description": null,
        "recommendationHint": "Knowledge",
        "callToActions": [
            {
                "label": "",
                "name": "",
                "id": "1e8392aa436f0210f81d92621ab8f291",
                "actionBehavior": "contextual_side_panel",
                "primary": "true",
                "order": "100",
                "completionMessage": "Knowledge article successfully attached."
            }
        ],
        "recommendationAction": "",
        "actionTypeLabel": "Guidance",
        "icon": "magnifying-glass-sparkle-outline",
        "actionStateLabel": "New",
        "actionStateValue": "new",
        "previewFields": null,
        "attributes": "",
        "errorMessage": "",
        "ariaHidden": false,
        "useCase": "search",
        "actionInputs": {},
        "actionTypeSysId": "",
        "actionId": "",
        "table": "sn_customerservice_case",
        "tableSysId": "",
        "renderer": "sn-guidance-experience-connected",
        "secondaryCallToAction": {},
        "isGenius": false,
        "contextSysId": "",
        "actionConfigurations": {},
        "isFullSearchView": false
    }
    4. Wählen Sie Aus Bearbeiten Sie die Vorschau 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 Vorschau-Experience anzupassen. Weitere Informationen finden Sie unter Arbeiten mit Komponenten im UI Builder .
    5. Binden Sie die Eigenschaften der Vorschau-Experience an Ihre Vorschau-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 Vorschau-UI, um Ereignisse zu senden, indem Sie einen Ereignis-Handler verwenden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen oder zu überspringen.
      Tabelle : 2. Vorschau der Experience-Ereignisse anzeigen
      Behandelte Ereignisse Beschreibung
      ON_SINGLE_CLICK_ACTION Initiiert und schließt die Aktion ab, wenn ein Service Desk-Mitarbeiter die Aktionsschaltfläche auswählt. Dieses Ereignis übergibt die folgenden Parameter in der Nutzlast:
      api.emit( 
    ‘ON_SINGLE_CLICK_ACTION‘, { 
        sysId: api.context.props.customExpProps.sysId, 
        name: api.context.props.customExpProps.name, 
        actionStateValue: api.context.props.customExpProps.actionStateValue, 
        actionMetadata: api.context.props.customExpProps.callToActions[0] 
    }
)
      ON_DRILL_DOWN_ACTION Erweitert die Aktion und zeigt weitere Aktionen oder Informationen an, nachdem ein Service Desk-Mitarbeiter die primäre Aktionsschaltfläche ausgewählt hat. Dieses Ereignis übergibt die folgenden Parameter in der Nutzlast:
      api.emit( 
    ‘ON_DRILL_DOWN_ACTION‘, { 
        sysId: api.context.props.customExpProps.sysId, 
        name: api.context.props.customExpProps.name, 
        actionStateValue: api.context.props.customExpProps.actionStateValue, 
        actionMetadata: api.context.props.customExpProps.callToActions[0] 
     }
)
      DISMISS_ACTION_CLICK Bricht die Aktion ab.
      api.emit( 
    ‘DISMISS_ACTION_CLICK‘, { 
         sysId: api.context.props.customExpProps.sysId
    }
)
      ACTION_TRIGGER_PROPAGIERUNG Ermöglicht dem Anwender 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_PROPAGATION' ‘, {
   "actionSysId": api.context.props.customExpProps.actionId
   "actionName": api.context.props.customExpProps.actionConfigurations[api.context.props.customExpProps.actionId ][“actionName”]
   "actionType": "guidance",
   "eventName": "<eventName>",
   "payload": {
   }
}

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