diff --git a/catalog-ui/src/app/directives/file-opener/file-opener.ts b/catalog-ui/src/app/directives/file-opener/file-opener.ts
index c09d6fc..4abd257 100644
--- a/catalog-ui/src/app/directives/file-opener/file-opener.ts
+++ b/catalog-ui/src/app/directives/file-opener/file-opener.ts
@@ -51,8 +51,9 @@
 
         scope.onFileSelect = () => {
             scope.onFileUpload({file: scope.importFile});
-            element.html('app/directives/file-opener/file-opener.html');
-            this.$compile(element.contents())(scope);
+            // fix bug 311261
+            // element.html('app/directives/file-opener/file-opener.html');
+            // this.$compile(element.contents())(scope);
         };
 
         scope.getExtensionsWithDot = ():string => {
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index 57da7d9..3ffc9c1 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -38,7 +38,7 @@
     <ng-container *ngIf="!property.isDeclared">
             <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}">Add value to list</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
-            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
     </ng-container>
 
 </div>
@@ -52,6 +52,7 @@
             [expandedChildId]="expandedChildId"
             [propertyNameSearchText]="propertyNameSearchText"
             [readonly]="readonly"
+            [hasChildren]="getHasChildren(prop)"
             (valueChanged)="childValueChanged(prop)"
             (mapKeyChanged)="removeValueFromParent(prop, $event)"
             (expandChild)="expandChildById($event)"
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index 3982e4e..9cf0430 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -46,6 +46,7 @@
     @Input() selectedPropertyId: string;
     @Input() propertyNameSearchText: string;
     @Input() readonly: boolean;
+    @Input() hasChildren: boolean;
 
     @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>();
     @Output() expandChild: EventEmitter<string> = new EventEmitter<string>();
@@ -83,8 +84,10 @@
         this.checkProperty.emit(propName);
     }
 
-    hasChildren = (): number => {
-        return (this.property.valueObj && typeof this.property.valueObj == 'object') ? Object.keys(this.property.valueObj).length : 0;
+    getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children
+        return _.filter((<PropertyFEModel>this.property).flattenedChildren,(prop:DerivedFEProperty)=>{
+            return _.startsWith(prop.propertiesName + '#', property.propertiesName);
+        }).length > 1;
     }
 
     createNewChildProperty = (): void => {
@@ -106,15 +109,26 @@
 
 
             if(!newProps[0].schema.property.isSimpleType){
-                angular.forEach(newProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
+                if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type)
+                    this.updateMapKeyValueOnMainParent(newProps);
+                    if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) {
+                        this.valueChanged.emit(this.property.name);
+                    }
+                }
+            }
+        }
+    }
+
+    updateMapKeyValueOnMainParent(childrenProps: Array<DerivedFEProperty>){
+        if (this.property instanceof PropertyFEModel) {
+            //Update only if all this property parents has key name
+            if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){
+                angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props
                     (<PropertyFEModel>this.property).childPropUpdated(prop);
                 },this);
                 //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added)
-                let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(newProps[0].propertiesName, []);
-                newProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
-                if ( newProps[0].mapKey ) {//prevent saving if it is map item, whem it is list item- the map key is the es type (it will be saved only after user enter key)
-                    this.valueChanged.emit(this.property.name);
-                }
+                let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(childrenProps[0].propertiesName, []);
+                childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.'));
             }
         }
     }
@@ -122,9 +136,9 @@
     childValueChanged = (property: DerivedFEProperty) => { //value of child property changed
 
         if (this.property instanceof PropertyFEModel) { // will always be the case
-            this.property.childPropUpdated(property);
-            this.dataTypeService.checkForCustomBehavior(this.property);
             if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save
+                this.property.childPropUpdated(property);
+                this.dataTypeService.checkForCustomBehavior(this.property);
                 this.valueChanged.emit(this.property.name);
             }
         }
@@ -156,6 +170,14 @@
                         target.setCustomValidity('');
                         _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]);
                         item.mapKey = replaceKey;
+                        //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it.
+                        if(!oldKey && !item.schema.property.isSimpleType){
+                            //Search this map item children and update these value on parent property valueOBj
+                            let mapKeyFlattenChildren:Array<DerivedFEProperty> = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => {
+                                return _.startsWith(prop.propertiesName, item.propertiesName);
+                            });
+                            this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren);
+                        }
                     }
                 }
                 delete itemParent.valueObj[oldKey];
diff --git a/catalog-ui/src/app/services/onboarding-service.ts b/catalog-ui/src/app/services/onboarding-service.ts
index db6c726..3dd7269 100644
--- a/catalog-ui/src/app/services/onboarding-service.ts
+++ b/catalog-ui/src/app/services/onboarding-service.ts
@@ -44,11 +44,21 @@
         this.api = sdcConfig.api;
     }
 
-    getOnboardingComponents = ():ng.IPromise<Array<IComponent>> => {
-        let defer = this.$q.defer<Array<IComponent>>();
+    getOnboardingVSPs = ():ng.IPromise<Array<ICsarComponent>> =>{
+        let defer = this.$q.defer<Array<ICsarComponent>>();
         this.$http.get(this.api.GET_onboarding)
             .then((response:any) => {
-                let onboardingComponents:Array<ICsarComponent> = response.data.results;
+                defer.resolve(response.data.results);
+            },(response) => {
+                defer.reject(response);
+            });
+
+        return defer.promise;
+    };
+
+    getOnboardingComponents = ():ng.IPromise<Array<IComponent>> => {
+        let defer = this.$q.defer<Array<IComponent>>();
+        this.getOnboardingVSPs().then((onboardingComponents:Array<ICsarComponent>) => {
                 let componentsList:Array<IComponent> = new Array();
 
                 onboardingComponents.forEach((obc:ICsarComponent) => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index 98539d6..48fc9db 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -21,9 +21,10 @@
 'use strict';
 import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
     ResourceType} from "app/utils";
-import {CacheService, EventListenerService, ProgressService} from "app/services";
-import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
+import {CacheService, EventListenerService, ProgressService, OnboardingService} from "app/services";
+import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service, ICsarComponent} from "app/models";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+import {Dictionary} from "lodash";
 
 export class Validation {
     componentNameValidationPattern:RegExp;
@@ -91,7 +92,8 @@
         'Sdc.Services.ProgressService',
         '$interval',
         '$filter',
-        '$timeout'
+        '$timeout',
+        'Sdc.Services.OnboardingService'
     ];
 
     constructor(private $scope:IGeneralScope,
@@ -113,7 +115,8 @@
                 private progressService:ProgressService,
                 protected $interval:any,
                 private $filter:ng.IFilterService,
-                private $timeout:ng.ITimeoutService) {
+                private $timeout:ng.ITimeoutService,
+                private onBoardingService:OnboardingService) {
 
         this.initScopeValidation();
         this.initScopeMethods();
@@ -135,6 +138,40 @@
         this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
     };
 
+    private initImportedToscaBrowseFile = ():void =>{
+        // Init the decision if to show onboarding
+        this.$scope.isShowOnboardingSelectionBrowse = false;
+        if (this.$scope.component.isResource() &&
+            this.$scope.isEditMode() &&
+            (<Resource>this.$scope.component).resourceType == ResourceType.VF &&
+            (<Resource>this.$scope.component).csarUUID) {
+            this.$scope.isShowOnboardingSelectionBrowse = true;
+            let onboardCsarFilesMap:Dictionary<string> = this.cacheService.get('onboardCsarFilesMap');
+            // The onboardCsarFilesMap in cache contains map of [packageId]:[vsp display name for brows]
+            // if the map is empty - Do request to BE
+            if(onboardCsarFilesMap) {
+                this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[(<Resource>this.$scope.component).csarUUID];
+            }
+            if(!onboardCsarFilesMap || !this.$scope.importedToscaBrowseFileText){
+
+                let onSuccess = (vsps:Array<ICsarComponent>): void =>{
+                    onboardCsarFilesMap = {};
+                    _.each(vsps, (vsp:ICsarComponent)=>{
+                        onboardCsarFilesMap[vsp.packageId] = vsp.vspName + " (" + vsp.version + ")";
+                    });
+                    this.cacheService.set('onboardCsarFilesMap', onboardCsarFilesMap);
+                    this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[(<Resource>this.$scope.component).csarUUID];
+                };
+
+                let onError = (): void =>{
+                    console.log("Error getting onboarding list");
+                };
+
+                this.onBoardingService.getOnboardingVSPs().then(onSuccess, onError);
+            }
+        }
+    };
+
     private initScope = ():void => {
 
         // Work around to change the csar version
@@ -142,7 +179,6 @@
             (<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
         }
 
-        this.$scope.importedToscaBrowseFileText = this.$scope.component.name + " (" + (<Resource>this.$scope.component).csarVersion + ")";
         this.$scope.importCsarProgressKey = "importCsarProgressKey";
         this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? "Upload file" : "Upload VFC";
         this.$scope.progressService = this.progressService;
@@ -167,16 +203,8 @@
                 this.$scope.isShowFileBrowse = true;
             }
         }
-        ;
 
-        // Init the decision if to show onboarding
-        this.$scope.isShowOnboardingSelectionBrowse = false;
-        if (this.$scope.component.isResource() &&
-            this.$scope.isEditMode() &&
-            (<Resource>this.$scope.component).resourceType == ResourceType.VF &&
-            (<Resource>this.$scope.component).csarUUID) {
-            this.$scope.isShowOnboardingSelectionBrowse = true;
-        }
+        this.initImportedToscaBrowseFile();
 
         //init file extensions based on the file that was imported.
         if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile) {
diff --git a/catalog-ui/src/assets/styles/global.less b/catalog-ui/src/assets/styles/global.less
index 9faf4ae..29e244e 100644
--- a/catalog-ui/src/assets/styles/global.less
+++ b/catalog-ui/src/assets/styles/global.less
@@ -7,6 +7,7 @@
     height: 100%;
     margin: auto;
     position: relative;
+    user-select: text;
 }
 
 * {