--- sourceDocument: Yokohama Customer Service Management sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/customer-service-management Release : - yokohama ft:locale : - pt-BR ft:publication_title : - Yokohama Customer Service Management ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Personalize uma experiência de visualização de orientação no Construtor de IU # Personalize uma experiência de visualização de orientação no Construtor de IU {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura Personalize uma visualização de um cartão Ações recomendadas que é exibido no painel lateral contextual usando Construtor de IU. A experiência de visualização inclui uma dica, um ícone, uma mensagem e um botão de ação. ## Antes de Iniciar Função necessária: sn_nb_action.next_best_action_author e ui_builder_admin, admin ## Por Que e Quando Desempenhar Esta Tarefa Você começa criando uma variante de página de IU de uma experiência de visualização de orientação. Ao criar uma variante de página de IU a partir de um modelo de página, você começa com uma estrutura base que pode ser personalizada. Ao usar as propriedades do componente, você pode mudar a aparência da visualização do cartão de recomendação. ## Procedimento 1. Navegar até TudoAções recomendadasTipos de AçãoOrientações. 2. Selecione uma orientação na lista de orientações. 3. Selecione Criar IU de visualização Para criar uma variante de página de IU de uma experiência de visualização de orientação. Esta página inclui um contêiner vazio com as propriedades listadas na tabela a seguir. A estrutura de ações recomendadas é aprovada em `CustomExpProps `objeto como uma propriedade para a experiência personalizada. {#customize-ra-preview-experience__table_eq3_zhc_xvb__entry__2} | Propriedade | Descrição | |-|-| | Sys ID | ID da recomendação. | | nome | Título da experiência de visualização. | | descrição | Mensagem para a experiência de visualização. | | Recomendação | Texto que informa ao agente por que uma recomendação está sendo sugerida. | | Chamadas | Configurações da ação de orientação. | | ActionTypeLabel | Rótulo do tipo de ação recomendada. | | ícones | Ícone do cartão de recomendação. | | ActionStateLabel | Nome externo do estado da ação. | | ActionStateValue | Nome interno do estado da ação. | | Campos de visualização | Os campos a serem exibidos na experiência de visualização da orientação. | | errorMessage | Mensagem de erro a ser exibida quando a recomendação não for exibida. | [Tabela 1. Visualizar propriedades da experiência] {#customize-ra-preview-experience__table_eq3_zhc_xvb} O exemplo a seguir mostra propriedades e valores de amostra para a experiência de visualização. "customExpProps": { "sysId": "e8421a2a436f0210f81d92621ab8f2da", "name": "Attach and share article", "description": null, "recommendationHint": "Knowledge", "callToActions": [ { "label": "", "name": "", "id": "1e8392aa436f0210f81d92621ab8f291", "actionBehavior": "contextual_side_panel", "primary": "true", "order": "100", "completionMessage": "Knowledge article successfully attached." } ], "recommendationAction": "", "actionTypeLabel": "Guidance", "icon": "magnifying-glass-sparkle-outline", "actionStateLabel": "New", "actionStateValue": "new", "previewFields": null, "attributes": "", "errorMessage": "", "ariaHidden": false, "useCase": "search", "actionInputs": {}, "actionTypeSysId": "", "actionId": "", "table": "sn_customerservice_case", "tableSysId": "", "renderer": "sn-guidance-experience-connected", "secondaryCallToAction": {}, "isGenius": false, "contextSysId": "", "actionConfigurations": {}, "isFullSearchView": false } 4. Selecione Editar visualização no Construtor de IU . A variante da página de IU é aberta em Construtor de IU, onde você pode adicionar e configurar componentes para personalizar a aparência da experiência de visualização. Para obter mais informações, consulte [Trabalhar com componentes no Construtor de IU](https://www.servicenow.com/docs/access?context=work-components&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US). 5. Vincule as propriedades da experiência de visualização à IU de visualização. As vinculações de dados estão em Configuração do painel de configuração em Construtor de IU. Para obter mais informações, consulte [Recursos de dados no Construtor de IU](https://www.servicenow.com/docs/access?context=data-resources&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US). 6. Adicione e vincule scripts a componentes na IU de visualização para expedir eventos usando um manipulador de eventos para executar ou ignorar uma recomendação com uma carga correspondente. {#customize-ra-preview-experience__table_grp_flc_xvb__entry__2} | Eventos tratados | Descrição | |-|-| | ON_SINGLE_CLICK_ACTION | Inicia e conclui a ação quando um agente seleciona o botão de ação. Este evento passa os seguintes parâmetros na carga: 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 | Expande a ação e exibe mais ações ou informações depois que um agente seleciona o botão de ação primária. Este evento passa os seguintes parâmetros na carga: 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 | Cancela a ação. api.emit( 'DISMISS_ACTION_CLICK', { sysId: api.context.props.customExpProps.sysId } ) | | ACTION_TRIGGER_PROPAGATION | Permite que o usuário adicione comportamento específico de IU para ações de orientação. Este evento propaga os detalhes da carga para o primário em que este evento pode ser tratado. api.emit( 'SN_NEXT_BEST_ACTION_LIST_CONNECTED#ACTION_TRIGGERED_PROPAGATION' ', { "actionSysId": api.context.props.customExpProps.actionId "actionName": api.context.props.customExpProps.actionConfigurations[api.context.props.customExpProps.actionId ]["actionName"] "actionType": "guidance", "eventName": "", "payload": { } } | [Tabela 2. Visualizar eventos de experiência] {#customize-ra-preview-experience__table_grp_flc_xvb} Para obter mais informações, consulte [Defina e vincule scripts de cliente a componentes](https://www.servicenow.com/docs/access?context=define-client-scripts&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US).