Personalizar uma experiência de detalhes de orientação no Construtor de IU

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 3 min. de leitura

    • Personalize a aparência da sua experiência de detalhe no painel lateral contextual ou em uma subguia do cartão Ações recomendadas usando Construtor de IU. A experiência de detalhe 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 detalhes 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 de detalhes no painel lateral contextual ou em uma subguia.

    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 detalhes para criar uma variante de página de IU de uma experiência de detalhes de orientação.
      Esta página inclui um contêiner vazio com as propriedades listadas na tabela a seguir.
      Tabela 1. Detalhar propriedades da experiência
      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 para a experiência de detalhe.
      guidanceActions As ações de orientação na exibição de detalhes.
      errorMessages A mensagem de erro a ser exibida quando a recomendação falha.

      O exemplo a seguir mostra as propriedades e seus valores de amostra para a experiência de detalhes.

      {
  "guidanceInputs": {    
    "task": {
      "name": "task",
      "value": "a473d057cc3f1110f877c24a7dd07ec6"
    },
    "knowledge": {
      "name": "knowledge",
      "value": "e97ee81eff6002009b20ffffffffffe0"
    },
    "guidance_input_form_fields": {
      "additional_comments": {
        "label": "Additional Comments",
        "maxLength": "255",
        "hint": "This item may help you!",
        "name": "additional_comments",
        "recordValue": {
          "displayValue": "test",
          "value": "test"
        },
        "dictionary": {
          "type": "string",
          "dependentField": null,
          "dependentTable": null,
          "name": "additional_comments",
          "label": "Additional Comments",
          "canWrite": true,
          "canRead": true,
          "internalType": "string",
          "isMandatory": false,
          "isReadonly": false,
          "attributes": {
            "name": "edge_encryption_enabled",
            "value": true
          }
        }
      }
    }
  },
  "guidanceOutputs": {
    "attached_article": "kb_knowledge",
    "meta": [
      {
        "varName": "attached_article",
        "varType": "reference",
        "varTableName": "kb_knowledge",
        "varlabel": "Attached Article",
        "varDefaultValue": "",
        "varOrder": "100",
        "varActive": "true",
        "varDisplayValue": ""
      }
    ]
  },
  "status": "completed",
  "guidanceMessage": "You can attach this article to the case.",
  "guidanceActions": [
    {
      "label": "Dismiss",
      "actionId": "skip",
      "variant": "secondary"
    },
    {
      "label": "Attach Article",
      "action_sys_id": "f18738c8a4f70110f87726cbf49777ae",
      "variant": "primary",
      "isExecuted": true,
      "completionMessage": "KB Article was shared",
      "action_behaviour": "contextual_side_panel",
      "primary": true
    }
  ],
  "errorMessage": "This action couldn’t be completed."
}
    4. Clique em Editar detalhe no Construtor de IU.
      A variante de 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 detalhes. 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 detalhes personalizada.
      As vinculações de dados estão localizadas na guia Configuração do painel de configuração em Construtor de IU. Para obter mais informações, consulte Recursos de dados no UI Builder.
    6. Adicione e vincule scripts a componentes em sua IU de detalhe personalizada para expedir eventos usando um manipulador de eventos para executar, ignorar ou marcar como concluída uma recomendação com uma carga correspondente.
      Tabela 2. Detalhar eventos de experiência
      Eventos processados Descrição
      GUIDANCE_ACTION_CLICKED A ação que é clicada. Este evento passa a ação clicada para a carga útil.
      api.emit( 
  ‘GUIDANCE_ACTION_CLICKED’,{ 
        model: {
               fields: [{'name': 'input',
               'value':  '100'}]
               },
        action: api.context.props.guidanceActions[n] 
    } 
);
      Nota:
      Na propriedade orientaçãoAções[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’
);
      ORIENTAÇÃO_MESSAGE_PUBLICADA 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'
);
      IR_BACK_GUIDANCE Volta para o nó anterior em uma árvore de decisão.
      api.emit(
   ‘GO_BACK_GUIDANCE’
);

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