diff --git a/client/src/app/editor/editor.component.ts b/client/src/app/editor/editor.component.ts
index 109f9f86a..40c2d8ab9 100644
--- a/client/src/app/editor/editor.component.ts
+++ b/client/src/app/editor/editor.component.ts
@@ -1366,10 +1366,19 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
             dialogRef = this.dialog.open(GaugePropertyComponent, {
                 position: { top: '60px' },
                 data: {
-                    settings: tempsettings, devices: Object.values(this.projectService.getDevices()), title: title,
-                    views: hmi.views, dlgType: dlgType, withEvents: eventsSupported, withActions: actionsSupported, default: defaultValue,
+                    settings: tempsettings,
+                    devices: Object.values(this.projectService.getDevices()),
+                    title: title,
+                    views: hmi.views,
+                    view: this.currentView,
+                    dlgType: dlgType,
+                    withEvents: eventsSupported,
+                    withActions: actionsSupported,
+                    default: defaultValue,
                     inputs: Object.values(this.currentView.items).filter(gs => gs.name && (gs.id.startsWith('HXS_') || gs.id.startsWith('HXI_'))),
-                    names: names, scripts: this.projectService.getScripts(), withBitmask: bitmaskSupported
+                    names: names,
+                    scripts: this.projectService.getScripts(),
+                    withBitmask: bitmaskSupported
                 }
             });
         }
diff --git a/client/src/app/fuxa-view/fuxa-view.component.ts b/client/src/app/fuxa-view/fuxa-view.component.ts
index 515865f04..8293d33c5 100644
--- a/client/src/app/fuxa-view/fuxa-view.component.ts
+++ b/client/src/app/fuxa-view/fuxa-view.component.ts
@@ -55,6 +55,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('inputValueRef', {static: false}) inputValueRef: ElementRef;
     @ViewChild('touchKeyboard', {static: false}) touchKeyboard: NgxTouchKeyboardDirective;
 
+    eventViewToPanel = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onViewToPanel);
     eventRunScript = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onRunScript);
     scriptParameterValue = Utils.getEnumKey(ScriptParamType, ScriptParamType.value);
 
@@ -70,7 +71,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
 
     private subscriptionOnChange: Subscription;
     protected staticValues: any = {};
-    protected plainVariableMapping: any = {};
+    protected plainVariableMapping: VariableMappingDictionary = {};
     private destroy$ = new Subject<void>();
 
     constructor(
@@ -130,7 +131,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.variablesMapping = variablesMapped;
             }
             this.variablesMapping?.forEach(variableMapping => {
-                this.plainVariableMapping[variableMapping.from.variableId] = variableMapping.to.variableId;
+                this.plainVariableMapping[variableMapping.from.variableId] = variableMapping.to;
             });
         } catch (err) {
             console.error(err);
@@ -234,7 +235,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
                         let gaugeStatus = this.getGaugeStatus(gaugeSetting);
                         let variables = [];
                         // prepare the start value to precess
-                        if (items[key].property.variableValue && gaugeSetting.property.variableId) {
+                        if (items[key].property.variableValue || gaugeSetting.property.variableId) {
                             let variable: Variable = <Variable>{ id: gaugeSetting.property.variableId, value: gaugeSetting.property.variableValue };
                             if (this.checkStatusValue(gaugeSetting.id, gaugeStatus, variable)) {
                                 variables = [variable];
@@ -359,7 +360,8 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
             return;
         }
         if (this.plainVariableMapping.hasOwnProperty(target.variableId)) {
-            target.variableId = this.plainVariableMapping[target.variableId];
+            target.variableValue = this.plainVariableMapping[target.variableId]?.variableValue;
+            target.variableId = this.plainVariableMapping[target.variableId]?.variableId;
         }
     }
 
@@ -443,6 +445,8 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
                 self.onMonitor(ga, ev, events[i].actparam, events[i].actoptions);
             } else if (events[i].action === this.eventRunScript) {
                 self.onRunScript(events[i]);
+            } else if (events[i].action === this.eventViewToPanel) {
+                self.onSetViewToPanel(events[i]);
             }
         }
     }
@@ -634,7 +638,7 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    private loadPage(event, viewref: string, options: any) {
+    loadPage(event: GaugeEvent, viewref: string, options: any) {
         let view: View = this.getView(viewref);
         if (view) {
             if (options?.variablesMapping) {
@@ -819,6 +823,13 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
         dialogRef.afterClosed().subscribe();
     }
 
+    onSetViewToPanel(event: GaugeEvent) {
+        if (event.actparam && event.actoptions) {
+            let panel = <FuxaViewComponent>this.mapControls[event.actoptions['panelId']];
+            panel.loadPage(event, event.actparam, event.actoptions);
+        }
+    }
+
     getCardHeight(height) {
         return parseInt(height) + 4;
     }
@@ -913,6 +924,15 @@ export class FuxaViewComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 }
 
+interface VariableMappingType {
+    variableId: string;
+    variableValue: any;
+}
+
+interface VariableMappingDictionary {
+    [key: string]: VariableMappingType;
+}
+
 export class CardModel {
     public id: string;
     public name: string;
diff --git a/client/src/app/gauges/gauge-property/flex-event/flex-event.component.html b/client/src/app/gauges/gauge-property/flex-event/flex-event.component.html
index 145cae8d3..42cd2b917 100644
--- a/client/src/app/gauges/gauge-property/flex-event/flex-event.component.html
+++ b/client/src/app/gauges/gauge-property/flex-event/flex-event.component.html
@@ -4,7 +4,7 @@
             <mat-icon>clear</mat-icon>
         </button>
     </div>
-    <div style="display: inline-block;">
+    <div class="inbk" style="vertical-align: top;">
         <div class="my-form-field" style="width: 140px;">
             <span>{{'gauges.property-event-type' | translate}}</span>
             <mat-select [(value)]="item.type">
@@ -30,10 +30,28 @@
         </div>
     </div>
     <div class="my-form-field" style="width: 240px;padding-left: 20px" *ngIf="withDestination(item.action)">
-        <span>{{'gauges.property-event-destination' | translate}}</span>
-        <mat-select [(value)]="item.actparam">
-            <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
-        </mat-select>
+        <ng-container *ngIf="isWithPanel(item.action); else destination" class="inbk" style="vertical-align: top;">
+            <div class="my-form-field block" style="width: 200px;">
+                <span>{{'gauges.property-event-destination-panel' | translate}}</span>
+                <mat-select [(value)]="item.actoptions.panelId">
+                    <mat-option *ngFor="let panel of viewPanels; index as i" [value]="panel.id">{{panel.name}}</mat-option>
+                </mat-select>
+            </div>
+            <div class="my-form-field block mt5" style="width: 200px;">
+                <span>{{'gauges.property-event-destination' | translate}}</span>
+                <mat-select [(value)]="item.actparam">
+                    <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
+                </mat-select>
+            </div>    
+        </ng-container>
+        <ng-template #destination>
+            <div class="my-form-field lbk" style="width: 200px;">
+                <span>{{'gauges.property-event-destination' | translate}}</span>
+                <mat-select [(value)]="item.actparam">
+                    <mat-option *ngFor="let v of views; index as i" [value]="v.id">{{v.name}}</mat-option>
+                </mat-select>
+            </div>
+        </ng-template>
         <div *ngIf="withPosition(item.action)" class="table mt5">
             <div class="my-form-field lbk">
                 <span>{{'general-x' | translate}}</span>
diff --git a/client/src/app/gauges/gauge-property/flex-event/flex-event.component.ts b/client/src/app/gauges/gauge-property/flex-event/flex-event.component.ts
index 1c40adca7..de089f94e 100644
--- a/client/src/app/gauges/gauge-property/flex-event/flex-event.component.ts
+++ b/client/src/app/gauges/gauge-property/flex-event/flex-event.component.ts
@@ -16,6 +16,7 @@ import { Script, ScriptParam, SCRIPT_PARAMS_MAP } from '../../../_models/script'
 import { Utils } from '../../../_helpers/utils';
 import { HtmlInputComponent } from '../../controls/html-input/html-input.component';
 import { HtmlSelectComponent } from '../../controls/html-select/html-select.component';
+import { PanelComponent } from '../../controls/panel/panel.component';
 
 
 @Component({
@@ -43,6 +44,8 @@ export class FlexEventComponent implements OnInit {
                          Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onwindow),
                          Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.oniframe)];
     cardDestination = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onwindow);
+    panelDestination = Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onViewToPanel);
+    viewPanels: PanelData[];
 
     constructor(private translateService: TranslateService) {
     }
@@ -57,7 +60,7 @@ export class FlexEventComponent implements OnInit {
             this.eventType[Utils.getEnumKey(GaugeEventType, GaugeEventType.mousedown)] = this.translateService.instant(GaugeEventType.mousedown);
             this.eventType[Utils.getEnumKey(GaugeEventType, GaugeEventType.mouseup)] = this.translateService.instant(GaugeEventType.mouseup);
         }
-
+        this.viewPanels = <PanelData[]>Object.values(this.data.view?.items ?? [])?.filter((item: any) => item.type === PanelComponent.TypeTag);
         this.enterActionType[Utils.getEnumKey(GaugeEventActionType, GaugeEventActionType.onRunScript)] = this.translateService.instant(GaugeEventActionType.onRunScript);
 
         Object.keys(this.actionType).forEach(key => {
@@ -126,7 +129,8 @@ export class FlexEventComponent implements OnInit {
         let b = Object.values(this.actionType).indexOf(GaugeEventActionType.onpage);
         let c = Object.values(this.actionType).indexOf(GaugeEventActionType.onwindow);
         let d = Object.values(this.actionType).indexOf(GaugeEventActionType.ondialog);
-        return a === b || a === c || a === d;
+        let e = Object.values(this.actionType).indexOf(GaugeEventActionType.onViewToPanel);
+        return a === b || a === c || a === d || a === e;
     }
 
     withPosition(eventAction: GaugeEventActionType) {
@@ -187,6 +191,12 @@ export class FlexEventComponent implements OnInit {
         return type === 'enter' || type === 'select';
     }
 
+    isWithPanel(action) {
+        let a = Object.keys(this.actionType).indexOf(action);
+        let b = Object.values(this.actionType).indexOf(GaugeEventActionType.onViewToPanel);
+        return a === b;
+    }
+
     private addEvent(ge: GaugeEvent) {
         if (!this.events) {
             this.events = [];
@@ -194,3 +204,8 @@ export class FlexEventComponent implements OnInit {
         this.events.push(ge);
     }
 }
+
+interface PanelData {
+    id: string;
+    name: string;
+}
diff --git a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.css b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.css
deleted file mode 100644
index 02dacc734..000000000
--- a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.flex-variable-mapping {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-    padding-bottom: 3px;
-    padding-top: 3px;
-}
diff --git a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.html b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.html
index fcc2cd372..f3084c564 100644
--- a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.html
+++ b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.html
@@ -1,4 +1,6 @@
 <div class="flex-variable-mapping">
+    <div class="flex-join">
+    </div>
     <div style="display: inline-block;">
         <flex-variable style="display: block"
                        [(value)]="value.from"
@@ -18,10 +20,5 @@
                        [devicesOnly]="true">
         </flex-variable>
     </div>
-    <div style="display: inline-block;">
-        <div style="display: inline-block; margin-bottom: 2px; width: 12px; border-radius: 2px; height: 45px; 
-            border-radius: 0px 3px 3px 0px; border-top: 2px solid #cacaca; border-right: 2px solid #cacaca; border-bottom: 2px solid #cacaca;">
-        </div>
-    </div>
     <ng-content></ng-content>
 </div>
\ No newline at end of file
diff --git a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.scss b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.scss
new file mode 100644
index 000000000..f6bdb7c97
--- /dev/null
+++ b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.scss
@@ -0,0 +1,23 @@
+:host {
+    .flex-variable-mapping {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        padding-bottom: 3px;
+        padding-top: 3px;
+    }
+    
+    .flex-join {
+        float: left;
+        position: relative;
+        left: 0px;
+        top: 28px;
+        margin-bottom: 2px;
+        width: 8px;
+        border-radius: 2px;
+        height: 45px; 
+        margin-right: 3px;
+        border-radius: 3px 0px 0px 3px;
+        border-top: 2px solid #cacaca;
+        border-left: 2px solid #cacaca;
+        border-bottom: 2px solid #cacaca;
+    }
+}
\ No newline at end of file
diff --git a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.ts b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.ts
index a4f420151..f99ce9b72 100644
--- a/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.ts
+++ b/client/src/app/gauges/gauge-property/flex-variable-map/flex-variable-map.component.ts
@@ -4,7 +4,7 @@ import { IPropertyVariable, View } from '../../../_models/hmi';
 @Component({
     selector: 'flex-variable-map',
     templateUrl: './flex-variable-map.component.html',
-    styleUrls: ['./flex-variable-map.component.css']
+    styleUrls: ['./flex-variable-map.component.scss']
 })
 export class FlexVariableMapComponent implements OnInit {
     @Input() view: View;
diff --git a/client/src/app/gauges/gauge-property/gauge-property.component.spec.ts b/client/src/app/gauges/gauge-property/gauge-property.component.spec.ts
deleted file mode 100644
index 312ce4b77..000000000
--- a/client/src/app/gauges/gauge-property/gauge-property.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import {GaugePropertyComponent} from './gauge-property.component';
-
-describe('GaugePropertyComponent', () => {
-  let component: GaugePropertyComponent;
-  let fixture: ComponentFixture<GaugePropertyComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [GaugePropertyComponent]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GaugePropertyComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/client/src/app/gauges/gauge-property/gauge-property.component.ts b/client/src/app/gauges/gauge-property/gauge-property.component.ts
index 35786c8c3..ae24f60fe 100644
--- a/client/src/app/gauges/gauge-property/gauge-property.component.ts
+++ b/client/src/app/gauges/gauge-property/gauge-property.component.ts
@@ -216,3 +216,20 @@ export class DialogGaugePermission {
         this.dialogRef.close(this.data);
     }
 }
+
+// export interface GaugePropertyData {
+//     settings: any;
+//     //devices: Device[];
+//     title: string;
+//     //views: View[];
+//     view: View;
+//     dlgType: GaugeDialogType;
+//     withEvents: boolean;
+//     withActions: boolean;
+//     default: any;
+//     withBitmask: boolean;
+
+//     //inputs: Object.values(this.currentView.items).filter(gs => gs.name && (gs.id.startsWith('HXS_') || gs.id.startsWith('HXI_'))),
+//     // let names = Object.values(this.currentView.items).map(gs => gs.name);
+//     // scripts: this.projectService.getScripts(),
+// }
diff --git a/client/src/assets/i18n/en.json b/client/src/assets/i18n/en.json
index cb24b1b12..c3ae446d4 100644
--- a/client/src/assets/i18n/en.json
+++ b/client/src/assets/i18n/en.json
@@ -944,6 +944,7 @@
     "gauges.property-event-type": "Type",
     "gauges.property-event-action": "Action",
     "gauges.property-event-destination": "Destination",
+    "gauges.property-event-destination-panel": "Panel",
     "gauges.property-event-destination-hide-close": "Hide Close",
     "gauges.property-event-single-card": "Single Card",
     "gauges.property-event-value": "Value",