From 076016c4bf08121bfe515e4d4c8821c5dece37ca Mon Sep 17 00:00:00 2001 From: mpetrov Date: Mon, 16 Dec 2024 19:50:01 +0200 Subject: [PATCH 1/3] Added show help md file for JavaScript Resource Module --- .../admin/resource/js-resource.component.html | 1 + .../en_US/resource/js-resource-module_fn.md | 59 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html index d587629352..076eab7000 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/resource/js-resource.component.html @@ -80,6 +80,7 @@ (fileNameChanged)="entityForm?.get('fileName').patchValue($event)"> +
+ +A JavaScript module is a self-contained piece of code that encapsulates a specific functionality or set of related functionalities. Typically used in ThingsBoard for wrapping custom extensions. + +#### Encapsulated JavaScript Functionality + +A resource module can include any JavaScript code, making it easier to reuse specific logic. This can include variables or functions that are exported for use in other parts of the application. +##### Examples + +You can declare variables: +```javascript +export const circle = '⬤'; +{:copy-code} +``` +```javascript +export const integerRegex = /^[-+]?\d+$/; +{:copy-code} +``` +Or functions: +```javascript +export const getStatusStyles = (value) => { + let color; + if (value === "true") { + color = 'rgb(39, 134, 34)'; + } else { + color = 'rgb(255, 0, 0)'; + } + return { + color: color, + fontSize: '18px' + }; +}; +{:copy-code} +``` +```javascript +export const formatDateToString = (date) => { + const options = { hour: '2-digit', minute: '2-digit', second: '2-digit' }; + return date.toLocaleTimeString('en-US', options); +}; +{:copy-code} +``` +After import, these are reusable components that can be utilized in different parts of your application. +#### JavaScript Custom Extension Module +Alternatively, a JavaScript module can be a ThingsBoard extension or any other pre-built JavaScript module. +##### Where to start? +To create a custom extension module, you can start by defining the specific functionality you want to encapsulate. This could involve: +- Creating new widgets or dashboards with custom components. +- Implementing custom logic for data processing. +- Implementing custom logic for cell or markdown visualization. +- Integrating third-party libraries. +- Extending existing ThingsBoard features. + +Once your module is developed, you can package it as a ThingsBoard extension, allowing it to be easily imported and used in your widgets and dashboards. +
+*If you plan to reuse existing ThingsBoard logic, ensure you follow the guidelines provided.* +
From f080a89f2100dbff552e243872f638f7f08c3eeb Mon Sep 17 00:00:00 2001 From: mpetrov Date: Mon, 16 Dec 2024 19:53:20 +0200 Subject: [PATCH 2/3] refactoring --- ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md b/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md index b15e813e70..1e553fa12f 100644 --- a/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md +++ b/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md @@ -23,7 +23,7 @@ Or functions: ```javascript export const getStatusStyles = (value) => { let color; - if (value === "true") { + if (value) { color = 'rgb(39, 134, 34)'; } else { color = 'rgb(255, 0, 0)'; From 89402c94f21af0d9b3902d1bb0a55c0991191c89 Mon Sep 17 00:00:00 2001 From: mpetrov Date: Tue, 17 Dec 2024 11:44:03 +0200 Subject: [PATCH 3/3] refactoring --- .../en_US/resource/js-resource-module_fn.md | 31 +++++++------------ 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md b/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md index 1e553fa12f..674ac35e2d 100644 --- a/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md +++ b/ui-ngx/src/assets/help/en_US/resource/js-resource-module_fn.md @@ -3,11 +3,18 @@

-A JavaScript module is a self-contained piece of code that encapsulates a specific functionality or set of related functionalities. Typically used in ThingsBoard for wrapping custom extensions. +A JavaScript module is a self-contained piece of code that encapsulates a specific functionality or set of related functionalities. -#### Encapsulated JavaScript Functionality +#### Use Cases +JavaScript resource modules are advantageous for reusing custom logic. They can be utilized in: +- Widget controller script. +- Data post-processing functions. +- Markdown/HTML value functions. +- Cell style functions. +- Cell content functions. +- Custom actions. -A resource module can include any JavaScript code, making it easier to reuse specific logic. This can include variables or functions that are exported for use in other parts of the application. +These modules can contain any JavaScript code, facilitating the reuse of specific logic. This includes variables or functions that are exported for use in other parts of the application. ##### Examples You can declare variables: @@ -19,7 +26,7 @@ export const circle = '⬤'; export const integerRegex = /^[-+]?\d+$/; {:copy-code} ``` -Or functions: +Or define functions such as: ```javascript export const getStatusStyles = (value) => { let color; @@ -42,18 +49,4 @@ export const formatDateToString = (date) => { }; {:copy-code} ``` -After import, these are reusable components that can be utilized in different parts of your application. -#### JavaScript Custom Extension Module -Alternatively, a JavaScript module can be a ThingsBoard extension or any other pre-built JavaScript module. -##### Where to start? -To create a custom extension module, you can start by defining the specific functionality you want to encapsulate. This could involve: -- Creating new widgets or dashboards with custom components. -- Implementing custom logic for data processing. -- Implementing custom logic for cell or markdown visualization. -- Integrating third-party libraries. -- Extending existing ThingsBoard features. - -Once your module is developed, you can package it as a ThingsBoard extension, allowing it to be easily imported and used in your widgets and dashboards. -
-*If you plan to reuse existing ThingsBoard logic, ensure you follow the guidelines provided.* -
+**Hint**: *Remember to use the `export` keyword to make variables and functions accessible for use outside the module.*