VDS компоненти

VDS означава Vtiger Design Systems, което дефинира основните HTML компоненти, предлагани от платформата VTAP. VDS предоставя компоненти, които са многократно използвани UI блокове.

Можете да използвате компоненти за изграждане и персонализиране на вашите приложения. Те могат да се използват навсякъде - персонализирани страници, уиджети, изскачащи прозорци или вътре в други персонализирани компоненти.

По-долу е списъкът на компонентите, които VTAP предоставя:

vds-текст

употреба: Използва се за поле за въвеждане. Позволява на потребителите да въвеждат информация.

Синтаксис:

Подробности за атрибутите:
име за да зададете произволно име на входния елемент
инвалиди true/false, за да го деактивирате
място-държател за показване на съвети за въвеждането
входен тип Всички валидни типове HTML въвеждане като имейл, номер и т.н. (Прочетете по-долу за подробности.)
задължителен за да направите това поле задължително 
v-модел Това е vue (реактивно) свързване на данни, то може да се използва за задаване или четене на стойността.

Освен текст, VDS поддържа и други типове въвеждане. Например: 

  • vds-имейл
  • vds-номер
  • vds-процент
  • vds-десетичен
  • vds-телефон
  • vds-дата
  • vds-време
  • vds-url

Всички тези компоненти са различни типове вход. Те имат свойствата на тип vds-текст, но идват със собствени валидации на типа вход. 

Vds-падащо меню

Използвайте: За показване на падащо меню с даден списък от елементи

Синтаксис:

Поддържани атрибути:
опции Масив от падащи елементи
множествена вярно/невярно, за показване на падащо меню с множество избори
празна опция Ако искате първо да покажете празна опция
инвалиди вярно невярно
задължителен вярно невярно

vds-собственик

Използвайте: Това е интерактивен компонент, който ще покаже потребители и групи като падащо меню. То ще бъде същото като полето Assigned-to във всеки модул в CRM.

Синтаксис:

Поддържани атрибути:
само-потребители Ако искате да видите само потребители в падащото меню
само-групи Ако искате да видите само групи в падащото меню

vds-чекбокс

Използвайте: За да се покаже въведено поле за отметка

Синтаксис:

vds-превключвател

Използвайте: За да покажете превключвател

Синтаксис:

vds-избор на дата

Използвайте: За показване на инструмент за избор на дата за всякакви полета за дата.

Синтаксис:

Поддържан атрибут:
формат на датата Формат на датата, който да се показва като ДД-ММ-ГГГГ, ММ-ДД-ГГГГ, ГГГГ-ММ-ДД

vds-daterange-picker

Използвайте: За да се покаже инструмент за избор на дата за избор на диапазон от дати

Синтаксис:

Поддържан атрибут:
формат на датата Формат на датата, който да се показва като ДД-ММ-ГГГГ, ММ-ДД-ГГГГ, ГГГГ-ММ-ДД

vds-избирач на време

Използвайте: За да покаже инструмент за избор на време

Синтаксис:

Поддържан атрибут:
формат 12 или 24-часов формат 

vds-rte

Използвайте: За да покажете CKEditor, потребителският интерфейс на полето, който виждате в полето за редактор на обогатен текст 

Синтаксис:

vds-рейтинг

Използвайте: За показване на поле за звезда за оценка. Ще покаже максимум 5 звезди.

Синтаксис:

Поддържан атрибут:
обхват Стойност между 1 и 5

vds-iframe

Използвайте: За показване на iframe с дадено HTML съдържание

Синтаксис:

vds-прогрес

Използвайте: За показване на процента на напредъка

Синтаксис:

Поддържани атрибути:
стойност % от цвета
потребителски цветен код по подразбиране прогресът ще се показва в синьо, можете да подадете всяко валидно име на цвят
 
 
 

Случай на използване на VTAP от клиента

 
 

Един от нашите клиенти използва различно приложение, за да проследява своите проекти и напредък. 

Те искаха да започнат да използват Vtiger Projects, но потребителският интерфейс беше единственото препятствие пред използването на Vtiger Projects. Интерфейсът не предоставяше пълни подробности за етапи и задачи на един екран за проект, както клиентът искаше.

За да преодолеем това препятствие, предложихме следното решение.

Те могат да използват нашата платформа с нисък код Module Designer, за да проектират страница, която ще бъде разделена на 3 части. 

Първата част ще покаже списък с проекти, следващата част ще покаже етапи, свързани с избрания проект, а третата част ще покаже задачите, свързани с избрания проект и етапи. Ще изглежда подобно на пощенската кутия на Outlook, която показва имейли и тяхното съдържание от дясната страна. В този случай неговите 3 нива показват подробности за задачата в края.

За да изградим тази способност, ще изградим персонализирана страница със списък, която може да бъде добавена с помощта на „LIST_ADD_VIEWTYPE' компонент. Вижте тук за пример. 

След това функцията VTAP.API.Get ще се използва за извличане на данни за проекта, етапа на проекта и задачите. Те ще бъдат показани в отделни колони, но ще бъдат свързани заедно. Можете да копирате кода от тук да го видим в действие.
 

Един от нашите клиенти използва различно приложение, за да проследява своите проекти и напредък. 

Те искаха да започнат да използват Vtiger Projects, но потребителският интерфейс беше единственото препятствие пред използването на Vtiger Projects. Интерфейсът не предоставяше пълни подробности за етапи и задачи на един екран за проект, както клиентът искаше.

За да преодолеем това препятствие, предложихме следното решение.

Те могат да използват нашата платформа с нисък код Module Designer, за да проектират страница, която ще бъде разделена на 3 части. 

Първата част ще покаже списък с проекти, следващата част ще покаже етапи, свързани с избрания проект, а третата част ще покаже задачите, свързани с избрания проект и етапи. Ще изглежда подобно на пощенската кутия на Outlook, която показва имейли и тяхното съдържание от дясната страна. В този случай неговите 3 нива показват подробности за задачата в края.

За да изградим тази способност, ще изградим персонализирана страница със списък, която може да бъде добавена с помощта на „LIST_ADD_VIEWTYPE' компонент. Вижте тук за пример. 

След това функцията VTAP.API.Get ще се използва за извличане на данни за проекта, етапа на проекта и задачите. Те ще бъдат показани в отделни колони, но ще бъдат свързани заедно. Можете да копирате кода от тук да го видим в действие.
 
 

Vtiger APPtitude 

 

Инструменти, които харесваме

 
 

Elasticsearch е страхотен проект с отворен код, за който можете да допринесете, ако се интересувате от наука за данни. Може да анализира, търси и съхранява големи обеми данни в реално време. Elasticsearch помага на своите потребители да използват данните по много различни начини.
 

Elasticsearch е страхотен проект с отворен код, за който можете да допринесете, ако се интересувате от наука за данни. Може да анализира, търси и съхранява големи обеми данни в реално време. Elasticsearch помага на своите потребители да използват данните по много различни начини.
 
 

Очаквайте скоро

 
 

Дизайнер на приложения 

Дизайнерът на приложения на Vtiger ще ви позволи да създавате персонализирани приложения, които могат или не могат да зависят от CRM. Това ще ви даде гъвкавостта да пишете приложения във всяка JavaScript рамка, с която имате опит.

С мощните VTAP JavaScript API можете също да се свържете към CRM и да извеждате/изтегляте данни от него, за да създавате лесно персонализирани приложения.
 

Дизайнер на приложения 

Дизайнерът на приложения на Vtiger ще ви позволи да създавате персонализирани приложения, които могат или не могат да зависят от CRM. Това ще ви даде гъвкавостта да пишете приложения във всяка JavaScript рамка, с която имате опит.

С мощните VTAP JavaScript API можете също да се свържете към CRM и да извеждате/изтегляте данни от него, за да създавате лесно персонализирани приложения.
 
 

Регистрирайте се, за да получавате най-новите актуализации!

 
 

Copyright 2024 Vtiger. Всички права запазени. Различни търговски марки, притежавани от съответните им собственици.