diff --git a/src/app/form-builder/edit-panel/edit-panel.component.html b/src/app/form-builder/edit-panel/edit-panel.component.html
index aed7533..ef10150 100644
--- a/src/app/form-builder/edit-panel/edit-panel.component.html
+++ b/src/app/form-builder/edit-panel/edit-panel.component.html
@@ -53,7 +53,7 @@ <h5 class="full-width margin-html">Delegate event</h5>
     <div *ngIf="isSomeGridsterFieldSelected()">
         <h4 class="full-width margin-html">
             Id: {{ dataVariable.id }}
-            <button *ngIf="isSomeGridsterFieldSelected()" mat-icon-button matTooltip="Refactor field ID"
+            <button mat-icon-button matTooltip="Refactor field ID"
                     (click)="openRefactorDialog($event, dataVariable)">
                 <mat-icon>edit</mat-icon>
             </button>
@@ -78,7 +78,7 @@ <h4 class="full-width margin-html">
             </mat-form-field>
         </div>
 
-        <div *ngIf="isSomeGridsterFieldSelected()">
+        <div>
             <mat-form-field class="full-width margin-html">
                 <mat-label>Title</mat-label>
                 <input matInput type="text" [(ngModel)]="dataVariable.title.value" (change)="notifyGridster()">
@@ -199,14 +199,25 @@ <h4 class="full-width margin-html">
             <div *ngIf="dataVariable.component !== undefined" class="full-width">
                 <mat-form-field class="full-width margin-html">
                     <mat-label>Component Name</mat-label>
-                    <input matInput [(ngModel)]="dataVariable.component.name" (change)="setComponent($event);notifyGridster()">
+                    <input matInput [(ngModel)]="dataVariable.component.name" (change)="setComponent($event);notifyGridster()"
+                           [formControl]="componentNameFormCtrl" [matAutocomplete]="componentAutocomplete">
+                    <mat-autocomplete #componentAutocomplete="matAutocomplete" (optionSelected)="setComponent($event);notifyGridster()">
+                        <mat-option *ngFor="let componentDef of filteredComponents(dataVariable.component)" [value]="componentDef.name">
+                            {{componentDef.title}}
+                        </mat-option>
+                    </mat-autocomplete>
                 </mat-form-field>
                 <div>
                     <div *ngIf="dataVariable.component.properties.length > 0">
                         <div *ngFor="let property of dataVariable.component.properties; let i = index" class="margin-html properties">
                             <mat-form-field class="margin-right8px">
-                                <input matInput type="text" placeholder="Key" [value]="property.key"
+                                <input matInput type="text" placeholder="Key" [value]="property.key" [matAutocomplete]="propertyAutocomplete"
                                        (change)="setPropertyKey($event, i, dataVariable.component) ;notifyGridster()">
+                                <mat-autocomplete #propertyAutocomplete="matAutocomplete" (optionSelected)="setPropertyKey($event, i, dataVariable.component);notifyGridster()">
+                                    <mat-option *ngFor="let propertyDef of filteredProperties(dataVariable.component, property.key)" [value]="propertyDef.name">
+                                        {{propertyDef.name}}
+                                    </mat-option>
+                                </mat-autocomplete>
                             </mat-form-field>
                             <mat-form-field class="margin-right8px">
                                 <input matInput type="text" placeholder="Value" [value]="property.value"
@@ -228,6 +239,11 @@ <h4 class="full-width margin-html">
                     <mat-icon>add</mat-icon>
                     Add property
                 </button>
+                <button mat-stroked-button color="primary" class="button-text save-button"
+                        (click)="cloneProperty(dataVariable, dataRef, 'component')">
+                    <mat-icon>move_down</mat-icon>
+                    Copy to DataRef
+                </button>
                 <div *ngIf="isIconEnumeration(dataVariable.type, dataVariable?.component)">
                     <div *ngIf="dataVariable.component.icons.length > 0; else noIcons">
                         <div *ngFor="let icon of dataVariable.component.icons; let i = index" class="margin-html properties">
@@ -272,15 +288,25 @@ <h4 class="full-width margin-html">
             <div *ngIf="dataRef.component !== undefined" class="full-width">
                 <mat-form-field class="full-width">
                     <mat-label>Component Name</mat-label>
-                    <input matInput [(ngModel)]="dataRef.component.name"
-                           (change)="setDataRefComponent($event);notifyGridster()">
+                    <input matInput [(ngModel)]="dataRef.component.name" (change)="setDataRefComponent($event);notifyGridster()"
+                           [formControl]="dataRefComponentNameFormCtrl" [matAutocomplete]="dataRefComponentAutocomplete">
+                    <mat-autocomplete #dataRefComponentAutocomplete="matAutocomplete" (optionSelected)="setComponent($event);notifyGridster()">
+                        <mat-option *ngFor="let componentDef of filteredComponents(dataRef.component)" [value]="componentDef.name">
+                            {{componentDef.title}}
+                        </mat-option>
+                    </mat-autocomplete>
                 </mat-form-field>
                 <div>
                     <div *ngIf="dataRef.component.properties.length > 0">
                         <div *ngFor="let property of dataRef.component.properties; let i = index" class="margin-html properties">
                             <mat-form-field class="margin-right8px">
-                                <input matInput type="text" placeholder="Key" [value]="property.key"
+                                <input matInput type="text" placeholder="Key" [value]="property.key" [matAutocomplete]="dataRefPropertyAutocomplete"
                                        (change)="setPropertyKey($event, i, dataRef.component) ;notifyGridster()">
+                                <mat-autocomplete #dataRefPropertyAutocomplete="matAutocomplete" (optionSelected)="setPropertyKey($event, i, dataRef.component);notifyGridster()">
+                                    <mat-option *ngFor="let propertyDef of filteredProperties(dataRef.component, property.key)" [value]="propertyDef.name">
+                                        {{propertyDef.name}}
+                                    </mat-option>
+                                </mat-autocomplete>
                             </mat-form-field>
                             <mat-form-field class="margin-right8px">
                                 <input matInput type="text" placeholder="Value" [value]="property.value"
@@ -303,6 +329,11 @@ <h4 class="full-width margin-html">
                     <mat-icon>add</mat-icon>
                     Add property
                 </button>
+                <button mat-stroked-button color="primary" class="button-text save-button"
+                        (click)="cloneProperty(dataRef, dataVariable, 'component')">
+                    <mat-icon>move_up</mat-icon>
+                    Copy to DataField
+                </button>
                 <div *ngIf="isIconEnumeration(dataVariable.type, dataRef.component)" >
                     <div *ngIf="dataRef.component.icons.length > 0; else noIcons">
                         <div *ngFor="let icon of dataRef.component.icons; let i = index" class="margin-html properties">
diff --git a/src/app/form-builder/edit-panel/edit-panel.component.ts b/src/app/form-builder/edit-panel/edit-panel.component.ts
index 6feece4..004dd14 100644
--- a/src/app/form-builder/edit-panel/edit-panel.component.ts
+++ b/src/app/form-builder/edit-panel/edit-panel.component.ts
@@ -35,6 +35,8 @@ import {DATE_FORMAT, DATE_TIME_FORMAT, EnumerationFieldValue} from '@netgrif/com
 import {Router} from '@angular/router';
 import {ActionsModeService} from '../../modeler/actions-mode/actions-mode.service';
 import {ActionsMasterDetailService} from '../../modeler/actions-mode/actions-master-detail.setvice';
+import {ComponentDef, DataRefDef, FieldListService, PropertyDef} from '../field-list/field-list.service';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
 
 @Component({
     selector: 'nab-edit-panel',
@@ -72,15 +74,18 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
     filteredOptions: Observable<Array<EnumerationFieldValue>>;
     formControlRef: FormControl;
     transitionOptions: Array<EnumerationFieldValue>;
-
     behaviorOptions;
 
+    componentNameFormCtrl: FormControl;
+    dataRefComponentNameFormCtrl: FormControl;
+
     constructor(public gridsterService: GridsterService,
                 public modelService: ModelService,
                 private dialog: MatDialog,
                 private transitionService: SelectedTransitionService,
                 private _router: Router,
                 private _actionMode: ActionsModeService,
+                private _fieldListService: FieldListService,
                 private _actionsMasterDetail: ActionsMasterDetailService) {
         // this.transitionOptions = [];
         this.formControlRef = new FormControl();
@@ -92,6 +97,8 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
     }
 
     ngOnInit() {
+        this.componentNameFormCtrl = new FormControl();
+        this.dataRefComponentNameFormCtrl = new FormControl();
         this.transId = this.transitionService.id;
         if (this.transId === null) {
             this.numOfCols = ModelerConfig.LAYOUT_DEFAULT_COLS;
@@ -408,8 +415,13 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
         return false;
     }
 
-    setPropertyKey($event, index: number, component: PetriflowComponent) {
-        component.properties[index].key = $event.target.value;
+    public setPropertyKey($event, index: number, component: PetriflowComponent): void {
+        if ($event instanceof MatAutocompleteSelectedEvent) {
+            component.properties[index].key = $event.option.value;
+            this.setPropertyDefaultValue($event, index, component);
+        } else {
+            component.properties[index].key = $event.target.value;
+        }
     }
 
     setPropertyValue($event, index: number, component: PetriflowComponent) {
@@ -440,18 +452,26 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
         }
     }
 
-    setComponent($event) {
+    public setComponent($event): void {
         if (!this.gridsterService.selectedDataField.dataVariable.component) {
             this.gridsterService.selectedDataField.dataVariable.component = new PetriflowComponent('');
         }
-        this.gridsterService.selectedDataField.dataVariable.component.name = $event.target.value;
+        if ($event instanceof MatAutocompleteSelectedEvent) {
+            this.gridsterService.selectedDataField.dataVariable.component.name = $event.option.value;
+        } else {
+            this.gridsterService.selectedDataField.dataVariable.component.name = $event.target.value;
+        }
     }
 
-    setDataRefComponent($event) {
+    public setDataRefComponent($event): void {
         if (!this.gridsterService.selectedDataField.dataRef.component) {
             this.gridsterService.selectedDataField.dataRef.component = new PetriflowComponent('');
         }
-        this.gridsterService.selectedDataField.dataRef.component.name = $event.target.value;
+        if ($event instanceof MatAutocompleteSelectedEvent) {
+            this.gridsterService.selectedDataField.dataRef.component.name = $event.option.value;
+        } else {
+            this.gridsterService.selectedDataField.dataRef.component.name = $event.target.value;
+        }
     }
 
     taskRefTitle(option: EnumerationFieldValue) {
@@ -515,4 +535,41 @@ export class EditPanelComponent implements OnInit, AfterViewInit {
     numberOfActions(): number {
         return this.modelService.numberOfTransitionActions(this.transition);
     }
+
+    filteredComponents(component: PetriflowComponent): Array<ComponentDef> {
+        const componentDefs: DataRefDef =  this._fieldListService.fieldListArray.find(type => type.type === this.dataVariable.type);
+        if (!componentDefs) {
+            return [];
+        }
+        return componentDefs.components.filter(def => def.name !== undefined && def.title.toLowerCase().includes(component.name));
+    }
+
+    public filteredProperties(component: PetriflowComponent, propertyName: string): Array<PropertyDef> {
+        const componentDefs: DataRefDef =  this._fieldListService.fieldListArray.find(type => type.type === this.dataVariable.type);
+        if (!componentDefs) {
+            return [];
+        }
+        const propertyDefs: ComponentDef = componentDefs.components.find(compDef => {
+            return (!component.name && !compDef.name) || (!!component.name && !!compDef.name && component.name === compDef.name);
+        });
+        if (!propertyDefs || !propertyDefs.properties) {
+            return [];
+        }
+        const existingProperties = component.properties.map(compProperty => compProperty.key);
+        return propertyDefs.properties.filter(propDef => propDef.name.includes(propertyName) && !existingProperties.includes(propDef.name));
+    }
+
+    public setPropertyDefaultValue($event: MatAutocompleteSelectedEvent, index: number, component: PetriflowComponent): void {
+        component.properties[index].value = this._fieldListService.fieldListArray
+                                            .find(type => type.type === this.dataVariable.type)?.components
+                                            .find(compDef => (!component.name && !compDef.name) || (!!component.name && !!compDef.name && component.name === compDef.name))?.properties
+                                            .find(propDef => propDef.name === $event.option.value).defaultValue;
+    }
+
+    public cloneProperty(source: DataRef | DataVariable, target: DataRef | DataVariable, property: string): void {
+        if (!(property in source)) {
+            return;
+        }
+        target[property] = source[property].clone();
+    }
 }
diff --git a/src/app/form-builder/field-list/field-list.component.ts b/src/app/form-builder/field-list/field-list.component.ts
index 3c19f36..7003f31 100644
--- a/src/app/form-builder/field-list/field-list.component.ts
+++ b/src/app/form-builder/field-list/field-list.component.ts
@@ -3,8 +3,8 @@ import {MatDialog} from '@angular/material/dialog';
 import {ModelService} from '../../modeler/services/model/model.service';
 import {GridsterService} from '../gridster/gridster.service';
 import {Router} from '@angular/router';
-import {FieldListService} from './field-list.service';
-import {DataType, DataVariable} from '@netgrif/petriflow';
+import {ComponentDef, FieldListService} from './field-list.service';
+import {DataType, DataVariable, Property} from '@netgrif/petriflow';
 import {timer} from 'rxjs';
 import {MatExpansionPanel} from '@angular/material/expansion';
 import {MatSnackBar} from '@angular/material/snack-bar';
@@ -95,6 +95,9 @@ export class FieldListComponent implements OnInit, AfterViewInit {
         if (meta.cols) {
             $event.dataTransfer.setData('cols', meta.cols);
         }
+        if (meta.properties) {
+            $event.dataTransfer.setData('properties', JSON.stringify(meta.properties));
+        }
         this.dragStartHandler($event, false);
     }
 
@@ -104,10 +107,13 @@ export class FieldListComponent implements OnInit, AfterViewInit {
         if (datafield.component?.name) {
             const meta = this.fieldListService.fieldListArray.find(type => type.type === datafield.type).components.find(c => c?.name === datafield.component.name);
             if (meta?.rows) {
-                $event.dataTransfer.setData('rows', meta.rows);
+                $event.dataTransfer.setData('rows', `${meta.rows}`);
             }
             if (meta?.cols) {
-                $event.dataTransfer.setData('cols', meta.cols);
+                $event.dataTransfer.setData('cols', `${meta.cols}`);
+            }
+            if (meta?.properties) {
+                $event.dataTransfer.setData('properties', JSON.stringify(meta.properties));
             }
         }
         this.dragStartHandler($event, true);
@@ -141,13 +147,18 @@ export class FieldListComponent implements OnInit, AfterViewInit {
         this.addDataRef(field, meta);
     }
 
-    private addDataRef(data: DataVariable, meta: any) {
-        this.gridsterService.addDataRef(data, meta.rows, meta.cols, meta.name, {
+    private addDataRef(data: DataVariable, meta: ComponentDef) {
+        const dataRef = this.gridsterService.addDataRef(data, meta.rows, meta.cols, meta.name, {
             x: 0,
             y: 0,
             rows: meta.rows,
             cols: meta.cols
         } as GridsterItem);
+        if (meta.name && meta.properties) {
+            for (const property of meta.properties) {
+                dataRef.component.properties.push(new Property(property.name, property.defaultValue));
+            }
+        }
         this.gridsterService.options.api.optionsChanged();
     }
 
diff --git a/src/app/form-builder/field-list/field-list.service.ts b/src/app/form-builder/field-list/field-list.service.ts
index 478d8c6..0d464e3 100644
--- a/src/app/form-builder/field-list/field-list.service.ts
+++ b/src/app/form-builder/field-list/field-list.service.ts
@@ -1,8 +1,29 @@
 import {Injectable} from '@angular/core';
 import {Subject} from 'rxjs';
-import {DataType} from '@netgrif/petriflow';
+import {DataType, DataVariable, Property} from '@netgrif/petriflow';
 import {GridsterDataField} from '../gridster/classes/gridster-data-field';
 
+export interface PropertyDef {
+    name: string;
+    defaultValue: any;
+}
+
+export interface ComponentDef {
+    title: string;
+    name?: string;
+    rows?: number;
+    cols?: number;
+    properties?: Array<PropertyDef>;
+    showPlaceholder?: boolean;
+}
+
+export interface DataRefDef {
+    type: DataType;
+    components: Array<ComponentDef>;
+    properties?: Array<PropertyDef>;
+    showPlaceholder?: boolean;
+}
+
 @Injectable({
     providedIn: 'root'
 })
@@ -11,7 +32,7 @@ export class FieldListService {
     static DEFAULT_FIELD_COLS = 2;
     static DEFAULT_FIELD_ROWS = 1;
 
-    fieldListArray: any = [
+    fieldListArray: Array<DataRefDef> = [
         {
             type: DataType.TEXT,
             components: [
@@ -19,14 +40,46 @@ export class FieldListService {
                 {title: 'Area', name: 'textarea', rows: 2, cols: 4},
                 {title: 'Markdown Editor', name: 'richtextarea', rows: 2, cols: 4},
                 {title: 'HTML Editor', name: 'htmltextarea', rows: 2, cols: 4},
-                {title: 'Password', name: 'password'}
+                {title: 'Password', name: 'password'},
+                {title: 'Signature', name: 'signature'}
             ]
         },
         {
             type: DataType.NUMBER,
             components: [
                 {title: 'Simple'},
-                {title: 'Currency', name: 'currency'}
+                {
+                    title: 'Decimal',
+                    name: 'decimal',
+                    properties: [
+                        {
+                            name: 'digitsInfo',
+                            defaultValue: '1.0-3'
+                        },
+                        {
+                            name: 'locale',
+                            defaultValue: 'sk'
+                        },
+                    ]
+                },
+                {
+                    title: 'Currency',
+                    name: 'currency',
+                    properties: [
+                        {
+                            name: 'code',
+                            defaultValue: 'EUR'
+                        },
+                        {
+                            name: 'fractionSize',
+                            defaultValue: '2'
+                        },
+                        {
+                            name: 'locale',
+                            defaultValue: 'sk'
+                        },
+                    ]
+                }
             ]
         },
         {
@@ -41,10 +94,76 @@ export class FieldListService {
             components: [
                 {title: 'Select'},
                 {title: 'List', name: 'list'},
-                {title: 'Stepper', name: 'stepper'},
-                {title: 'Autocomplete', name: 'autocomplete'},
+                {
+                    title: 'Stepper',
+                    name: 'stepper',
+                    properties: [
+                        {
+                            name: 'arrowStepper',
+                            defaultValue: 'true'
+                        }
+                    ]
+                },
+                {
+                    title: 'Autocomplete',
+                    name: 'autocomplete',
+                    properties: [
+                        {
+                            name: 'filter',
+                            defaultValue: 'prefix'
+                        }
+                    ]
+                },
                 {title: 'Dynamic Autocomplete', name: 'autocomplete_dynamic'},
-                {title: 'Icon', name: 'icon'}
+                {
+                    title: 'Icon',
+                    name: 'icon',
+                    properties: [
+                        {
+                            name: 'horizontal',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'arrow',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'divider',
+                            defaultValue: 'true'
+                        }
+                    ]
+                },
+                {
+                    title: 'Case ref',
+                    name: 'caseref',
+                    showPlaceholder: true,
+                    properties: [
+                        {
+                            name: 'filter',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'filterQuery',
+                            defaultValue: '{}'
+                        },
+                        {
+                            name: 'headers',
+                            defaultValue: 'meta-visualID,meta-mongoID,meta-title,meta-author,meta-creationDate'
+                        },
+                        {
+                            name: 'createCase',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'search',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'filter',
+                            defaultValue: 'true'
+                        },
+                    ]
+                }
             ]
         },
         {
@@ -59,7 +178,47 @@ export class FieldListService {
             components: [
                 {title: 'Select'},
                 {title: 'List', name: 'list'},
-                {title: 'Autocomplete', name: 'autocomplete'}
+                {
+                    title: 'Autocomplete',
+                    name: 'autocomplete',
+                    properties: [
+                        {
+                            name: 'filter',
+                            defaultValue: 'prefix'
+                        }
+                    ]
+                },
+                {
+                    title: 'Case ref',
+                    name: 'caseref',
+                    showPlaceholder: true,
+                    properties: [
+                        {
+                            name: 'filter',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'filterQuery',
+                            defaultValue: '{}'
+                        },
+                        {
+                            name: 'headers',
+                            defaultValue: 'meta-visualID,meta-mongoID,meta-title,meta-author,meta-creationDate'
+                        },
+                        {
+                            name: 'createCase',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'search',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'filter',
+                            defaultValue: 'true'
+                        },
+                    ]
+                }
             ]
         },
         {
@@ -78,6 +237,24 @@ export class FieldListService {
                 {title: 'Icon', name: 'icon'},
                 {title: 'FAB', name: 'fab'},
                 {title: 'MiniFAB', name: 'minifab'}
+            ],
+            properties: [
+                {
+                    name: 'dialogText',
+                    defaultValue: ''
+                },
+                {
+                    name: 'dialogTitle',
+                    defaultValue: ''
+                },
+                {
+                    name: 'align',
+                    defaultValue: ''
+                },
+                {
+                    name: 'stretch',
+                    defaultValue: 'true'
+                }
             ]
         },
         {
@@ -96,7 +273,28 @@ export class FieldListService {
             type: DataType.FILE,
             components: [
                 {title: 'Simple'},
-                {title: 'Preview', name: 'preview'}
+                {
+                    title: 'Preview',
+                    name: 'preview',
+                    properties: [
+                        {
+                            name: 'borderWidth',
+                            defaultValue: '0'
+                        },
+                        {
+                            name: 'borderStyle',
+                            defaultValue: 'none'
+                        },
+                        {
+                            name: 'borderColor',
+                            defaultValue: 'black'
+                        },
+                        {
+                            name: 'borderEnabled',
+                            defaultValue: 'true'
+                        }
+                    ]
+                }
             ]
         },
         {
@@ -119,33 +317,109 @@ export class FieldListService {
         },
         {
             type: DataType.FILTER,
+            showPlaceholder: true,
             components: [
-                {title: 'Simple'}
+                {title: 'Simple'},
+                {title: 'Tab view', name: 'filter-tab-view'}
             ]
         },
         {
             type: DataType.I18N,
             components: [
-                {title: 'Simple'},
-                {title: 'Divider', name: 'divider', cols: 4}
+                {
+                    title: 'Text',
+                    name: 'text',
+                    properties: [
+                        {
+                            name: 'plainText',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'boldText',
+                            defaultValue: 'true'
+                        },
+                        {
+                            name: 'textColor',
+                            defaultValue: 'black'
+                        },
+                        {
+                            name: 'fontSize',
+                            defaultValue: '12'
+                        }
+                    ]
+                },
+                {
+                    title: 'Divider',
+                    name: 'divider',
+                    cols: 4,
+                    properties: [
+                        {
+                            name: 'dividerColor',
+                            defaultValue: 'black'
+                        },
+                        {
+                            name: 'fontSize',
+                            defaultValue: '12'
+                        }
+                    ]
+                }
             ]
         },
         {
             type: DataType.TASK_REF,
+            showPlaceholder: true,
             components: [
-                {title: 'Simple', cols: 4}
+                {title: 'Simple', cols: 4},
+                {title: 'Dashboard', name: 'dashboard', cols: 4}
             ]
         },
         {
             type: DataType.CASE_REF,
+            showPlaceholder: true,
             components: [
                 {title: 'Simple'}
+            ],
+            properties: [
+                {
+                    name: 'filter',
+                    defaultValue: 'true'
+                },
+                {
+                    name: 'filterQuery',
+                    defaultValue: '{}'
+                },
+                {
+                    name: 'headers',
+                    defaultValue: 'meta-visualID,meta-mongoID,meta-title,meta-author,meta-creationDate'
+                },
+                {
+                    name: 'createCase',
+                    defaultValue: 'true'
+                },
+                {
+                    name: 'search',
+                    defaultValue: 'true'
+                },
+                {
+                    name: 'filter',
+                    defaultValue: 'true'
+                },
             ]
         },
         {
-            type: 'stringCollection',
+            type: 'stringCollection' as DataType,
             components: [
                 {title: 'Simple'}
+            ],
+            properties: [
+                {
+                    name: 'semicolon',
+                    defaultValue: 'true'
+                },
+                {
+                    name: 'comma',
+                    defaultValue: 'true'
+                }
             ]
         }
     ];
@@ -156,12 +430,12 @@ export class FieldListService {
         this.draggedObjectsStream = new Subject();
     }
 
-    public getComponentMeta(type: DataType, componentName: string) {
+    public getComponentMeta(type: DataType, componentName: string): ComponentDef {
         const meta = {
             rows: FieldListService.DEFAULT_FIELD_ROWS,
             cols: FieldListService.DEFAULT_FIELD_COLS,
             name: componentName
-        };
+        } as ComponentDef;
         if (type === undefined || componentName === undefined) {
             return meta;
         }
@@ -181,4 +455,24 @@ export class FieldListService {
         }
         return meta;
     }
+
+    public isPlaceholderField(dataField: GridsterDataField): boolean {
+        if (!dataField.dataVariable.type) {
+            return true;
+        }
+        const component = !!dataField.dataRef.component ? dataField.dataRef.component : dataField.dataVariable.component;
+        const dataDef = this.fieldListArray.find(it => it.type === dataField.dataVariable.type);
+        const simpleComponent = dataDef.components.find(it => !it.name);
+        if (!component || !component.name) {
+            if (!!simpleComponent && 'showPlaceholder' in simpleComponent) {
+                return simpleComponent.showPlaceholder;
+            }
+            return !!dataDef.showPlaceholder;
+        }
+        const compDef = dataDef.components.find(it => it.name === component.name);
+        if (!compDef || !('showPlaceholder' in compDef)) {
+            return !!dataDef.showPlaceholder;
+        }
+        return !!compDef.showPlaceholder;
+    }
 }
diff --git a/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.html b/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.html
index e371860..bfa711b 100644
--- a/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.html
+++ b/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.html
@@ -1,11 +1,9 @@
 <div fxLayout="row" fxLayoutAlign="start center" class="gridster-item-content min-row-height netgrif-input" *ngIf="!isHidden()">
-    <span *ngIf="dataField.dataVariable.type === DataType.CASE_REF ||
-                 dataField.dataVariable.type === DataType.TASK_REF ||
-                 dataField.dataVariable.type === DataType.FILTER" class="placeholder-text">Placeholder for {{dataField.dataVariable.type}} with id '{{dataField.dataVariable?.id}}'</span>
+    <span *ngIf="fieldListService.isPlaceholderField(dataField)"
+          class="placeholder-text">Placeholder for {{dataField.dataVariable.type}} with id '{{dataField.dataVariable?.id}}'</span>
 
-    <nc-data-field-template *ngIf="dataField.dataVariable.type !== DataType.CASE_REF &&
-                 dataField.dataVariable.type !== DataType.TASK_REF &&
-                 dataField.dataVariable.type !== DataType.FILTER" [additionalFieldProperties]="{taskId: ''}" [dataField]="engineField" [offset]="0" fxFlex >
+    <nc-data-field-template *ngIf="!fieldListService.isPlaceholderField(dataField)"
+                            [additionalFieldProperties]="{taskId: ''}" [dataField]="engineField" [offset]="0" fxFlex >
     </nc-data-field-template>
 </div>
 <div *ngIf="isHidden()" fxLayout="row" fxLayoutAlign="center center" class="gridster-item-content min-row-height hidden-field">
diff --git a/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts b/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts
index 5d5d497..c8c1dfe 100644
--- a/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts
+++ b/src/app/form-builder/gridster/gridster-datafield/gridster-data-field.component.ts
@@ -6,6 +6,7 @@ import {GridsterFieldToEngineFieldService} from '../../../modeler/gridster-field
 import {Subscription} from 'rxjs';
 import moment from 'moment';
 import {DataField, EnumerationField, MultichoiceField} from '@netgrif/components-core';
+import {FieldListService} from '../../field-list/field-list.service';
 
 @Component({
     selector: 'nab-gridster-datafield',
@@ -20,7 +21,9 @@ export class GridsterDataFieldComponent implements OnInit, OnDestroy {
     engineField: DataField<unknown>;
     private _gridsterSubscription: Subscription;
 
-    constructor(private _gridsterService: GridsterService, private _transformService: GridsterFieldToEngineFieldService) {
+    constructor(private _gridsterService: GridsterService,
+                private _transformService: GridsterFieldToEngineFieldService,
+                public fieldListService: FieldListService) {
     }
 
     ngOnDestroy(): void {
diff --git a/src/app/form-builder/gridster/gridster.service.ts b/src/app/form-builder/gridster/gridster.service.ts
index c45ac97..5406d3a 100644
--- a/src/app/form-builder/gridster/gridster.service.ts
+++ b/src/app/form-builder/gridster/gridster.service.ts
@@ -18,7 +18,7 @@ import {
     DataType,
     DataVariable,
     Expression, I18nWithDynamic,
-    LayoutType,
+    LayoutType, Property,
     Template,
     Transition,
     TransitionLayout
@@ -26,7 +26,7 @@ import {
 import {BehaviorSubject, ReplaySubject, Subject} from 'rxjs';
 import {DataFieldUtils} from '../data-field-utils';
 import {SelectedTransitionService} from '../../modeler/selected-transition.service';
-import {FieldListService} from '../field-list/field-list.service';
+import {ComponentDef, FieldListService, PropertyDef} from '../field-list/field-list.service';
 import {ModelerConfig} from '../../modeler/modeler-config';
 import {debounceTime} from 'rxjs/operators';
 
@@ -196,7 +196,7 @@ export class GridsterService {
         return dataVariable;
     }
 
-    public addDataRef(dataVariable: DataVariable, componentRows: number, componentCols: number, componentName: string, item: GridsterItem) {
+    public addDataRef(dataVariable: DataVariable, componentRows: number, componentCols: number, componentName: string, item: GridsterItem): DataRef {
         const dataRef = new DataRef(dataVariable.id);
         dataRef.layout.x = item.x;
         dataRef.layout.y = item.y;
@@ -241,12 +241,20 @@ export class GridsterService {
     }
 
     private addNewDataRef(data: DataVariable, event: DragEvent, item: GridsterItem): DataRef {
-        return this.addDataRef(
+        const newDataRef =  this.addDataRef(
             data,
             +event.dataTransfer.getData('rows'),
             +event.dataTransfer.getData('cols'),
             event.dataTransfer.getData('ref_component'),
             item);
+        const properties: Array<PropertyDef> = JSON.parse(event.dataTransfer.getData('properties'));
+        if (!!properties) {
+            for (const property of properties) {
+                newDataRef.component.properties.push(new Property(property.name, property.defaultValue));
+            }
+        }
+        this.options.api.optionsChanged();
+        return newDataRef;
     }
 
     private createId(type: string) {
diff --git a/src/app/modeler/data-mode/data-detail/data-detail.component.html b/src/app/modeler/data-mode/data-detail/data-detail.component.html
index fcbb243..8bd0376 100644
--- a/src/app/modeler/data-mode/data-detail/data-detail.component.html
+++ b/src/app/modeler/data-mode/data-detail/data-detail.component.html
@@ -98,8 +98,13 @@
 
         <mat-form-field fxFlex="45">
             <mat-label>Component Name</mat-label>
-            <input matInput [(ngModel)]="item.component.name"
-                   (change)="setValue($event,'component-name')">
+            <input matInput [(ngModel)]="item.component.name" (change)="setValue($event,'component-name')"
+                    [formControl]="componentNameFormCtrl" [matAutocomplete]="componentAutocomplete">
+            <mat-autocomplete #componentAutocomplete="matAutocomplete">
+                <mat-option *ngFor="let componentDef of filteredComponents" [value]="componentDef.name">
+                    {{componentDef.title}}
+                </mat-option>
+            </mat-autocomplete>
         </mat-form-field>
 
         <div fxFlex="2.5"></div>
@@ -111,7 +116,12 @@
                         <mat-form-field fxFlex="50" class="margin-right8px">
                             <mat-label>Key</mat-label>
                             <input matInput (change)="setValue($event,'property_key', i)" type="text"
-                                   [value]="property.key">
+                                   [value]="property.key" [matAutocomplete]="propertyAutocomplete">
+                            <mat-autocomplete #propertyAutocomplete="matAutocomplete" (optionSelected)="setValue($event, 'property_key', i)">
+                                <mat-option *ngFor="let propertyDef of filteredProperties(item, property.key)" [value]="propertyDef.name">
+                                    {{propertyDef.name}}
+                                </mat-option>
+                            </mat-autocomplete>
                         </mat-form-field>
                         <mat-form-field fxFlex="50" class="margin-right8px">
                             <mat-label>Value</mat-label>
diff --git a/src/app/modeler/data-mode/data-detail/data-detail.component.ts b/src/app/modeler/data-mode/data-detail/data-detail.component.ts
index 42aa612..4c3f60e 100644
--- a/src/app/modeler/data-mode/data-detail/data-detail.component.ts
+++ b/src/app/modeler/data-mode/data-detail/data-detail.component.ts
@@ -25,6 +25,12 @@ import {HistoryService} from '../../services/history/history.service';
 import {Observable} from 'rxjs';
 import {map, startWith, tap} from 'rxjs/operators';
 import {ModelerUtils} from '../../modeler-utils';
+import {
+    ComponentDef,
+    DataRefDef,
+    FieldListService,
+    PropertyDef
+} from '../../../form-builder/field-list/field-list.service';
 import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
 import {MatChipInputEvent} from '@angular/material/chips';
 
@@ -47,6 +53,7 @@ export class DataDetailComponent implements OnDestroy {
 
     counterEnumMap = 0;
     formControlRef: FormControl;
+    componentNameFormCtrl: FormControl;
     transitionOptions: Array<EnumerationFieldValue>;
     filteredOptions: Observable<Array<EnumerationFieldValue>>;
     typeArray: Array<TypeArray> = [
@@ -75,6 +82,7 @@ export class DataDetailComponent implements OnDestroy {
     public constructor(
         private _masterService: DataMasterDetailService,
         private _modelService: ModelService,
+        private _fieldListService: FieldListService,
         private dialog: MatDialog,
         private _router: Router,
         private _actionMode: ActionsModeService,
@@ -82,6 +90,7 @@ export class DataDetailComponent implements OnDestroy {
         private _historyService: HistoryService
     ) {
         this.formControlRef = new FormControl();
+        this.componentNameFormCtrl = new FormControl();
         this.transitionOptions = this.createTransOptions();
         this._masterService.getSelected$().subscribe(obj => {
             if (this.historyDataSave?.save) {
@@ -147,7 +156,7 @@ export class DataDetailComponent implements OnDestroy {
         });
     }
 
-    setValue($event, variable: string, index?: number): void {
+    public setValue($event, variable: string, index?: number): void {
         switch (variable) {
             case 'id': {
                 this.item.id = $event.target.value;
@@ -217,7 +226,12 @@ export class DataDetailComponent implements OnDestroy {
                 break;
             }
             case 'property_key': {
-                this.item.component.properties[index].key = $event.target.value as string;
+                if ($event instanceof MatAutocompleteSelectedEvent) {
+                    this.item.component.properties[index].key = $event.option.value as string;
+                    this.setPropertyDefaultValue($event, index, this.item);
+                } else {
+                    this.item.component.properties[index].key = $event.target.value as string;
+                }
                 break;
             }
             case 'property_value': {
@@ -387,6 +401,36 @@ export class DataDetailComponent implements OnDestroy {
         return index;
     }
 
+    get filteredComponents(): Array<ComponentDef> {
+        const componentDefs: DataRefDef =  this._fieldListService.fieldListArray.find(type => type.type === this.item.type);
+        if (!componentDefs) {
+            return [];
+        }
+        return componentDefs.components.filter(def => def.name !== undefined && def.title.toLowerCase().includes(this.item.component.name));
+    }
+
+    public filteredProperties(dataVariable: DataVariable, propertyName: string): Array<PropertyDef> {
+        const componentDefs: DataRefDef =  this._fieldListService.fieldListArray.find(type => type.type === dataVariable.type);
+        if (!componentDefs) {
+            return [];
+        }
+        const propertyDefs: ComponentDef = componentDefs.components.find(compDef => {
+            return (!dataVariable.component.name && !compDef.name) || (!!dataVariable.component.name && !!compDef.name && dataVariable.component.name === compDef.name);
+        });
+        if (!propertyDefs || !propertyDefs.properties) {
+            return [];
+        }
+        const existingProperties = dataVariable.component.properties.map(compProperty => compProperty.key);
+        return propertyDefs.properties.filter(propDef => propDef.name.includes(propertyName) && !existingProperties.includes(propDef.name));
+    }
+
+    public setPropertyDefaultValue($event: MatAutocompleteSelectedEvent, index: number, dataVariable: DataVariable): void {
+        dataVariable.component.properties[index].value = this._fieldListService.fieldListArray
+            .find(type => type.type === dataVariable.type)?.components
+            .find(compDef => (!dataVariable.component.name && !compDef.name) || (!!dataVariable.component.name && !!compDef.name && dataVariable.component.name === compDef.name))?.properties
+            .find(propDef => propDef.name === $event.option.value).defaultValue;
+    }
+
     protected readonly DataType = DataType;
     protected readonly Boolean = Boolean;
     protected readonly DataFieldUtils = DataFieldUtils;