Update logic for markdown and QR code widgets

ui-ngx/src/app/core/utils.ts

@@ -25,6 +25,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { letterSpacing } from 'html2canvas/dist/types/css/property-descriptors/letter-spacing';
 import { TranslateService } from '@ngx-translate/core';
 import { serverErrorCodesTranslations } from '@shared/models/constants';
+import { isNotNullOrUndefined } from 'codelyzer/util/isNotNullOrUndefined';
 
 const varsRegex = /\${([^}]*)}/g;
 
@@ -479,6 +480,19 @@ export function flatFormattedData(input: FormattedData[]): FormattedData {
   return result;
 }
 
+export function filteringData(data: FormattedData[]): FormattedData {
+  const processingKeyValue = {};
+  for (const deviceData of data) {
+    Object.keys(deviceData).forEach((valueKey) => {
+      if (!isNotNullOrUndefined(processingKeyValue[valueKey]) && isNotNullOrUndefined(deviceData[valueKey]) &&
+        deviceData[valueKey] !== '') {
+        processingKeyValue[valueKey] = deviceData[valueKey];
+      }
+    });
+  }
+  return processingKeyValue as FormattedData;
+}
+
 export function mergeFormattedData(first: FormattedData[], second: FormattedData[]): FormattedData[] {
   const merged = first.concat(second);
   return _(merged).groupBy(el => el.$datasource)

ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts

@@ -23,12 +23,11 @@ import { DatasourceData, FormattedData } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
   createLabelFromPattern,
-  fillDataPattern,
-  flatFormattedData,
+  filteringData,
   formattedDataFormDatasourceData,
   hashCode, isDefinedAndNotNull,
   isNotEmptyStr,
-  parseFunction, processDataPattern,
+  parseFunction,
   safeExecute
 } from '@core/utils';
 import cssjs from '@core/css/css';
@@ -119,7 +118,8 @@ export class MarkdownWidgetComponent extends PageComponent implements OnInit {
     const data = formattedDataFormDatasourceData(initialData);
     let markdownText = this.settings.useMarkdownTextFunction ?
       safeExecute(this.markdownTextFunction, [data]) : this.settings.markdownTextPattern;
-    markdownText = createLabelFromPattern(markdownText, data[0]);
+    const allData: FormattedData = filteringData(data);
+    markdownText = createLabelFromPattern(markdownText, allData);
     if (this.markdownText !== markdownText) {
       this.markdownText = this.utils.customTranslation(markdownText, markdownText);
       this.cd.detectChanges();

ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts

@@ -23,7 +23,7 @@ import { DatasourceData, FormattedData } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import {
   createLabelFromPattern,
-  flatFormattedData,
+  filteringData,
   formattedDataFormDatasourceData,
   isNumber,
   isObject,
@@ -101,7 +101,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
     const data = formattedDataFormDatasourceData(initialData);
     const pattern = this.settings.useQrCodeTextFunction ?
       safeExecute(this.qrCodeTextFunction, [data]) : this.settings.qrCodeTextPattern;
-    const allData = flatFormattedData(data);
+    const allData: FormattedData = filteringData(data);
     qrCodeText = createLabelFromPattern(pattern, allData);
     this.updateQrCodeText(qrCodeText);
   }
@@ -132,5 +132,4 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
       this.scheduleUpdateCanvas = true;
     }
   }
-
 }

ui-ngx/src/assets/help/en_US/widget/editor/widget_js_markdown_pattern.md

@@ -3,7 +3,7 @@
 <div class="divider"></div>
 <br/>
 
-The Markdown template gets keys only from the first entity in the entity alias.
+The Markdown template displays the value of the first found key in the entities in the entity alias.
 
 <div class="divider"></div>
 <br/>

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4190,7 +4190,7 @@
         "qr-code": {
             "use-qr-code-text-function": "Use QR code text function",
             "qr-code-text-pattern": "QR code text pattern (for ex. '${entityName} | ${keyName} - some text.')",
-            "qr-code-text-pattern-hint": "QR code text pattern get keys only from the first entity in the entity alias.",
+            "qr-code-text-pattern-hint": "QR code text pattern use the value of the first found key in the entities in the entity alias.",
             "qr-code-text-pattern-required": "QR code text pattern is required.",
             "qr-code-text-function": "QR code text function"
         },