', '');
+ replacement = '';
+ } else {
+ replacement = '';
}
- return content;
+ return content.replace('', replacement);
}
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/custom_action_args.md b/ui-ngx/src/assets/help/en_US/widget/action/custom_action_args.md
new file mode 100644
index 0000000000..c8f1b508f6
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/custom_action_args.md
@@ -0,0 +1,19 @@
+
$event: MouseEvent - The MouseEvent object. Usually a result of a mouse click event.
+
+ widgetContext: WidgetContext - A reference to WidgetContext that has all necessary API
+ and data used by widget instance.
+
+ entityId: string - An optional string id of the target entity.
+
+ entityName: string - An optional string name of the target entity.
+
+ additionalParams: {[key: string]: any} - An optional key/value object holding additional entity parameters.
+
+
+
+ entityLabel: string - An optional string label of the target entity.
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/custom_action_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/custom_action_fn.md
index a71cb598d0..de5eec3943 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/custom_action_fn.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/custom_action_fn.md
@@ -10,18 +10,7 @@ A JavaScript function performing custom action.
**Parameters:**
- - $event:
MouseEvent - The MouseEvent object. Usually a result of a mouse click event.
-
- - widgetContext:
WidgetContext - A reference to WidgetContext that has all necessary API
- and data used by widget instance.
-
- - entityId:
string - An optional string id of the target entity.
-
- - entityName:
string - An optional string name of the target entity.
-
- {% include widget/action/custom_additional_params %}
- - entityLabel:
string - An optional string label of the target entity.
-
+ {% include widget/action/custom_action_args %}
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/custom_additional_params.md b/ui-ngx/src/assets/help/en_US/widget/action/custom_additional_params.md
index c71e2b63b8..d13af3fc26 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/custom_additional_params.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/custom_additional_params.md
@@ -1,46 +1,53 @@
- additionalParams: {[key: string]: any} - An optional key/value object holding additional entity parameters depending on widget type and action source:
-
- - Entities table widget (On row click or Action cell button) - additionalParams:
{ entity: EntityData }:
-
- - entity:
EntityData - An
- EntityData object
- presenting basic entity properties (ex. id, entityName) and
provides access to other entity attributes/timeseries declared in widget datasource configuration.
-
-
-
- - Alarms table widget (On row click or Action cell button) - additionalParams:
{ alarm: AlarmDataInfo }:
-
- - alarm:
AlarmDataInfo - An
- AlarmDataInfo object
- presenting basic alarm properties (ex. type, severity, originator, etc.) and
provides access to other alarm or originator entity fields/attributes/timeseries declared in widget datasource configuration.
-
-
-
- - Timeseries table widget (On row click or Action cell button) - additionalParams:
TimeseriesRow:
-
- - additionalParams:
TimeseriesRow - A
- TimeseriesRow object
- presenting formattedTs (a string value of formatted timestamp) and
timeseries values for each column declared in widget datasource configuration.
-
-
-
- - Entities hierarchy widget (On node selected) - additionalParams:
{ nodeCtx: HierarchyNodeContext }:
-
- - nodeCtx:
HierarchyNodeContext - An
- HierarchyNodeContext object
- containing entity field holding basic entity properties
(ex. id, name, label) and data field holding other entity attributes/timeseries declared in widget datasource configuration.
-
-
-
- - Pie - Flot widget (On slice click) - additionalParams:
TbFlotPlotItem:
-
- - additionalParams:
TbFlotPlotItem - A
- TbFlotPlotItem object
- containing series field with information about datasource and
data key of clicked pie slice.
-
-
-
- - All other widgets - does not provide additionalParams value.
-
-
+#### Additional params object
+
+
+
+
+additionalParams: {[key: string]: any}
+
+An optional key/value object holding additional entity parameters depending on widget type and action source:
+
+
+ - Entities table widget (On row click or Action cell button) - additionalParams:
{ entity: EntityData }:
+
+ - entity:
EntityData - An
+ EntityData object
+ presenting basic entity properties (ex. id, entityName) and
provides access to other entity attributes/timeseries declared in widget datasource configuration.
+
+
+
+ - Alarms table widget (On row click or Action cell button) - additionalParams:
{ alarm: AlarmDataInfo }:
+
+ - alarm:
AlarmDataInfo - An
+ AlarmDataInfo object
+ presenting basic alarm properties (ex. type, severity, originator, etc.) and
provides access to other alarm or originator entity fields/attributes/timeseries declared in widget datasource configuration.
+
+
+
+ - Timeseries table widget (On row click or Action cell button) - additionalParams:
TimeseriesRow:
+
+ - additionalParams:
TimeseriesRow - A
+ TimeseriesRow object
+ presenting formattedTs (a string value of formatted timestamp) and
timeseries values for each column declared in widget datasource configuration.
+
+
+
+ - Entities hierarchy widget (On node selected) - additionalParams:
{ nodeCtx: HierarchyNodeContext }:
+
+ - nodeCtx:
HierarchyNodeContext - An
+ HierarchyNodeContext object
+ containing entity field holding basic entity properties
(ex. id, name, label) and data field holding other entity attributes/timeseries declared in widget datasource configuration.
+
+
+
+ - Pie - Flot widget (On slice click) - additionalParams:
TbFlotPlotItem:
+
+ - additionalParams:
TbFlotPlotItem - A
+ TbFlotPlotItem object
+ containing series field with information about datasource and
data key of clicked pie slice.
+
+
+ - All other widgets - does not provide additionalParams value.
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/custom_pretty_action_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/custom_pretty_action_fn.md
index a9fea185c3..a4c20a7cad 100644
--- a/ui-ngx/src/assets/help/en_US/widget/action/custom_pretty_action_fn.md
+++ b/ui-ngx/src/assets/help/en_US/widget/action/custom_pretty_action_fn.md
@@ -21,7 +21,14 @@ A JavaScript function performing custom action with defined HTML template to ren
htmlTemplate: string - An optional HTML template string defined in HTML tab.
Used to render custom dialog (see Examples for more details).
- {% include widget/action/custom_additional_params %}
+ additionalParams: {[key: string]: any} - An optional key/value object holding additional entity parameters.
+
+
+
entityLabel: string - An optional string label of the target entity.
@@ -38,6 +45,7 @@ A JavaScript function performing custom action with defined HTML template to ren
tb-help-popup="widget/action/examples/custom_pretty_create_dialog_js"
tb-help-popup-placement="top"
[tb-help-popup-style]="{maxHeight: '50vh', maxWidth: '50vw'}"
+ trigger-style="font-size: 16px;"
trigger-text="JavaScript function">
@@ -47,6 +55,7 @@ A JavaScript function performing custom action with defined HTML template to ren
tb-help-popup="widget/action/examples/custom_pretty_create_dialog_html"
tb-help-popup-placement="top"
[tb-help-popup-style]="{maxHeight: '50vh', maxWidth: '50vw'}"
+ trigger-style="font-size: 16px;"
trigger-text="HTML code">
@@ -58,6 +67,7 @@ A JavaScript function performing custom action with defined HTML template to ren
tb-help-popup="widget/action/examples/custom_pretty_edit_dialog_js"
tb-help-popup-placement="top"
[tb-help-popup-style]="{maxHeight: '50vh', maxWidth: '50vw'}"
+ trigger-style="font-size: 16px;"
trigger-text="JavaScript function">
@@ -67,6 +77,7 @@ A JavaScript function performing custom action with defined HTML template to ren
tb-help-popup="widget/action/examples/custom_pretty_edit_dialog_html"
tb-help-popup-placement="top"
[tb-help-popup-style]="{maxHeight: '50vh', maxWidth: '50vw'}"
+ trigger-style="font-size: 16px;"
trigger-text="HTML code">
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_get_location_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_get_location_fn.md
new file mode 100644
index 0000000000..c504ac1b67
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_get_location_fn.md
@@ -0,0 +1,49 @@
+#### Get location function
+
+
+
+
+*function getLocation($event, widgetContext, entityId, entityName, additionalParams, entityLabel): [number, number] | Observable<[number, number]>*
+
+A JavaScript function that should return location as array of two numbers (latitude, longitude) for further processing by mobile action.
+Usually location can be obtained from entity attributes/telemetry.
+
+**Parameters:**
+
+
+ {% include widget/action/custom_action_args %}
+
+
+**Returns:**
+
+Latitude and longitude as array of two numbers or Observable of array of two numbers. For example ```[37.689, -122.433]```.
+
+
+
+##### Examples
+
+* Return location from entity attributes:
+
+```javascript
+return getLocationFromEntityAttributes();
+
+function getLocationFromEntityAttributes() {
+ if (entityId) {
+ return widgetContext.attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE', ['latitude', 'longitude'])
+ .pipe(widgetContext.rxjs
+ .map(function(attributeData) {
+ var res = [0,0];
+ if (attributeData && attributeData.length === 2) {
+ res[0] = attributeData.filter(function (data) { return data.key === 'latitude'})[0].value;
+ res[1] = attributeData.filter(function (data) { return data.key === 'longitude'})[0].value;
+ }
+ return res;
+ }
+ )
+ );
+ } else {
+ return [0,0];
+ }
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_get_phone_number_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_get_phone_number_fn.md
new file mode 100644
index 0000000000..752d9a3909
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_get_phone_number_fn.md
@@ -0,0 +1,48 @@
+#### Get phone number function
+
+
+
+
+*function getPhoneNumber($event, widgetContext, entityId, entityName, additionalParams, entityLabel): number | string | Observable<number> | Observable<string>*
+
+A JavaScript function that should return phone number for further processing by mobile action.
+Usually phone number can be obtained from entity attributes/telemetry.
+
+**Parameters:**
+
+
+ {% include widget/action/custom_action_args %}
+
+
+**Returns:**
+
+String or numeric value of phone number or Observable of string or numeric value. For example ```123456789```.
+
+
+
+##### Examples
+
+* Return phone number from entity attributes:
+
+```javascript
+return getPhoneNumberFromEntityAttributes();
+
+function getPhoneNumberFromEntityAttributes() {
+ if (entityId) {
+ return widgetContext.attributeService.getEntityAttributes(entityId, 'SERVER_SCOPE', ['phone'])
+ .pipe(widgetContext.rxjs
+ .map(function(attributeData) {
+ var res = 0;
+ if (attributeData && attributeData.length === 1) {
+ res = attributeData[0].value;
+ }
+ return res;
+ }
+ )
+ );
+ } else {
+ return 0;
+ }
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_handle_empty_result_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_handle_empty_result_fn.md
new file mode 100644
index 0000000000..9722c3ea5a
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_handle_empty_result_fn.md
@@ -0,0 +1,31 @@
+#### Handle empty result function
+
+
+
+
+*function handleEmptyResult($event, widgetContext, entityId, entityName, additionalParams, entityLabel): void*
+
+An optional JavaScript function to handle empty result.
Usually this happens when user cancels the action (for ex. by pressing phone back button).
+
+**Parameters:**
+
+
+ {% include widget/action/custom_action_args %}
+
+
+
+
+##### Examples
+
+* Display alert dialog with canceled action message:
+
+```javascript
+showEmptyResultDialog('Action was canceled!');
+
+function showEmptyResultDialog(message) {
+ setTimeout(function() {
+ widgetContext.dialogs.alert('Empty result', message).subscribe();
+ }, 100);
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_handle_error_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_handle_error_fn.md
new file mode 100644
index 0000000000..01bf76c8fd
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_handle_error_fn.md
@@ -0,0 +1,33 @@
+#### Handle error function
+
+
+
+
+*function handleError(error, $event, widgetContext, entityId, entityName, additionalParams, entityLabel): void*
+
+An optional JavaScript function to handle error occurred while mobile action execution.
+
+**Parameters:**
+
+
+ - error:
string - error message.
+
+ {% include widget/action/custom_action_args %}
+
+
+
+
+##### Examples
+
+* Display alert dialog with error message:
+
+```javascript
+showErrorDialog('Failed to perform action', error);
+
+function showErrorDialog(title, error) {
+ setTimeout(function() {
+ widgetContext.dialogs.alert(title, error).subscribe();
+ }, 100);
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
new file mode 100644
index 0000000000..5759571fe7
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_image_fn.md
@@ -0,0 +1,92 @@
+#### Process image function
+
+
+
+
+*function processImage(imageUrl, $event, widgetContext, entityId, entityName, additionalParams, entityLabel): void*
+
+A JavaScript function to process image obtained as a result of mobile action (take photo, take image from gallery, etc.).
+
+**Parameters:**
+
+
+ - imageUrl:
string - An image URL in base64 data format.
+
+ {% include widget/action/custom_action_args %}
+
+
+
+
+##### Examples
+
+* Store image url data to entity attribute:
+
+```javascript
+saveEntityImageAttribute('image', imageUrl);
+
+function saveEntityImageAttribute(attributeName, imageUrl) {
+ if (entityId) {
+ let attributes = [{
+ key: attributeName, value: imageUrl
+ }];
+ widgetContext.attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributes).subscribe(
+ function() {
+ widgetContext.showSuccessToast('Image attribute saved!');
+ },
+ function(error) {
+ widgetContext.dialogs.alert('Image attribute save failed', JSON.stringify(error));
+ }
+ );
+ }
+}
+{:copy-code}
+```
+
+* Display dialog with obtained image:
+
+```javascript
+showImageDialog('Image', imageUrl);
+
+function showImageDialog(title, imageUrl) {
+ setTimeout(function() {
+ widgetContext.customDialog.customDialog(imageDialogTemplate, ImageDialogController, {imageUrl: imageUrl, title: title}).subscribe();
+ }, 100);
+}
+
+var imageDialogTemplate =
+ '';
+
+function ImageDialogController(instance) {
+ let vm = instance;
+ vm.title = vm.data.title;
+ vm.imageUrl = vm.data.imageUrl;
+ vm.close = function ()
+ {
+ vm.dialogRef.close(null);
+ }
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_launch_result_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_launch_result_fn.md
new file mode 100644
index 0000000000..ddcab07e18
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_launch_result_fn.md
@@ -0,0 +1,33 @@
+#### Process launch result function
+
+
+
+
+*function processLaunchResult(launched, $event, widgetContext, entityId, entityName, additionalParams, entityLabel): void*
+
+An optional JavaScript function to process result of attempt to launch external mobile application (for ex. map application or phone call application).
+
+**Parameters:**
+
+
+ - launched:
boolean - boolean value indicating if the external application was successfully launched.
+ {% include widget/action/custom_action_args %}
+
+
+
+
+##### Examples
+
+* Display alert dialog with external application launch status:
+
+```javascript
+showLaunchStatusDialog('Application', launched);
+
+function showLaunchStatusDialog(title, status) {
+ setTimeout(function() {
+ widgetContext.dialogs.alert(title, status ? 'Successfully launched' : 'Failed to launch').subscribe();
+ }, 100);
+}
+
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_location_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_location_fn.md
new file mode 100644
index 0000000000..445053b1dd
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_location_fn.md
@@ -0,0 +1,59 @@
+#### Process location function
+
+
+
+
+*function processLocation(latitude, longitude, $event, widgetContext, entityId, entityName, additionalParams, entityLabel): void*
+
+A JavaScript function to process current location of the phone.
+
+**Parameters:**
+
+
+ - latitude:
number - phone location latitude.
+
+ - longitude:
number - phone location longitude.
+
+ {% include widget/action/custom_action_args %}
+
+
+
+
+##### Examples
+
+* Display alert dialog with location data:
+
+```javascript
+showLocationDialog('Location', latitude, longitude);
+
+function showLocationDialog(title, latitude, longitude) {
+ setTimeout(function() {
+ widgetContext.dialogs.alert(title, 'Latitude: '+latitude+'
Longitude: ' + longitude).subscribe();
+ }, 100);
+}
+{:copy-code}
+```
+
+* Store phone location to entity attributes:
+
+```javascript
+saveEntityLocationAttributes('latitude', 'longitude', latitude, longitude);
+
+function saveEntityLocationAttributes(latitudeAttributeName, longitudeAttributeName, latitude, longitude) {
+ if (entityId) {
+ let attributes = [
+ { key: latitudeAttributeName, value: latitude },
+ { key: longitudeAttributeName, value: longitude }
+ ];
+ widgetContext.attributeService.saveEntityAttributes(entityId, "SERVER_SCOPE", attributes).subscribe(
+ function() {
+ widgetContext.showSuccessToast('Location attributes saved!');
+ },
+ function(error) {
+ widgetContext.dialogs.alert('Location attributes save failed', JSON.stringify(error));
+ }
+ );
+ }
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_qr_code_fn.md b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_qr_code_fn.md
new file mode 100644
index 0000000000..6a011ead79
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/action/mobile_process_qr_code_fn.md
@@ -0,0 +1,76 @@
+#### Process QR code function
+
+
+
+
+*function processQrCode(code, format, $event, widgetContext, entityId, entityName, additionalParams, entityLabel): void*
+
+A JavaScript function to process result of barcode scanning.
+
+**Parameters:**
+
+
+ - code:
string - A string value of scanned barcode.
+
+ - format:
string - barcode format. See BarcodeFormat enum for possible values.
+
+ {% include widget/action/custom_action_args %}
+
+
+
+
+##### Examples
+
+* Display alert dialog with scanned barcode:
+
+```javascript
+showQrCodeDialog('Bar Code', code, format);
+
+function showQrCodeDialog(title, code, format) {
+ setTimeout(function() {
+ widgetContext.dialogs.alert(title, 'Code: ['+code+']
Format: ' + format).subscribe();
+ }, 100);
+}
+{:copy-code}
+```
+
+* Parse code as a device claiming info (in this case ```{deviceName: string, secretKey: string}```)
and then claim device (see [Claiming devices{:target="_blank"}](${baseUrl}/docs/user-guide/claiming-devices/) for details):
+
+```javascript
+var $scope = widgetContext.$scope;
+var $injector = $scope.$injector;
+var $translate = $injector.get(widgetContext.servicesMap.get('translate'));
+var deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));
+var deviceNotFound = $translate.instant('widgets.input-widgets.claim-not-found');
+var failedClaimDevice = $translate.instant('widgets.input-widgets.claim-failed');
+var claimDeviceInfo = JSON.parse(code);
+var deviceName = claimDeviceInfo.deviceName;
+var secretKey = claimDeviceInfo.secretKey;
+var claimRequest = {
+ secretKey: secretKey
+};
+deviceService.claimDevice(deviceName, claimRequest, { ignoreErrors: true }).subscribe(
+ function (data) {
+ widgetContext.showSuccessToast('Device \'' + deviceName + '\' successfully claimed!');
+ widgetContext.updateAliases();
+ },
+ function (error) {
+ if(error.status == 404) {
+ widgetContext.showErrorToast(deviceNotFound);
+ } else {
+ if (error.status !== 400 && error.error && error.error.message) {
+ showDialog('Failed to claim device', error.error.message);
+ } else {
+ widgetContext.showErrorToast(failedClaimDevice);
+ }
+ }
+ }
+);
+
+function showDialog(title, error) {
+ setTimeout(function() {
+ widgetContext.dialogs.alert(title, error).subscribe();
+ }, 100);
+}
+{:copy-code}
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
new file mode 100644
index 0000000000..5d43c50db2
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/alarm_widget.md
@@ -0,0 +1,147 @@
+#### Sample Alarm widget
+
+
+
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen and then click the “Create new widget type” button.
+Click the **Alarm Widget** button on the **Select widget type** popup.
+The **Widget Editor** will be opened, pre-populated with the content of the default **Alarm** template widget.
+
+ - Replace content of the CSS tab in "Resources" section with the following one:
+
+```css
+.my-alarm-table th {
+ text-align: left;
+}
+{:copy-code}
+```
+
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+
My first Alarm widget.
+
+
+
+ | {{dataKey.label}} |
+
+
+
+
+ |
+ {{getAlarmValue(alarm, dataKey)}}
+ |
+
+
+
+
In this example, we introduced new settings property called **alarmSeverityColorFunction** that contains function body returning color depending on alarm severity.
+
+Inside the **getAlarmCellStyle** function there is corresponding invocation of **alarmSeverityColorFunction** with severity value in order to get color for alarm severity cell.
+
+Note that in this code **onDataUpdated** function is implemented in order to update **alarms** property with latest alarms from subscription and invoke change detection using **detectChanges()** function.
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/ext_latest_values_example.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/ext_latest_values_example.md
new file mode 100644
index 0000000000..277bdac835
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/ext_latest_values_example.md
@@ -0,0 +1,67 @@
+#### Latest Values widget Example with gauge.js library
+
+
+
+
+In this example, **Latest Values** gauge widget will be created using external [gauge.js{:target="_blank"}](http://bernii.github.io/gauge.js/) library.
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen, then click the “Create new widget type” button.
+Click the **Latest Values** button on the **Select widget type** popup.
+The **Widget Editor** will be opened, pre-populated with the content of default **Latest Values** template widget.
+
+ - Open **Resources** tab and click "Add" then insert the following link:
+
+```
+https://bernii.github.io/gauge.js/dist/gauge.min.js
+{:copy-code}
+```
+
+ - Clear content of the CSS tab of "Resources" section.
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+{:copy-code}
+```
+
+ - Put the following JavaScript code inside the "JavaScript" section:
+
+```javascript
+var canvasElement;
+var gauge;
+
+self.onInit = function() {
+ canvasElement = $('#my-gauge', self.ctx.$container)[0];
+ gauge = new Gauge(canvasElement);
+ gauge.minValue = -1000;
+ gauge.maxValue = 1000;
+ gauge.animationSpeed = 16;
+ self.onResize();
+}
+
+self.onResize = function() {
+ canvasElement.width = self.ctx.width;
+ canvasElement.height = self.ctx.height;
+ gauge.update(true);
+ gauge.render();
+}
+
+self.onDataUpdated = function() {
+ if (self.ctx.defaultSubscription.data[0].data.length) {
+ var value = self.ctx.defaultSubscription.data[0].data[0][1];
+ gauge.set(value);
+ }
+}
+{:copy-code}
+```
+
+ - Click the **Run** button on the **Widget Editor Toolbar** in order to see the result in **Widget preview** section.
+
+
+
+In this example, the external JS library API was used that becomes available after injecting the corresponding URL in **Resources** section.
+
+The value displayed was obtained from **data** property for the first dataKey.
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/ext_timeseries_example.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/ext_timeseries_example.md
new file mode 100644
index 0000000000..9c0e14fd42
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/ext_timeseries_example.md
@@ -0,0 +1,112 @@
+#### Time-Series widget Example with Chart.js library
+
+
+
+
+In this example, **Time-Series** line chart widget will be created using external [Chart.js{:target="_blank"}](https://www.chartjs.org/) library.
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen, then click the “Create new widget type” button.
+Click the **Time-Series** button on the **Select widget type** popup.
+The **Widget Editor** will be opened, pre-populated with the content of default **Time-Series** template widget.
+
+ - Open **Resources** tab and click "Add" then insert the following link:
+
+```
+https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js
+{:copy-code}
+```
+
+ - Clear content of the CSS tab of "Resources" section.
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+{:copy-code}
+```
+
+ - Put the following JavaScript code inside the "JavaScript" section:
+
+```javascript
+var myChart;
+
+self.onInit = function() {
+
+ var chartData = {
+ datasets: []
+ };
+
+ for (var i=0; i < self.ctx.data.length; i++) {
+ var dataKey = self.ctx.data[i].dataKey;
+ var dataset = {
+ label: dataKey.label,
+ data: [],
+ borderColor: dataKey.color,
+ fill: false
+ };
+ chartData.datasets.push(dataset);
+ }
+
+ var options = {
+ maintainAspectRatio: false,
+ legend: {
+ display: false
+ },
+ scales: {
+ xAxes: [{
+ type: 'time',
+ ticks: {
+ maxRotation: 0,
+ autoSkipPadding: 30
+ }
+ }]
+ }
+ };
+
+ var canvasElement = $('#myChart', self.ctx.$container)[0];
+ var canvasCtx = canvasElement.getContext('2d');
+ myChart = new Chart(canvasCtx, {
+ type: 'line',
+ data: chartData,
+ options: options
+ });
+ self.onResize();
+}
+
+self.onResize = function() {
+ myChart.resize();
+}
+
+self.onDataUpdated = function() {
+ for (var i = 0; i < self.ctx.data.length; i++) {
+ var datasourceData = self.ctx.data[i];
+ var dataSet = datasourceData.data;
+ myChart.data.datasets[i].data.length = 0;
+ var data = myChart.data.datasets[i].data;
+ for (var d = 0; d < dataSet.length; d++) {
+ var tsValuePair = dataSet[d];
+ var ts = tsValuePair[0];
+ var value = tsValuePair[1];
+ data.push({t: ts, y: value});
+ }
+ }
+ myChart.options.scales.xAxes[0].ticks.min = self.ctx.timeWindow.minTime;
+ myChart.options.scales.xAxes[0].ticks.max = self.ctx.timeWindow.maxTime;
+ myChart.update();
+}
+{:copy-code}
+```
+
+ - Click the **Run** button on the **Widget Editor Toolbar** in order to see the result in **Widget preview** section.
+
+
+
+In this example, the external JS library API was used that becomes available after injecting the corresponding URL in **Resources** section.
+
+Initially chart datasets prepared using configured dataKeys from **data** property of **ctx**.
+
+In the **onDataUpdated** function datasources data converted to Chart.js line chart format and pushed to chart datasets.
+
+Please note that xAxis (time axis) is limited to current timewindow bounds obtained from **timeWindow** property of **ctx**.
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
new file mode 100644
index 0000000000..2cda617889
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/latest_values_widget.md
@@ -0,0 +1,47 @@
+#### Sample Latest Values widget
+
+
+
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen and then click the “Create new widget type” button.
+Click the **Latest Values** button on the **Select widget type** popup.
+The **Widget Editor** will open, pre-populated with the content of the default **Latest Values** template widget.
+
+ - Clear content of the CSS tab of "Resources" section.
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+
My first latest values widget.
+
+
{{dataKeyData.dataKey.label}}:
+
{{(dataKeyData.data[0] && dataKeyData.data[0][0]) | date : 'yyyy-MM-dd HH:mm:ss' }}
+
{{dataKeyData.data[0] && dataKeyData.data[0][1]}}
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
new file mode 100644
index 0000000000..d6f24b2055
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/rpc_widget.md
@@ -0,0 +1,187 @@
+#### Sample RPC (Control) widget
+
+
+
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen and then click the “Create new widget type” button.
+Click the **Control Widget** button on the **Select widget type** popup.
+The **Widget Editor** will open, pre-populated with default **Control** template widget content.
+
+ - Clear content of the CSS tab of "Resources" section.
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+{:copy-code}
+```
+
+ - Put the following JSON content inside the "Settings schema" tab of **Settings schema section**:
+
+```json
+{
+ "schema": {
+ "type": "object",
+ "title": "Settings",
+ "properties": {
+ "oneWayElseTwoWay": {
+ "title": "Is One Way Command",
+ "type": "boolean",
+ "default": true
+ },
+ "requestTimeout": {
+ "title": "RPC request timeout",
+ "type": "number",
+ "default": 500
+ }
+ },
+ "required": []
+ },
+ "form": [
+ "oneWayElseTwoWay",
+ "requestTimeout"
+ ]
+}
+{:copy-code}
+```
+
+ - Put the following JavaScript code inside the "JavaScript" section:
+
+```javascript
+self.onInit = function() {
+
+ self.ctx.$scope.sendCommand = function() {
+ var rpcMethod = self.ctx.$scope.rpcMethod;
+ var rpcParams = self.ctx.$scope.rpcParams;
+ var timeout = self.ctx.settings.requestTimeout;
+ var oneWayElseTwoWay = self.ctx.settings.oneWayElseTwoWay ? true : false;
+
+ var commandObservable;
+ if (oneWayElseTwoWay) {
+ commandObservable = self.ctx.controlApi.sendOneWayCommand(rpcMethod, rpcParams, timeout);
+ } else {
+ commandObservable = self.ctx.controlApi.sendTwoWayCommand(rpcMethod, rpcParams, timeout);
+ }
+ commandObservable.subscribe(
+ function (response) {
+ if (oneWayElseTwoWay) {
+ self.ctx.$scope.rpcCommandResponse = "Command was successfully received by device.
No response body because of one way command mode.";
+ } else {
+ self.ctx.$scope.rpcCommandResponse = "Response from device:
";
+ self.ctx.$scope.rpcCommandResponse += JSON.stringify(response, undefined, 2);
+ }
+ self.ctx.detectChanges();
+ },
+ function (rejection) {
+ self.ctx.$scope.rpcCommandResponse = "Failed to send command to the device:
"
+ self.ctx.$scope.rpcCommandResponse += "Status: " + rejection.status + "
";
+ self.ctx.$scope.rpcCommandResponse += "Status text: '" + rejection.statusText + "'";
+ self.ctx.detectChanges();
+ }
+
+ );
+ }
+
+}
+{:copy-code}
+```
+
+ - Fill **Widget title** field with widget type name, for ex. "My first control widget".
+ - Click the **Run** button on the **Widget Editor Toolbar** in order to see the result in **Widget preview** section.
+ - Click dashboard edit button on the preview section to change the size of the resulting widget. Then click dashboard apply button. The final widget should look like the image below.
+
+
+
+- Click the **Save** button on the **Widget Editor Toolbar** to save widget type.
+
+To test how this widget performs RPC commands, we will need to place it in a dashboard then bind it to a device working with RPC commands. To do this, perform the following steps:
+
+- Login as Tenant administrator.
+- Navigate to **Devices** and create new device with some name, for ex. "My RPC Device".
+- Open device details and click "Copy Access Token" button to copy device access token to clipboard.
+- Download [mqtt-js-rpc-from-server.sh{:target="_blank"}](${baseUrl}/docs/reference/resources/mqtt-js-rpc-from-server.sh) and [mqtt-js-rpc-from-server.js{:target="_blank"}](${baseUrl}/docs/reference/resources/mqtt-js-rpc-from-server.js). Place these files in a folder.
+ Edit **mqtt-js-rpc-from-server.sh** - replace **$ACCESS_TOKEN** with your device access token from the clipboard. And install mqtt client library.
+- Run **mqtt-js-rpc-from-server.sh** script. You should see a "connected" message in the console.
+- Navigate to **Dashboards** and create a new dashboard with some name, for ex. "My first control dashboard". Open this dashboard.
+- Click dashboard "edit" button. In the dashboard edit mode, click the "Entity aliases" button located on the dashboard toolbar.
+
+
+
+- Inside **Entity aliases** popup click "Add alias".
+- Fill "Alias name" field, for ex. "My RPC Device Alias".
+- Select "Entity list" in "Filter type" field.
+- Choose "Device" in "Type" field.
+- Select your device in "Entity list" field. In this example "My RPC Device".
+
+
+
+- Click "Add" and then "Save" in **Entity aliases**.
+- Click dashboard "+" button then click "Create new widget" button.
+
+
+
+- Then select **Widget Bundle** where your RPC widget was saved. Select "Control widget" tab.
+- Click your widget. In this example, "My first control widget".
+- From **Add Widget** popup, select your device alias in **Target device** section. In this example "My RPC Device Alias".
+- Click **Add**. Your Control widget will appear in the dashboard. Click dashboard **Apply changes** button to save dashboard and leave editing mode.
+- Fill **RPC method** field with RPC method name. For ex. "TestMethod".
+- Fill **RPC params** field with RPC params. For ex. "{ param1: "value1" }".
+- Click **Send RPC command** button. You should see the following response in the widget.
+
+
+
+The following output should be printed in the device console:
+
+```bash
+ request.topic: v1/devices/me/rpc/request/0
+ request.body: {"method":"TestMethod","params":"{ param1: \"value1\" }"}
+```
+
+In order to test "Two way" RPC command mode, we need to change the corresponding widget settings property. To do this, perform the following steps:
+
+- Click dashboard "edit" button. In dashboard edit mode, click **Edit widget** button located in the header of Control widget.
+- In the widget details, view select "Advanced" tab and uncheck "Is One Way Command" checkbox.
+
+
+
+- Click **Apply changes** button on the widget details header. Close details and click dashboard **Apply changes** button.
+- Fill widget fields with RPC method name and params like in previous steps.
+ Click **Send RPC command** button. You should see the following response in the widget.
+
+
+
+- stop **mqtt-js-rpc-from-server.sh** script.
+ Click **Send RPC command** button. You should see the following response in the widget.
+
+
+
+In this example, **controlApi** is used to send RPC commands. Additionally, custom widget settings were introduced in order to configure RPC command mode and RPC request timeout.
+
+The response from the device is handled by **commandObservable**. It has success and failed callbacks with corresponding response, or rejection objects containing information about request execution result.
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
new file mode 100644
index 0000000000..793da7c7c2
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/static_widget.md
@@ -0,0 +1,72 @@
+#### Sample Static widget
+
+
+
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen and then click the “Create new widget type” button.
+Click the **Static Widget** button on the **Select widget type** popup.
+The **Widget Editor** will be opened pre-populated with the content of default **Static** template widget.
+
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+
My first static widget.
+
+
+{:copy-code}
+```
+
+ - Put the following JSON content inside the "Settings schema" tab of **Settings schema section**:
+
+```json
+{
+ "schema": {
+ "type": "object",
+ "title": "Settings",
+ "properties": {
+ "alertContent": {
+ "title": "Alert content",
+ "type": "string",
+ "default": "Content derived from alertContent property of widget settings."
+ }
+ }
+ },
+ "form": [
+ "alertContent"
+ ]
+}
+{:copy-code}
+```
+
+ - Put the following JavaScript code inside the "JavaScript" section:
+
+```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);
+ };
+
+}
+{:copy-code}
+```
+
+ - Click the **Run** button on the **Widget Editor Toolbar** to see the resulting **Widget preview** section.
+
+
+
+This is just a static HTML widget. There is no subscription data and no special widget API was used.
+
+Only custom **showAlert** function was implemented showing an alert with the content of **alertContent** property of widget settings.
+
+You can switch to dashboard edit mode in **Widget preview** section and change value of **alertContent** by changing widget settings in the "Advanced" tab of widget details.
+
+Then you can see that the new alert content is displayed.
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/examples/timeseries_widget.md b/ui-ngx/src/assets/help/en_US/widget/editor/examples/timeseries_widget.md
new file mode 100644
index 0000000000..6dcffbe9e5
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/examples/timeseries_widget.md
@@ -0,0 +1,93 @@
+#### Sample Time-Series widget
+
+
+
+
+In the **Widgets Bundle** view, click the big “+” button at the bottom-right part of the screen, then click the “Create new widget type” button.
+Click the **Time-Series** button on the **Select widget type** popup.
+The **Widget Editor** will open, pre-populated with default **Time-Series** template widget content.
+
+ - Replace content of the CSS tab in "Resources" section with the following one:
+
+```css
+.my-data-table th {
+ text-align: left;
+}
+{:copy-code}
+```
+
+ - Put the following HTML code inside the HTML tab of "Resources" section:
+
+```html
+
+
+
+
+
+ | Timestamp |
+ {{dataKeyData.dataKey.label}} |
+
+
+
+
+ | {{data[0] | date : 'yyyy-MM-dd HH:mm:ss'}} |
+ {{dataKeyData.data[$dataIndex] && dataKeyData.data[$dataIndex][1]}} |
+
+
+
+
+
+{:copy-code}
+```
+
+ - Put the following JavaScript code inside the "JavaScript" section:
+
+```javascript
+self.onInit = function() {
+ self.ctx.widgetTitle = 'My first Time-Series widget';
+ self.ctx.$scope.datasources = self.ctx.defaultSubscription.datasources;
+ self.ctx.$scope.data = self.ctx.defaultSubscription.data;
+
+ self.ctx.$scope.datasourceData = [];
+
+ var currentDatasource = null;
+ var currentDatasourceIndex = -1;
+
+ for (var i=0;i **datasources** and **data** properties are assigned to **$scope** and become accessible within the HTML template.
+
+The **$scope.datasourceData** property is introduced to map datasource specific dataKeys data by datasource index for flexible access within the HTML template.
+
+Inside the HTML, a special [***ngFor**{:target="_blank"}](https://angular.io/api/common/NgForOf) structural angular directive is used in order to iterate over available datasources and render corresponding tabs.
+
+Inside each tab, the table is rendered using dataKeys obtained from **datasourceData** scope property accessed by datasource index.
+
+Each table renders columns by iterating over all **dataKeyData** objects and renders all available datapoints by iterating over **data** array of each **dataKeyData** to render timestamps and values.
+
+Note that in this code, **onDataUpdated** function is implemented with a call to **detectChanges** function necessary to perform new change detection cycle when new data is received.
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_action_sources_object.md b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_action_sources_object.md
new file mode 100644
index 0000000000..16025b6cfd
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_action_sources_object.md
@@ -0,0 +1,17 @@
+#### Action sources object
+
+
+
+
+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)) to which user actions can be assigned. It has the following structure:
+
+```javascript
+ return {
+ 'headerButton': { // Action source Id (unique action source identificator)
+ name: 'widget-action.header-button', // Display name of action source, used in widget settings ('Actions' tab).
+ value: 'headerButton', // Action source Id
+ multiple: true // Boolean property indicating if this action source supports multiple action definitions
+ // (for ex. multiple buttons in one cell, or only one action can by assigned on table row click.)
+ }
+ };
+```
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_existing_code.md b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_existing_code.md
new file mode 100644
index 0000000000..90585077a5
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_existing_code.md
@@ -0,0 +1,62 @@
+#### Using existing JavaScript/Typescript code
+
+
+
+
+Another approach of creating widgets is to use existing bundled JavaScript/Typescript code.
+
+In this case, you can create own TypeScript class or Angular component and bundle it into the ThingsBoard UI code.
+
+In order to make this code accessible within the widget, you need to register corresponding Angular module or inject TypeScript class to a global variable (for ex. window object).
+
+Some ThingsBoard widgets already use this approach. Take a look at the [widget-component-service.ts{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/modules/home/components/widget/widget-component.service.ts#L140)
+or [widget-components.module.ts{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts#L50).
+Here you can find how some bundled classes or components are registered for later use in ThingsBoard widgets.
+
+For example "Timeseries - Flot" widget (from "Charts" Widgets Bundle) uses [**TbFlot**{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts#L73) TypeScript class which is injected as window property inside **widget-component-service.ts**:
+
+```typescript
+...
+
+const widgetModulesTasks: Observable[] = [];
+...
+
+widgetModulesTasks.push(from(import('@home/components/widget/lib/flot-widget')).pipe(
+ tap((mod) => {
+ (window as any).TbFlot = mod.TbFlot;
+ }))
+);
+...
+
+```
+
+Another example is "Timeseries table" widget (from "Cards" Widgets Bundle) that uses Angular component [**tb-timeseries-table-widget**{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts#L107)
which is registered as dependency of **WidgetComponentsModule** Angular module inside **widget-components.module.ts**.
+Thereby this component becomes available for use inside the widget template HTML.
+
+```typescript
+...
+
+import { TimeseriesTableWidgetComponent } from '@home/components/widget/lib/timeseries-table-widget.component';
+
+...
+
+@NgModule({
+ declarations:
+ [
+...
+ TimeseriesTableWidgetComponent,
+...
+ ],
+...
+ exports: [
+...
+ TimeseriesTableWidgetComponent,
+...
+ ],
+...
+})
+export class WidgetComponentsModule { }
+```
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_fn.md b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_fn.md
new file mode 100644
index 0000000000..2c9cd63475
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_fn.md
@@ -0,0 +1,135 @@
+#### Widget type JavaScript code
+
+
+
+
+All widget related JavaScript code according to the [Widget API{:target="_blank"}](${baseUrl}/docs/user-guide/contribution/widgets-development/#basic-widget-api).
+The built-in variable **self** is a reference to the widget instance.
+Each widget function should be defined as a property of the **self** variable.
+**self** variable has property **ctx** of type [WidgetContext{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/5bb6403407aa4898084832d6698aa9ea6d484889/ui-ngx/src/app/modules/home/models/widget-component.models.ts#L107) - a reference to widget context that has all necessary API and data used by widget instance.
+
+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):*
+
+|{:auto} **Function** | **Description** |
+|------------------------------------|----------------------------------------------------------------------------------------|
+| ``` 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 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. |
+| ``` typeParameters() ``` | Returns [WidgetTypeParameters{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L151) object describing widget datasource parameters. See | |
+| ``` 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 |
+
+
+
+##### Creating simple widgets
+
+The tutorials below show how to create minimal widgets of each type.
+In order to minimize the amount of code, the Angular framework will be used, on which ThingsBoard UI is actually based.
+By the way, you can always use pure JavaScript or jQuery API in your widget code.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+##### Integrating existing code to create widget definition
+
+Below are some examples demonstrating how external JavaScript libraries or existing code can be reused/integrated to create new widgets.
+
+###### Using external JavaScript library
+
+
+
+
+
+
+
+
+
+
+
+###### Using existing JavaScript/Typescript code
+
+
+
+
+
+
+
+
+##### Widget code debugging tips
+
+The most simple method of debugging is Web console output.
+Just place [**console.log(...)**{:target="_blank"}](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) function inside any part of widget JavaScript code.
+Then click **Run** button to restart widget code and observe debug information in the Web console.
+
+Another and most effective method of debugging is to invoke browser debugger.
+Put [**debugger;**{:target="_blank"}](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement into the place of widget code you are interested in and then click **Run** button to restart widget code.
+Browser debugger (if enabled) will automatically pause code execution at the debugger statement and you will be able to analyze script execution using browser debugging tools.
+
+
+
+##### Further reading
+
+For more information read [Widgets Development Guide{:target="_blank"}](${baseUrl}/docs/user-guide/contribution/widgets-development).
+
+
+
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_subscription_object.md b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_subscription_object.md
new file mode 100644
index 0000000000..4a92fd270e
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_subscription_object.md
@@ -0,0 +1,113 @@
+#### Subscription object
+
+
+
+
+The widget subscription object is instance of [IWidgetSubscription{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/core/api/widget-api.models.ts#L264") and contains all subscription information, including current data, according to the [widget type{:target="_blank"}](${baseUrl}/docs/user-guide/ui/widget-library/#widget-types).
+
+Depending on widget type, subscription object provides different data structures.
+For [Latest values{:target="_blank"}](${baseUrl}/docs/user-guide/ui/widget-library/#latest-values) and [Time-series{:target="_blank"}](${baseUrl}/docs/user-guide/ui/widget-library/#time-series) widget types, it provides the following properties:
+
+- **datasources** - array of datasources (Array<[Datasource{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L279)>) used by this subscription, using the following structure:
+
+```javascript
+ datasources = [
+ { // datasource
+ type: 'entity',// type of the datasource. Can be "function" or "entity"
+ name: 'name', // name of the datasource (in case of "entity" usually Entity name)
+ aliasName: 'aliasName', // name of the alias used to resolve this particular datasource Entity
+ entityName: 'entityName', // name of the Entity used as datasource
+ entityType: 'DEVICE', // datasource Entity type (for ex. "DEVICE", "ASSET", "TENANT", etc.)
+ entityId: '943b8cd0-576a-11e7-824c-0b1cb331ec92', // entity identificator presented as string uuid.
+ dataKeys: [ // array of keys (Array) (attributes or timeseries) of the entity used to fetch data
+ { // dataKey
+ name: 'name', // the name of the particular entity attribute/timeseries
+ type: 'timeseries', // type of the dataKey. Can be "timeseries", "attribute" or "function"
+ label: 'Sin', // label of the dataKey. Used as display value (for ex. in the widget legend section)
+ color: '#ffffff', // color of the key. Can be used by widget to set color of the key data (for ex. lines in line chart or segments in the pie chart).
+ funcBody: "", // only applicable for datasource with type "function" and "function" key type. Defines body of the function to generate simulated data.
+ settings: {} // dataKey specific settings with structure according to the defined Data key settings json schema. See "Settings schema section".
+ },
+ //...
+ ]
+ },
+ //...
+ ]
+```
+
+- **data** - array of latest data (Array<[DatasourceData{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L310)>) received in scope of this subscription, using the following structure:
+
+```javascript
+ data = [
+ {
+ datasource: {}, // datasource object of this data. See datasource structure above.
+ dataKey: {}, // dataKey for which the data is held. See dataKey structure above.
+ data: [ // array of data points
+ [ // data point
+ 1498150092317, // unix timestamp of datapoint in milliseconds
+ 1, // value, can be either string, numeric or boolean
+ ],
+ //...
+ ]
+ },
+ //...
+ ]
+```
+
+For [Alarm widget{:target="_blank"}](${baseUrl}/docs/user-guide/ui/widget-library/#alarm-widget) type it provides the following properties:
+
+- **alarmSource** - ([Datasource{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L279)) information about entity for which alarms are fetched, using the following structure:
+
+```javascript
+ alarmSource = {
+ type: 'entity',// type of the alarm source. Can be "function" or "entity"
+ name: 'name', // name of the alarm source (in case of "entity" usually Entity name)
+ aliasName: 'aliasName', // name of the alias used to resolve this particular alarm source Entity
+ entityName: 'entityName', // name of the Entity used as alarm source
+ entityType: 'DEVICE', // alarm source Entity type (for ex. "DEVICE", "ASSET", "TENANT", etc.)
+ entityId: '943b8cd0-576a-11e7-824c-0b1cb331ec92', // entity identificator presented as string uuid.
+ dataKeys: [ // array of keys indicating alarm fields used to display alarms data
+ { // dataKey
+ name: 'name', // the name of the particular alarm field
+ type: 'alarm', // type of the dataKey. Only "alarm" in this case.
+ label: 'Severity', // label of the dataKey. Used as display value (for ex. as a column title in the Alarms table)
+ color: '#ffffff', // color of the key. Can be used by widget to set color of the key data.
+ settings: {} // dataKey specific settings with structure according to the defined Data key settings json schema. See "Settings schema section".
+ },
+ //...
+ ]
+ }
+```
+
+- **alarms** - array of alarms (Array<[Alarm{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/alarm.models.ts#L89)>) received in scope of this subscription, using the following structure:
+
+```javascript
+ alarms = [
+ { // alarm
+ id: { // alarm id
+ entityType: "ALARM",
+ id: "943b8cd0-576a-11e7-824c-0b1cb331ec92"
+ },
+ createdTime: 1498150092317, // Alarm created time (unix timestamp)
+ startTs: 1498150092316, // Alarm started time (unix timestamp)
+ endTs: 1498563899065, // Alarm end time (unix timestamp)
+ ackTs: 0, // Time of alarm acknowledgment (unix timestamp)
+ clearTs: 0, // Time of alarm clear (unix timestamp)
+ originator: { // Originator - id of entity produced this alarm
+ entityType: "ASSET",
+ id: "ceb16a30-4142-11e7-8b30-d5d66714ea5a"
+ },
+ originatorName: "Originator Name", // Name of originator entity
+ type: "Temperature", // Type of the alarm
+ severity: "CRITICAL", // Severity of the alarm ("CRITICAL", "MAJOR", "MINOR", "WARNING", "INDETERMINATE")
+ status: "ACTIVE_UNACK", // Status of the alarm
+ // ("ACTIVE_UNACK" - active unacknowledged,
+ // "ACTIVE_ACK" - active acknowledged,
+ // "CLEARED_UNACK" - cleared unacknowledged,
+ // "CLEARED_ACK" - cleared acknowledged)
+ details: {} // Alarm details object derived from alarm details json.
+ }
+ ]
+```
+
+For [RPC{:target="_blank"}](${baseUrl}/docs/user-guide/ui/widget-library/#rpc-control-widget) or [Static{:target="_blank"}](${baseUrl}/docs/user-guide/ui/widget-library/#static) widget types, subscription object is optional and does not contain necessary information.
diff --git a/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_type_parameters_object.md b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_type_parameters_object.md
new file mode 100644
index 0000000000..09ff8ccb93
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/widget/editor/widget_js_type_parameters_object.md
@@ -0,0 +1,14 @@
+#### Type parameters object
+
+
+
+
+Object [WidgetTypeParameters{:target="_blank"}](https://github.com/thingsboard/thingsboard/blob/2627fe51d491055d4140f16617ed543f7f5bd8f6/ui-ngx/src/app/shared/models/widget.models.ts#L151) describing widget datasource parameters. It has the following properties:
+
+```javascript
+ return {
+ maxDatasources: -1, // Maximum allowed datasources for this widget, -1 - unlimited
+ maxDataKeys: -1, //Maximum allowed data keys for this widget, -1 - unlimited
+ dataKeysOptional: false //Whether this widget can be configured with datasources without data keys
+ }
+```
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 1dd50841a3..f28590acc9 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -498,10 +498,12 @@ mat-label {
color: #0F161D;
line-height: normal;
font-weight: 500;
- padding: 30px 32px 10px;
border-bottom: none;
margin: 0;
}
+ & > #{$heading} {
+ padding: 30px 32px 10px;
+ }
}
p {
@@ -575,6 +577,9 @@ mat-label {
margin-bottom: 30px;
overflow: hidden;
table-layout: fixed;
+ &.auto {
+ table-layout: auto;
+ }
& > thead {
background-color: #f9fbff;
@@ -587,10 +592,12 @@ mat-label {
padding: 12px 16px;
text-align: left;
margin: 0;
- word-break: break-word;
@media screen and (max-width: 400px) {
font-size: 12px;
padding: 12px 4px;
+ code:not([class*=language-]) {
+ font-size: 12px;
+ }
}
}
}
@@ -608,11 +615,13 @@ mat-label {
padding: 12px 16px;
text-align: left;
margin: 0;
- word-break: break-word;
color: rgba(15, 22, 29, 0.8);
@media screen and (max-width: 400px) {
font-size: 12px;
padding: 12px 4px;
+ code:not([class*=language-]) {
+ font-size: 12px;
+ }
}
}
}