Passen Sie eine Anleitungsvorschau-Experience im an UI Builder

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

    • Passen Sie die Vorschau der Karte „Empfohlene Aktionen“, die im kontextbezogenen Seitenbereich angezeigt wird, mit UI Builderan. Die Vorschau-Experience enthält einen Hinweis, 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 beginnen mit der Erstellung einer UI-Seitenvariante einer Anleitungsvorschau-Experience. 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 das Aussehen der Vorschau der Empfehlungskarte ä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 Vorschau-UI erstellen, um eine UI-Seitenvariante einer Anleitungsvorschau-Experience zu erstellen.

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

      Tabelle : 1. Zeigen Sie eine Vorschau der Experience-Eigenschaften an
      Eigenschaft Beschreibung
      sysId ID der Empfehlung.
      name Titel der Vorschau-Experience.
      Beschreibung Nachricht für die Vorschau-Experience.
      empfehlungHinweis Text, der dem Service Desk-Mitarbeiter mitteilt, 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 wird.

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

      "customExpProps": { 
       "sysId": "05831457cc3f1110f877c24a7dd07eb0", 
       "name": "Eclipse configuration for Android development\n\t\t", 
       "description": "<p>Please review this article and attach</p>", 
       "recommendationHint": "This item may help you!", 
       "callToActions": [ 
            { 
            "label": "Review and attach article", 
            "name": "review_and_attach_article", 
            "id": "f18738c8a4f70110f87726cbf49777ae", 
            "actionBehavior": "contextual_side_panel", 
            "primary": "true", 
            "order": "100", 
            "completionMessage": "KB Article was shared." 
            } 
        ],   
       "actionTypeLabel": "Guidance", 
       "icon": "lightbulb-outline", 
       "actionStateLabel": "New", 
       "actionStateValue": "new", 
       "previewFields": [ 
            { 
            "label": "Number", 
            "name": "knowledge.number", 
            "value": { 
            "type": "string", 
            "value": "KB0000033" 
             } 
          }, 
       ], 
      "errorMessage": "This action couldn’t be completed." 
}
    4. Klicken Sie auf Vorschau in UI Builder bearbeiten.
      Die UI-Seitenvariante wird in UI Buildergeöffnet. Dort können Sie Komponenten hinzufügen und konfigurieren, um das Erscheinungsbild der -Vorschau anzupassen. Weitere Informationen finden Sie unter Mit Komponenten in UI Builder arbeiten.
    5. Binden Sie die Eigenschaften der Vorschau-Experience an Ihre Vorschau-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 Komponenten in Ihrer Vorschau-UI Skripts hinzu, und binden Sie sie, um Ereignisse mithilfe eines Ereignishandlers zu senden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen oder zu überspringen.
      Tabelle : 2. Zeigen Sie eine Vorschau der Experience-Ereignisse an
      Ereignisse behandelt Beschreibung
      ON_SINGLE_CLICK_ACTION Initiiert die Aktion und schließt sie ab, wenn ein Service Desk-Mitarbeiter auf die Aktionsschaltfläche klickt. 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 auf die primäre Aktionsschaltfläche geklickt 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
    }
)

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