VDS 组件

VDS 代表 Vtiger 设计系统,它定义了 VTAP 平台提供的核心 HTML 组件。 VDS 提供的组件是可重用的 UI 块。

您可以使用组件来构建和定制您的应用程序。 它们可以在任何地方使用 - 自定义页面、小部件、弹出窗口或其他自定义组件内。

以下是 VTAP 提供的组件列表:

vds文本

使用:用于输入框。 允许用户输入信息。

句法:

属性详情:

姓名 为输入元素设置任何名称
禁用 真/假,使其禁用
占位符 显示输入的任何提示
输入类型 任何有效的 HTML 输入类型,如电子邮件、数字等(阅读下文了解详细信息。)
强制性 使该字段成为必填字段 
v型 这是 vue(反应式)数据绑定,它可以用来设置或读取值。

除了文本,VDS 还支持其他输入类型。 例如: 

  • vds-电子邮件
  • vds 号码
  • vds-百分比
  • vds-十进制
  • vds电话
  • vds-日期
  • vds时间
  • vds-url

所有这些组件都是不同的输入类型。 它们具有 vds-text 类型的属性,但带有自己的输入类型验证。 

Vds下拉

使用方法: 显示带有给定项目列表的下拉列表

语法:

支持的属性:

选项 下拉项数组
true/false,显示多选下拉菜单
空选项 如果你想首先显示一个空选项
禁用 真假
强制性 真假

vds所有者

使用方法: 它是一个交互式组件,将用户和组显示为下拉列表。 它将与 CRM 中任何模块中的分配给字段相同。

语法:

支持的属性:

只有用户 如果您只想在下拉列表中看到用户
只有团体 如果您只想在下拉列表中查看组

vds复选框

使用方法: 显示复选框输入

语法:

vds开关

使用方法: 显示切换

语法:

vds-日期选择器

使用方法: 显示任何日期字段的日期选择器。

语法:

支持的属性:

日期格式 要显示的日期格式,如 DD-MM-YYYY、MM-DD-YYYY、YYYY-MM-DD

vds-日期范围-选择器

使用方法: 显示日期选择器以选择日期范围

语法:

支持的属性:

日期格式 要显示的日期格式,如 DD-MM-YYYY、MM-DD-YYYY、YYYY-MM-DD

vds-时间选择器

使用方法: 显示时间选择器

语法:

支持的属性:

格式 12或24小时制 

VDS-RTE

使用方法: 要显示 CKEditor,您在富文本编辑器字段中看到的字段 UI 

语法:

vds评级

使用方法: 显示评级星域。 它将最多显示 5 颗星。

语法:

支持的属性:

范围 1 到 5 之间的值

vds-iframe

使用方法: 显示具有给定 HTML 内容的 iframe

语法:

vds进度

使用方法: 显示进度百分比

语法:

支持的属性:

折扣值 颜色百分比
自定义颜色代码 默认情况下进度将显示为蓝色,您可以传递任何有效的颜色名称
 
 
 

VTAP 客户用例

 
 

我们的一位客户使用不同的应用程序来跟踪他们的项目和进度。 

他们想开始使用 Vtiger 项目,但用户界面是使用 Vtiger 项目的一大障碍。 该界面没有像客户希望的那样在一个项目的单个屏幕上提供里程碑和任务的全部详细信息。

为了克服这个障碍,我们提出了以下解决方案。

他们可以使用我们的低代码平台 Module Designer 来设计一个分为 3 部分的页面。 

第一部分将显示项目列表,下一部分将显示链接到所选项目的里程碑,第三部分将显示链接到所选项目和里程碑的任务。 它看起来类似于 Outlook 邮箱,在右侧显示电子邮件及其内容。 在这种情况下,它的 3 级在末尾显示任务详细信息。

要构建此功能,我们将构建一个自定义列表页面,可以使用 'LIST_ADD_VIEWTYPE' 成分。 看 点击此处 举个例子。 

然后 VTAP.API.Get 函数将用于获取项目、项目里程碑和任务数据。 它们将显示在单独的列中,但仍会连接在一起。 您可以从复制代码 点击此处 看到它在行动。

 

我们的一位客户使用不同的应用程序来跟踪他们的项目和进度。 

他们想开始使用 Vtiger 项目,但用户界面是使用 Vtiger 项目的一大障碍。 该界面没有像客户希望的那样在一个项目的单个屏幕上提供里程碑和任务的全部详细信息。

为了克服这个障碍,我们提出了以下解决方案。

他们可以使用我们的低代码平台 Module Designer 来设计一个分为 3 部分的页面。 

第一部分将显示项目列表,下一部分将显示链接到所选项目的里程碑,第三部分将显示链接到所选项目和里程碑的任务。 它看起来类似于 Outlook 邮箱,在右侧显示电子邮件及其内容。 在这种情况下,它的 3 级在末尾显示任务详细信息。

要构建此功能,我们将构建一个自定义列表页面,可以使用 'LIST_ADD_VIEWTYPE' 成分。 看 点击此处 举个例子。 

然后 VTAP.API.Get 函数将用于获取项目、项目里程碑和任务数据。 它们将显示在单独的列中,但仍会连接在一起。 您可以从复制代码 点击此处 看到它在行动。

 
 

Vtiger 应用程序 

 

我们喜欢的工具

 
 

Elasticsearch 是一个很棒的开源项目,如果您对数据科学感兴趣,可以参与其中。 它可以实时分析、搜索和存储大量数据。 Elasticsearch 帮助其用户以多种不同方式使用数据。

 

Elasticsearch 是一个很棒的开源项目,如果您对数据科学感兴趣,可以参与其中。 它可以实时分析、搜索和存储大量数据。 Elasticsearch 帮助其用户以多种不同方式使用数据。

 
 

即将公开信息

 
 

App Designer 

Vtiger 的 App Designer 将让您构建可能依赖或不依赖 CRM 的自定义应用程序。 它将使您能够灵活地在任何您精通的 JavaScript 框架中编写应用程序。

借助强大的 VTAP JavaScript API,您还可以连接到 CRM 并从中推送/拉取数据,从而轻松构建自定义应用程序。

 

App Designer 

Vtiger 的 App Designer 将让您构建可能依赖或不依赖 CRM 的自定义应用程序。 它将使您能够灵活地在任何您精通的 JavaScript 框架中编写应用程序。

借助强大的 VTAP JavaScript API,您还可以连接到 CRM 并从中推送/拉取数据,从而轻松构建自定义应用程序。

 
 

注册以接收最新更新!