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

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 4 Minuten Lesedauer

    • Passen Sie mit eine Vorschau einer Karte „empfohlene Aktionen“ an, die im kontextbezogenen Seitenbereich angezeigt wird 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 die Vorschau Ihrer Empfehlungskarte aussieht.

    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 Vorschau-UI Dient zum Erstellen einer UI-Seitenvariante einer Vorschau-Experience für Anleitungen.

      Diese Seite enthält eine leere CustomExpProps Container mit den in der folgenden Tabelle aufgeführten Eigenschaften Während der Laufzeit. 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
      sysId ID der Empfehlung.
      name Titel der Vorschau-Experience.
      Beschreibung Nachricht für die Vorschau-Experience.
      EmpfehlungHint Text, der den Service Desk-Mitarbeiter darüber informiert, warum eine Empfehlung vorgeschlagen wird.
      CallToActions Einstellungen für die Anleitungsaktion.
      ActionTypeLabel Bezeichnung für den empfohlenen Aktionstyp.
      icon Symbol für die Empfehlungskarte.
      ActionStateLabel Externer Name des Aktionsstatus.
      ActionStateValue Interner Name des Aktionsstatus.
      Vorschaufelder Die Felder, die in der Vorschau der Anleitung angezeigt werden sollen.
      errorMessage Fehlermeldung, die angezeigt werden soll, wenn die Empfehlung nicht angezeigt werden kann.
      Ariaausgeblendet In der gruppierten Liste empfohlene Aktionen übergibt die Komponente „sn-Karussell“ diese Eigenschaft an jede Karte, um zu bestimmen, ob der Inhalt im Karussell ausgeblendet ist. Wenn die Karte ausgeblendet ist, sollten wir diesen Wert verwenden, um „Aria-Hidden“ festzulegen oder eine umsetzbare Komponente auf „wahr“ zu deaktivieren und Probleme mit der Barrierefreiheit zu vermeiden.
      useCase Registerkarte „Suchen/RA“, auf der die Anleitung gerendert wird.
      actionInputs Anleitungseingaben.
      ActionTypeSysId SYS-ID des Empfehlungstyps.
      actionId SYS-ID der Empfehlung.
      table Kontexttabelle für empfohlene Aktionen.
      tableSysId SYS_ID des Datensatzes der Kontexttabelle für empfohlene Aktionen
      Renderer Komponente, die für das Rendern der detaillierten Experience verantwortlich ist
      SecondaryCallToAction Sekundäre Aktionen, die auf der Karte angezeigt werden sollen.
      IsGenius Ist Genius-Ergebniskarte, wird auf der Registerkarte „Suche“ Genius-Ergebnis verwendet.
      contextSysId SysId des Kontexts für empfohlene Aktionen.
      actionConfigurations Wert der Eigenschaft „empfohlene Aktionen actionConfigurations“. Das Wertfeld ist standardmäßig leer.
      isFullSearchView Wenn die Suche in der Ansicht für die vollständige Suche der Seitenbereichsansicht angezeigt wird , Der Wert ist „wahr“.
      ContextEingaben ContextEingabeeigenschaftswert für empfohlene Aktionen. Um die vordefinierte Syntax abzurufen, navigieren Sie zu alle > empfohlene Aktionen > Kontext > Kontexteingaben, und kopieren Sie das JSON-Format der Kontexteingaben.

      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 in 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 in Ihrer Vorschau-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 oder zu überspringen.

      Die folgende Tabelle zeigt die Liste der Ereignisse, die in Bezug auf die von einem Service Desk-Mitarbeiter ausgeführten Aktionen ausgegeben werden:

      Tabelle : 2. Vorschau der Experience-Ereignisse anzeigen
      Behandelte Ereignisse Beschreibung
      ON_SINGLE_CLICK_ACTION_ INITIIEREN 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_INITIATE‘, { 
        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] ,
        table: api.context.props.customExpProps.table,
        tableSysId: api.context.props.customExpProps.tableSysId,
        contextSysId: api.context.props.customExpProps.contextSysId,
        actionType: api.context.props.customExpProps.actionTypeSysId,
        actionInputs: api.context.props.customExpProps.actionInputs,
        formFieldInputs: { <actionInputs key>: <actionInputs value> },
        actionId: api.context.props.customExpProps.actionId,
        name: api.context.props.customExpProps.name,
        actionMetadata: api.context.props.customExpProps.callToActions[0],
        actionStateValue: api.context.props.customExpProps.actionStateValue,
    }
)

      Die FormFeldEingaben Enthält ActionInputs Die aktualisiert werden muss, wenn das Ereignis ausgegeben wird.
      ON_DRILL_DOWN_ACTION _INITIIEREN 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_INITIATE ‘, { 
          table: api.context.props.customExpProps.table,
          tableSysId: api.context.props.customExpProps.tableSysId,
          actionType: <sys_id for "Guidance" action type/ e38f55b9b72120107d472397ee11a9be>,
          actionInputs: api.context.props.customExpProps.actionInputs,
          formFieldInputs: {"<actionInputs Key>":"<new value which needs to be set>"},
          actionId: api.context.props.customExpProps.actionId,
          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],
          renderer: api.context.props.customExpProps.renderer,
          contextSysId: api.context.props.customExpProps.contextSysId,
          sysId: api.context.props.customExpProps.sysId, 
          name: api.context.props.customExpProps.name }

)
      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 Sie Client-Skripts, und binden Sie sie an Komponenten .