组件扩展.md

环境准备

• release-3.3分支源码

描述

跟随官方文档开发第一个属于自己的组件。

开发

使用系统管理员或租户管理员登录系统，这里以租户管理员为例。

点击菜单部件库，点击右上角+号，点击创建新的部件包。

新建名为我的部件包的部件库，点击添加按钮。

点击我的部件包。

点击打开部件包按钮。

点击添加新的部件类型。

点击静态部件按钮。

输入部件名称：我的静态部件。

增加内容到相应位置。

HTML：

<div fxFlex fxLayout="column" style="height: 100%;" fxLayoutAlign="space-around stretch">
<h3 style="text-align: center;">My first static widget.</h3>
<button mat-raised-button color="primary" (click)="showAlert()">Click me</button>
</div>

JavaScript:

self.onInit = function() {

    self.ctx.$scope.showAlert = function() {
        var alertContent = self.ctx.settings.alertContent;
        if (!alertContent) {
            alertContent = "Content derived from alertContent property of widget settings.";
        }
        window.alert(alertContent);  
    };

}

设置模式：

{
    "schema": {
        "type": "object",
        "title": "Settings",
        "properties": {
            "alertContent": {
                "title": "Alert content",
                "type": "string",
                "default": "Content derived from alertContent property of widget settings."
            }
        }
    },
    "form": [
        "alertContent"
    ]
}

点击运行按钮进行测试。

点击保存按钮进行保存。

恭喜你拥有了一个静态部件，可以在仪表盘中使用该部件。

TIPS

• [官方]组件开发： https://thingsboard.io/docs/user-guide/contribution/widgets-development/
• [官方]静态组件开发：https://thingsboard.io/docs/user-guide/contribution/widgets-development/#static-widget