diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 256f6e7f9f..be894459b0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -85,6 +85,41 @@
               <span class="label-wrapper">{{key.label}}</span>
             </mat-checkbox>
           </div>
+          <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'JSON'">
+            <mat-form-field class="mat-block">
+              <mat-label>{{key.label}}</mat-label>
+              <input
+                matInput
+                type="text"
+                formControlName="{{key.formId}}"
+                tb-json-to-string
+                [readonly]="key.settings.isEditable === 'readonly'"
+                [required]="key.settings.required"
+                (focus)="key.isFocused = true; focusInputElement($event)"
+                (blur)="key.isFocused = false; inputChanged(source, key)"
+              />
+              <ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matPrefix>
+                <mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
+                <ng-template #customToggleIcon>
+                  <img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
+                </ng-template>
+              </ng-container>
+              <button [disabled]="key.settings.isEditable === 'disabled' || key.settings.isEditable === 'readonly'"
+                      type="button"
+                      matSuffix
+                      mat-button
+                      mat-icon-button
+                      (click)="openEditJSONDialog($event, key, source)">
+                <mat-icon>open_in_new</mat-icon>
+              </button>
+              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
+                {{ getErrorMessageText(key.settings,'required') }}
+              </mat-error>
+              <mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('invalidJSON')">
+                {{ 'value.json-value-invalid' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </div>
           <div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'">
             <mat-slide-toggle formControlName="{{key.formId}}"
                               [labelPosition]="key.settings.slideToggleLabelPosition"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index 51b6d6629f..070336b3f0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -30,6 +30,7 @@ import {
   isDefinedAndNotNull,
   isEqual,
   isNotEmptyStr,
+  isString,
   isUndefined
 } from '@core/utils';
 import { EntityType } from '@shared/models/entity-type.models';
@@ -42,13 +43,15 @@ import { forkJoin, Observable, Subject } from 'rxjs';
 import { EntityId } from '@shared/models/id/entity-id';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { takeUntil } from 'rxjs/operators';
+import { JsonObjectEditDialogComponent, JsonObjectEditDialogData } from '@shared/components/dialog/json-object-edit-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 type FieldAlignment = 'row' | 'column';
 
 type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
-type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
-                                           'booleanCheckbox' | 'booleanSwitch' |
+export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
+                                           'JSON'| 'booleanCheckbox' | 'booleanSwitch' |
                                            'dateTime' | 'date' | 'time' | 'select';
 type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
 
@@ -103,6 +106,9 @@ interface MultipleInputWidgetDataKeySettings {
   useSetValueFunction?: boolean;
   setValueFunctionBody?: string;
   setValueFunction?: ConvertSetValueFunction;
+  saveButtonLabel?: string;
+  resetButtonLabel?: string;
+  dialogLabel?: string;
 }
 
 interface MultipleInputWidgetDataKey extends DataKey {
@@ -161,7 +167,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
               private fb: UntypedFormBuilder,
               private attributeService: AttributeService,
               private translate: TranslateService,
-              private sanitizer: DomSanitizer) {
+              private sanitizer: DomSanitizer,
+              private dialog: MatDialog) {
     super(store);
   }
 
@@ -425,6 +432,13 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
             case 'select':
               value = keyValue !== null ? keyValue.toString() : null;
               break;
+            case 'JSON':
+              try {
+                value = JSON.parse(keyData[0][1]);
+              } catch (e) {
+                value = keyData[0][1] ? keyData[0][1] : null;
+              }
+              break;
             default:
               value = keyValue;
           }
@@ -718,4 +732,31 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
     });
     this.multipleInputFormGroup.markAsPristine();
   }
+
+  openEditJSONDialog($event: Event, key: MultipleInputWidgetDataKey, source: MultipleInputWidgetSource) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    const formControl = this.multipleInputFormGroup.controls[key.formId];
+    this.dialog.open<JsonObjectEditDialogComponent, JsonObjectEditDialogData, object>(JsonObjectEditDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        jsonValue: formControl.value,
+        title:  key.settings.dialogLabel,
+        saveLabel: key.settings.saveButtonLabel,
+        undoLabel: key.settings.saveButtonLabel
+      }
+    }).afterClosed().subscribe(
+      (res) => {
+        if (!isEqual(res, formControl.value)) {
+          formControl.patchValue(res);
+          formControl.markAsDirty();
+          if(!this.settings.showActionButtons) {
+            this.inputChanged(source, key);
+          }
+        }
+      }
+    );
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 186583d5c1..c3b86ac8af 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -48,6 +48,9 @@
           <mat-option [value]="'integer'">
             {{ 'widgets.input-widgets.datakey-value-type-integer' | translate }}
           </mat-option>
+          <mat-option [value]="'JSON'">
+            {{ 'widgets.input-widgets.datakey-value-type-json' | translate }}
+          </mat-option>
           <mat-option [value]="'booleanCheckbox'">
             {{ 'widgets.input-widgets.datakey-value-type-boolean-checkbox' | translate }}
           </mat-option>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
index 56ab12605d..47eee06cb3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.ts
@@ -24,6 +24,7 @@ import {
   dataKeySelectOptionValidator
 } from '@home/components/widget/lib/settings/input/datakey-select-option.component';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { MultipleInputWidgetDataKeyValueType } from '@home/components/widget/lib/multiple-input-widget.component';
 
 @Component({
   selector: 'tb-update-multiple-attributes-key-settings',
@@ -130,7 +131,7 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
 
   protected updateValidators(emitEvent: boolean) {
     const dataKeyHidden: boolean = this.updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value;
-    const dataKeyValueType: string = this.updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value;
+    const dataKeyValueType: MultipleInputWidgetDataKeyValueType = this.updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value;
     const required: boolean = this.updateMultipleAttributesKeySettingsForm.get('required').value;
     const isEditable: string = this.updateMultipleAttributesKeySettingsForm.get('isEditable').value;
     const useCustomIcon: boolean = this.updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value;
@@ -244,7 +245,7 @@ export class UpdateMultipleAttributesKeySettingsComponent extends WidgetSettings
     const dataKeyHidden: boolean = this.updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value;
     const required: boolean = this.updateMultipleAttributesKeySettingsForm.get('required').value;
     const dataKeyValueType: string = this.updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value;
-    return !dataKeyHidden && (required || (['integer', 'double', 'dateTime', 'date', 'time'].includes(dataKeyValueType)));
+    return !dataKeyHidden && (required || (['integer', 'double', 'dateTime', 'date', 'time', 'JSON'].includes(dataKeyValueType)));
   }
 }
 
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
index a4096da67c..8fc3418808 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -45,12 +45,12 @@
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>
-      {{ 'action.cancel' | translate }}
+      {{ undoButtonLabel }}
     </button>
     <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || jsonFormGroup.invalid || !jsonFormGroup.dirty">
-      {{ 'action.save' | translate }}
+      {{ saveButtonLabel }}
     </button>
   </div>
 </form>
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
index b1ca78b78a..95c163b288 100644
--- a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
@@ -26,6 +26,8 @@ import { TranslateService } from '@ngx-translate/core';
 export interface JsonObjectEditDialogData {
   jsonValue: object;
   title?: string;
+  saveLabel?: string;
+  undoLabel?: string;
 }
 
 @Component({
@@ -37,6 +39,8 @@ export class JsonObjectEditDialogComponent extends DialogComponent<JsonObjectEdi
 
   jsonFormGroup: UntypedFormGroup;
   title: string;
+  saveButtonLabel: string;
+  undoButtonLabel: string;
 
   submitted = false;
 
@@ -51,6 +55,8 @@ export class JsonObjectEditDialogComponent extends DialogComponent<JsonObjectEdi
 
   ngOnInit(): void {
     this.title = this.data.title ? this.data.title : this.translate.instant('details.edit-json');
+    this.saveButtonLabel = this.data.saveLabel ? this.data.saveLabel : this.translate.instant('action.save');
+    this.undoButtonLabel = this.data.undoLabel ? this.data.undoLabel : this.translate.instant('action.cancel');
     this.jsonFormGroup = this.fb.group({
       json: [this.data.jsonValue, []]
     });
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index c82ae61644..62b519f296 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -444,6 +444,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     HtmlComponent,
     FabTriggerDirective,
     FabActionsDirective,
+    TbJsonToStringDirective,
     FabToolbarComponent,
     WidgetsBundleSelectComponent,
     ValueInputComponent,
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 4cee9d355b..f86e131995 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4589,6 +4589,7 @@
             "datakey-value-type-string": "String",
             "datakey-value-type-double": "Double",
             "datakey-value-type-integer": "Integer",
+            "datakey-value-type-json": "JSON",
             "datakey-value-type-boolean-checkbox": "Boolean (Checkbox)",
             "datakey-value-type-boolean-switch": "Boolean (Switch)",
             "datakey-value-type-date-time": "Date & Time",
@@ -4614,6 +4615,7 @@
             "min-value-error-message": "'Min value' error message",
             "max-value-error-message": "'Max value' error message",
             "invalid-date-error-message": "'Invalid date' error message",
+            "invalid-JSON-error-message": "'Invalid JSON' error message",
             "icon-settings": "Icon settings",
             "use-custom-icon": "Use custom icon",
             "input-cell-icon": "Icon to show before input cell",