Componentes VDS

VDS significa Vtiger Design Systems, que define os principais componentes HTML oferecidos pela plataforma VTAP. O VDS fornece componentes que são blocos de interface do usuário reutilizáveis.

Você pode usar componentes para construir e customizar seus aplicativos. Eles podem ser usados ​​em qualquer lugar - páginas personalizadas, widgets, pop-ups ou dentro de outros componentes personalizados.

Abaixo está a lista de componentes que o VTAP fornece:

texto vds

Use: Usado para uma caixa de entrada. Permite que os usuários insiram informações.

Sintaxe:

Detalhes dos atributos:

nome para definir qualquer nome para o elemento de entrada
inválido verdadeiro/falso, para desabilitá-lo
place-holder para mostrar qualquer dica para a entrada
tipo de entrada Quaisquer tipos de entrada HTML válidos, como e-mail, número etc. (leia abaixo para obter detalhes).
obrigatório tornar este campo obrigatório 
modelo v Esta é a ligação de dados vue (reativa), ela pode ser usada para definir ou ler o valor.

Juntamente com o texto, o VDS também oferece suporte a outros tipos de entrada. Por exemplo: 

  • e-mail vds
  • número vds
  • porcentagem de vds
  • vds-decimal
  • telefone vds
  • data-vds
  • horário vds
  • url-vds

Todos esses componentes são tipos de entrada diferentes. Eles têm as propriedades de um tipo vds-text, mas vêm com suas próprias validações de tipo de entrada. 

Vds no menu suspenso

Uso: Para mostrar um menu suspenso com uma determinada lista de itens

Sintaxe:

Atributos suportados:

opções Matriz de itens suspensos
múltiplo verdadeiro/falso, para mostrar o menu suspenso de seleção múltipla
opção vazia Se você quiser mostrar uma opção vazia primeiro
inválido verdadeiro falso
obrigatório verdadeiro falso

vds-proprietário

Uso: É um componente interativo que mostrará usuários e grupos como um menu suspenso. Será o mesmo que o campo Atribuído a em qualquer módulo do CRM.

Sintaxe:

Atributos suportados:

apenas usuários Se você quiser ver apenas os usuários no menu suspenso
apenas grupos Se você quiser ver apenas grupos no menu suspenso

caixa de seleção vds

Uso: Para mostrar uma entrada de caixa de seleção

Sintaxe:

interruptor vds

Uso: Para mostrar uma alternância

Sintaxe:

vds-datepicker

Uso: Para mostrar um seletor de data para qualquer campo de data.

Sintaxe:

Atributo suportado:

Formato de data Formato de data a ser mostrado como DD-MM-AAAA, MM-DD-AAAA, AAAA-MM-DD

selecionador de intervalo de datas vds

Uso: Para mostrar um seletor de data para selecionar o intervalo de datas

Sintaxe:

Atributo suportado:

Formato de data Formato de data a ser mostrado como DD-MM-AAAA, MM-DD-AAAA, AAAA-MM-DD

selecionador de tempo vds

Uso: Para mostrar um seletor de tempo

Sintaxe:

Atributo suportado:

formato Formato de 12 ou 24 horas 

vds-rte

Uso: Para mostrar um CKEditor, a interface do usuário do campo que você está vendo no campo do editor de rich text 

Sintaxe:

classificação vds

Uso: Para mostrar um campo de estrela de classificação. Ele mostrará no máximo 5 estrelas.

Sintaxe:

Atributo suportado:

alcance Valor entre 1 a 5

vds-iframe

Uso: Para mostrar um iframe com determinado conteúdo HTML

Sintaxe:

progresso vds

Uso: Para mostrar a porcentagem de progresso

Sintaxe:

Atributos suportados:

valor % da cor
código de cor personalizado por padrão, o progresso será exibido em azul, você pode passar qualquer nome de cor válido
 
 
 

Caso de uso do cliente VTAP

 
 

Um de nossos clientes usa um aplicativo diferente para acompanhar seus projetos e progresso. 

Eles queriam começar a usar o Vtiger Projects, mas a interface do usuário era o único obstáculo para usar o Vtiger Projects. A interface não dava todos os detalhes dos marcos e tarefas em uma única tela de um projeto, como o cliente queria.

Para superar esse obstáculo, sugerimos a seguinte solução.

Eles poderiam usar nosso designer de módulo de plataforma de código baixo para criar uma página que seria dividida em 3 partes. 

A primeira parte mostraria uma Lista de Projetos, a próxima parte mostraria Marcos vinculados ao Projeto selecionado e a terceira parte mostraria as Tarefas vinculadas ao Projeto e Marcos selecionados. Seria semelhante à caixa de correio do Outlook, que mostra e-mails e seu conteúdo no lado direito. Nesse caso, seu nível 3 exibe os detalhes da tarefa no final.

Para criar essa capacidade, criaríamos uma página de lista personalizada que poderia ser adicionada usando o 'LIST_ADD_VIEWTYPE' componente. Ver SUA PARTICIPAÇÃO FAZ A DIFERENÇA Por exemplo. 

Em seguida, a função VTAP.API.Get seria usada para buscar os dados do Projeto, Marco do Projeto e Tarefas. Eles seriam mostrados em colunas separadas, mas ainda estariam conectados. Você pode copiar o código de SUA PARTICIPAÇÃO FAZ A DIFERENÇA para vê-lo em ação.

 

Um de nossos clientes usa um aplicativo diferente para acompanhar seus projetos e progresso. 

Eles queriam começar a usar o Vtiger Projects, mas a interface do usuário era o único obstáculo para usar o Vtiger Projects. A interface não dava todos os detalhes dos marcos e tarefas em uma única tela de um projeto, como o cliente queria.

Para superar esse obstáculo, sugerimos a seguinte solução.

Eles poderiam usar nosso designer de módulo de plataforma de código baixo para criar uma página que seria dividida em 3 partes. 

A primeira parte mostraria uma Lista de Projetos, a próxima parte mostraria Marcos vinculados ao Projeto selecionado e a terceira parte mostraria as Tarefas vinculadas ao Projeto e Marcos selecionados. Seria semelhante à caixa de correio do Outlook, que mostra e-mails e seu conteúdo no lado direito. Nesse caso, seu nível 3 exibe os detalhes da tarefa no final.

Para criar essa capacidade, criaríamos uma página de lista personalizada que poderia ser adicionada usando o 'LIST_ADD_VIEWTYPE' componente. Ver SUA PARTICIPAÇÃO FAZ A DIFERENÇA Por exemplo. 

Em seguida, a função VTAP.API.Get seria usada para buscar os dados do Projeto, Marco do Projeto e Tarefas. Eles seriam mostrados em colunas separadas, mas ainda estariam conectados. Você pode copiar o código de SUA PARTICIPAÇÃO FAZ A DIFERENÇA para vê-lo em ação.

 
 

Vtiger APPtitude 

 

Ferramentas que gostamos

 
 

ElasticSearch é um ótimo projeto de código aberto para contribuir se você estiver interessado em ciência de dados. Ele pode analisar, pesquisar e armazenar grandes volumes de dados em tempo real. O Elasticsearch ajuda seus usuários a colocar os dados para trabalhar de várias maneiras diferentes.

 

ElasticSearch é um ótimo projeto de código aberto para contribuir se você estiver interessado em ciência de dados. Ele pode analisar, pesquisar e armazenar grandes volumes de dados em tempo real. O Elasticsearch ajuda seus usuários a colocar os dados para trabalhar de várias maneiras diferentes.

 
 

Em Breve

 
 

Designer de aplicativos 

O App Designer do Vtiger permitirá que você crie aplicativos personalizados que podem ou não depender do CRM. Ele lhe dará a flexibilidade de escrever aplicativos em qualquer estrutura JavaScript na qual você tenha experiência.

Com poderosas APIs JavaScript VTAP, você também pode se conectar ao CRM e enviar/extrair dados dele para criar facilmente aplicativos personalizados.

 

Designer de aplicativos 

O App Designer do Vtiger permitirá que você crie aplicativos personalizados que podem ou não depender do CRM. Ele lhe dará a flexibilidade de escrever aplicativos em qualquer estrutura JavaScript na qual você tenha experiência.

Com poderosas APIs JavaScript VTAP, você também pode se conectar ao CRM e enviar/extrair dados dele para criar facilmente aplicativos personalizados.

 
 

Inscreva-se para receber as últimas atualizações!