--- 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 detalhe de orientação no Construtor de IU # Personalize uma experiência de detalhe 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) 2 min. de leitura Personalize a aparência da sua experiência detalhada no painel lateral contextual ou em uma subguia do cartão Ações recomendadas usando Construtor de IU. A experiência detalhada pode incluir itens como entradas do usuário e ações de detalhamento. ## 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 detalhe 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 configurar os componentes e usar as propriedades do componente, você pode mudar a aparência da sua experiência detalhada no painel lateral contextual ou em uma subguia. ## 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 detalhes Para criar uma variante de página de IU de uma experiência de detalhe de orientação. Esta página inclui um contêiner vazio com as propriedades listadas na tabela a seguir.{#customize-ra-detail-experience__table_eq3_zhc_xvb__entry__2} | Propriedade | Descrição | |-|-| | guidanceInputs | As entradas necessárias para executar a orientação. | | guidanceOutputs | As saídas da orientação. | | status | O status da orientação. | | guidanceMessage | A mensagem da experiência detalhada. | | guidanceActions | As ações de orientação na exibição de detalhes. | | errorMessages | A mensagem de erro a ser exibida quando a recomendação não é exibida. | [Tabela 1. Propriedades da experiência detalhada] {#customize-ra-detail-experience__table_eq3_zhc_xvb} O exemplo a seguir mostra propriedades e seus valores de amostra para a experiência de detalhe. { "guidanceInputs": {}, "guidanceOutputs": { "meta": [] }, "status": "waiting", "guidanceMessage": "", "guidanceActions": [ { "label": "Attach", "action_sys_id": "1e8392aa436f0210f81d92621ab8f291", "variant": "primary", "isExecuted": false, "completionMessage": "Knowledge article successfully attached.", "action_behaviour": "contextual_side_panel", "primary": true } ], "errorMessage": "", "actionConfigurations": {}, "guidanceId": "", "tableName": "sn_customerservice_case", "bare": true, "scrollable": "none" } 4. Selecione Edite detalhes 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 detalhe. 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 detalhes personalizada. As vinculações de dados estão localizadas 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 em sua IU de detalhes personalizada para expedir eventos usando um manipulador de eventos para executar, ignorar ou marcar como concluído uma recomendação com uma carga correspondente. {#customize-ra-detail-experience__table_grp_flc_xvb__entry__2} | Eventos tratados | Descrição | |-|-| | GUIDANCE_ACTION_CLICKED | A ação selecionada. Este evento passa a ação selecionada para a carga. api.emit( 'GUIDANCE_ACTION_CLICKED',{ model: { fields: [{'name': 'input', 'value': '100'}] }, action: api.context.props.guidanceActions.find(action => action.label == "guidance action label"); } ); Nota: Em `GuidanceActions[n] `na resposta, forneça o número de índice da ação que você deseja aplicar. | | SKIP_GUIDANCE | Ignora a orientação. api.emit( 'SKIP_GUIDANCE' ); | | GUIDANCE_MESSAGE_PUBLISHED | Passa dados para uma aplicação ascendente. api.emit( 'SN_GUIDANCE_EXPERIENCE_CONNECTED#GUIDANCE_MESSAGE_PUBLISHED', { name:'decision-tree-payload' jsonPayload: jsonObject } ); | | GUIDANCE_MARK_COMPLETE | Marca uma orientação personalizada como concluída. api.emit( 'GUIDANCE_MARK_COMPLETE' ); | | GO_BACK_GUIDANCE | Volta para o nó anterior em uma árvore de decisão. api.emit( 'GO_BACK_GUIDANCE' ); | | ACTION_TRIGGER_PROPAGATION | Permite que você 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 manipulado. api.emit( 'SN_NEXT_BEST_ACTION_LIST_CONNECTED #ACTION_TRIGGERED', { "actionSysId":api.context.props.guidanceId, "actionName": api.context.props.actionConfigurations[api.context.props.guidanceId]["actionName"] "actionType": "guidance", "eventName": "", "payload": {} | [Tabela 2. Eventos de experiência detalhados] {#customize-ra-detail-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). {#customize-ra-detail-experience__steps_b33_gzj_wvb}