Passen Sie die Experience einer Anleitungsvorschau im an UI Builder

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Passen Sie eine Vorschau einer Karte vom Typ „Empfohlene Aktionen“ an, die im kontextbezogenen Seitenbereich angezeigt wird, indem Sie UI Builderverwenden. Die Vorschau-Experience umfasst 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 benutzerdefinierte 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.
      EmpfehlungHint 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.
      PreviewFields Die Felder, die in der Anleitungsvorschau-Experience angezeigt werden sollen.
      errorMessage Fehlermeldung, die angezeigt wird, 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 in UI Builder auf Vorschau bearbeiten.
      Die UI-Seitenvariante wird in UI Buildergeöffnet, wo Sie Komponenten hinzufügen und konfigurieren können, um das Erscheinungsbild der Vorschau-Experience 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 „Konfiguration“ 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 Events zu senden, indem Sie einen Event Handler verwenden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen oder zu überspringen.
      Tabelle : 2. Zeigen Sie eine Vorschau der Experience-Events an
      Behandelte Events Beschreibung
      ON_SINGLE_CLICK_ACTION Initiiert und schließt die Aktion ab, wenn ein Service Desk-Mitarbeiter auf die Aktionsschaltfläche klickt. Dieses Event ü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 Event ü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 Client-Skripts definieren und an Komponenten binden.