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

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 2 min. de leitura

    • Personalize uma visualização de um cartão de 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é Todos > Ações recomendadas > Tipos de Ação > Orientações.
    2. Selecione uma orientação na lista Orientações.
    3. Clique em 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 passa o objeto customExpProps 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çãoDica 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.
      ícone Ícone do cartão de recomendação.
      actionStateLabel Nome externo do estado da ação.
      actionStateValue Nome interno do estado da ação.
      visualizarCampos 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 falha.

      O exemplo a seguir mostra propriedades e valores de amostra para a experiência de visualização.

      "customExpProps": { 
       "sysId": "05831457cc3f1110f877c24a7dd07eb0", 
       "name": "Eclipse configuration for Android development\n\t\t", 
       "description": "<p>Please review this article and attach</p>", 
       "recommendationHint": "This item may help you!", 
       "callToActions": [ 
            { 
            "label": "Review and attach article", 
            "name": "review_and_attach_article", 
            "id": "f18738c8a4f70110f87726cbf49777ae", 
            "actionBehavior": "contextual_side_panel", 
            "primary": "true", 
            "order": "100", 
            "completionMessage": "KB Article was shared." 
            } 
        ],   
       "actionTypeLabel": "Guidance", 
       "icon": "lightbulb-outline", 
       "actionStateLabel": "New", 
       "actionStateValue": "new", 
       "previewFields": [ 
            { 
            "label": "Number", 
            "name": "knowledge.number", 
            "value": { 
            "type": "string", 
            "value": "KB0000033" 
             } 
          }, 
       ], 
      "errorMessage": "This action couldn’t be completed." 
}
    4. Clique em 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 Como 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 na guia 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.
      Tabela 2. Visualizar eventos de experiência
      Eventos manipulados Descrição
      ON_SINGLE_CLICK_ACTION Inicia e conclui a ação quando um agente clica no 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 clica no 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
    }
)

      Para obter mais informações, consulte Definir e vincular client scripts a componentes.