{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":6654,"path":"customer-service-management/customize-ra-detail-experience.md","title":"Customize a guidance detail experience in the UI Builder","bundle":null,"doc_type":null,"release":"australia","body":"\n# Customize a guidance detail experience in the UI Builder\n\nCustomize how your detail experience looks in the contextual side panel or in a subtab of the Recommended Actions card using UI Builder. The detail experience can include things such as user inputs and drill down actions.\n\n## Before you begin\n\nRole required: sn\\_nb\\_action.next\\_best\\_action\\_author and ui\\_builder\\_admin, admin\n\n## About this task\n\nYou begin by creating a UI page variant of a guidance detail experience. When you create a UI page variant from a page template, you start with a base structure that you can customize. By configuring the components and using the component properties, you can change how your detail experience looks in the contextual side panel or in a subtab.\n\n## Procedure\n\n1.  Navigate to **All** &gt; **Recommended Actions** &gt; **Action Types** &gt; **Guidances**.\n\n2.  Select a guidance from the Guidances list.\n\n3.  Select **Create detail UI** to create a UI page variant of a guidance detail experience.\n\n    This page includes an empty container with the properties listed in the following table.\n\n    |Property|Description|\n    |--------|-----------|\n    |guidanceInputs|The inputs required to perform the guidance.|\n    |guidanceOutputs|The outputs of the guidance.|\n    |status|The status of the guidance.|\n    |guidanceMessage|The message for the detail experience.|\n    |guidanceActions|The guidance actions in the detail view.|\n    |errorMessages|The error message to display when the recommendation fails to display.|\n\n    The following example shows properties and their sample values for the detail experience.\n\n    ```\n    {\n        \"guidanceInputs\": {},\n        \"guidanceOutputs\": {\n            \"meta\": []\n        },\n        \"status\": \"waiting\",\n        \"guidanceMessage\": \"\",\n        \"guidanceActions\": [\n            {\n                \"label\": \"Attach\",\n                \"action_sys_id\": \"1e8392aa436f0210f81d92621ab8f291\",\n                \"variant\": \"primary\",\n                \"isExecuted\": false,\n                \"completionMessage\": \"Knowledge article successfully attached.\",\n                \"action_behaviour\": \"contextual_side_panel\",\n                \"primary\": true\n            }\n        ],\n        \"errorMessage\": \"\",\n        \"actionConfigurations\": {},\n        \"guidanceId\": \"\",\n        \"tableName\": \"sn_customerservice_case\",\n        \"bare\": true,\n        \"scrollable\": \"none\"\n    }\n    \n    ```\n\n4.  Select **Edit detail in UI Builder**.\n\n    The UI page variant opens in UI Builder, where you can add and configure components to customize the look and feel of the detail experience. For more information, see [Working with components in the UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/application-development/work-components.md).\n\n5.  Bind the preview experience properties to your custom detail UI.\n\n    Data bindings are located in the **Config** tab of the configuration panel in UI Builder. For more information, see [Data resources in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/application-development/data-resources.md).\n\n6.  Add and bind scripts to components in your custom detail UI to dispatch events by using an event handler to execute, skip, or mark complete a recommendation with a corresponding payload.\n\n<table id=\"table_grp_flc_xvb\"><thead><tr><th>\n\nEvents handled\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nGUIDANCE\\_ACTION\\_CLICKED\n\n</td><td>\n\nThe action that is selected. This event passes the action selected to the payload.```\napi.emit( \n  ‘GUIDANCE_ACTION_CLICKED’,{ \n        model: {\n               fields: [{'name': 'input',\n               'value':  '100'}]\n               },\n        action: api.context.props.guidanceActions.find(action => action.label == \"guidance action label\"); \n    } \n);\n```\n\n**Note:** In the `guidanceActions[n]` property in the response, provide the index number of the action that you want to apply.\n\n</td></tr><tr><td>\n\nSKIP\\_GUIDANCE\n\n</td><td>\n\nSkips the guidance.```\napi.emit(\n   ‘SKIP_GUIDANCE’\n);\n\n```\n\n</td></tr><tr><td>\n\nGUIDANCE\\_MESSAGE\\_PUBLISHED\n\n</td><td>\n\nPasses data to an upstream application.```\napi.emit( \n  ‘SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED’,\n    { \n     name:'decision-tree-payload'\n     jsonPayload: jsonObject\n    } \n);\n\n```\n\n</td></tr><tr><td>\n\nGUIDANCE\\_MARK\\_COMPLETE\n\n</td><td>\n\nMarks a custom guidance as completed.```\napi.emit(\n  'GUIDANCE_MARK_COMPLETE'\n);\n```\n\n</td></tr><tr><td>\n\nGO\\_BACK\\_GUIDANCE\n\n</td><td>\n\nGoes back to the previous node in a decision tree.```\napi.emit(\n   ‘GO_BACK_GUIDANCE’\n);\n\n```\n\n</td></tr><tr><td>\n\nACTION\\_TRIGGERED\\_PROPAGATION\n\n</td><td>\n\nEnables you to add UI specific behavior for guidance actions. This event propagates the payload details to the parent where this event can be handled.```\napi.emit(\n    ‘SN_NEXT_BEST_ACTION_LIST_CONNECTED #ACTION_TRIGGERED‘, {\n   \"actionSysId\":api.context.props.guidanceId,\n   \"actionName\": api.context.props.actionConfigurations[api.context.props.guidanceId][“actionName”]\n   \"actionType\": \"guidance\",\n   \"eventName\": \"<eventName>\",\n   \"payload\": {}\n\n```\n\n</td></tr></tbody>\n</table>    For more information, see [Define and bind client scripts to components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/application-development/define-client-scripts.md).\n\n\n"}}