自定义部件概述

使用 HTML、CSS 和 JavaScript 在 Tulip 中创建自己的小工具

:::(Error) (限制）此功能仅适用于专业版及以上版本：

拖放到应用程序中的项目称为 Widget。它们可以是按钮、图片、输入框以及工具栏中的任何其他内容。

自定义 Widget 允许您编写自己的代码，创建自己的 Widget，然后将其拖放到应用程序中并与之交互。这一功能允许 Tulip 用户扩展 Tulip 的功能边界。

观看以下概述视频，快速深入了解这一功能：

查看 Tulip 库中的自定义部件！

自定义 Widget 基础知识

自定义 Widget 管理页面位于账户设置页面。在这里您可以创建和删除 Widget。自定义 Widget 编辑器允许您编写 Widget 代码、创建道具和事件并预览 Widget。下图描述了什么是道具和事件：

**道具：**道具是自定义 widget 和 Tulip 应用程序之间共享的数据。道具将显示在应用程序编辑器中，允许应用程序编辑器选择与道具相关联的变量、表记录或其他信息。

事件事件是 Widget 可以发送给应用程序的信号。事件允许应用程序通过触发器做出响应，并可携带相关信息。

自定义 Widget 可通过应用程序编辑器中的自定义向下选择器访问。

创建 Widget

:::(Warning) (警告）只有拥有账户设置权限的用户（账户所有者）才能访问自定义 Widget 编辑界面：

Widget 编辑器屏幕分为四个部分。点击进入预览部分后，您在左下角部分写入的代码将显示在预览部分。可以在预览部分直接更改道具值，以进行测试。

与道具和事件交互的特殊功能。

获取道具值

:::(Warning) (警告）无法保证在加载 widget 之前加载该 widget 使用的道具，因此与表格记录字段、聚合或任何其他动态值相关的所有道具都应包含逻辑，以支持在加载 widget 时道具为空的情况。有关道具更改时触发逻辑的详细信息，请参阅本节。
:::

//Getting the Value of a Prop getValue('My Prop');``//Store prop to a variable let myVariable = getValue('My Prop')；

当道具发生变化时执行操作

//在道具值发生变化时执行操作 getValue('My Prop', (internalVariable) => { doSomething(internalVariable); })；

设置道具的值

设置道具的值setValue('My Prop',value_to_set)；

//将文本道具的值设置为 "hello!" setValue('My Text Prop','hello!')；

//设置对象中一个项目的值 setValue('My Object Prop', { 'Key inside object': 'new value' }); ````

触发事件

触发事件fireEvent('event',payload)；

// fireEvent('My Event')；

//触发有有效负载的事件 fireEvent('My Event', myVariable); ````

小部件构建视频示例

导入/导出应用程序

导出

1. 在自定义 widget 概述中，选择要导出的 widget 旁边的 3 个点。

1. 选择 "导出"。

导入

1. 从自定义 widget 概览屏幕，选择顶部的 3 个圆点。

1. 选择 "导入"。

1. 找到 .json 自定义 widget 文件。

启用外部库

外部库进一步扩展了自定义 widget 的功能。外部库可以处理直接在 JavaScript 中编写 html 的大量脏活累活。必须为每个要使用外部库的 widget 启用外部库。

1. 在 Widget 中，点击功能区中的 3 点菜单。

1. 选择 "启用外部库"。

1. 选择要启用的扩展。

以下是每种扩展的基本说明，其中许多扩展在多个领域都有出色表现，请自由探索。

• jQuery- 可以更精简地选择 HTML 元素，并进行元素操作。
• **D3 -**数据可视化的黄金标准，学习曲线陡峭，但灵活性极高。
• **Google Visualization -**顾名思义，是实现可视化的绝佳工具。
• **javaascript-Ip-solver -**Ip solver 是一个外部库，可以处理复杂的计算以求解方程。
• **Lodash -**Lodash 提供了大量工具，让使用 javascript 数据类型变得更容易。
• **ChartJS -**最简单的图形库，提供大量在线资源。
• **Moment -**Moment 提供了大量处理日期和时间的工具。