Adicionar um componente a Espaço do agente

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

    • Use componentes personalizados para criar uma interface Espaço personalizada para atender à necessidade específica dos agentes da sua empresa.

    A comunicação com os clientes por meio de vários canais pode ser demorada. Para serem eficientes nessas interações omnicanal, seus agentes precisam de uma única exibição das informações do cliente para reduzir a alternância de contexto entre várias ferramentas. Ao desenvolver componentes personalizados para Espaço, sua equipe pode reunir comunicações de vários canais em uma interface.

    Como adicionar componentes a um Espaço

    Depois de implantado em sua instância, você pode adicionar componentes a Espaço dessas maneiras.

    Adicionar um componente a um modal Espaço
    Use uma ação de IU para iniciar um componente personalizado em um modal para que um agente não precise navegar para uma tela diferente para realizar uma tarefa. Para obter mais informações, consulte Renderizar um componente em um modal.
    Adicionar um componente a uma página principal Espaço usando o Construtor de IU

    Use o Construtor de IU para criar páginas principais personalizadas para seus agentes. Construtor de IU é uma ferramenta de arrastar e soltar que permite organizar visualmente os componentes do espaço. Para obter mais informações, consulte Criar páginas principais personalizadas para espaços.

    Configure as propriedades no arquivo now-ui.json para usar componentes implantados no UI Builder. Consulte Adicionar um componente a Construtor de IU.

    Adicionar um componente a uma exibição de registro Espaço
    Você pode adicionar componentes personalizados ou padrão à área de componentes na exibição de registro Espaço. Para obter mais informações, consulte Configuração da exibição de registro no espaço.

    Adicionar um componente a Construtor de IU

    Defina propriedades em um arquivo de configuração para adicionar seu componente ao Construtor de IU em sua instância.

    Antes de Iniciar

    Procedimento

    1. No diretório do projeto, abra now-ui.json.
    2. Adicione o objeto components.[component-name].uiBuilder ao arquivo.
      Este objeto adiciona o componente ao Construtor de IU.
      Este objeto inclui estes pares de chave-valor:
      Chave Tipo de dados Descrição
      componentes.[component-name].uiBuilder Objeto Objeto que adiciona o componente ao Construtor de IU.
      componentes.[component-name].uiBuilder.label Cadeia de caracteres Obrigatório. O nome de exibição do componente no Construtor de IU.
      componentes.[component-name].uiBuilder.icon Cadeia de caracteres Obrigatório. O nome do ícone que aparece no Construtor de IU.
      componentes.[component-name].uiBuilder.description Cadeia de caracteres Obrigatório. Uma descrição resumida da funcionalidade do componente. 
      {
  "components": {
    "card": {
      "uiBuilder": {
        "label" : "Card",
        "icon" : "chat-fill", 
        "description" : "A visual card format for a record.",
        "associatedTypes": ["global.core"]
      },
    3. Se o seu componente incluir propriedades, adicione a matriz components.[component-name].properties ao arquivo.
      Isso adiciona as propriedades como opções de configuração para o componente em Construtor de IU.
      Este objeto inclui estes pares de chave-valor:
      Chave Tipo de dados Descrição
      componentes.[nome-do-componente].propriedades Matriz <Object> Uma matriz de objetos que inclui todas as propriedades do componente e todas as informações relevantes sobre essas propriedades.
      componentes.[component-name].properties[].name Cadeia de caracteres Nome da propriedade no código do seu componente.
      componentes.[component-name].properties[].label Cadeia de caracteres Exiba o nome da propriedade a ser exibida em Construtor de IU, se aplicável.
      componentes.[component-name].properties[].description Cadeia de caracteres Uma descrição resumida do que a propriedade faz ou como usá-la.
      componentes.[component-name].properties[].readOnly Booliano Quando verdadeiro, impede que um usuário configure a propriedade no Construtor de IU.

      Padrão: falso.
      componentes.[component-name].properties[].required Booliano Quando verdadeiro, o usuário deve configurar a propriedade.

      Padrão: falso.
      componentes.[component-name].properties[].defaultValue Cadeia de caracteres O valor padrão quando o usuário não fornece um.
      componentes.[component-name].properties[].associatedTypes Matriz Descreve onde o componente aparece na caixa de ferramentas do Construtor de IU. O valor deve ser "global.core".
      componentes.[component-name].properties[].typeMetadata Objeto Dados de configuração extras que alguns tipos de dados exigem, como propriedades de referência e listas de seleção. 
      {
  "components": {
    "properties": [
		    {
			"name": "backgroundColor",
			"label": "Background Color",
			"description": "Background Color",
			"readOnly": false,
			"required": false,
			"defaultValue": "lightgray"
		    },
		    {
		       "name": "cardType",
			"label": "Type of card",
			"description": "Type of card",
			"readOnly": false,
			"required": false,
			"defaultValue": ""
		    }
			]
    4. Salve o arquivo.

    O que Fazer Depois

    Implantar um componente em uma instância.