Компоненты ВДС

VDS расшифровывается как Vtiger Design Systems, что определяет основные HTML-компоненты, предлагаемые платформой VTAP. VDS предоставляет компоненты, которые представляют собой многократно используемые блоки пользовательского интерфейса.

Вы можете использовать компоненты для создания и настройки приложений. Их можно использовать где угодно — на пользовательских страницах, виджетах, всплывающих окнах или внутри других пользовательских компонентов.

Ниже приведен список компонентов, которые предоставляет VTAP:

vds-текст

Используйте: Используется для поля ввода. Позволяет пользователям вводить информацию.

Синтаксис:

Детали атрибутов:

имя установить любое имя для элемента ввода
инвалид true/false, чтобы отключить
государственный служащий чтобы показать любую подсказку для ввода
тип ввода Любые допустимые типы ввода HTML, такие как электронная почта, номер и т. д. (Подробности см. ниже.)
обязательный сделать это поле обязательным 
v-модель Это привязка данных vue (реактивная), ее можно использовать для установки или чтения значения.

Наряду с текстом VDS также поддерживает другие типы ввода. Например: 

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

Все эти компоненты относятся к разным типам ввода. Они имеют свойства типа vds-text, но имеют собственные проверки типа ввода. 

Vds-раскрывающийся список

Использование: Чтобы показать раскрывающийся список с заданным списком элементов

Синтаксис:

Поддерживаемые атрибуты:

кредита Массив раскрывающихся элементов
с разными true/false, чтобы показать раскрывающийся список с множественным выбором
пустой вариант Если вы хотите сначала показать пустую опцию
инвалид истина / ложь
обязательный истина / ложь

vds-владелец

Использование: Это интерактивный компонент, который будет отображать пользователей и группы в виде раскрывающегося списка. Это будет то же самое, что и поле «Назначено» в любом модуле CRM.

Синтаксис:

Поддерживаемые атрибуты:

только пользователи Если вы хотите видеть только пользователей в раскрывающемся списке
только группы Если вы хотите видеть только группы в раскрывающемся списке

vds-флажок

Использование: Чтобы показать ввод флажка

Синтаксис:

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

Использование: Чтобы показать переключатель

Синтаксис:

vds-datepicker

Использование: Чтобы показать средство выбора даты для любых полей даты.

Синтаксис:

Поддерживается атрибут:

Формат даты Формат даты, который будет отображаться как ДД-ММ-ГГГГ, ММ-ДД-ГГГГ, ГГГГ-ММ-ДД

vds-daterange-выборщик

Использование: Чтобы показать средство выбора даты, чтобы выбрать диапазон дат

Синтаксис:

Поддерживается атрибут:

Формат даты Формат даты, который будет отображаться как ДД-ММ-ГГГГ, ММ-ДД-ГГГГ, ГГГГ-ММ-ДД

vds-timepicker

Использование: Чтобы показать средство выбора времени

Синтаксис:

Поддерживается атрибут:

формат 12 или 24-часовой формат 

вдс-рте

Использование: Чтобы показать CKEditor, пользовательский интерфейс поля, который вы видите в поле редактора форматированного текста 

Синтаксис:

vds-рейтинг

Использование: Чтобы показать поле звезд рейтинга. Он покажет максимум 5 звезд.

Синтаксис:

Поддерживается атрибут:

ассортимент Значение от 1 до 5

vds-iframe

Использование: Чтобы показать iframe с заданным содержимым HTML

Синтаксис:

vds-прогресс

Использование: Чтобы показать процент прогресса

Синтаксис:

Поддерживаемые атрибуты:

ценностное % цвета
пользовательский код цвета по умолчанию прогресс будет отображаться синим цветом, вы можете указать любое допустимое имя цвета
 
 
 

Пример использования клиента VTAP

 
 

Один из наших клиентов использует другое приложение для отслеживания своих проектов и прогресса. 

Они хотели начать использовать проекты Vtiger, но пользовательский интерфейс был единственным препятствием для использования проектов Vtiger. Интерфейс не отображал полную информацию о вехах и задачах на одном экране для проекта, как того хотел заказчик.

Чтобы преодолеть это препятствие, мы предложили следующее решение.

Они могли бы использовать наш конструктор модулей с низким кодом для разработки страницы, которая будет разделена на 3 части. 

В первой части будет показан список проектов, в следующей части будут показаны вехи, связанные с выбранным проектом, а в третьей части будут показаны задачи, связанные с выбранным проектом и вехами. Это будет похоже на почтовый ящик Outlook, в котором электронные письма и их содержимое отображаются с правой стороны. В этом случае его 3-уровневый уровень отображает детали задачи в конце.

Чтобы создать эту возможность, мы создадим пользовательскую страницу со списком, которую можно будет добавить с помощью 'LIST_ADD_VIEWTYPE' компонент. Видеть здесь для примера. 

Затем функция VTAP.API.Get будет использоваться для получения данных о проекте, вехах проекта и задачах. Они будут отображаться в отдельных столбцах, но все равно будут связаны друг с другом. Вы можете скопировать код из здесь чтобы увидеть это в действии.

 

Один из наших клиентов использует другое приложение для отслеживания своих проектов и прогресса. 

Они хотели начать использовать проекты Vtiger, но пользовательский интерфейс был единственным препятствием для использования проектов Vtiger. Интерфейс не отображал полную информацию о вехах и задачах на одном экране для проекта, как того хотел заказчик.

Чтобы преодолеть это препятствие, мы предложили следующее решение.

Они могли бы использовать наш конструктор модулей с низким кодом для разработки страницы, которая будет разделена на 3 части. 

В первой части будет показан список проектов, в следующей части будут показаны вехи, связанные с выбранным проектом, а в третьей части будут показаны задачи, связанные с выбранным проектом и вехами. Это будет похоже на почтовый ящик Outlook, в котором электронные письма и их содержимое отображаются с правой стороны. В этом случае его 3-уровневый уровень отображает детали задачи в конце.

Чтобы создать эту возможность, мы создадим пользовательскую страницу со списком, которую можно будет добавить с помощью 'LIST_ADD_VIEWTYPE' компонент. Видеть здесь для примера. 

Затем функция VTAP.API.Get будет использоваться для получения данных о проекте, вехах проекта и задачах. Они будут отображаться в отдельных столбцах, но все равно будут связаны друг с другом. Вы можете скопировать код из здесь чтобы увидеть это в действии.

 
 

Приложение Vtiger 

 

Инструменты, которые нам нравятся

 
 

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

 

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

 
 

Скоро

 
 

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

Дизайнер приложений Vtiger позволит вам создавать собственные приложения, которые могут зависеть или не зависеть от CRM. Это даст вам возможность писать приложения в любой среде JavaScript, в которой вы разбираетесь.

Благодаря мощным API-интерфейсам VTAP JavaScript вы также можете подключаться к CRM и передавать/извлекать данные из нее, чтобы легко создавать собственные приложения.

 

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

Дизайнер приложений Vtiger позволит вам создавать собственные приложения, которые могут зависеть или не зависеть от CRM. Это даст вам возможность писать приложения в любой среде JavaScript, в которой вы разбираетесь.

Благодаря мощным API-интерфейсам VTAP JavaScript вы также можете подключаться к CRM и передавать/извлекать данные из нее, чтобы легко создавать собственные приложения.

 
 

Подпишитесь, чтобы получать последние обновления!