Personalize uma experiência de visualização de orientação no Construtor de IU

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 4 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 de base que pode ser personalizada. Usando as propriedades do componente, você pode mudar a aparência da visualização do cartão de recomendação.

    Procedimento

    1. Navegar até Tudo > Ações recomendadas > Tipos de Ação > Orientaçõ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 vazio CustomExpProps contêiner com as propriedades listadas na tabela a seguir durante o tempo de execução. A estrutura de ações recomendadas passa por CustomExpProps objeto como uma propriedade para a experiência personalizada.

      Tabela 1. Visualizar propriedades da experiência
      Propriedade Descrição
      sysId 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.
      CallToActions Configurações da ação de orientação.
      ActionTypeLabel Rótulo para o 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 de orientação.
      errorMessage Mensagem de erro a ser exibida quando a recomendação não é exibida.
      AriaOculto Na lista Agrupadas Ações recomendadas, o componente sn-carrossel passará essa propriedade para cada cartão para determinar se o conteúdo está oculto no carrossel. Se o cartão estiver oculto, devemos usar este valor para definir aria-hidden ou desabilitar qualquer componente acionável como verdadeiro e evitar problemas de acessibilidade.
      useCase Guia Pesquisa/RA em que a orientação está sendo renderizada.
      actionInputs Entradas de orientação.
      SysId do actionType Sys ID do tipo de recomendação.
      actionId Sys ID da recomendação.
      tabela Tabela de contexto de ações recomendadas.
      tableSysId Registro da tabela de contexto de ações recomendadas sys_id.
      renderizador Componente responsável por renderizar a experiência detalhada
      SecondaryCallToAction Ações secundárias a serem mostradas no cartão.
      IsGenius Cartão de resultado do Genius, usado na guia Pesquisar Resultado do Genius.
      contextSysId SYSID do contexto de ações recomendadas.
      actionConfigurations Valor da propriedade Ações recomendadas actionConfigurations. O campo Valor é deixado em branco por padrão.
      isFullSearchView Se a pesquisa for exibida na exibição de pesquisa completa da exibição do painel lateral , o valor é verdadeiro.
      ContextInputs Ações recomendadas contextValor da propriedade de entrada. Para obter a sintaxe predefinida, navegue até Todos > Ações recomendadas > Contexto > Entradas de contexto e copie o formato JSON das entradas de contexto.

      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 .
    5. Vincule as propriedades da experiência de visualização à IU de visualização.
      As vinculações de dados estão no Configuração do painel de configuração em Construtor de IU. Para obter mais informações, consulte Recursos de dados no Construtor de IU .
    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.

      A tabela a seguir mostra a lista de eventos que são emitidos em relação às ações executadas por um agente:

      Tabela 2. Visualizar eventos de experiência
      Eventos manipulados Descrição
      ON_SINGLE_CLICK_ACTION_ INICIAR 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_INITIATE‘, { 
        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] ,
        table: api.context.props.customExpProps.table,
        tableSysId: api.context.props.customExpProps.tableSysId,
        contextSysId: api.context.props.customExpProps.contextSysId,
        actionType: api.context.props.customExpProps.actionTypeSysId,
        actionInputs: api.context.props.customExpProps.actionInputs,
        formFieldInputs: { <actionInputs key>: <actionInputs value> },
        actionId: api.context.props.customExpProps.actionId,
        name: api.context.props.customExpProps.name,
        actionMetadata: api.context.props.customExpProps.callToActions[0],
        actionStateValue: api.context.props.customExpProps.actionStateValue,
    }
)

      . FormFieldInputs contém o. ActionInputs que deve ser atualizado quando o evento é emitido.
      _DRILL_DOWN_ACTION _INICIE 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_INITIATE ‘, { 
          table: api.context.props.customExpProps.table,
          tableSysId: api.context.props.customExpProps.tableSysId,
          actionType: <sys_id for "Guidance" action type/ e38f55b9b72120107d472397ee11a9be>,
          actionInputs: api.context.props.customExpProps.actionInputs,
          formFieldInputs: {"<actionInputs Key>":"<new value which needs to be set>"},
          actionId: api.context.props.customExpProps.actionId,
          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],
          renderer: api.context.props.customExpProps.renderer,
          contextSysId: api.context.props.customExpProps.contextSysId,
          sysId: api.context.props.customExpProps.sysId, 
          name: api.context.props.customExpProps.name }

)
      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 útil 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": "<eventName>",
   "payload": {
   }
}

      Para obter mais informações, consulte Defina e vincule scripts de cliente a componentes .