自定义部件概述
  • 04 Nov 2023
  • 1 分钟阅读
  • 贡献者

自定义部件概述


Article Summary

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

自定义部件概述

使用 HTML、CSS 和 JavaScript 在 Tulip 中创建自己的功能。 可在此处获取库小部件: https://tulip.co/library/?query=Widgets

简介

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

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

在本文中,我们将向你简要介绍自定义 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 提供了大量处理日期和时间的工具。

本文对您有帮助吗?