APPC CDT to Support Multiple Templates for VNFCs

APPC CDT Should Support Multiple Templates For Configure and
 ConfigModify for VNFs with VNFC level templates.
CDT would be used to create a single reference artifact for a VNF.
For the Configure related actions (Configure and ConfigModify)
 vnfc-type to be shown at the top.  The user would have a new link
 below it, to be able to add each vnfc-type.  For each vnfc-type,
 the user would create the associated template and PD file as usual.
The fix required to modify several visual elements and variables
 related to VNFC Types on MyVNFS page, ReferenceData page, Template
 page and Parameters page. Also a number of supporting services were
 modified. New Modal window type is now used for VNFC-related dialogs.

Change-Id: Ibbbb50e2ff6f96783c0aea89a6870d7c28021ba0
Issue-ID: APPC-1010
Signed-off-by: od7427 <od7427@att.com>

15 files changed, 1040 insertions, 212 deletions

diff --git a/src/app/about-us/aboutus.component.html b/src/app/about-us/aboutus.component.html
index 554fd4a..d7460f3 100644
--- a/src/app/about-us/aboutus.component.html
+++ b/src/app/about-us/aboutus.component.html
@@ -26,7 +26,7 @@ limitations under the License.
     <div class="card">
         <div class="mdl-dialog__content">
             <div class="card">
-                <div class="card-header" style="font-size: 20px">CONTACT DETAILS</div>
+                <div class="card-header" (click)="tlPlus()" style="font-size: 20px">CONTACT DETAILS</div>
                 <div class="mdl-card__title">
                     <div class="text-center">
                         Contact us @:
@@ -35,7 +35,7 @@ limitations under the License.
                 </div>
             </div>&emsp;&emsp;&emsp;&emsp;
             <div class="card">
-                <div class="card-header" style="font-size: 20px">VERSION DETAILS</div>
+                <div class="card-header" (click)="tlMinus()" style="font-size: 20px">VERSION DETAILS</div>
                 <div class="mdl-card__title">
                     <table>
                         <thead></thead>
@@ -69,4 +69,4 @@ limitations under the License.
 
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/about-us/aboutus.component.ts b/src/app/about-us/aboutus.component.ts
index 5b0fd26..04eee0d 100644
--- a/src/app/about-us/aboutus.component.ts
+++ b/src/app/about-us/aboutus.component.ts
@@ -31,6 +31,7 @@ import { saveAs } from 'file-saver';
 import { DialogService } from 'ng2-bootstrap-modal';
 import { ConfirmComponent } from '../shared/confirmModal/confirm.component';
 import { appConstants } from '../../constants/app-constants';
+import {UtilityService} from '../shared/services/utilityService/utility.service';
 
 @Component({
     selector: 'app-help',
@@ -38,7 +39,7 @@ import { appConstants } from '../../constants/app-constants';
     styleUrls: ['./aboutus.component.css']
 })
 export class AboutUsComponent implements OnInit, OnDestroy {
-
+    clName= "AboutUsComponent";
     public releaseName: any;
     public versionNo: any;
     public contactUsMail: any;
@@ -53,7 +54,9 @@ export class AboutUsComponent implements OnInit, OnDestroy {
         maxLength: 200
     };
 
-    constructor(private http: Http, private dialogService: DialogService, private notificationsService: NotificationsService) {
+    constructor(
+      private http: Http, private dialogService: DialogService, private notificationsService: NotificationsService,
+      private utilSvc: UtilityService ) {
     }
 
     ngOnInit() {
@@ -101,4 +104,20 @@ export class AboutUsComponent implements OnInit, OnDestroy {
         });
         saveAs(blob, 'versionLog.txt');
     }
+
+    tlPlus() { //.. increase tracelvl - more tracing in console
+      let tracelvl= this.utilSvc.getTracelvl();
+      if( tracelvl < 2 ) {
+        tracelvl++; this.utilSvc.setTracelvl( tracelvl);
+      };
+      console.log( this.clName+": tlPlus: tracelvl="+this.utilSvc.getTracelvl() );
+    }
+
+    tlMinus() { //.. decrease tracelvl - less tracing in console
+      let tracelvl= this.utilSvc.getTracelvl();
+      if( tracelvl > 0 ) {
+        tracelvl--; this.utilSvc.setTracelvl( tracelvl);
+      };
+      console.log( this.clName+": tlMinus: tracelvl="+this.utilSvc.getTracelvl() );
+    }
 }
diff --git a/src/app/shared/services/mapping-editor.service.ts b/src/app/shared/services/mapping-editor.service.ts
index c27d95e..b9e2b53 100644
--- a/src/app/shared/services/mapping-editor.service.ts
+++ b/src/app/shared/services/mapping-editor.service.ts
@@ -71,6 +71,7 @@ export class MappingEditorService {
     private _navItem = {};
     private _observer: Observer<any>;
     private referenceList = [];
+    newObject: any;
 
     constructor() {
         this.navChange$ = new Observable(observer =>
@@ -103,6 +104,9 @@ export class MappingEditorService {
     saveLatestAction(data) {
         this.latestAction = data;
     }
+    selectedObj(data) {
+        this.newObject = data;
+    }
 
     saveLatestIdentifier(identifier) {
         this.identifier = identifier;
@@ -589,4 +593,4 @@ export class MappingEditorService {
     }
 
 
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/services/utilityService/utility.service.ts b/src/app/shared/services/utilityService/utility.service.ts
index a683f33..8a9f945 100644
--- a/src/app/shared/services/utilityService/utility.service.ts
+++ b/src/app/shared/services/utilityService/utility.service.ts
@@ -30,6 +30,7 @@ import { appConstants } from '../../../../constants/app-constants';
 
 @Injectable()
 export class UtilityService {
+    clName= "UtilityService";
     public putAction = appConstants.messages.artifactUploadAction;
     public getAction = appConstants.messages.artifactgetAction;
     private retrievalSuccessMessage = appConstants.messages.retrievalSuccessMessage;
@@ -44,6 +45,23 @@ export class UtilityService {
     constructor(private notificationService: NotificationsService) {
     }
 
+    public setTracelvl( tlvl: number ) {
+     // console.log( this.clName+": setTracelvl: arg="+tlvl );
+      let tracelvl= tlvl;
+      if( tracelvl == null || tracelvl == undefined ) tracelvl= 0;
+      localStorage["Tracelvl"]= tracelvl;
+    }
+
+    public getTracelvl() : number {
+      let tracelvl= localStorage["Tracelvl"];
+     // console.log( this.clName+": getTracelvl: locS: tracelvl="+tracelvl );
+      if( tracelvl == null || tracelvl == undefined ) {
+        tracelvl=0; localStorage["Tracelvl"]= tracelvl;
+      };
+     // console.log( this.clName+": getTracelvl: tracelvl="+tracelvl );
+      return tracelvl;
+    };
+
     public randomId() {
         let x = (new Date().getUTCMilliseconds()) * Math.random();
         return (x + '').substr(4, 12);
diff --git a/src/app/vnfs/build-artifacts/build-artifacts.component.ts b/src/app/vnfs/build-artifacts/build-artifacts.component.ts
index ca45e61..095c239 100644
--- a/src/app/vnfs/build-artifacts/build-artifacts.component.ts
+++ b/src/app/vnfs/build-artifacts/build-artifacts.component.ts
@@ -28,6 +28,7 @@ import * as _ from 'underscore';
 import { NotificationsService } from 'angular2-notifications';
 import { appConstants } from '../../../constants/app-constants';
 
+export const ACTIONS_REQUIRED_DROPDOWN = ['Configure', 'ConfigModify', 'ConfigScaleOut'];
 
 @Component({ selector: 'app-build-design', templateUrl: './build-artifacts.component.html', styleUrls: ['./build-artifacts.component.css'] })
 export class BuildDesignComponent implements OnInit {
@@ -69,17 +70,33 @@ export class BuildDesignComponent implements OnInit {
         }
     }
 
-    public getRefData(referenceList) {
+    public getRefData( referenceList, reqObj?) {
+        console.log( "getRefData: start: referenceList.action:["+
+          referenceList.action+"]");
         this.refList = referenceList;
-        if (referenceList.action !== appConstants.Actions.blank && referenceList.scope['vnf-type'] !== '' && referenceList['device-protocol'] !== appConstants.DeviceProtocols.blank) {
-            if (referenceList.action === appConstants.Actions.configScaleOut) {
-                if (referenceList.hasOwnProperty('template-id') && referenceList['template-id'] !== undefined && referenceList['template-id'] != '')
-                    this.refDataRequiredFiels = true;
+        if( referenceList.action !== '' &&
+            referenceList.scope['vnf-type'] !== '' &&
+            referenceList['device-protocol'] !== '' )
+        {
+          if( ACTIONS_REQUIRED_DROPDOWN.indexOf(referenceList.action) > -1)
+          {
+            if( referenceList.action == 'ConfigScaleOut')
+            {
+              if( reqObj != undefined && reqObj.hasOwnProperty('reqField') &&
+                  reqObj.reqField != ''
+              )
+                this.refDataRequiredFiels = true;
+              else
+                this.refDataRequiredFiels = false;
             }
-            else this.refDataRequiredFiels = true;
+            else
+              this.refDataRequiredFiels = true;
+          }
+          else
+            this.refDataRequiredFiels = true;
         }
         else {
-            this.refDataRequiredFiels = false;
+          this.refDataRequiredFiels = false;
         }
     }
 
diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
index bfe281b..799627b 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
@@ -18,7 +18,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
 -->
 
@@ -40,14 +39,17 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
             <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                 <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
             </div>
-            <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+            <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType">
                 <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
             </div>
+            <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
+
+            </div>
             <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                 <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
             </div>
             <div *ngIf="(action === 'ConfigScaleOut')" class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
-                <label>Template Identifier</label><input class="form-control" type="text" disabled value="{{identifier}}" />
+                <label>Template Identifier</label><input class="form-control" type="text" disabled value="{{template_id}}" />
             </div>
         </div>
     </div>
@@ -215,4 +217,4 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
 
         </form>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
index 19a5f6d..28c2a19 100644
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
@@ -106,7 +106,7 @@ export class ParameterComponent implements OnInit {
     public appDataObject: any;
     public downloadDataObject: any;
     public artifact_fileName = "";
-    identifier: any;
+    template_id: any;
     private selectedActionReference: any;
 
     constructor(private httpService: HttpUtilService,
@@ -165,7 +165,7 @@ export class ParameterComponent implements OnInit {
             };
         }
 
-        this.identifier = this.mappingEditorService.identifier;
+        this.template_id = this.mappingEditorService.identifier;
     }
 
     ngAfterViewInit() {
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
index ebcb9c0..6065e6d 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.html
@@ -29,7 +29,7 @@ limitations under the License.
             <div class="row" style="padding: 15px 25px">
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Action*</label>
-                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,content,userForm);" #action="ngModel" name="action">
+                    <select class="form-control" required id="cmbAction" [(ngModel)]="referenceDataObject.action" (ngModelChange)="updateSessionValues($event,'action');actionChange($event,userForm);handleVMBlockDisplay()" #action="ngModel" name="action">
                         <option [value]="actionType"
                                 [ngClass]="{'selectedAction':selectedActions.indexOf(actionType)>-1}"
                                 [selected]="referenceDataObject.action===actionType"
@@ -43,9 +43,19 @@ limitations under the License.
                     <input type="text" readonly class="form-control" id="txtVnfType" required [(ngModel)]="referenceDataObject['scope']['vnf-type']" (ngModelChange)="updateSessionValues($event,'vnfType')" #vnftype="ngModel" name="vnftype">
                     <span class="error-message" [hidden]="vnfParams?.vnfType || vnftype.valid || (vnftype.pristine && !userForm.submitted)">Required Field</span>
                 </div>
-                <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+
+                <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="((displayVnfc=='true') || isVnfcType) && (referenceDataObject['action']=='Configure' || referenceDataObject['action']=='ConfigModify')">
                     <label>VNFC Type</label>
-                    <input type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel" name="vnfcType">
+                    <input *ngIf="isVnfcType" type="text" class="form-control" readonly id="txtVnfcType" [(ngModel)]="referenceDataObject.scope['vnfc-type']" (blur)="setVnfcType($event.target.value)" (ngModelChange)="updateSessionValues($event,'vnfcType')" #vnfcType="ngModel"
+                        name="vnfcType">
+                    <select *ngIf="isVnfcTypeList" class="form-control" id="vnfcType" (ngModelChange)="vnfcChanged($event,content,userForm)" [ngModel]="vnfcIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                            <option [value]="val" *ngFor="let val of referenceDataObject.scope['vnfc-type-list']">{{val}}
+                            </option>
+                        </select>
+                    <a *ngIf="isVnfcTypeList" style="    color: blue;" href="javascript:void(0)" (click)="vnfcModal.open()">Add New VNFC Type</a>
+                </div>
+
+                <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="displayVnfc!='true' || (referenceDataObject['action']!='Configure' && referenceDataObject['action']!='ConfigModify')">
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                     <label>Device Protocol*</label>
@@ -58,11 +68,11 @@ limitations under the License.
                 </div>
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="isConfigScaleOut">
                     <label>Template Identifier</label>
-                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,content,userForm)" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
+                    <select class="form-control" required id="tempIdentifier" (ngModelChange)="dataModified();idChange($event,userForm)" [(ngModel)]="templateIdentifier" #deviceProtocol="ngModel" name="templateIdentifier">
                         <option [value]="val" *ngFor="let val of referenceDataObject['template-id-list']">{{val}}
                         </option>
                     </select>
-                    <span class="error-message" [hidden]="deviceProtocol.valid || (deviceProtocol.pristine && !userForm.submitted)">Required Field</span>
+                   <!-- <span class="error-message" [hidden]="deviceProtocol.valid || (deviceProtocol.pristine && !userForm.submitted)">Required Field</span> -->
                 </div>
 
                 <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="referenceDataObject['action']== 'ConfigScaleOut'" style="margin-top: 30px">
@@ -141,7 +151,7 @@ limitations under the License.
                             <div class="row" *ngIf="(( referenceDataObject.action =='ConfigScaleOut' ||referenceDataObject.action =='Configure'|| referenceDataObject.action =='' || referenceDataObject.action ==undefined ) && isCollapsedContent) ">
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                     <label style="font-size:12px;">VNFC Type</label>
-                                    <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" #vnfcType="ngModel" name="samplevnfcType">
+                                    <input type="text" class="form-control" id="txtVnfcTypeInColl" [(ngModel)]="Sample['vnfc-type']" (blur)="checkVnfcTypeEqual(vnfcType.value)" #vnfcType="ngModel" name="samplevnfcType">
                                 </div>
                                 <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                     <label style="font-size:12px">VNFC Function Code</label>
@@ -201,7 +211,7 @@ limitations under the License.
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
                                                 <label style="font-size:12px;">VNFC Type</label>
-                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType{{j}}="ngModel" name="vnfcType{{j}}">
+                                                <input type="text" class="form-control" id="txtVnfcTypeInColl" required [(ngModel)]="item['vnfc-type']" #vnfcType="ngModel" name="vnfcType{{j}}">
                                                 <span class="error-message" [hidden]="vnfcType.valid || (vnfcType.pristine && !userForm.submitted)">Required Field</span>
                                             </div>
                                             <div class="col-lg-2 col-sm-6 col-md-2 col-xs-12">
@@ -298,6 +308,26 @@ limitations under the License.
         </div>
     </div>
 </div>
+
+<!-- Modal for Vnfc Identifier -->
+<modal #vnfcModal>
+    <modal-header [show-close]="true">
+        <h4 class="modal-title">Enter New VNFC Type</h4>
+    </modal-header>
+    <modal-body>
+        <div>
+            <input pattern=".*[^ ].*" name="test" type="text" class="" (ngModelChange)="validateVnfcName($event)" [(ngModel)]="newVnfcType" placeholder="vnfctype">
+            <span class="error-message">{{errorMessage}}</span>
+        </div>
+    </modal-body>
+    <modal-footer [show-default-buttons]="false">
+        <div>
+            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="templateId=''" data-dismiss="modal">cancel</button>
+            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" data-dismiss="modal" (click)="addVnfc()" [disabled]="invalid">Add</button>
+        </div>
+    </modal-footer>
+</modal>
+
 <div id="identifierModal" class="modal fade" role="dialog">
     <div class="modal-dialog">
         <!-- Modal content-->
@@ -339,4 +369,4 @@ limitations under the License.
         <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" (click)="c('yes')">Yes
         </button>
     </div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
index 8223b56..25e0721 100644
--- a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.component.ts
@@ -36,17 +36,25 @@ import { NotificationsService } from 'angular2-notifications';
 import { ParamShareService } from '../../..//shared/services/paramShare.service';
 import { environment } from '../../../../environments/environment';
 import { saveAs } from 'file-saver';
+import { ReferenceDataFormUtil } from './reference-dataform.util';
 import { UtilityService } from '../../../shared/services/utilityService/utility.service';
 import { appConstants } from '../../../../constants/app-constants';
+// Common Confirm Modal
+import { DialogService } from 'ng2-bootstrap-modal';
+import { ConfirmComponent } from "../../../shared/confirmModal/confirm.component";
+
 declare var $: any;
 type AOA = Array<Array<any>>;
 const REFERENCE_DATA:string= "reference_data";
+
 @Component({
     selector: 'reference-dataform',
     templateUrl: './reference-dataform.component.html',
-    styleUrls: ['./reference-dataform.component.css']
+    styleUrls: ['./reference-dataform.component.css'],
+    providers: [ReferenceDataFormUtil]
 })
 export class ReferenceDataformComponent implements OnInit {
+    public classNm= "ReferenceDataformCompon";
     @ViewChild(ModalComponent) modalComponent: ModalComponent;
     public showUploadStatus: boolean = false;
     public fileUploaded: boolean = false;
@@ -75,7 +83,11 @@ export class ReferenceDataformComponent implements OnInit {
         template: { templateData: {}, nameValueData: {}, templateFileName: '', nameValueFileName: '' },
         pd: { pdData: '', pdFileName: '' }
     };
+    errorMessage = '';
+    invalid = true;
     fileName: any;
+    vnfcIdentifier;
+    oldVnfcIdentifier: any;
     public uploadFileName: any;
     public addVmClickedFlag: boolean = false;
     public getExcelUploadStatus: boolean = false;
@@ -85,6 +97,7 @@ export class ReferenceDataformComponent implements OnInit {
     oldAction: any;
     nonConfigureAction: any;
     templateId;
+    newVnfcType;
     templateIdentifier;
     public actionLevels = [
         'vnfc', 'vnf'
@@ -104,7 +117,7 @@ export class ReferenceDataformComponent implements OnInit {
     public referenceDataObject = {
         action: '',
         'action-level': 'vnf',
-        scope: { 'vnf-type': '', 'vnfc-type': '' },
+        scope: { 'vnf-type': '', 'vnfc-type-list': [] },
         'template': 'Y',
         vm: [],
         'device-protocol': '',
@@ -172,32 +185,52 @@ export class ReferenceDataformComponent implements OnInit {
     public firstArrayElement = [];
     public remUploadedDataArray = [];
     isConfigScaleOut = false
-    configScaleOutExist: boolean
-    public versionNoForApiCall: any= "0.0.1"
+    isConfigOrConfigModify = false;
+    configScaleOutExist: boolean = true;
+    displayVnfc = 'false';
+    isVnfcType: boolean;
+    isVnfcTypeList: boolean = true;
+    public actionList = {
+        "ConfigScaleOut": "ConfigScaleOut",
+        "Configure": "Configure" 
+    };
+    public versionNoForApiCall = "0.0.1";
+    private displayVMBlock: boolean = true;
+
     constructor(
-    private buildDesignComponent: BuildDesignComponent,
-    private httpUtils: HttpUtilService, 
-    private route: Router, 
-    private location: Location, 
-    private activeRoutes: ActivatedRoute, 
-    private notificationService: NotificationService,
-    private paramShareService: ParamShareService, 
-    private mappingEditorService: MappingEditorService, 
-    private modalService: NgbModal, 
-    private nService: NotificationsService, 
-    private ngProgress: NgProgress,
-    private utilityService: UtilityService) {
+      private buildDesignComponent: BuildDesignComponent,
+      private httpUtils: HttpUtilService, 
+      private route: Router, 
+      private location: Location, 
+      private activeRoutes: ActivatedRoute, 
+      private notificationService: NotificationService,
+      private paramShareService: ParamShareService, 
+      private mappingEditorService: MappingEditorService, 
+      private modalService: NgbModal, 
+      private nService: NotificationsService, 
+      private ngProgress: NgProgress,
+      private utilityService: UtilityService,
+      private dialogService: DialogService,
+      private referenceDataFormUtil: ReferenceDataFormUtil )
+    {
+      console.log( this.classNm+": new: start.");
     }
 
     ngOnInit() {
-
+      console.log( this.classNm+": ngOnInit: start.");
+        this.displayVnfc = sessionStorage.getItem("vnfcSelectionFlag");
+        if (this.configScaleOutExist) {
+            this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions', 'ConfigScaleOut'];
+        } else {
+            this.actions = ['', 'Configure', 'ConfigModify', 'ConfigBackup', 'ConfigRestore', 'GetRunningConfig', 'HealthCheck', 'StartApplication', 'StopApplication', 'QuiesceTraffic', 'ResumeTraffic', 'UpgradeBackout', 'UpgradeBackup', 'UpgradePostCheck', 'UpgradePreCheck', 'UpgradeSoftware', 'OpenStack Actions'];
+        }
         this.self = this;
         let path = this.location.path;
         this.title = 'Reference Data';
         this.referenceDataObject = {
             action: '',
             'action-level': 'vnf',
-            scope: { 'vnf-type': '', 'vnfc-type': '' },
+            scope: { 'vnf-type': '', 'vnfc-type-list': [] },
             'template': 'Y',
             vm: [],
             'device-protocol': '',
@@ -215,6 +248,7 @@ export class ReferenceDataformComponent implements OnInit {
                 this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType'];
                 this.oldAction = this.referenceDataObject.action;
                 this.populateExistinAction(this.referenceDataObject.action);
+                this.displayHideVnfc();
             }
         } else if (this.updateParams != 'undefined') {
             this.getArtifact();
@@ -223,22 +257,35 @@ export class ReferenceDataformComponent implements OnInit {
         if (appData != null || appData != undefined) this.appData = appData;
         var downloadData = this.mappingEditorService.downloadDataObject;
         if (downloadData != null || downloadData != undefined) this.downloadData = downloadData;
-        this.vnfParams = JSON.parse(sessionStorage.getItem('vnfParams'));
+        if (sessionStorage.getItem('vnfParams')) {
+            this.vnfParams = JSON.parse(sessionStorage.getItem('vnfParams'));
+        }
         if (this.vnfParams && this.vnfParams.vnfType) {
-            this.referenceDataObject['scope']['vnf-type'] = this.vnfParams.vnfType;
+          console.log( this.classNm+": ngOnInit: vnfParams.vnfType:["+
+            this.vnfParams.vnfType+"]");
+            this.referenceDataObject['scope']['vnf-type']= this.vnfParams.vnfType;
         }
         if (this.vnfParams && this.vnfParams.vnfcType) {
-            this.referenceDataObject['scope']['vnfc-type'] = this.vnfParams.vnfcType;
+          console.log( this.classNm+": ngOnInit: vnfParams.vnfcType:["+
+            this.vnfParams.vnfcType+"]");
+           this.referenceDataObject['scope']['vnfc-type']= this.vnfParams.vnfcType;
         }
         this.uploadedDataArray = [];
         this.remUploadedDataArray = [];
         this.firstArrayElement = [];
         this.uploadFileName = '';
         this.templateIdentifier = this.mappingEditorService.identifier
+        this.oldVnfcIdentifier = this.vnfcIdentifier;
+          console.log( this.classNm+": ngOnInit: displayVnfc:["+this.displayVnfc+"]");
+          console.log( this.classNm+": ngOnInit: templateIdentifier:["+
+            this.templateIdentifier+"]");
         // Enable or Block Template and PD Tabs
-        this.buildDesignComponent.getRefData(this.referenceDataObject);
+        this.buildDesignComponent.getRefData(
+          { ...this.referenceDataObject,  displayVnfc: this.displayVnfc },
+          { reqField: this.templateIdentifier });
         this.configDrp(this.referenceDataObject.action)
     }
+
     toggleIdentifier(data) {
         if (data == 'ConfigScaleOut') {
             this.isConfigScaleOut = true
@@ -250,6 +297,7 @@ export class ReferenceDataformComponent implements OnInit {
 
     //to retrive the data from appc and assign it to the vaiables, if no data display the message reterived from the API
     getArtifact() {
+        console.log( this.classNm+": getArtifact: start.");
         try {
             let data = this.utilityService.createPayloadForRetrieve(true, '', '', '');
             this.ngProgress.start();
@@ -257,7 +305,10 @@ export class ReferenceDataformComponent implements OnInit {
                 url: environment.getDesigns,
                 data: data
             }).subscribe(resp => {
+                console.log( this.classNm+": getArtifact: got response ...");
                 if (resp.output.data.block != undefined) {
+                    console.log( this.classNm+
+                      ": getArtifact: output.data.block not empty.");
                     this.nService.success(appConstants.notifications.titles.status, appConstants.messages.datafetched);
                     let artifactInfo = JSON.parse(resp.output.data.block).artifactInfo[0];
                     let reference_data = JSON.parse(artifactInfo['artifact-content'])['reference_data'][0];
@@ -266,18 +317,20 @@ export class ReferenceDataformComponent implements OnInit {
                     if (this.referenceDataObject.action == appConstants.Actions.configScaleOut) {
                         this.groupAnotationType = [appConstants.groupAnotationType.blank, appConstants.groupAnotationType.firstVnfcName, appConstants.groupAnotationType.fixedValue, appConstants.groupAnotationType.relativeValue, appConstants.groupAnotationType.existingGroupName];
                     }
-
+                    //chck vnfc or vnfcTypeList
+                    this.displayHideVnfc();
                     // Enable or Block Template and PD Tabs
-                    this.buildDesignComponent.getRefData(this.referenceDataObject);
+                    this.buildDesignComponent.getRefData(
+                      {...this.referenceDataObject, displayVnfc: this.displayVnfc } );
                     this.refernceScopeObj.sourceType = this.referenceDataObject['scopeType'];
                     this.mappingEditorService.getReferenceList().push(JSON.parse(artifactInfo['artifact-content']));
                     this.tempAllData = JSON.parse(artifactInfo['artifact-content'])['reference_data'];
                     this.oldAction = this.referenceDataObject.action;
+                    this.oldVnfcIdentifier = this.vnfcIdentifier;
                     if (this.referenceDataObject.action === appConstants.Actions.openStackActions) {
                         this.deviceProtocols = [appConstants.DeviceProtocols.blank, appConstants.DeviceProtocols.openStack];
                         this.buildDesignComponent.tabs = [
                             {
-
                                 name: 'Reference Data',
                                 url: 'references',
                             }];
@@ -314,8 +367,68 @@ export class ReferenceDataformComponent implements OnInit {
         }, 3500);
     }
 
+    displayHideVnfc() {
+        if( this.utilityService.getTracelvl() > 0 )
+          console.log(this.classNm+": displayHideVnfc: start...");
+        if( this.utilityService.getTracelvl() > 1 ) {
+          if( this.referenceDataObject.scope['vnfc-type-list'] ) {
+            console.log( this.classNm+
+              ": displayHideVnfc: refDataObj.scope.vnfc-type-list.length="+
+              this.referenceDataObject.scope['vnfc-type-list'].length );
+          } else {
+            console.log( this.classNm+
+              ": displayHideVnfc: refDataObj.scope.vnfc-type-list not defined");
+          };
+          console.log( this.classNm+": displayHideVnfc: scope.vnfc-type:["+
+            this.referenceDataObject.scope['vnfc-type']+"]");
+        };
+        if (this.referenceDataObject.scope['vnfc-type-list'] == undefined && (this.referenceDataObject.scope['vnfc-type'] != undefined || this.referenceDataObject.scope['vnfc-type'] != "")) {
+            this.isVnfcType = true
+            this.displayVnfc = 'true'
+            this.isVnfcTypeList = false
+        }
+        if (this.referenceDataObject.scope['vnfc-type-list'] != undefined && this.referenceDataObject.scope['vnfc-type-list'].length != 0 && (this.referenceDataObject.scope['vnfc-type'] == undefined || this.referenceDataObject.scope['vnfc-type'] == "")) {
+            this.isVnfcType = false
+            this.displayVnfc = 'true'
+            this.isVnfcTypeList = true
+            if(!this.mappingEditorService.newObject.vnfc) {
+                this.vnfcIdentifier = this.referenceDataObject.scope['vnfc-type-list'][0];
+                // this.mappingEditorService.newObject.vnfc = this.vnfcIdentifier;
+                // this.referenceDataObject['vnfcIdentifier'] = this.vnfcIdentifier;
+
+            } else {
+                this.vnfcIdentifier = this.mappingEditorService.newObject.vnfc;
+            }
+            if( this.utilityService.getTracelvl() > 0 )
+              console.log(this.classNm+": displayHideVnfc: vnfcIdentifier:["+
+                this.vnfcIdentifier+"]");
+        }
+        if (this.referenceDataObject.scope['vnfc-type-list'] != undefined && this.referenceDataObject.scope['vnfc-type-list'].length == 0 && this.referenceDataObject.scope['vnfc-type'] != undefined && this.referenceDataObject.scope['vnfc-type'].length == 0) {
+            if(this.displayVnfc == 'true') {
+                this.isVnfcType = false
+                this.displayVnfc = 'true'
+                this.isVnfcTypeList = true
+            } else {
+                this.isVnfcType = false
+                this.displayVnfc = 'false'
+                this.isVnfcTypeList = false
+            }
+        }
+        if (this.referenceDataObject.scope['vnfc-type-list'] == undefined && this.referenceDataObject.scope['vnfc-type'] == '') {
+            this.isVnfcType = false
+            this.displayVnfc = 'false'
+            this.isVnfcTypeList = false
+        }
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log(this.classNm+": displayHideVnfc: finish. isVnfcType:["+
+          this.isVnfcType+" displayVnfc:["+this.displayVnfc+"] isVnfcTypeList:["+
+          this.isVnfcTypeList+"]");
+    }
+
     //reinitializing the required values
     ngOnDestroy() {
+        console.log( this.classNm+": ngOnDestroy: start:"+
+            " vnfcIdentifier:["+this.vnfcIdentifier+"]");
         let referenceObject = this.prepareReferenceObject();
         this.mappingEditorService.changeNavAppData(this.appData);
         this.mappingEditorService.changeNavDownloadData(this.downloadData);
@@ -333,7 +446,7 @@ export class ReferenceDataformComponent implements OnInit {
             this.numberOfVmTest = false;
         }
     }
-
+    // update my vnf pop up session values
     updateSessionValues(event: any, type: string) {
         if (type === 'action') {
             sessionStorage.setItem('action', event);
@@ -355,6 +468,27 @@ export class ReferenceDataformComponent implements OnInit {
         this.referenceDataObject.vm[vmNumber].vnfc.push(newObj);
     }
 
+    //validating the vnf and vnfc data in the pop up
+    validateVnfcName(name) {
+        console.log( this.classNm+": validateVnfcName: start: name:["+name+"]");
+        if (!name.trim() || name.length < 1) {
+            this.errorMessage = '';
+            this.invalid = true;
+        } else if (name.startsWith(' ') || name.endsWith(' ')) {
+            this.errorMessage = 'Leading and trailing spaces are not allowed';
+            this.invalid = true;
+        } else if (name.includes('  ')) {
+            this.errorMessage = 'More than one space is not allowed in VNFC Type';
+            this.invalid = true;
+        } else if (name.length > 50) {
+            this.errorMessage = 'VNFC Type should be of minimum one character and maximum 50 character';
+            this.invalid = true;
+        } else {
+            this.invalid = false;
+            this.errorMessage = '';
+        }
+    }
+
     //to remove the VM's created by the user
     removeFeature(vmNumber: any, index: any, templateId) {
         if (this.referenceDataObject.action == "Configure") {
@@ -422,6 +556,7 @@ export class ReferenceDataformComponent implements OnInit {
 
     //Reference object to create reference data
     prepareReferenceObject(isSaving?: any) {
+        console.log( this.classNm+": prepareReferenceObject: start.");
         let scopeName = this.resetParamsOnVnfcType();
         let extension = this.decideExtension(this.referenceDataObject);
         this.prepareArtifactList(scopeName, extension);
@@ -462,14 +597,16 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     upload(evt: any) {
+        console.log( this.classNm+": upload: start.");
        /* wire up file reader */
         const target: DataTransfer = <DataTransfer>(evt.target);
-        //// console.log("filename========" + evt.target.files[0].name)
         this.uploadFileName = evt.target.files[0].name;
         var fileExtension = this.uploadFileName.substr(this.uploadFileName.lastIndexOf('.') + 1);
         if (target.files.length != 1) {
+          console.log( this.classNm+": upload: Error: got no file !");
             throw new Error(appConstants.errors.multipleFileUploadError);
         }
+        console.log( this.classNm+": upload: filename:["+evt.target.files[0].name+"]");
         if (fileExtension.toUpperCase() === 'XLS' || fileExtension.toUpperCase() === 'XLSX') {
             const reader = new FileReader();
             reader.onload = (e: any) => {
@@ -509,6 +646,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     addVmCapabilitiesData() {
+        console.log( this.classNm+": addVmCapabilitiesData: start.");
         for (var i = 0; i < this.uploadedDataArray.length; i++) {
             var vnfcFuncCodeArray = [];
             var data = this.uploadedDataArray[i];
@@ -541,6 +679,8 @@ export class ReferenceDataformComponent implements OnInit {
 
     //download template
     save(form: any, isValid: boolean) {
+        console.log( this.classNm+": save: start: referenceDataObject.action:["+
+          this.referenceDataObject.action+"]");
         if (this.referenceDataObject.action === '') {
             this.nService.error(appConstants.notifications.titles.error, appConstants.errors.noActionError);
             return;
@@ -570,13 +710,16 @@ export class ReferenceDataformComponent implements OnInit {
         }
     }
     downloadFile(blob, fileName, delay) {
+        console.log( this.classNm+": downloadFile: start.");
         setTimeout(() => {
             saveAs(blob, fileName);
         }, delay)
     }
 
     downloadTemplate() {
+        console.log( this.classNm+": downloadTemplate: start.");
         var fileName = this.downloadData.template.templateFileName;
+        console.log( this.classNm+": downloadTemplate: fileName:["+fileName+"]");
         var theJSON = this.downloadData.template.templateData;
         if (fileName != null || fileName != '') {
             var fileExtensionArr = fileName.split('.');
@@ -607,31 +750,25 @@ export class ReferenceDataformComponent implements OnInit {
         this.downloadFile(blob, fileName, 180)
     }
 
-    saveToAppc(valid, form, event) {
-        if (this.referenceDataObject.action === '') {
-            this.nService.error(appConstants.notifications.titles.error, appConstants.errors.noActionError);
-            return;
-        }
-        if (this.referenceDataObject['device-protocol'] === '') {
-            this.nService.error(appConstants.notifications.titles.error, appConstants.errors.noDeviceProtocolError);
-            return;
-        }
-
+    // save the values to the cache, on action change without download
+    validateDataAndSaveToAppc( valid, form, event) {
+        console.log( this.classNm+": validateDataAndSaveToAppc: start: valid:"+valid);
+        // will show error message
+        this.showValidationErrors(this.referenceDataObject);
         try {
             form._submitted = true;
             if (valid) {
-
                 let referenceObject = this.prepareReferenceObject(true);
+                let removedKeysArray = []
+                this.tempAllData.forEach((data, index) => {
+                  if (data.action) {
+                    removedKeysArray.push(JSON.parse(JSON.stringify(this.deleteUnwantedKeys(data))))
+                  }
+                });
+                this.tempAllData = removedKeysArray;
+
                 this.validateTempAllData();
-                let theJSON = JSON.stringify(this.tempAllData, null, '\t');
-                let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
-                this.uploadArtifact(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
-                var templateData = JSON.stringify(this.appData.template.templateData);
-                var nameValueData = JSON.stringify(this.appData.template.nameValueData);
-                var pdData = JSON.stringify(this.appData.pd);
-                if (templateData != '{}' && templateData != null && templateData != undefined) this.saveTemp();
-                if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
-                if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
+                this.saveToAppc();
                 if (this.actionChanged) {
                     this.clearVnfcData()
                     if (this.currentAction) {
@@ -644,11 +781,29 @@ export class ReferenceDataformComponent implements OnInit {
             }
         }
         catch (e) {
-            this.nService.warn(appConstants.notifications.titles.status, appConstants.messages.artifactSaveError);
+            this.nService.warn('status', 'unable to save the artifact');
         }
     }
 
+    //this method saves reference, template, param and PD data to APPC
+    saveToAppc() {
+        console.log( this.classNm+": saveToAppc: start: vnf-type:["+
+          this.referenceDataObject.scope['vnf-type']+"]");
+        let theJSON = JSON.stringify(this.tempAllData, null, '\t');
+        let fileName = 'reference_AllAction_' + this.referenceDataObject.scope['vnf-type'].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V.json';
+        this.saveReferenceDataToAppc(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
+
+        var templateData = JSON.stringify(this.appData.template.templateData);
+        var nameValueData = JSON.stringify(this.appData.template.nameValueData);
+        var pdData = JSON.stringify(this.appData.pd);
+        if (templateData != '{}' && templateData != null && templateData != undefined) this.referenceDataFormUtil.handleApiData(this.appData.template.templateData, 'template data');
+        if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.referenceDataFormUtil.handleApiData(this.appData.template.nameValueData, 'name value pairs');
+        if (pdData != '{}' && pdData != null && pdData != undefined) this.referenceDataFormUtil.handleApiData(this.appData.pd, 'PD file');
+    }
+
+    // valaidation of template data
     validateTempAllData() {
+        console.log( this.classNm+": validateTempAllData: start.");
         if (this.tempAllData) {
             var updatedData = [];
             this.tempAllData.forEach(data => {
@@ -660,30 +815,28 @@ export class ReferenceDataformComponent implements OnInit {
         }
     }
 
-    appendSlashes(artifactData) {
-        return artifactData.replace(/"/g, '\\"');
-    }
-
-    uploadArtifact(artifactData, dataJson, fileName) {
+    //.. prepare and send the data to the API.
+    saveReferenceDataToAppc(artifactData, dataJson, fileName) {
+        console.log( this.classNm+": saveReferenceDataToAppc: start.");
         let data = [];
-        let slashedPayload = this.appendSlashes(artifactData);
-        let payload = this.utilityService.createPayLoadForSave(REFERENCE_DATA, dataJson['scope']['vnf-type'], "AllAction", fileName, this.versionNoForApiCall, slashedPayload);
+        let slashedPayload = this.referenceDataFormUtil.appendSlashes(artifactData);
+        let payload = this.utilityService.createPayLoadForSave("reference_data", dataJson['scope']['vnf-type'], "AllAction", fileName, this.versionNoForApiCall, slashedPayload);
         this.ngProgress.start();
         this.httpUtils.post({
             url: environment.getDesigns,
             data: payload
         }).subscribe((resp) => {
-            if (resp != null && resp.output.status.code == appConstants.errorCode["400"]) {
+            if (resp != null && resp.output.status.code == '400') {
                 window.scrollTo(0, 0);
-                this.nService.success(appConstants.notifications.titles.status, appConstants.messages.referenceDataUplaodSuccess);
+                this.nService.success('Status', 'successfully uploaded the Reference Data');
             } else {
-                this.nService.warn(appConstants.notifications.titles.status, appConstants.messages.referenceDataUplaodFailure);
+                this.nService.warn('Status', 'Error while saving Reference Data');
             }
             this.uploadStatusError = false;
             this.getRefStatus = false;
             this.ngProgress.done();
         }, (err) => {
-            this.nService.error(appConstants.notifications.titles.status, appConstants.errors.connectionError);
+            this.nService.error('Status', 'Error Connecting to the APPC Network');
             window.scrollTo(0, 0);
         });
         this.appData.reference = payload;
@@ -693,6 +846,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     retriveFromAppc() {
+        console.log( this.classNm+": retriveFromAppc: start.");
         if (sessionStorage.getItem('updateParams') != 'undefined') {
             this.getArtifact();
             this.noCacheData = false;
@@ -715,6 +869,8 @@ export class ReferenceDataformComponent implements OnInit {
     };
 
     public fileChange(input) {
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.classNm+": fileChange: start.");
         this.fileName = input.target.files[0].name.replace(/C:\\fakepath\\/i, '');
         this.fileUploaded = true;
         this.disableRetrieve = true;
@@ -728,7 +884,29 @@ export class ReferenceDataformComponent implements OnInit {
                         let obj: any;
                         let jsonObject = (JSON.parse(result))['reference_data'];
                         this.uploadedData = JSON.parse(JSON.stringify(jsonObject));
+                        //check for legacy artifact and do not allow it
+                        for (let i = 0; i < this.uploadedData.length; i++) {
+                            obj = this.uploadedData[i];
+                            if (obj.scope['vnfc-type'] != undefined && obj.scope['vnfc-type'] != '') {
+                                this.nService.error('Error', 'The legacy reference artifact not supported');
+                                return;
+                            }
+                        }
+                        this.displayVnfc = 'false';
+                        this.isVnfcType = false;
+                        this.isVnfcTypeList = false;
+                        for (let i = 0; i < this.uploadedData.length; i++) {
+                            obj = this.uploadedData[i];
+                            if (obj.scope['vnfc-type-list'] && obj.scope['vnfc-type-list'].length > 0) {
+                                this.displayVnfc = 'true';
+                                this.isVnfcTypeList = true;
+                                this.vnfcIdentifier = obj.scope['vnfc-type-list'][0];
+                            }
+                        }
+                        this.oldAction=obj.action;
                         this.tempAllData = JSON.parse(JSON.stringify(jsonObject));
+                      if( this.utilityService.getTracelvl() > 0 )
+                        console.log( this.classNm+": fileChange: read & parsed.");
                         this.notificationService.notifySuccessMessage('Reference Data file successfully uploaded..');
                         if (jsonObject instanceof Array) {
                             this.referenceDataObject = jsonObject[0];
@@ -740,6 +918,10 @@ export class ReferenceDataformComponent implements OnInit {
 
                             this.selectedActions.push(jsonObject.action);
                         }
+                      if( this.utilityService.getTracelvl() > 0 )
+                        console.log( this.classNm+": fileChange: "+
+                          "referenceDataObject.action:["+
+                          this.referenceDataObject.action+"]");
                         this.toggleIdentifier(this.referenceDataObject.action)
                         this.configDrp(this.referenceDataObject.action)
                         if (this.referenceDataObject.action === 'OpenStack Actions') {
@@ -775,8 +957,12 @@ export class ReferenceDataformComponent implements OnInit {
                         if (this.referenceDataObject['action-level'] == null) {
                             this.referenceDataObject['action-level'] = 'VNF';
                         }
+                      if( this.utilityService.getTracelvl() > 0 )
+                        console.log( this.classNm+": fileChange: displayVnfc:["+
+                          this.displayVnfc+"]");
                         // Enable or Block Template and PD Tabs
-                        this.buildDesignComponent.getRefData(this.referenceDataObject);
+                        this.buildDesignComponent.getRefData(
+                          { ...this.referenceDataObject, displayVnfc: this.displayVnfc });
                     } catch (e) {
                         this.nService.error(appConstants.notifications.titles.error, appConstants.messages.incorrectFileFormat);
                     }
@@ -784,11 +970,14 @@ export class ReferenceDataformComponent implements OnInit {
                 this.hideModal = true;
             });
         } else {
+          if( this.utilityService.getTracelvl() > 0 )
+            console.log( this.classNm+": fileChange: Error: Failed to read file!");
             this.notificationService.notifyErrorMessage('Failed to read file..');
         }
     }
 
     public readFile(file, reader, callback) {
+        console.log( this.classNm+": readFile: start.");
         // Set a callback funtion to fire after the file is fully loaded
         reader.onload = () => {
             // callback with the results
@@ -804,6 +993,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     clearVnfcData() {
+        console.log( this.classNm+": clearVnfcData: start.");
         this.Sample = {
             'vnfc-instance': '1',
             'vnfc-function-code': '',
@@ -817,17 +1007,18 @@ export class ReferenceDataformComponent implements OnInit {
         this.referenceDataObject.vm[index]['vm-instance'] = index + 1;
     }
 
-    setVnfcType(str: String) {
-        this.Sample['vnfc-type'] = str;
-    }
+   // setVnfcType(str: String) {
+   //     this.Sample['vnfc-type'] = str;
+   // }
 
-    getChange(value: String) {
-        if (value === 'vnfType') {
-            this.referenceDataObject.scope['vnfc-type'] = '';
-        }
-    }
+   // getChange(value: String) {
+   //     if (value === 'vnfType') {
+   //         this.referenceDataObject.scope['vnfc-type'] = '';
+   //     }
+   // }
 
     resetForm() {
+        console.log( this.classNm+": resetForm: start.");
         this.referenceDataObject['action-level'] = 'vnf';
         this.referenceDataObject.template = 'Y';
         this.referenceDataObject['device-protocol'] = '';
@@ -837,7 +1028,9 @@ export class ReferenceDataformComponent implements OnInit {
         this.Sample['vnfc-type'] = '';
     }
 
+    // this method gets called with the action as parameter and the respective action details are fetched and assigned to the current page
     populateExistinAction(data) {
+        console.log( this.classNm+": populateExistinAction: start.");
         let existAction = this.tempAllData.findIndex(obj => {
             return obj.action == data;
         });
@@ -848,7 +1041,11 @@ export class ReferenceDataformComponent implements OnInit {
             this.referenceDataObject.scope['vnfc-type-list'] = obj['scope']['vnfc-type-list'];
             this.referenceDataObject['device-protocol'] = obj['device-protocol'];
             this.refernceScopeObj['sourceType'] = obj['scopeType'];
+            if(obj['scope']['vnfc-type-list'] != undefined && obj['scope']['vnfc-type-list'].length >0) {
+                this.referenceDataObject['vnfcIdentifier'] = obj['scope']['vnfc-type-list'][0];
+            }
         } else {
+            console.log( this.classNm+": populateExistinAction: action not found");
             this.resetForm();
             this.referenceDataObject.action = data;
         }
@@ -868,7 +1065,6 @@ export class ReferenceDataformComponent implements OnInit {
             case 'ConfigRestore':
             case 'StartApplication':
             case 'StopApplication':
-            case 'GetRunningConfig':
             case 'ConfigBackup':
                 this.deviceProtocols = ['', 'CHEF', 'ANSIBLE'];
                 break;
@@ -878,6 +1074,9 @@ export class ReferenceDataformComponent implements OnInit {
             case 'ConfigScaleOut':
                 this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF-XML', 'RESTCONF'];
                 break;
+            case 'GetRunningConfig':
+                this.deviceProtocols = ['', 'CHEF', 'ANSIBLE', 'NETCONF-XML', 'RESTCONF', 'CLI', 'REST'];
+                break;
             default:
                 this.deviceProtocols = ['', 'ANSIBLE', 'CHEF', 'NETCONF-XML', 'RESTCONF', 'CLI'];
                 this.actionHealthCheck = false;
@@ -885,55 +1084,87 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     //Modal pop up for action change with values entered.
-    actionChange(data, content, userForm) {
+    actionChange(data, userForm) {
+      var methName= "actionChange";
+        console.log( this.classNm+": "+methName+": start: data:["+data+"]");
         this.disableGrpNotationValue = false
         if (data == null) {
+            console.log( this.classNm+": "+methName+": data == null");
             return;
         }
         if ((userForm.valid) && this.oldAction != '' && this.oldAction != undefined) {
             this.actionChanged = true;
-            this.modalService.open(content, { backdrop: 'static', keyboard: false }).result.then(res => {
-                if (res == 'yes') {
-                    this.currentAction = this.referenceDataObject.action;
-                    this.referenceDataObject.action = this.oldAction;
-                    $('#saveToAppc').click();//make sure the save all is done before the tempall obj is saved form the API
-                    this.toggleIdentifier(data)
-                    this.oldAction = this.currentAction;// this.referenceDataObject.action + '';
-                    this.referenceDataObject.action = this.currentAction
-
-                    this.populateExistinAction(data);
-                    if (this.oldAction === 'OpenStack Actions') {
-
-                        this.uploadedDataArray = [];
-                        this.remUploadedDataArray = [];
-                        this.firstArrayElement = [];
-                        this.uploadFileName = '';
-                        //this.tempAllData = [];
+            console.log( this.classNm+": "+methName+
+              ": userForm valid and oldAction defined");
+            // Calling common Confirmation Modal
+            let disposable = this.dialogService.addDialog(ConfirmComponent)
+                .subscribe((isConfirmed)=>{
+                    //We get dialog result
+                    console.log( this.classNm+": "+methName+":  isConfirmed:["+
+                      isConfirmed+"]");
+                    if(isConfirmed) {
+                        // User clicked on Yes
+                        this.currentAction = this.referenceDataObject.action;
+                        console.log( this.classNm+": "+methName+
+                          ": clicked on Yes: currentAction:["+this.currentAction+
+                          "] oldAction:["+this.oldAction+"]");
+                        this.referenceDataObject.action = this.oldAction;
+                        $('#saveToAppc').click();//make sure the save all is done before the tempall obj is saved form the API
+                        this.toggleIdentifier(data)
+                        this.oldAction = this.currentAction;// this.referenceDataObject.action + '';
+                        this.referenceDataObject.action = this.currentAction;
+                        this.populateExistinAction(data);
+                        if (this.oldAction === 'OpenStack Actions') {
+
+                            this.uploadedDataArray = [];
+                            this.remUploadedDataArray = [];
+                            this.firstArrayElement = [];
+                            this.uploadFileName = '';
+                            //this.tempAllData = [];
+                        }
+                        this.clearCache();
+                        this.refernceScopeObj.from = '';
+                        this.getArtifactsOpenStack();
+
+                        // Clears VNFC Information data on action change
+                        this.clearVnfcData()
+                        this.resetVmsForScaleout(data);
+                    }
+                    else {
+                        // User clicked on No
+                        this.toggleIdentifier(data)
+                        this.currentAction = this.referenceDataObject.action;
+                        console.log( this.classNm+": "+methName+
+                          ": clicked on No: currentAction:["+this.currentAction+"]");
+                        this.populateExistinAction(data);
+                        this.resetVmsForScaleout(data);
+                        this.oldAction = this.referenceDataObject.action + '';
+                        this.clearCache();
+                        this.clearVnfcData()
+                        this.refernceScopeObj.from = '';
                     }
-                    this.clearCache();
-                    this.refernceScopeObj.from = '';
-                    this.getArtifactsOpenStack()
-                } else {
-                    this.toggleIdentifier(data)
-                    this.currentAction = this.referenceDataObject.action;
-                    this.populateExistinAction(data);
-                    this.resetVmsForScaleout(data);
-                    this.oldAction = this.referenceDataObject.action + '';
-                    this.clearCache();
-                    this.clearVnfcData()
-                    this.refernceScopeObj.from = '';
-                }
 
-                // Enable or Block Template and PD Tabs
-                if (this.currentAction == 'ConfigScaleOut' && this.templateIdentifier) {
-                    let referenceDataObjectTemp = this.referenceDataObject;
-                    referenceDataObjectTemp['template-id'] = this.templateIdentifier;
-                    this.buildDesignComponent.getRefData(referenceDataObjectTemp);
-                } else {
-                    this.buildDesignComponent.getRefData(this.referenceDataObject);
-                }
-            });
+                    if (this.referenceDataObject.action === 'Configure' || this.referenceDataObject.action === 'ConfigModify') {
+                        this.isConfigOrConfigModify = true;
+                    } else {
+                        this.isConfigOrConfigModify = false;
+                        delete this.mappingEditorService.newObject['vnfc'];
+                    }
+
+                    // Enable or Block Template and PD Tabs
+                    if (this.currentAction == 'ConfigScaleOut' && this.templateIdentifier && this.templateIdentifier != '') {
+                        // let referenceDataObjectTemp = this.referenceDataObject;
+                        // referenceDataObjectTemp['template-id'] = this.templateIdentifier;
+                        // this.buildDesignComponent.getRefData(referenceDataObjectTemp);
+                        this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc }, { reqField: this.templateIdentifier });
+
+                    } else {
+                        this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
+                    }
+                });
         } else {
+            console.log( this.classNm+": "+methName+
+              ": userForm Not valid or oldAction not defined");
             this.actionChanged = true;
             this.currentAction = this.referenceDataObject.action;
             this.oldAction = this.referenceDataObject.action + '';
@@ -943,17 +1174,19 @@ export class ReferenceDataformComponent implements OnInit {
 
             // Enable or Block Template and PD Tabs
             if (this.currentAction == 'ConfigScaleOut' && this.templateIdentifier) {
-                let referenceDataObjectTemp = this.referenceDataObject;
-                referenceDataObjectTemp['template-id'] = this.templateIdentifier;
-                this.buildDesignComponent.getRefData(referenceDataObjectTemp);
+                // let referenceDataObjectTemp = this.referenceDataObject;
+                // referenceDataObjectTemp['template-id'] = this.templateIdentifier;
+                // this.buildDesignComponent.getRefData(referenceDataObjectTemp);
+                this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc }, { reqField: this.templateIdentifier });
             } else {
-                this.buildDesignComponent.getRefData(this.referenceDataObject);
+                this.buildDesignComponent.getRefData({ ...this.referenceDataObject, displayVnfc: this.displayVnfc });
             }
         }
         this.configDrp(data)
     }
 
     configDrp(data) {
+        console.log( this.classNm+": configDrp: start: data:["+data+"]");
         if (data == 'ConfigScaleOut') {
             this.groupAnotationType = ['', 'first-vnfc-name', 'fixed-value', 'relative-value', 'existing-group-name'];
         } else {
@@ -992,52 +1225,120 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     deviceProtocolChange() {
+        console.log( this.classNm+": deviceProtocolChange: start.");
+        if (this.referenceDataObject['device-protocol'] == 'REST') {
+
+        } else {
+            delete this.referenceDataObject['context-url']
+        }
         // Enable or Block Template and PD Tabs
-        this.buildDesignComponent.getRefData(this.referenceDataObject)
+        this.buildDesignComponent.getRefData(
+          {...this.referenceDataObject,displayVnfc: this.displayVnfc },
+          {reqField: this.templateIdentifier});
     }
 
-    // For the issue with multiple template changes
-    idChange(data, content, userForm) {
+    // used to call or trigger save object on template Identifier changes
+    idChange(data, userForm) {
+        console.log( this.classNm+": idChange: start: data:["+data+"]");
         if (data == null) {
             return;
         }
         // Enable or Block Template and PD Tabs
-        let referenceDataObjectTemp = this.referenceDataObject;
-        referenceDataObjectTemp['template-id'] = data;
-        this.buildDesignComponent.getRefData(referenceDataObjectTemp);
-
-        if ((userForm.valid) && this.oldtemplateIdentifier != '' && this.oldtemplateIdentifier != undefined) {
+        // let referenceDataObjectTemp = this.referenceDataObject;
+        // referenceDataObjectTemp['template-id'] = data;
+        // this.buildDesignComponent.getRefData(referenceDataObjectTemp);
+        this.buildDesignComponent.getRefData(
+          {...this.referenceDataObject, displayVnfc: this.displayVnfc },
+          { reqField: data });
+
+        if ((userForm.valid)) {
             this.currentAction = "ConfigScaleOut"
             this.oldtemplateIdentifier = this.templateIdentifier
             let referenceObject = this.prepareReferenceObject();
             this.actionChanged = true;
             if (this.templateIdentifier) {
-                this.modalService.open(content).result.then(res => {
-                    if (res == 'yes') {
-                        this.validateTempAllData();
-                        let theJSON = JSON.stringify(this.tempAllData, null, '\t');
-                        let fileName = 'reference_AllAction_' + referenceObject.scopeName + '_' + '0.0.1V.json';
-                        this.uploadArtifact(JSON.stringify({ reference_data: this.tempAllData }), this.tempAllData[this.tempAllData.length - 1], fileName);
-                        var templateData = JSON.stringify(this.appData.template.templateData);
-                        var nameValueData = JSON.stringify(this.appData.template.nameValueData);
-                        var pdData = JSON.stringify(this.appData.pd);
-                        if (templateData != '{}' && templateData != null && templateData != undefined) this.saveTemp();
-                        if (nameValueData != '{}' && nameValueData != null && nameValueData != undefined) this.saveNameValue();
-                        if (pdData != '{}' && pdData != null && pdData != undefined) this.savePd();
-                        this.clearCache();
-                        this.clearVnfcData()
-                        this.refernceScopeObj.from = '';
-                    }
-                    else {
-                        this.clearCache();
-                        this.refernceScopeObj.from = '';
-                    }
-                });
+                 // Calling common Confirmation Modal
+                 let disposable = this.dialogService.addDialog(ConfirmComponent)
+                 .subscribe((isConfirmed)=>{
+                     //We get dialog result
+                     if(isConfirmed) {
+                         // User clicked on Yes
+                         this.validateTempAllData();
+                         this.saveToAppc();
+                         this.clearCache();
+                         this.clearVnfcData();
+                         this.refernceScopeObj.from = '';
+                     }
+                     else {
+                         // User clicked on No
+                         this.clearCache();
+                         this.refernceScopeObj.from = '';
+                     }
+                 });
+            }
+        } else {
+            this.oldtemplateIdentifier = this.templateIdentifier;
+        }
+    }
+
+    // used to call or trigger save object on multiple VNFC's changes
+    vnfcChanged( data, userForm) {
+        console.log( this.classNm+": vnfcChanged: new vnfcIdentifier:["+data+"]");
+        console.log( this.classNm+": vnfcChanged: oldVnfcIdentifier:["+
+          this.oldVnfcIdentifier+"]");
+        console.log(this.classNm+": vnfcChanged:  scope.vnfc-type:["+
+          this.referenceDataObject.scope['vnfc-type']+"]");
+        this.vnfcIdentifier = data;
+        this.clearCache();
+        if (data == null) {
+            return;
+        }
+      //.. populate VNFC Type in Sample field
+      this.setVnfcTypeInSample( this.vnfcIdentifier );
+        // Enable or Block Template and PD Tabs
+        let referenceDataObjectTemp = this.referenceDataObject;
+        referenceDataObjectTemp['vnfcIdentifier'] = data;
+        console.log( this.classNm+
+          ": vnfcChanged: displayVnfc:["+this.displayVnfc+"]");
+        this.buildDesignComponent.getRefData(
+          {...this.referenceDataObject, displayVnfc: this.displayVnfc },
+          { reqField: data });
+        console.log( this.classNm+
+          ": vnfcChanged: userForm.valid:["+userForm.valid+"]");
+        if ((userForm.valid) && this.oldVnfcIdentifier != '' && this.oldVnfcIdentifier != undefined) {
+            this.currentAction = this.referenceDataObject.action
+            this.oldVnfcIdentifier = this.vnfcIdentifier
+            let referenceObject = this.prepareReferenceObject();
+            this.actionChanged = true;
+            if (this.vnfcIdentifier) {
+                 // Calling common Confirmation Modal
+                 let disposable = this.dialogService.addDialog(ConfirmComponent)
+                 .subscribe((isConfirmed)=>{
+                     //We get dialog result
+                     if(isConfirmed) {
+                         // User clicked on Yes
+                         this.validateTempAllData();
+                         this.saveToAppc();
+                         this.clearCache();
+                         this.clearVnfcData()
+                         this.refernceScopeObj.from = '';
+                     }
+                     else {
+                         // User clicked on No
+                         this.clearCache();
+                         this.refernceScopeObj.from = '';
+                     }
+                 });
+            }
+        } else {
+            if (data != null) {
+                this.oldVnfcIdentifier = this.vnfcIdentifier
             }
         }
     }
 
     clearCache() {
+        console.log( this.classNm+": clearCache: start.");
         // get the value and save the userid and persist it.
         this.clearTemplateCache();
         this.clearPdCache();
@@ -1059,6 +1360,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     saveTemp() {
+        console.log( this.classNm+": saveTemp: start.");
         this
             .httpUtils
             .post(
@@ -1076,6 +1378,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     saveNameValue() {
+        console.log( this.classNm+": saveNameValue: start.");
         this
             .httpUtils
             .post(
@@ -1118,6 +1421,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     openModel(toShow: any, message: any, title: any) {
+        console.log( this.classNm+": openModel: start: title:["+title+"]");
         this.modalComponent.isShow = toShow;
         this.modalComponent.message = message;
         this.modalComponent.title = title;
@@ -1142,9 +1446,42 @@ export class ReferenceDataformComponent implements OnInit {
         if (!(this.referenceDataObject['template-id-list'].indexOf(this.templateId.trim()) > -1)) {
             this.referenceDataObject['template-id-list'].push(this.templateId.trim());
         }
+        // Changing value to blank otherwise it will show previous value in text box of popup
+        this.templateId = '';
+    }
+
+    // adds the vnfc to the vnfc dropdown list
+    addVnfc() {
+      var newVnfcTypeV= this.newVnfcType.trim();
+        console.log(this.classNm+
+          ": addVnfc: start: newVnfcTypeV:["+newVnfcTypeV+"]");
+        if (!(this.referenceDataObject.scope['vnfc-type-list'])) {
+            this.referenceDataObject.scope['vnfc-type-list'] = [];
+        //  this.vnfcIdentifier = newVnfcTypeV;
+        } else if (this.referenceDataObject.scope['vnfc-type-list'].length == 0){
+        //  this.vnfcIdentifier = newVnfcTypeV;
+        }
+        this.vnfcIdentifier = newVnfcTypeV;
+        console.log(this.classNm+
+          ": addVnfc: vnfcIdentifier:["+this.vnfcIdentifier+"]");
+        if (!(this.referenceDataObject.scope['vnfc-type-list'].indexOf(newVnfcTypeV) > -1)) {
+            this.referenceDataObject.scope['vnfc-type-list'].push(newVnfcTypeV);
+        }
+        this.tempAllData.forEach(obj => {
+            if (obj.action == "Configure" || obj.action == "ConfigModify") {
+                obj.scope['vnfc-type-list'] = this.referenceDataObject.scope['vnfc-type-list']
+            }
+            this.resetArtifactList(obj);
+        });
+        console.log(this.classNm+": addVnfc: scope vnfc-type:["+
+          this.referenceDataObject.scope['vnfc-type']+"]");
+      this.setVnfcTypeInSample( newVnfcTypeV );
+        // Changing newVnfcType value to blank otherwise it will show previous value in text box of popup
+        this.newVnfcType = ''
     }
 
     resetVms() {
+        console.log( this.classNm+": resetVms: start.");
         this.referenceDataObject.vm = [];
     }
 
@@ -1178,6 +1515,9 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     resetParamsOnVnfcType() {
+        console.log( this.classNm+": resetParamsOnVnfcType: start:\n "+
+          "ref.DataObject.scope vnfc-type:["+
+          this.referenceDataObject.scope['vnfc-type']+"]");
         let scopeName = '';
         //if only vnf is there
         if (this.referenceDataObject.scope['vnfc-type'] == '' || this.referenceDataObject.scope['vnfc-type'] == null || this.referenceDataObject.scope['vnfc-type'] == 'null') {
@@ -1201,8 +1541,11 @@ export class ReferenceDataformComponent implements OnInit {
         if (scopeName) {
             scopeName = scopeName.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
         }
+        console.log( this.classNm+": resetParamsOnVnfcType: return scopeName:["+
+          scopeName+"]");
         return scopeName
     }
+
     decideExtension(obj) {
         //marking the extension based on the device-protocol selected by the user 
         let extension = '.json';
@@ -1220,6 +1563,8 @@ export class ReferenceDataformComponent implements OnInit {
         return extension;
     }
     prepareArtifactList(scopeName, extension) {
+        console.log( this.classNm+": prepareArtifactList: start: scopeName:["+
+          scopeName+"] extension:["+extension+"]");
         this.referenceDataObject['artifact-list'] = [];
         //preparing the artifact list array file names along with extension
         let config_template_fileName = this.referenceDataObject.action + '_' + scopeName + '_' + '0.0.1V.' + extension;
@@ -1280,6 +1625,18 @@ export class ReferenceDataformComponent implements OnInit {
         return newObj
     }
     pushOrReplaceTempData(newObj, action) {
+        console.log( this.classNm+": pushOrReplaceTempData: start: action:["+
+          action+"]\n newObj.scope vnfc-type:["+newObj.scope['vnfc-type']+"]");
+        if( newObj.scope['vnfc-type'] == undefined ||
+            newObj.scope['vnfc-type'] == null ||
+            newObj.scope['vnfc-type'].length < 1 )
+        {
+          console.log( this.classNm+": pushOrReplaceTempData: scope vnfc-type"+
+            " is empty.\n vnfcIdentifier:["+this.vnfcIdentifier+"]");
+          if( this.vnfcIdentifier.length > 0 ) {
+            newObj.scope['vnfc-type']= this.vnfcIdentifier;
+          }
+        };
         let actionObjIndex = this.tempAllData.findIndex(obj => {
             return obj['action'] == action;
         });
@@ -1313,7 +1670,26 @@ export class ReferenceDataformComponent implements OnInit {
 
     }
 
+    // removes the unwanted keys added in the artifact for vnfc level actions
+    deleteUnwantedKeys(newObj) {
+        console.log( this.classNm+": deleteUnwantedKeys: start.");
+        newObj = JSON.parse(JSON.stringify(newObj))
+        delete newObj['template-id']
+        delete newObj['vnfcIdentifier']
+        if (newObj.action != "ConfigScaleOut") {
+            delete newObj['template-id-list']
+        }
+        if (newObj.action != 'HealthCheck') {
+            delete newObj['url'];
+        }
+        if (newObj.action != "Configure" && newObj.action != "ConfigModify") {
+            newObj.scope['vnfc-type-list'] = [];
+        }
+        return newObj
+    }
+
     addAllActionObj(newObj, scopeName) {
+        console.log( this.classNm+": addAllActionObj: start.");
         //Creating all action block to allow mulitple actions at once
         let allAction = {
             action: 'AllAction',
@@ -1335,6 +1711,7 @@ export class ReferenceDataformComponent implements OnInit {
     }
 
     resetTempData() {
+        console.log( this.classNm+": resetTempData: start.");
         if (this.uploadedDataArray && this.uploadedDataArray != undefined && this.uploadedDataArray.length != 0) {
             if (this.tempAllData && this.tempAllData != undefined) {
                 for (var i = 0; i < this.tempAllData.length; i++) {
@@ -1359,7 +1736,10 @@ export class ReferenceDataformComponent implements OnInit {
     trackByFn(index, item) {
         return index;
     }
+
     getArtifactsOpenStack() {
+      console.log( this.classNm+": getArtifactsOpenStack: start: "+
+        "tempAllData length="+this.tempAllData.length );
         var array = []
         var vnfcFunctionCodeArrayList = [];
         var vnfcSetArray=[];
@@ -1373,7 +1753,8 @@ export class ReferenceDataformComponent implements OnInit {
                 vnfcSetArray=this.tempAllData[i]['firstRowVmSpreadSheet']
             }
         }
-
+      console.log( this.classNm+": getArtifactsOpenStack: vnfcSetArray length="+
+       vnfcSetArray.length );
        if(vnfcSetArray)
        {
         let vnfcSetArrayLen = vnfcSetArray.length;
@@ -1396,4 +1777,108 @@ export class ReferenceDataformComponent implements OnInit {
         this.remUploadedDataArray = vnfcFunctionCodeArrayList;
        }
     }
+
+    /**
+     * Handles the display of VM block based on the action change
+     */
+    handleVMBlockDisplay() {
+        switch (this.referenceDataObject.action) {
+            case this.actionList.ConfigScaleOut:
+            case this.actionList.Configure:
+            case undefined:
+            case '':
+                this.displayVMBlock = true;
+                break;
+            default:
+                this.displayVMBlock = false;
+        }
+    }
+
+  //.. check VNFC Type equality in Upper Selection vs entered in Sample field
+  checkVnfcTypeEqual( vnfctp: string ) {
+    var methName= "checkVnfcTypeEqual";
+      console.log(this.classNm+": "+methName+": vnfctp:["+vnfctp+"]");
+      console.log( this.classNm+": "+methName+": vnfcIdentifier:["+
+        this.vnfcIdentifier+"]");
+      console.log( this.classNm+": "+methName+":  Sample[vnfc-type]:["+
+        this.Sample['vnfc-type']+"]");
+    if( vnfctp != null && vnfctp.length > 0 ) {
+      if( this.vnfcIdentifier != null && this.vnfcIdentifier.length > 0 ) {
+        console.log(
+          this.classNm+": "+methName+": compare non empty VNFC Types...");
+        if( vnfctp != this.vnfcIdentifier ) {
+            console.log( this.classNm+": "+methName+": Non-match WARNING !");
+          //.. display in pop-up
+          this.nService.warn( 'WARNING',
+            "The specified VNFC Types don't match."+
+            " Can cause discrepancy in the artifacts.", this.options );
+        } else {
+            console.log(this.classNm+": checkVnfcTypeEqual: VNFC Types're equal.");
+        };
+      };
+    };
+  };
+
+  //.. populating VNFC Type in Sample fields
+  setVnfcTypeInSample( vnfctp: string ) {
+   // if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.classNm+": setVnfcTypeInSample: vnfctp:["+vnfctp+"]");
+    this.Sample['vnfc-type']= vnfctp;
+  };
+
+    // Common method to show validation errors
+    private showValidationErrors(referenceDataObject) {
+        if (this.referenceDataObject.action === '') {
+            this.nService.error('Error', 'Select a valid Action');
+            return;
+        }
+        if (this.referenceDataObject['device-protocol'] === '') {
+            this.nService.error('Error', 'Select a valid Device protocol');
+            return;
+        }
+
+        if (referenceDataObject.action === 'ConfigScaleOut' && !this.templateIdentifier) {
+            this.nService.error('Error', 'Select a valid Template Identifier');
+        }
+    }
+
+    resetArtifactList( obj) {
+        console.log( this.classNm+": resetArtifactList: start...");
+        let vnfcTypeList = obj.scope['vnfc-type-list'];
+        let vnf = this.referenceDataObject.scope['vnf-type']
+        let pd_fileName
+        let config_template_fileName
+        let configTemplate
+        let pdTemplate
+        let paramValue
+        let param_fileName
+        obj['artifact-list'] = [];
+        for (var x = 0; x < vnfcTypeList.length; x++) {
+            let extension = this.referenceDataFormUtil.decideExtension(obj)
+            //for replacing spaces and "/" with "_"
+            let type = vnfcTypeList[x].replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '');
+            pd_fileName = this.referenceDataObject.action + '_' + vnf.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + type + '_' + '0.0.1V.yaml';
+            config_template_fileName = this.referenceDataObject.action + '_' + vnf.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + type + '_' + '0.0.1V' + extension;
+            param_fileName = this.referenceDataObject.action + '_' + vnf.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + type + '_' + '0.0.1V.json';
+            configTemplate = {
+                'artifact-name': 'template_' + config_template_fileName,
+                'artifact-type': 'config_template'
+            };
+            pdTemplate = {
+                'artifact-name': 'pd_' + pd_fileName,
+                'artifact-type': 'parameter_definitions'
+            };
+            paramValue = {
+                'artifact-name': 'param_' + param_fileName,
+                'artifact-type': 'param_values'
+            };
+
+            this.referenceDataObject['artifact-list'].push(configTemplate,
+                pdTemplate, paramValue
+            );
+            obj['artifact-list'].push(configTemplate,
+                pdTemplate, paramValue
+            );
+        }
+    }
 }
diff --git a/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts
new file mode 100644
index 0000000..00e014c
--- /dev/null
+++ b/src/app/vnfs/build-artifacts/reference-dataform/reference-dataform.util.ts
@@ -0,0 +1,169 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+===================================================================
+Copyright (C) 2018 IBM.
+===================================================================
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { Injectable } from '@angular/core';
+import { NotificationsService } from 'angular2-notifications';
+import {Observable} from 'rxjs';
+import {UtilityService} from '../../../shared/services/utilityService/utility.service';
+import { environment } from '../../../../environments/environment';
+import { HttpUtilService } from '../../../shared/services/httpUtil/http-util.service';
+//import {APIService} from "../../../shared/services/cdt.apicall";
+
+@Injectable()
+export class ReferenceDataFormUtil {
+
+    private successMessage = 'Retrieved artifact successfully';
+    private failureMessage = 'There is no artifact saved in APPC for the selected action!';
+    private response: Observable<Object>;
+
+    constructor(
+      private notificationService: NotificationsService, private utilityService:UtilityService, private httpUtils: HttpUtilService
+    ) {
+    }
+
+    checkResult(result: any) {
+
+        if (result.output.status.code == '401') {
+            this.notificationService.info('Information', this.failureMessage);
+            return false;
+        }
+        else if (result.output.status.code == '400') {
+            this.notificationService.success('Success', this.successMessage);
+            return true;
+        }
+
+    }
+
+    // utility to add the slashes to the payload
+    appendSlashes(artifactData) {
+        return artifactData.replace(/"/g, '\\"');
+    }
+
+    public nullCheckForVnfcType(object: any) {
+        if (object == undefined || object == 'null' || object == false) {
+            return true;
+        }
+
+    }
+
+    public nullCheckForVnfcTypeList(object: any) {
+        if (object == undefined || object == null || object.length == 0) {
+            return true;
+        }
+
+    }
+
+    //used for forming the file exension
+    decideExtension(obj) {
+        //marking the extension based on the device-protocol selected by the user 
+        let extension = '.json';
+        switch (obj['device-protocol']) {
+            case 'ANSIBLE':
+            case 'CHEF':
+            case 'CLI':
+                extension = '.json';
+                break;
+            case 'NETCONF-XML':
+            case 'REST':
+                extension = '.xml';
+                break;
+        }
+        return extension;
+    }
+
+
+
+    createArtifactName(action, vnf, type, extension) {
+        if (type)
+            return action + '_' + vnf.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + type + '_' + '0.0.1V' + extension;
+        else
+            return action + '_' + vnf.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V' + extension;
+    }
+
+    createArtifactNameForIdentifiers(action, vnf, type, extension)
+    {
+        return action + '_' + vnf.replace(/ /g, '').replace(new RegExp('/', 'g'), '_').replace(/ /g, '') + '_' + '0.0.1V_' + type + extension;
+    }
+
+
+    createConfigTemplate(config_template_fileName) {
+        var template= {
+            'artifact-name': 'template_' + config_template_fileName,
+            'artifact-type': 'config_template'
+        };
+
+        return template;
+    }
+
+    createConfigTemplateForPushReplaceData(config_template_fileName) {
+        var template= {
+            'template_artifact': 'template_' + config_template_fileName,
+        };
+
+        return template;
+    }
+
+    createPdTemplate(pd_fileName) {
+        var pd= {
+            'artifact-name': 'pd_' + pd_fileName,
+            'artifact-type': 'parameter_definitions'
+        };
+
+        return pd;
+    }
+
+    createPdTemplateForPushReplaceData(pd_fileName) {
+        var pd= {
+            'pd_artifact': 'pd_' + pd_fileName,
+        };
+
+        return pd;
+    }
+
+    createParamValue(param_fileName) {
+        var paramValue= {
+            'artifact-name': 'param_' + param_fileName,
+            'artifact-type': 'param_values'
+        };
+        return paramValue;
+    }
+
+    createParamValueForPushReplaceData(param_fileName) {
+        var paramValue= {
+            'param_artifact': 'param_' + param_fileName,
+        };
+        return paramValue;
+    }
+
+    handleApiData(payloadData,artifactType)
+    {
+        this.response =
+        this.httpUtils.post({
+            url: environment.getDesigns,
+            data: payloadData });
+        this.response.subscribe( response => {
+          this.utilityService.processApiSubscribe(response, this.utilityService.putAction, artifactType)
+        },
+        error => this.utilityService.processApiError());
+    }
+
+}
diff --git a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
index e505b59..26cbf27 100644
--- a/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/param-name-value/param-name-value.component.html
@@ -69,9 +69,14 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                             <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
                         </div>
-                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="
+vnfcType"
+>
                             <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
                         </div>
+                        <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
+
+                        </div>
                         <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                             <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
                         </div>
@@ -109,8 +114,8 @@ ECOMP is a trademark and service mark of AT&T Intellectual Property.
             <div class="mdl-card__title-text">Param Name Value List</div>
             <div><font size="1">(Please click anywhere on the editor to see the synced name value pairs)</font></div>
         </label>
-            <ace-editor [(text)]="this.artifactRequest.paramsContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" (textChanged)="onParamChanges($event)" [options]="{maxLines: 'Infinity', fontSize: '13pt' }" style="min-height: 500px; width: 100%"></ace-editor>
+            <ace-editor [(text)]="this.artifactRequest.paramsContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" (textChanged)="onParamChanges($event)" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%"></ace-editor>
         </div>
 
     </tab>
-</tabs>
\ No newline at end of file
+</tabs>
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
index 65f3b6a..105f0ec 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.html
@@ -41,9 +41,12 @@ limitations under the License.
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                         <label>Vnf Type</label><input class="form-control" type="text" disabled value="{{vnfType}}" />
                     </div>
-                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
+                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="vnfcType">
                         <label>Vnfc Type</label><input class="form-control" type="text" disabled value="{{vnfcType}}" />
                     </div>
+                    <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12" *ngIf="!vnfcType">
+
+                    </div>
                     <div class="col-lg-3 col-sm-6 col-md-3 col-xs-12">
                         <label>Protocol</label><input class="form-control" type="text" disabled value="{{protocol}}" />
                     </div>
@@ -78,7 +81,7 @@ limitations under the License.
     <div><label for="textAreaGeneratedTemplate">
         <div class="mdl-card__title-text">File Editor</div>
     </label>
-        <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: 'Infinity', fontSize: '13pt' }" style="min-height: 500px; width: 100%"></ace-editor>
+        <ace-editor [(text)]="configMappingEditorContent" #templateeditor [theme]="'chrome'" [mode]="'velocity'" [options]="{maxLines: '100', fontSize: '13pt' }" style="min-height: 200px; width: 100%; caret-color: white "></ace-editor>
     </div>
     <app-modal [title]="'Confirmation'" [isShow]="false" [message]="'Template is saved and ready for creating parameter definition'" #modalComponent>
     </app-modal>
@@ -106,4 +109,4 @@ limitations under the License.
     
     " (click)="modal.close()">Cancel</button>
         </modal-footer>
-    </modal>
\ No newline at end of file
+    </modal>
diff --git a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
index 6cae746..0be5f68 100644
--- a/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
+++ b/src/app/vnfs/build-artifacts/template-holder/template-configuration/template-configuration.component.ts
@@ -45,6 +45,7 @@ const PARAM_DATA:string="param_data";
 const TEMPLATE_DATA:string="template_data";
 @Component({ selector: 'app-golden-configuration', templateUrl: './template-configuration.component.html', styleUrls: ['./template-configuration.component.css'] })
 export class GoldenConfigurationComponent implements OnInit {
+  clName= "TemplateConfigCompon";
   @ViewChild('templateeditor') templateeditor;
   @Input() configMappingEditorContent: string;
   @Input() isMappingComp: boolean;
@@ -154,7 +155,13 @@ export class GoldenConfigurationComponent implements OnInit {
 
   //======================================Start of ngOnInit() Method============================================
   ngOnInit() {
+    var methName= "ngOnInit";
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+": start.");
     var refObj = this.refObj = this.prepareFileName();
+    if( this.utilityService.getTracelvl() > 0 )
+      console.log( this.clName+": "+methName+
+        ": refObj:["+JSON.stringify(refObj)+"]");
     if (refObj && refObj != undefined) {
       this.item = refObj;
 
@@ -162,6 +169,10 @@ export class GoldenConfigurationComponent implements OnInit {
       this.vnfcType = this.item.scope["vnfc-type"];
       this.protocol = this.item['device-protocol'];
       this.action = this.item.action;
+      if( this.utilityService.getTracelvl() > 0 )
+        console.log( this.clName+": "+methName+": vnfType:["+this.vnfType+
+          "] vnfcType:["+this.vnfcType+"] protocol:["+this.protocol+"] action:["+
+          this.action+"]");
       this.artifactRequest.action = this.item.action;
       this.artifactRequest.vnfType = this.vnfType;
       if (this.vnfcType != undefined && this.vnfcType.length != 0) {
diff --git a/src/app/vnfs/myvnfs/myvnfs.component.html b/src/app/vnfs/myvnfs/myvnfs.component.html
index 3ce7859..3bfabc3 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.html
+++ b/src/app/vnfs/myvnfs/myvnfs.component.html
@@ -84,13 +84,13 @@ limitations under the License.
         </div>
     </div>
     <div class="col-lg-12-ln2">
-        <button type="button" (click)="buildNewDesign(content)" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">Create New
-            VNF Type or VNFC Type
+        <button type="button" (click)="createVnfcModal.open()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
+            Create New VNF Type
         </button>
     </div>
 </div>
 
-<ng-template #content let-c="close" let-d="dismiss">
+<!-- <ng-template #content let-c="close" let-d="dismiss">
     <form ngNativeValidate (ngSubmit)="c('yes')">
         <div class="modal-header">
             <h4 class="modal-title">Enter VNF type and VNFC to proceed</h4>
@@ -130,4 +130,38 @@ limitations under the License.
 
         </div>
     </form>
-</ng-template>
\ No newline at end of file
+</ng-template> -->
+
+<!-- Modal for Create new Vnf -->
+<modal #createVnfcModal>
+    <form ngNativeValidate (ngSubmit)="buildNewDesign('yes')">
+        <modal-header [show-close]="true">
+            <h4 class="modal-title">Enter VNF Type</h4>
+        </modal-header>
+        <modal-body>
+            <div class="form-group row">
+                <label for="example-text-input" class="col-12 col-form-label">Enter Vnf Type</label>
+                <div class="col-12">
+                    <input pattern=".*[^ ].*" required name="vnfType" class="form-control" (ngModelChange)="validateVnfName($event)" [(ngModel)]="vnfType" type="text" id="vnfType">
+                    <span class="error-message">{{errorMessage}}</span>
+                </div>
+
+            </div>
+            <div class="form-check">
+                <label class="form-check-label">
+                    <input  name="vnfcRequired" class="form-check-input" [(ngModel)]="vnfcRequired" type="checkbox"
+                            id="vnfcRequired">
+                    This VNF has VNFC templates
+                </label>
+            </div>
+        </modal-body>
+        <modal-footer [show-default-buttons]="false">
+            <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="buildNewDesign('no')">
+                Proceed To Upload
+            </button>
+            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" [disabled]="invalid">
+                Next
+            </button>
+        </modal-footer>
+    </form>
+</modal>
diff --git a/src/app/vnfs/myvnfs/myvnfs.component.ts b/src/app/vnfs/myvnfs/myvnfs.component.ts
index d3bfc24..a124705 100644
--- a/src/app/vnfs/myvnfs/myvnfs.component.ts
+++ b/src/app/vnfs/myvnfs/myvnfs.component.ts
@@ -43,6 +43,9 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
     noDataMsg: string;
     vnfType: any;
     vnfcType: any;
+    vnfcRequired: boolean = false;
+    errorMessage = '';
+    invalid = true;
     options = {
         timeOut: 1000,
         showProgressBar: true,
@@ -84,32 +87,31 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
     }
 
     getArtifacts(data) {
+        let tempObj: any;
         this.ngProgress.start();
-        this.subscription = this.httpUtil.post({
+      //this.subscription = this.httpUtil.post({
+        this.httpUtil.post({
             url: environment.getDesigns,
             data: data
         })
-            .subscribe(resp => {
-                console.log("resp:", resp);
-                const tempObj = JSON.parse(resp.output.data.block);
-                this.vnfData = tempObj.designInfo;
+            .subscribe( resp => {
+                if (resp.output.data.block !== undefined && resp.output.data.block !== null && resp.output.data.block.length !== 0) {
+                  console.log("getArtifacts: resp:", resp.output.data.block);
+                  tempObj = JSON.parse(resp.output.data.block);
+                  this.vnfData = tempObj.designInfo;
+                }
                 if (this.vnfData == undefined || this.vnfData == null || this.vnfData.length == 0) {
                     this.noData = true;
-
-                    this.noDataMsg = resp.output.data.status.message;
+                    // this.noDataMsg = resp.output.data.status.message;
                 } else {
                     this.noData = false;
                 }
-                console.log(this.noData);
+                console.log("getArtifacts: noData:"+this.noData);
                 this.ngProgress.done();
-            }
-                ,
-                error => {
-
-                    this.nService.error(appConstants.errors.error, appConstants.errors.connectionError)
-                }
-
-            );
+            },
+            error => {
+              this.nService.error(appConstants.errors.error, appConstants.errors.connectionError)
+            });
 
         this.filter = ['vnf-type', 'vnfc-type', 'artifact-name'];
         setTimeout(() => {
@@ -122,25 +124,56 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
     getData() {
     }
 
-    buildNewDesign(content) {
-
-        this.modalService.open(content).result.then(res => {
-            this.mappingEditorService.referenceNameObjects = undefined;
-            sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType, vnfcType: this.vnfcType }));
-            this
-                .router
-                .navigate([
-                    'vnfs', 'design', 'references'
-                ]);
-        });
+    buildNewDesign( response) {
+     // this.modalService.open(content).result.then(res => {
+     //     this.mappingEditorService.referenceNameObjects = undefined;
+     //     sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType, vnfcType: this.vnfcType }));
+     //     this.router.navigate([
+     //             'vnfs', 'design', 'references'
+     //         ]);
+     // });
+        if (response == 'yes') {
+            sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: this.vnfType }));
+            sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '')
+        } else {
+            sessionStorage.setItem('vnfParams', "")
+        }
 
+        this.mappingEditorService.referenceNameObjects = undefined;
+        this.mappingEditorService.identifier = '';
+        //this.mappingEditorService.newObject = {};
+        this.router.navigate([
+            'vnfs', 'design', 'references'
+        ]);
+    }
 
+    validateVnfName(name) {
+        if (!name.trim() || name.length < 1) {
+            this.errorMessage = '';
+            this.invalid = true;
+        } else if (name.startsWith(' ') || name.endsWith(' ')) {
+            this.errorMessage = 'Leading and trailing spaces are not allowed';
+            this.invalid = true;
+        } else if (name.includes('  ')) {
+            this.errorMessage = 'More than one space is not allowed in VNF Type';
+            this.invalid = true;
+        } else if (name.length > 150) {
+            this.errorMessage = 'VNF Type should be of minimum one character and maximum 150 character';
+            this.invalid = true;
+        } else {
+            this.invalid = false;
+            this.errorMessage = '';
+        }
     }
 
     navigateToReference(item) {
         sessionStorage.setItem('updateParams', JSON.stringify(item));
         this.mappingEditorService.referenceNameObjects = undefined;
-
+        sessionStorage.setItem('vnfParams', JSON.stringify({ vnfType: item.vnfType, vnfcType: item.vnfcType }));
+        this.mappingEditorService.identifier = '';
+        if (this.mappingEditorService.newObject && this.mappingEditorService.newObject.vnfc != undefined) {
+            this.mappingEditorService.newObject.vnfc = '';
+        }
         this
             .router
             .navigate(['../design/references'], {
@@ -165,7 +198,7 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
 
     clearCache() {
         // get the value and save the userid and persist it.
-
+        sessionStorage.setItem("vnfcSelectionFlag", '' + this.vnfcRequired + '');
         this.mappingEditorService.setTemplateMappingDataFromStore(undefined);
         localStorage['paramsContent'] = '{}';
         this.mappingEditorService.setParamContent(undefined);
@@ -179,6 +212,4 @@ export class MyvnfsComponent implements OnInit, OnDestroy {
         this.mappingEditorService.changeNavAppData(appData);
         this.mappingEditorService.changeNavDownloadData(downloadData);
     }
-
-
-}
\ No newline at end of file
+}