description:'Called when widget element is destroyed. Should be used to cleanup all resources if necessary.',
meta:'function'
},
getSettingsForm:{
description:'Optional function returning widget settings form array as alternative to <b>Settings form</b> tab of settings section.',
meta:'function',
return:{
description:'An array of widget settings form properties',
type:'Array<FormProperty>'
}
},
getDataKeySettingsForm:{
description:'Optional function returning particular data key settings form array as alternative to <b>Data key settings form</b> tab of settings section.',
meta:'function',
return:{
description:'An array of data key settings form properties',
type:'Array<FormProperty>'
}
},
getSettingsSchema:{
description:'Optional function returning widget settings schema json as alternative to <b>Settings tab</b> of <a href="https://thingsboard.io/docs/user-guide/contribution/widgets-development/#settings-schema-section" target="_blank">Settings schema section</a>.',
description:'<b>Deprecated</b>. Use getSettingsForm() function.',
description:'Optional function returning particular data key settings schema json as alternative to <b>Data key settings schema</b> of <a href="https://thingsboard.io/docs/user-guide/contribution/widgets-development/#settings-schema-section" target="_blank">Settings schema section</a>.',
description:'<b>Deprecated</b>. Use getDataKeySettingsForm() function.',
meta:'function',
return:{
description:'A particular data key settings schema json',
description:'Widget settings containing widget specific properties according to the defined <a href="https://thingsboard.io/docs/user-guide/contribution/widgets-development/#settings-schema-section" target="_blank">settings json schema</a>',
description:'Widget settings containing widget specific properties according to the defined settings form.',
description:'Widget settings containing widget specific properties according to the defined <a href="https://thingsboard.io/docs/user-guide/contribution/widgets-development/#settings-schema-section" target="_blank">settings json schema</a>',
description:'Widget settings containing widget specific properties according to the defined settings form.',
@ -10,18 +10,20 @@ Each widget function should be defined as a property of the **self** variable.
In order to implement a new widget, the following JavaScript functions should be defined *(Note: each function is optional and can be implemented according to widget specific behaviour):*
| ``` onInit() ``` | The first function which is called when widget is ready for initialization. Should be used to prepare widget DOM, process widget settings and initial subscription information. |
| ``` onDataUpdated() ``` | Called when the new data is available from the widget subscription. Latest data can be accessed from the <spantrigger-style="fontSize: 16px;"trigger-text="<b>defaultSubscription</b>"tb-help-popup="widget/editor/widget_js_subscription_object"></span> object of widget context (**ctx**). |
| ``` onResize() ``` | Called when widget container is resized. Latest width and height can be obtained from widget context (**ctx**). |
| ``` onEditModeChanged() ``` | Called when dashboard editing mode is changed. Latest mode is handled by isEdit property of **ctx**. |
| ``` onMobileModeChanged() ``` | Called when dashboard view width crosses mobile breakpoint. Latest state is handled by isMobile property of **ctx**. |
| ``` onDestroy() ``` | Called when widget element is destroyed. Should be used to cleanup all resources if necessary. |
| ``` getSettingsSchema() ``` | Optional function returning widget settings schema json as alternative to **Settings schema** of settings section. |
| ``` getDataKeySettingsSchema() ``` | Optional function returning particular data key settings schema json as alternative to **Data key settings schema** tab of settings section. |
| ``` actionSources() ``` | Returns map describing available widget action sources ([WidgetActionSource{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L121)) used to define user actions. See <spantrigger-style="fontSize: 16px;"trigger-text="<b>Action sources object</b>"tb-help-popup="widget/editor/widget_js_action_sources_object"></span> |
| ``` onInit() ``` | The first function which is called when widget is ready for initialization. Should be used to prepare widget DOM, process widget settings and initial subscription information. |
| ``` onDataUpdated() ``` | Called when the new data is available from the widget subscription. Latest data can be accessed from the <spantrigger-style="fontSize: 16px;"trigger-text="<b>defaultSubscription</b>"tb-help-popup="widget/editor/widget_js_subscription_object"></span> object of widget context (**ctx**). |
| ``` onResize() ``` | Called when widget container is resized. Latest width and height can be obtained from widget context (**ctx**). |
| ``` onEditModeChanged() ``` | Called when dashboard editing mode is changed. Latest mode is handled by isEdit property of **ctx**. |
| ``` onMobileModeChanged() ``` | Called when dashboard view width crosses mobile breakpoint. Latest state is handled by isMobile property of **ctx**. |
| ``` onDestroy() ``` | Called when widget element is destroyed. Should be used to cleanup all resources if necessary. |
| ``` getSettingsForm() ``` | Optional function returning widget settings form array as alternative to **Settings form** tab of settings section. |
| ``` getDataKeySettingsForm() ``` | Optional function returning particular data key settings form array as alternative to **Data key settings form** tab of settings section. |
| ``` actionSources() ``` | Returns map describing available widget action sources ([WidgetActionSource{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L121)) used to define user actions. See <spantrigger-style="fontSize: 16px;"trigger-text="<b>Action sources object</b>"tb-help-popup="widget/editor/widget_js_action_sources_object"></span> |
| ~~getSettingsSchema()~~ | **Deprecated**. Use getSettingsForm() function. |
| ~~getDataKeySettingsSchema()~~ | **Deprecated**. Use getDataKeySettingsForm() function. |
Igor Kulikov
1 year ago