ThingsBoard小部件编辑器之Settings schema

前言

看完本文后你将了解如下内容：
小部件编辑器中的Settings schema的来源，用法。
编辑器的JavaScript中如何获取Settings schema设置的内容。
源码方式添加的组件，如何获取Settings schema设置的内容。
源码方式添加的组件，如何显示在部件库中，或者说如何才能使用。这个在另一篇文章介绍。

介绍

小部件编辑器是一个用于开发自定义小部件的迷你IDE。它由顶部工具栏和四个主要部分组成:

• Resources/HTML/CSS
• JavaScript
• Settings schema
• Widget preview

这篇文章来介绍Settings schema(设置模式)的作用和用法。
还记得自己第一次打开小部件编辑器的时候，左边俩栏还大概知道是什么，对于右上方这个框框，一脸问号？这是什么东西！现在看来很简单。看完文章，相信你也轻松拿下！

---

官网哪里有介绍？

https://thingsboard.io/docs/user-guide/contribution/widgets-development/#settings-schema-section
里面基本讲解还是如何利用TB的小部件编辑器来开发小部件。这篇文章会涉及前端源码和settings schema之间的操作。
官网介绍中值得一提的是：他介绍了settings schema的来源react-schema-form 和 构建测试的页面。

react-schema-form？

Github开源官方介绍
React表单是基于json模式的，用于生成和验证表单。这是angular模式表单项目，它使用material-ui来实现底层组件。
简单来说：这是一个前端工具，你传给它俩个JSON，它给你生成表单！
正好TB的前端也是angular项目，ui采用的也是material-ui。

Settings schema?

中文翻译为设置模式。
Settings schema的JSON结构如下，分为俩部分：

1. schema决定表单类型，输入框？单选框？下拉列表？日期？等等…
2. form决定对应表单顺序，样式等

{
   
    "schema":{
   
        "type":"object",
        "title":"EntitiesTableSettings",
        "properties":Object{
   ...},
        "required":[

        ]
    },
    "form":Array[15]
}

Settings schema构建的表单就对应小部件编辑状态下的编辑详情页的第三个tab「高级」里面的所有表单内容。

打开react-schema-form builder先体验一把。这里表单种类很多.
打开TB的 部件包 > Entity admin widgets > Device admin table
将这个组件的设置模式中的schema对应的JOSN对象拷贝到react-schema-form builder的Schema框中，再将这个组件的设置模式中的form对应的JOSN数组拷贝到react-schema-form builder的form框中。

---

看看右边的表单是不是和Device admin table组件的设置>高级 中的表单内容一致呢。
可以尝试改变一下form 数组中的元素顺序，再看看表单中的元素位置会不会做相应调换呢？

---

所以，无论是代码级别的新建组件，还是用小部件编辑器来新建组件，都离不开使用react-schema-form构建表单！因为无论什么组件，肯得是要做一些设置的。组件编辑页的前俩个和最后一个Tab「数据」「设置」「动作」是所有组件都一样的通用设置，第三个Tab「高级」就是每个组件都不同的个性化设置！

练习

假设我们要结合TB自带的实体列表组件，实现一个设备的批量RPC组件，如下图。

实现思路

1. 实体列表的表格添加复选框，用来多选要控制的设备。

_ 复选框，input和按钮我是通过改源码实现，本文不讲解，只介绍settings schema相关内容。_

2. 高级设置中，新增表单，供填写要控制的多个方法名method。

3. 表格初始化时，获取方法名method，生成对应个数的input框，供输入params参数。
4. 表格最后添加一个按钮，点击按钮后，获取对应method和params，
5. 调用angular项目中的服务DeviceService中的sendOneWayRpcCommand或者sendTwoWayRpcCommand方法来循环发送多个设备的多个RPC命令。
   

表单构建

打开react-schema-form builder对应输入下面内容：
Form

[
  "enableBatchRpc",
  {
   
    "key": "batchRpc",
    "add": "添加",
    "style": {
   
      "add": "btn-success"
    },
    "items": [
      "batchRpc[]"
    ]
  }