VDS Components

VDS stands for Vtiger Design Systems, which defines the core HTML components offered by the VTAP platform. VDS provides components that are reusable UI blocks.

You can use components to build and customize your applications. They can be used anywhere - custom pages, widgets, pop-ups, or inside other custom components.

Below is the list of components that VTAP provides:

vds-text

Use: Used for an input box. Allows users to enter information.

Syntax:

Attributes details:
name to set any name to the input element
disabled true/false, to make it disable
place-holder to show any hint for the input
input-type Any valid HTML input types like email, number, etc. (Read below for details.)
mandatory to make this field mandatory 
v-model This is the vue (reactive) data binding, it can be used to set or read the value.

Along with text, VDS also supports other input types. For example: 

  • vds-email
  • vds-number
  • vds-percentage
  • vds-decimal
  • vds-phone
  • vds-date
  • vds-time
  • vds-url

All these components are different input types. They have the properties of a vds-text type but come with their own input type validations. 

Vds-drop down

Use: To show a dropdown with a given list of items

Syntax:

Attributes supported:
options Array of drop-down items
multiple true/false, to show multi-select dropdown
empty-option If you want to show an empty option at first
disabled true/false
mandatory true/false

vds-owner

Use: It is an interactive component that will show users and groups as a drop-down. It will be the same as the Assigned-to field in any module in the CRM.

Syntax:

Attributes supported:
only-users If you want to see only users in the dropdown
only-groups If you want to see only groups in the dropdown

vds-checkbox

Use: To show a checkbox input

Syntax:

vds-switch

Use: To show a toggle

Syntax:

vds-datepicker

Use: To show a date picker for any date fields.

Syntax:

Attribute supported:
date-format Date format to be shown like DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD

vds-daterange-picker

Use: To show a date picker to select range of date

Syntax:

Attribute supported:
date-format Date format to be shown like DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD

vds-timepicker

Use: To show a time picker

Syntax:

Attribute supported:
format 12 or 24-hour format 

vds-rte

Use: To show a CKEditor, the field UI you are seeing in rich text editor field 

Syntax:

vds-rating

Use: To show a rating star field. It will show a maximum of 5 stars.

Syntax:

Attribute supported:
range Value between 1 to 5

vds-iframe

Use: To show an iframe with given HTML content

Syntax:

vds-progress

Use: To show the progress percentage

Syntax:

Attributes supported:
value % of the color
custom-color-code by default progress will show in blue, you can pass any valid color name
 
 
 

VTAP Customer use case

 
 

One of our customers uses a different application to track their projects and progress. 

They wanted to start using Vtiger Projects, but the user interface was the one hurdle to using Vtiger Projects. The interface was not giving the full details of milestones and tasks on a single screen for a project, as the customer wanted.

To overcome this hurdle, we suggested the following solution.

They could use our low code platform Module Designer to design a page that would be divided into 3 parts. 

The first part would show a List of Projects, the next part would show Milestones linked to the selected Project, and the third part would show the Tasks linked to the selected Project and Milestones. It would look similar to the Outlook mailbox, which shows emails and their content on the right-hand side. In this case, its 3-level displays task details at the end.

To build this ability, we would build a custom list page that could be added using the ‘LIST_ADD_VIEWTYPE’ component. See here for an example. 

Then the VTAP.API.Get function would be used to fetch the Project, Project Milestone, and Tasks data. They would be shown in separate columns but would still be connected together. You can copy the code from here to see it in action.
 

One of our customers uses a different application to track their projects and progress. 

They wanted to start using Vtiger Projects, but the user interface was the one hurdle to using Vtiger Projects. The interface was not giving the full details of milestones and tasks on a single screen for a project, as the customer wanted.

To overcome this hurdle, we suggested the following solution.

They could use our low code platform Module Designer to design a page that would be divided into 3 parts. 

The first part would show a List of Projects, the next part would show Milestones linked to the selected Project, and the third part would show the Tasks linked to the selected Project and Milestones. It would look similar to the Outlook mailbox, which shows emails and their content on the right-hand side. In this case, its 3-level displays task details at the end.

To build this ability, we would build a custom list page that could be added using the ‘LIST_ADD_VIEWTYPE’ component. See here for an example. 

Then the VTAP.API.Get function would be used to fetch the Project, Project Milestone, and Tasks data. They would be shown in separate columns but would still be connected together. You can copy the code from here to see it in action.
 
 

Vtiger APPtitude 

 

Tools we like

 
 

Elasticsearch is a great open-source project to contribute to if you’re interested in data science. It can analyze, search, and store big volumes of data in real time. Elasticsearch helps its users to put data to work in many different ways.
 

Elasticsearch is a great open-source project to contribute to if you’re interested in data science. It can analyze, search, and store big volumes of data in real time. Elasticsearch helps its users to put data to work in many different ways.
 
 

Coming Soon

 
 

App Designer 

Vtiger’s App Designer will let you build custom apps that may or may not depend on the CRM. It will give you the flexibility to write apps in any JavaScript framework you have expertise on.

With powerful VTAP JavaScript APIs, you can also connect to the CRM and push/pull data from it to easily build custom applications.
 

App Designer 

Vtiger’s App Designer will let you build custom apps that may or may not depend on the CRM. It will give you the flexibility to write apps in any JavaScript framework you have expertise on.

With powerful VTAP JavaScript APIs, you can also connect to the CRM and push/pull data from it to easily build custom applications.
 
 

Sign up to receive the latest updates!

 
 

Copyright 2024 Vtiger. All rights reserved. Various trademarks held by their respective owners.