--- 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 Anleitungsdetail-Experience in an UI Builder # Passen Sie eine Anleitungsdetail-Experience in 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 mit UI Builderan, wie Ihre Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte der Karte Empfohlene Aktionen angezeigt wird. Die Detail-Experience kann Elemente wie Benutzereingaben und Drilldown-Aktionen enthalten. ## 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 Anleitungsdetail-Experience. Wenn Sie eine UI-Seitenvariante aus einer Seitenvorlage erstellen, beginnen Sie mit einer Basisstruktur, die Sie anpassen können. Durch Konfigurieren der Komponenten und Verwenden der Komponenteneigenschaften können Sie die Darstellung Ihrer Detail-Experience im kontextbezogenen Seitenbereich oder auf einer Unterregisterkarte ändern. ## Prozedur 1. Navigieren zu AlleEmpfohlene AktionenAktionstypenAnleitungen. 2. Wählen Sie eine Anleitung aus der Liste „Anleitungen" aus. 3. Klicken Sie auf Detail-UI erstellen, um eine UI-Seitenvariante einer Anleitungsdetail-Experience zu erstellen. Diese Seite enthält einen leeren Container mit den in der folgenden Tabelle aufgeführten Eigenschaften.{#customize-ra-detail-experience__table_eq3_zhc_xvb__entry__2} | Eigenschaft | Beschreibung | |-|-| | guidanceInputs | Die zur Durchführung der Anleitung erforderlichen Eingaben. | | guidanceOutputs | Die Ausgaben der Anleitung. | | status | Der Status der Anleitung. | | guidanceMessage | Die Nachricht für die Detail-Experience. | | guidanceActions | Die Anleitungsaktionen in der Detailansicht. | | errorMessages | Die Fehlermeldung, die angezeigt werden soll, wenn die Empfehlung nicht angezeigt wird. | [Tabelle : 1. Detail-Experience-Eigenschaften] {#customize-ra-detail-experience__table_eq3_zhc_xvb} Das folgende Beispiel zeigt Eigenschaften und ihre Beispielwerte für die Detail-Experience. { "guidanceInputs": { "task": { "name": "task", "value": "a473d057cc3f1110f877c24a7dd07ec6" }, "knowledge": { "name": "knowledge", "value": "e97ee81eff6002009b20ffffffffffe0" }, "guidance_input_form_fields": { "additional_comments": { "label": "Additional Comments", "maxLength": "255", "hint": "This item may help you!", "name": "additional_comments", "recordValue": { "displayValue": "test", "value": "test" }, "dictionary": { "type": "string", "dependentField": null, "dependentTable": null, "name": "additional_comments", "label": "Additional Comments", "canWrite": true, "canRead": true, "internalType": "string", "isMandatory": false, "isReadonly": false, "attributes": { "name": "edge_encryption_enabled", "value": true } } } } }, "guidanceOutputs": { "attached_article": "kb_knowledge", "meta": [ { "varName": "attached_article", "varType": "reference", "varTableName": "kb_knowledge", "varlabel": "Attached Article", "varDefaultValue": "", "varOrder": "100", "varActive": "true", "varDisplayValue": "" } ] }, "status": "completed", "guidanceMessage": "You can attach this article to the case.", "guidanceActions": [ { "label": "Dismiss", "actionId": "skip", "variant": "secondary" }, { "label": "Attach Article", "action_sys_id": "f18738c8a4f70110f87726cbf49777ae", "variant": "primary", "isExecuted": true, "completionMessage": "KB Article was shared", "action_behaviour": "contextual_side_panel", "primary": true } ], "errorMessage": "This action couldn't be completed." } 4. Klicken Sie in UI Builder auf Details bearbeiten. Die UI-Seitenvariante wird in UI Buildergeöffnet. Dort können Sie Komponenten hinzufügen und konfigurieren, um das Erscheinungsbild der Detail-Experience 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 Experience-Eigenschaften der Vorschau an Ihre anwenderdefinierte Detail-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 Skripts in Ihrer anwenderdefinierten Detail-UI hinzu, und binden Sie sie an Komponenten, um Ereignisse zu senden, indem Sie einen Ereignishandler verwenden, um eine Empfehlung mit einer entsprechenden Nutzlast auszuführen, zu überspringen oder als abgeschlossen zu markieren. {#customize-ra-detail-experience__table_grp_flc_xvb__entry__2} | Ereignisse behandelt | Beschreibung | |-|-| | GUIDANCE_ACTION_CLICKED | Die Aktion, auf die geklickt wird. Dieses Ereignis übergibt die angeklickte Aktion an die Nutzlast. api.emit( 'GUIDANCE_ACTION_CLICKED',{ model: { fields: [{'name': 'input', 'value': '100'}] }, action: api.context.props.guidanceActions.find(action => action.label == "guidance action label"); } ); Hinweis: Geben Sie in der Eigenschaft `„guideActions[n]"` in der Antwort die Indexnummer der Aktion an, die Sie anwenden möchten. | | SKIP_GUIDANCE | Überspringt die Anleitung. api.emit( 'SKIP_GUIDANCE' ); | | GUIDANCE_NACHRICHT_VERÖFFENTLICHT | Übergibt Daten an eine vorgelagerte Anwendung api.emit( 'SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED', { name:'decision-tree-payload' jsonPayload: jsonObject } ); | | GUIDANCE_Mark_Complete | Markiert eine anwenderdefinierte Anleitung als abgeschlossen. api.emit( 'GUIDANCE_MARK_COMPLETE' ); | | „GO_BACK_GUIDANCE". | Wechselt zum vorherigen Knoten in einer Entscheidungsstruktur zurück. api.emit( 'GO_BACK_GUIDANCE' ); | [Tabelle : 2. Detail-Experience-Ereignisse] {#customize-ra-detail-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). {#customize-ra-detail-experience__steps_b33_gzj_wvb}