Composants VDS

VDS signifie Vtiger Design Systems, qui définit les composants HTML de base offerts par la plate-forme VTAP. VDS fournit des composants qui sont des blocs d'interface utilisateur réutilisables.

Vous pouvez utiliser des composants pour créer et personnaliser vos applications. Ils peuvent être utilisés n'importe où - pages personnalisées, widgets, fenêtres contextuelles ou à l'intérieur d'autres composants personnalisés.

Vous trouverez ci-dessous la liste des composants fournis par VTAP :

texte-vds

Utilisez: Utilisé pour une zone de saisie. Permet aux utilisateurs de saisir des informations.

Syntaxe:

Détails des attributs :

prénom pour définir n'importe quel nom sur l'élément d'entrée
handicapé vrai/faux, pour le désactiver
titulaire pour afficher tout indice pour l'entrée
type d'entrée Tous les types d'entrée HTML valides comme l'e-mail, le numéro, etc. (Lire ci-dessous pour plus de détails.)
obligatoire pour rendre ce champ obligatoire 
modèle v Il s'agit de la liaison de données vue (réactive), elle peut être utilisée pour définir ou lire la valeur.

En plus du texte, VDS prend également en charge d'autres types d'entrée. Par exemple: 

  • vds-e-mail
  • numéro-vds
  • vds-pourcentage
  • vds-décimal
  • vds-téléphone
  • date-vds
  • temps-vds
  • URL-vds

Tous ces composants sont des types d'entrée différents. Ils ont les propriétés d'un type vds-text mais viennent avec leurs propres validations de type d'entrée. 

Vds-menu déroulant

Utilisation: Pour afficher une liste déroulante avec une liste d'éléments donnée

syntaxe:

Attributs pris en charge :

Options Tableau d'éléments déroulants
plusieurs vrai/faux, pour afficher la liste déroulante à sélection multiple
option-vide Si vous souhaitez d'abord afficher une option vide
handicapé vrai faux
obligatoire vrai faux

vds-propriétaire

Utilisation: Il s'agit d'un composant interactif qui affichera les utilisateurs et les groupes sous forme de liste déroulante. Ce sera le même que le champ Affecté à dans n'importe quel module du CRM.

syntaxe:

Attributs pris en charge :

seuls utilisateurs Si vous souhaitez voir uniquement les utilisateurs dans la liste déroulante
groupes uniquement Si vous souhaitez voir uniquement les groupes dans la liste déroulante

case à cocher vds

Utilisation: Pour afficher une entrée de case à cocher

syntaxe:

vds-commutateur

Utilisation: Pour afficher une bascule

syntaxe:

vds-datepicker

Utilisation: Pour afficher un sélecteur de date pour tous les champs de date.

syntaxe:

Attribut pris en charge :

format de date Format de date à afficher comme JJ-MM-AAAA, MM-JJ-AAAA, AAAA-MM-JJ

vds-daterange-picker

Utilisation: Pour afficher un sélecteur de date pour sélectionner une plage de dates

syntaxe:

Attribut pris en charge :

format de date Format de date à afficher comme JJ-MM-AAAA, MM-JJ-AAAA, AAAA-MM-JJ

vds-timepicker

Utilisation: Pour afficher un sélecteur de temps

syntaxe:

Attribut pris en charge :

le format Format 12 ou 24 heures 

vds-rte

Utilisation: Pour afficher un CKEditor, le champ UI que vous voyez dans le champ de l'éditeur de texte enrichi 

syntaxe:

classement vds

Utilisation: Pour afficher un champ d'étoiles de notation. Il affichera un maximum de 5 étoiles.

syntaxe:

Attribut pris en charge :

gamme Valeur entre 1 et 5

vds-iframe

Utilisation: Pour afficher un iframe avec un contenu HTML donné

syntaxe:

vds-progression

Utilisation: Pour afficher le pourcentage de progression

syntaxe:

Attributs pris en charge :

Plus-value % de la couleur
code-couleur-personnalisé par défaut, la progression s'affichera en bleu, vous pouvez passer n'importe quel nom de couleur valide
 
 
 

Cas d'utilisation client VTAP

 
 

Un de nos clients utilise une application différente pour suivre ses projets et leur progression. 

Ils voulaient commencer à utiliser Vtiger Projects, mais l'interface utilisateur était le seul obstacle à l'utilisation de Vtiger Projects. L'interface ne donnait pas tous les détails des jalons et des tâches sur un seul écran pour un projet, comme le souhaitait le client.

Pour surmonter cet obstacle, nous avons proposé la solution suivante.

Ils pourraient utiliser notre plateforme low code Module Designer pour concevoir une page qui serait divisée en 3 parties. 

La première partie afficherait une liste de projets, la partie suivante afficherait les jalons liés au projet sélectionné et la troisième partie afficherait les tâches liées au projet et aux jalons sélectionnés. Cela ressemblerait à la boîte aux lettres Outlook, qui affiche les e-mails et leur contenu sur le côté droit. Dans ce cas, son niveau 3 affiche les détails de la tâche à la fin.

Pour créer cette capacité, nous créerions une page de liste personnalisée qui pourrait être ajoutée à l'aide de 'LIST_ADD_VIEWTYPE' composant. Voir ici à titre d'exemple. 

Ensuite, la fonction VTAP.API.Get serait utilisée pour récupérer les données du projet, du jalon du projet et des tâches. Ils seraient affichés dans des colonnes séparées mais seraient toujours reliés entre eux. Vous pouvez copier le code de ici pour le voir en action.

 

Un de nos clients utilise une application différente pour suivre ses projets et leur progression. 

Ils voulaient commencer à utiliser Vtiger Projects, mais l'interface utilisateur était le seul obstacle à l'utilisation de Vtiger Projects. L'interface ne donnait pas tous les détails des jalons et des tâches sur un seul écran pour un projet, comme le souhaitait le client.

Pour surmonter cet obstacle, nous avons proposé la solution suivante.

Ils pourraient utiliser notre plateforme low code Module Designer pour concevoir une page qui serait divisée en 3 parties. 

La première partie afficherait une liste de projets, la partie suivante afficherait les jalons liés au projet sélectionné et la troisième partie afficherait les tâches liées au projet et aux jalons sélectionnés. Cela ressemblerait à la boîte aux lettres Outlook, qui affiche les e-mails et leur contenu sur le côté droit. Dans ce cas, son niveau 3 affiche les détails de la tâche à la fin.

Pour créer cette capacité, nous créerions une page de liste personnalisée qui pourrait être ajoutée à l'aide de 'LIST_ADD_VIEWTYPE' composant. Voir ici à titre d'exemple. 

Ensuite, la fonction VTAP.API.Get serait utilisée pour récupérer les données du projet, du jalon du projet et des tâches. Ils seraient affichés dans des colonnes séparées mais seraient toujours reliés entre eux. Vous pouvez copier le code de ici pour le voir en action.

 
 

Apptitude Vtiger 

 

Les outils qu'on aime

 
 

ElasticSearch est un excellent projet open source auquel contribuer si vous êtes intéressé par la science des données. Il peut analyser, rechercher et stocker de gros volumes de données en temps réel. Elasticsearch aide ses utilisateurs à exploiter les données de différentes manières.

 

ElasticSearch est un excellent projet open source auquel contribuer si vous êtes intéressé par la science des données. Il peut analyser, rechercher et stocker de gros volumes de données en temps réel. Elasticsearch aide ses utilisateurs à exploiter les données de différentes manières.

 
 

À venir

 
 

Concepteur d'applications 

Le concepteur d'applications de Vtiger vous permettra de créer des applications personnalisées qui peuvent ou non dépendre du CRM. Cela vous donnera la flexibilité d'écrire des applications dans n'importe quel framework JavaScript sur lequel vous avez une expertise.

Grâce aux puissantes API JavaScript VTAP, vous pouvez également vous connecter au CRM et en extraire/pousser des données pour créer facilement des applications personnalisées.

 

Concepteur d'applications 

Le concepteur d'applications de Vtiger vous permettra de créer des applications personnalisées qui peuvent ou non dépendre du CRM. Cela vous donnera la flexibilité d'écrire des applications dans n'importe quel framework JavaScript sur lequel vous avez une expertise.

Grâce aux puissantes API JavaScript VTAP, vous pouvez également vous connecter au CRM et en extraire/pousser des données pour créer facilement des applications personnalisées.

 
 

Inscrivez-vous pour recevoir les dernières mises à jour!