ThingsBoard is currently the most popular open source IoT platform (12.8k Star) on Github, which can realize the rapid development, management and expansion of IoT projects, and is the best choice for the IoT platform of small, medium and micro enterprises.
This article introduces how to develop the built-in menu navigation widget in the ThingsBoard front-end project.
Built-in related components
TB (ThingsBoard for short, the same below) has more than 30 built-in components in the front end of the system, such as date range selection components:
The corresponding code is stored in the front-end project file
: thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\date-range-navigator.
The TB background specifies fourteen kinds of component packages (one type of component collection, no more components can be added), and the background interface returns the
code storage location: thingsboard\application\src\main\data\json\system\widget_bundles.
Corresponding TB front-end component package interface list:
For components in the dashboard, the advanced options in editing will correspond to the component's setting file, such as the corresponding file for the advanced content of the date range selection component: thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\settings\date\date-range-navigator-widget-settings.component.ts.
Of course, this article will not involve the advanced setting function of components, and a related article may be published in the future.
Component Implementation
Let's look at the date range widget first.
It can be seen that the TB front end has built-in tb-date-range-navigator-widget components, and the function of the component is realized directly by calling the component selector, so we need to develop a corresponding component first when developing the menu navigation component.
Menu Navigation Component
I fell into the pit when choosing the menu navigation component - -, the selected layui menu navigation was introduced into the TB front-end project and found that the style was fine, but the click did not expand and collapse the effect, so I had to give up. Of course, this does not mean that layui is not good. On the contrary, layui is a very careful front-end component. The blog theme I am developing uses layui.
Later, I chose the Ant Design component library, which corresponds to the version implemented by Angular ng-zorro-antd, and the menu navigation component link in it.
Angular introduces Ant
Because the TB front-end project uses the version of Angular v12, the corresponding ng-zorro-antd version should be selected as v12.1.1. If the version is too high, an error will be reported after installation. The installation command:
yarn add [email protected] --save
Introduce css style and icons resource in angular.json file:
"styles": [
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
],
"assets": [
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
Create built-ins
Create the menu navigation component, the related files we \thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\ created in the directory menu :
|menu
| -- menu.component.html
| -- menu.component.scss
| -- menu.component.ts
| -- menu.model.ts
menu.component.html An example of menu navigation is used in the documentation ng-zorro-antd .
<ul nz-menu nzMode="inline">
<li nz-submenu nzTitle="Navigation One" nzIcon="mail" nzOpen>
<ul>
<li nz-menu-group nzTitle="Item 1">
<ul>
<li nz-menu-item nzSelected>Option 1</li>
<li nz-menu-item>Option 2</li>
</ul>
</li>
<li nz-menu-group nzTitle="Item 2">
<ul>
<li nz-menu-item>Option 3</li>
<li nz-menu-item>Option 4</li>
</ul>
</li>
</ul>
</li>
<li nz-submenu nzTitle="Navigation Two" nzIcon="appstore">
<ul>
<li nz-menu-item>Option 5</li>
<li nz-menu-item>Option 6</li>
<li nz-submenu nzTitle="Submenu">
<ul>
<li nz-menu-item>Option 7</li>
<li nz-menu-item>Option 8</li>
<li nz-submenu nzTitle="Submenu">
<ul>
<li nz-menu-item>Option 9</li>
<li nz-menu-item>Option 10</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li nz-submenu nzTitle="Navigation Three" nzIcon="setting">
<ul>
<li nz-menu-item>Option 11</li>
<li nz-menu-item>Option 12</li>
<li nz-menu-item>Option 13</li>
</ul>
</li>
</ul>menu.component.tstb-menu-widget Create a component selector in the file .
import { Component } from '@angular/core';
import { WidgetContext } from '@home/models/widget-component.models';
@Component({
selector: 'tb-menu-widget',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent {
ctx: WidgetContext;
constructor() {
}
}
menu.models.ts The file declares the exported components MenuComponent, and imports ng-zorro-antd the menu and icon modules NzMenuModule and NzIconModule.
import { NgModule } from '@angular/core';
import { MenuComponent } from '@home/components/widget/lib/menu/menu.component';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzIconModule } from 'ng-zorro-antd/icon';
@NgModule({
declarations:
[
MenuComponent
],
imports: [
NzMenuModule,
NzIconModule
],
exports: [
MenuComponent
]
})
export class MenuModule {}
Note: According to the official website method, app.module.ts the introduction of ng-zorro-antd the component module in the root module will take effect, but it does not take effect in the TB project. After testing, it ng-zorro-antd will only take effect when the component module is introduced in a specific component.
Finally, remember to widget-components.module.ts import and export MenuModule modules in the file to take effect.
import { MenuModule } from '@home/components/widget/lib/menu/menu.models';
@NgModule({
imports: [
MenuModule
],
exports: [
MenuModule
]
})
tb-menu-widget Finally, add components to the TB website component package, and successfully introduce the menu navigation of the component library by calling the component ng-zooro-antd , Nice~
epilogue
Since the audience of TB is very small, it is normal for you not to understand this article if you have not studied TB. It would be even better if it could help a small number of people~