Workspace¶
Este documento fornece uma visão geral da interface do Workspace, destacando as principais funcionalidades e configurações disponíveis.
Explorando a tela do Workspace¶
A interface utilizada para visualizar os status dos tickets é mostrada na imagem abaixo. A seguir, destacamos os principais elementos dessa tela:
- Workspace: Aba que irá indicar qual é o Workspace que você está visualizando.
- Abas: São todas as abas que seu Workspace pode ter, configuradas pra tipos de visualizações específicas com base em filtros pelos dados dos tickets.
- Botão de criação: Permite a criação de novos tickets, seja de forma individual ou em lote, desde que as permissões e configurações necessárias estejam habilitadas.
- Tabela de visualização: Exibe a lista de tickets disponíveis e suas respectivas informações. Esta tabela também oferece ferramentas para busca, filtragem, e outras ações para melhor gerenciar os tickets. Entenda melhor sobre as tabelas do Quoti clicando aqui.
Figura 1: Visão geral do Workspace
Configurações Avançadas de Layout¶
No texto anterior, mencionamos as "configurações necessárias". Mas, o que exatamente são essas configurações e como podemos ajustá-las? O Workspace oferece uma gama de opções de personalização para que você possa adaptar a interface às suas necessidades. Essas personalizações são feitas por meio de um arquivo JSON, permitindo que você ajuste o layout e o comportamento da interface conforme suas preferências.
Passos para configuração do Layout¶
1° passo¶
Para acessar as configurações avançadas de layout, é necessário adicionar o
parâmetro de configuração &c=1 no final da URL da plataforma em seu navegador.
2° passo¶
Após adicionar o parâmetro, um botão de configuração aparecerá no seu Workspace. Clique nesse botão para abrir um pop-up onde você poderá ajustar o layout de acordo com suas preferências. Agora, você está pronto para personalizar seu Workspace.
Observação: é necessário que seu perfil tenha as permissões necessárias para que possa visualizar esse botão.
Entendendo o JSON de Configuração¶
O JSON de configuração é fundamental para definir as opções avançadas de layout nesta tela. Com ele, você pode realizar diversas customizações, como:
- Alterar ou adicionar novas abas à interface.
- Configurar parâmetros de busca nas tabelas, incluindo filtros, opções de ordenação e outros critérios.
- Aplicar estilos personalizados usando CSS em diferentes componentes da tela.
Relação entre Propriedades do JSON e Componentes da Tela¶
Figura 2: Propriedades do JSON
- Botão de configuração: Abre o JSON de configuração.
Propriedades do JSON:
- tabs: Configura as abas do Workspace.
- defaultTab: Configura o que será exibido nas tabelas das abas do Workspace.
- ticketAgentOverview: Define as configurações específicas da interface dentro de um ticket.
Configurando a defaultTab do Workspace¶
Figura 3: DefaultTab do Workspace
A defaultTab é responsável por definir o que será exibido nas tabelas das diferentes abas dentro do Workspace. Com ela, você pode configurar desde o comportamento do botão de criação até os campos, atributos e outros parâmetros que serão utilizados nas tabelas.
Existem dois componentes que podem ser renderizados no Workspace. O componente padrão é a ticketTable, e outro é uma tabela do Quoti, chamada de qtDatabase. A ticketTable também é uma tabela padrão do Quoti, na qual você pode conter diversas personalizações dentro dela, de acordo com o que você precisar. Conheça mais sobre uma qtDatabase clicando aqui.
Exemplo de configuração de uma ticketTable:
{
"order": [
[
"TicketGoals.expireAt",
"ASC"
]
],
"fields": [
{
"name": "id",
"label": "id",
"sortable": true
},
{
"name": "ticketType100046AdditionalInfo.estado",
"label": "UF",
"sortable": true
},
{
"name": "ticketAssignedToUserName",
"label": "Negociador",
"convert": "{{ (input) => { return (input => input?.length ? $shortName(input) : 'Não definido')(input) } }}"
},
{
"name": "status",
"label": "Status do acordo",
"sortable": true
},
{
"name": "createdAt",
"type": "date",
"label": "Criado em",
"convert": "{{ (input) => { return (input => {return $$moment(input).format('LLL')})(input) } }}",
"sortable": true
},
{
"name": "updatedAt",
"type": "date",
"label": "Atualizado em",
"sortable": true
}
],
"params": {
"includeQueue": false,
"additionalInfos": [
{
"ticketTypeId": 100046
}
],
"columnsToSearch": [
"id",
"description",
"status",
"$ticketType100046AdditionalInfo.estado$",
"$ticketType100046AdditionalInfo.estado$"
],
"includeSharedGroup": false,
"includeTicketGoals": true,
"includeAdditionalInfos": true
},
"attributes": [
"id",
[
"TicketType.name",
"type"
],
[
"ticketRecipient.name",
"ticketRecipientName"
],
[
"ticketAssignedToUser.name",
"ticketAssignedToUserName"
],
[
"ticketCreator.name",
"ticketCreatedByName"
],
[
"Category.name",
"category"
],
"description",
"status",
"createdAt",
"updatedAt",
"isAppointment",
"scheduleDate",
"duration",
[
"TicketGoals.expire_at",
"goalsExpiresAt"
],
[
"TicketGoals.finished_at",
"goalsFinishedAt"
],
[
"TicketGoals.paused_at",
"goalsPausedAt"
]
],
"filterConfig": {
"hideQueue": true,
"hideCategory": true,
"hideCreatedBy": true,
"hideRecipient": true,
"ticketTypeIds": [
100046
],
"hideCreatedByt": true,
"hideTicketType": false,
"hideSectorTicket": true,
"disableTicketType": true,
"hideSearchByTitle": true,
"assignedToUserWhere": {
"userProfileId": 100024
},
"listAvailableToOrder": [
{
"name": "Tempo de criação",
"value": "created_at"
},
{
"name": "Última atualização",
"value": "updatedAt"
}
],
"statusFromTicketTypes": [
100046
]
},
"createDialogTitle": "Adicionar acordos",
"createTicketsInBatch": {
"sheetColumns": [
{
"text": "Negociador",
"type": "text",
"value": "negociador",
"sheetColumn": "Negociador",
"showInTable": true
},
{
"text": "Estado",
"type": "text",
"value": "estado",
"sheetColumn": "Estado",
"showInTable": true
},
{
"text": "Forma de pagamento",
"type": "text",
"value": "forma_de_pagamento",
"sheetColumn": "Forma de pagamento",
"showInTable": true
},
{
"text": "Tipo",
"type": "text",
"value": "tipo",
"sheetColumn": "Tipo",
"showInTable": true
}
],
"exampleSheetLink": "https://storage.googleapis.com/beyond-quoti.appspot.com/CSM/link-de-example",
"webhookSaveAction": "https://workflow.quoti.cloud/webhook/webhook-de-exemplo"
}
}
Parâmetros do JSON e o que fazem¶
- order: Define a ordem em que os itens da tabela serão exibidos.
- fields: Especifica as colunas que serão renderizadas na tabela.
- params: Parâmetros utilizados na requisição para buscar os tickets.
- attributes: Representam as propriedades retornadas na requisição ao buscar os tickets.
- filterConfig: Configura o campo de busca e filtro da tabela.
- createDialogTitle: Define o título da janela de dialog que aparece ao criar um novo ticket.
- createTicketsInBatch: Configura a inserção de novos tickets em lote via planilha.
Como dito anteriormente, essa foi uma configuração para defaultTab que tem como componente default a ticketTable. Para renderizar uma qtDatabase ao invés disso, podemos passar a propriedade slug no JSON de configuração, assim:
Figura 4: Configurando qtDatabase no Workspace
Quando se trata de um qtDatabase, passamos algumas propriedades diferentes de quando é um ticketTable, como pode reparar no exemplo acima:
- A propriedade fields foi trocada por headers.
- A propriedade filter foi trocada por where.
Configurando o botão de criação¶
Existem algumas formas de configurar o botão de criação:
- Criação em lote: Assim como foi explicado no exemplo acima, podemos configurar nossa criação em lote dentro do defaultTab na propriedade createTicktesInBatch.
- Criação por formulário: Dessa forma, precisamos passar a propriedade formId com o ID do formulario para dentro de defaultTab, dessa forma:
{
"defaultTab": {
"slug": "qtDatabase",
"table": "audiencia_prazos",
"formId": 100327, // ID do formulário que será exibido.
}
}
- Criação por catálogo: Dessa forma, precisamos passar qual vai ser o catálogo dentro de cada Tab, dessa forma:
Ainda, você pode configurar algumas propriedades de acordo com os números da imagem:
- Botão de criação: Você pode passar propriedades como color, outlined, etc. Para saber o que é suportado, consulte essa documentação aqui.
- Configurações do catálogo: Dentro de cada Tab, teremos a propriedade createTicket e dentro dela iremos passar o catalog, como mostrado na imagem acima.
- Título de criação do dialog: Você pode configurar o nome que será exibido na criação de um dialog. O resultado ficará assim como na imagem abaixo:
Figura 6: Título do dialog
Configurando as tabs do Workspace¶
Figura 7: Abas do Workspace
Assim como mostrado na imagem acima, no item 1 podemos ver todas as 6 abas que nosso Workspace possui, e no item 2 podemos ver como elas são configuradas.
Exemplo de configuração:
{
"path": "ticketTable", // Identificador da Tab no Workspace.
"slug": "ticketTable", // Identificador que diz qual componente será exibido naquela Tab.
"text": "Acordos aguardando negociador", // Texto que irá aparecer ao lado da tabela.
"filter": { // Filtros que aquela tabela da Tab vai receber.
"isAppointment": false,
"assignedToUser": "{{ $validatePermissions(['agreements.manager']) ? undefined : $me.id }}",
"$TicketType.id$": 100046,
"$TicketType.name$": {
"not": "Aprovação"
},
"$ticketType100046AdditionalInfo.status_da_comunicacao$": "Aguardando negociador"
},
"tabTitle": "Aguardando negociador" // Título da Tab.
}
Configurando o ticketAgentOverview¶
O ticketAgentOverview é responsável por definir as configurações específicas da interface dentro de um ticket, injetando essas configurações diretamente na tela de visão geral do agente. Isso permite personalizar a experiência do agente ao interagir com os tickets.
Esse JSON possui o mesmo schema de configuração presente no tipo ou categoria do chamado, ou seja, o JSON presente no tipo pode ser inteiramente copiado e passado para o Workspace, sem precisar de mudanças, e vice-versa.
Exemplo de configuração:
"ticketAgentOverview": {
"general": {
"extraTabsMaxWidth": 70, // Indica a largura máxima das extraTabs.
"extraTabsMinWidth": 20, // Indica a largura mínima das extraTabs.
"isExtraTabsResize": true, // Indica se a extraTab será redimensionável.
"initialExtraTabsWidth": 35 // Indica a largura inicial das extraTabs.
},
"listOneParams": {
"additionalInfos": [
{
"ticketTypeId": 100046 // Lista as informações adicionais de um ticket.
}
]
}
}