Componentes VDS

VDS significa Vtiger Design Systems, que define los componentes principales de HTML que ofrece la plataforma VTAP. VDS proporciona componentes que son bloques de interfaz de usuario reutilizables.

Puede utilizar componentes para crear y personalizar sus aplicaciones. Se pueden usar en cualquier lugar: páginas personalizadas, widgets, ventanas emergentes o dentro de otros componentes personalizados.

A continuación se muestra la lista de componentes que proporciona VTAP:

vds-texto

Uso: Se utiliza para un cuadro de entrada. Permite a los usuarios ingresar información.

Sintaxis:

Detalles de los atributos:

nombre para establecer cualquier nombre para el elemento de entrada
discapacitados verdadero/falso, para desactivarlo
titular de lugar para mostrar cualquier pista para la entrada
tipo de entrada Cualquier tipo de entrada HTML válido como correo electrónico, número, etc. (Lea a continuación para obtener más detalles).
obligatorio para que este campo sea obligatorio 
modelo v Este es el enlace de datos vue (reactivo), se puede usar para establecer o leer el valor.

Junto con el texto, VDS también admite otros tipos de entrada. Por ejemplo: 

  • vds-correo electrónico
  • numero-vds
  • vds-porcentaje
  • vds-decimal
  • vds-teléfono
  • vds-fecha
  • vds-tiempo
  • vds-url

Todos estos componentes son diferentes tipos de entrada. Tienen las propiedades de un tipo de texto vds pero vienen con sus propias validaciones de tipo de entrada. 

Vds-desplegable

Uso: Para mostrar un menú desplegable con una lista dada de elementos

Sintaxis:

Atributos compatibles:

opciones Matriz de elementos desplegables
múltiples verdadero/falso, para mostrar el menú desplegable de selección múltiple
opción vacía Si desea mostrar una opción vacía al principio
discapacitados verdadero / falso
obligatorio verdadero / falso

vds-propietario

Uso: Es un componente interactivo que mostrará usuarios y grupos como un menú desplegable. Será el mismo que el campo Asignado a en cualquier módulo del CRM.

Sintaxis:

Atributos compatibles:

solo-usuarios Si desea ver solo los usuarios en el menú desplegable
solo-grupos Si desea ver solo grupos en el menú desplegable

vds-casilla de verificación

Uso: Para mostrar una entrada de casilla de verificación

Sintaxis:

vds-interruptor

Uso: Para mostrar una palanca

Sintaxis:

selector de fecha vds

Uso: Para mostrar un selector de fecha para cualquier campo de fecha.

Sintaxis:

Atributo compatible:

formato de fecha Formato de fecha que se mostrará como DD-MM-AAAA, MM-DD-AAAA, AAAA-MM-DD

vds-daterange-selector

Uso: Para mostrar un selector de fechas para seleccionar el rango de fechas

Sintaxis:

Atributo compatible:

formato de fecha Formato de fecha que se mostrará como DD-MM-AAAA, MM-DD-AAAA, AAAA-MM-DD

selector de tiempo de vds

Uso: Para mostrar un selector de tiempo

Sintaxis:

Atributo compatible:

formato Formato de 12 o 24 horas 

vds-rte

Uso: Para mostrar un CKEditor, la interfaz de usuario del campo que está viendo en el campo del editor de texto enriquecido 

Sintaxis:

calificación vds

Uso: Para mostrar un campo de estrellas de clasificación. Mostrará un máximo de 5 estrellas.

Sintaxis:

Atributo compatible:

distancia Valor entre 1 a 5

vds-iframe

Uso: Para mostrar un iframe con contenido HTML dado

Sintaxis:

vds-progreso

Uso: Para mostrar el porcentaje de progreso

Sintaxis:

Atributos compatibles:

propuesta de % del color
código de color personalizado por defecto, el progreso se mostrará en azul, puede pasar cualquier nombre de color válido
 
 
 

Caso de uso del cliente VTAP

 
 

Uno de nuestros clientes utiliza una aplicación diferente para realizar un seguimiento de sus proyectos y su progreso. 

Querían comenzar a usar Vtiger Projects, pero la interfaz de usuario era el único obstáculo para usar Vtiger Projects. La interfaz no brindaba los detalles completos de los hitos y las tareas en una sola pantalla para un proyecto, como deseaba el cliente.

Para superar este obstáculo, sugerimos la siguiente solución.

Podrían usar nuestra plataforma Low Code Module Designer para diseñar una página que se dividiría en 3 partes. 

La primera parte mostraría una Lista de Proyectos, la siguiente parte mostraría los Hitos vinculados al Proyecto seleccionado y la tercera parte mostraría las Tareas vinculadas al Proyecto y los Hitos seleccionados. Sería similar al buzón de correo de Outlook, que muestra los correos electrónicos y su contenido en el lado derecho. En este caso, su nivel 3 muestra los detalles de la tarea al final.

Para desarrollar esta capacidad, construiríamos una página de lista personalizada que podría agregarse usando el 'LIST_ADD_VIEWTYPE' componente. Ver esta página para un ejemplo. 

Luego, la función VTAP.API.Get se usaría para obtener los datos del proyecto, hito del proyecto y tareas. Se mostrarían en columnas separadas pero aún estarían conectados entre sí. Puedes copiar el código de esta página Para verlo en acción.

 

Uno de nuestros clientes utiliza una aplicación diferente para realizar un seguimiento de sus proyectos y su progreso. 

Querían comenzar a usar Vtiger Projects, pero la interfaz de usuario era el único obstáculo para usar Vtiger Projects. La interfaz no brindaba los detalles completos de los hitos y las tareas en una sola pantalla para un proyecto, como deseaba el cliente.

Para superar este obstáculo, sugerimos la siguiente solución.

Podrían usar nuestra plataforma Low Code Module Designer para diseñar una página que se dividiría en 3 partes. 

La primera parte mostraría una Lista de Proyectos, la siguiente parte mostraría los Hitos vinculados al Proyecto seleccionado y la tercera parte mostraría las Tareas vinculadas al Proyecto y los Hitos seleccionados. Sería similar al buzón de correo de Outlook, que muestra los correos electrónicos y su contenido en el lado derecho. En este caso, su nivel 3 muestra los detalles de la tarea al final.

Para desarrollar esta capacidad, construiríamos una página de lista personalizada que podría agregarse usando el 'LIST_ADD_VIEWTYPE' componente. Ver esta página para un ejemplo. 

Luego, la función VTAP.API.Get se usaría para obtener los datos del proyecto, hito del proyecto y tareas. Se mostrarían en columnas separadas pero aún estarían conectados entre sí. Puedes copiar el código de esta página Para verlo en acción.

 
 

APLICACIÓN Vtiger 

 

Herramientas que nos gustan

 
 

Elasticsearch es un gran proyecto de código abierto para contribuir si está interesado en la ciencia de datos. Puede analizar, buscar y almacenar grandes volúmenes de datos en tiempo real. Elasticsearch ayuda a sus usuarios a poner los datos a trabajar de muchas maneras diferentes.

 

Elasticsearch es un gran proyecto de código abierto para contribuir si está interesado en la ciencia de datos. Puede analizar, buscar y almacenar grandes volúmenes de datos en tiempo real. Elasticsearch ayuda a sus usuarios a poner los datos a trabajar de muchas maneras diferentes.

 
 

Próximamente

 
 

Diseñador de aplicaciones 

El Diseñador de aplicaciones de Vtiger le permitirá crear aplicaciones personalizadas que pueden depender o no del CRM. Le dará la flexibilidad de escribir aplicaciones en cualquier marco de JavaScript en el que tenga experiencia.

Con las potentes API de JavaScript de VTAP, también puede conectarse al CRM y extraer/empujar datos desde él para crear fácilmente aplicaciones personalizadas.

 

Diseñador de aplicaciones 

El Diseñador de aplicaciones de Vtiger le permitirá crear aplicaciones personalizadas que pueden depender o no del CRM. Le dará la flexibilidad de escribir aplicaciones en cualquier marco de JavaScript en el que tenga experiencia.

Con las potentes API de JavaScript de VTAP, también puede conectarse al CRM y extraer/empujar datos desde él para crear fácilmente aplicaciones personalizadas.

 
 

¡Regístrese para recibir las últimas actualizaciones!