---
sourceDocument: Xanadu: Customer Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/xanadu/customer-service-management

 Release :

    - xanadu

ft:locale :

    - de-DE

ft:publication_title :

    - Xanadu: Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Passen Sie eine Anleitungsvorschau-Experience im an UI Builder

# Passen Sie eine Anleitungsvorschau-Experience im an UI Builder {#ariaid-title1}

* Freigeben Version: Xanadu
* 
* Aktualisiert 1. August 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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 AlleEmpfohlene AktionenAktionstypenAnleitungen.
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.
   {#customize-ra-preview-experience__table_eq3_zhc_xvb__entry__2}

   | 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. |
   [Tabelle : 1. Zeigen Sie eine Vorschau der Experience-Eigenschaften an]

   {#customize-ra-preview-experience__table_eq3_zhc_xvb}

   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](https://www.servicenow.com/docs/access?context=work-components&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
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](https://www.servicenow.com/docs/access?context=data-resources&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).
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.  
   {#customize-ra-preview-experience__table_grp_flc_xvb__entry__2}

   | 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 } ) |
   [Tabelle : 2. Zeigen Sie eine Vorschau der Experience-Ereignisse an]

   {#customize-ra-preview-experience__table_grp_flc_xvb}

   Weitere Informationen finden Sie unter [Clientskripts definieren und an Komponenten binden](https://www.servicenow.com/docs/access?context=define-client-scripts&version=xanadu&pubname=xanadu-application-development&ft:locale=en-US).