Enhanced Performance with Lightning Web Components

<template>
<div>
<template if:true={ready}>
<section role=”dialog” tabindex=”-1″ aria-labelledby=”modal-heading-01″ aria-modal=”true” aria-describedby=”modal-content-id-1″ class=”slds-modal slds-fade-in-open”>
<div class=”slds-modal__container”>
<!– ###### MODAL BOX HEADER Start ######–>
<header class=”slds-modal__header”>
<h2 id=”modal-heading-01″ class=”slds-text-heading_medium slds-hyphenate”>Create {ObjectName}</h2>
</header>
<!–###### MODAL BOX BODY Part Start######–>
<div class=”slds-modal__content slds-p-around_medium” id=”modal-content-id-1″>
<lightning-layout multiple-rows=”true” class=””>
<template for:each={returnList} for:item=”obj”>
<lightning-layout-item key={obj.fieldName} size=”6″ padding=”around-small” multiple-rows=”true”>
<template if:true={obj.isMultipickList}>
<lightning-dual-listbox name={obj.fieldName}
label={obj.fieldLabel}
source-label=”Available”
selected-label=”Selected”
field-level-help=”This is a dual listbox”
options={obj.PickFieldList}
value={obj.MultiPickListAnswer}></lightning-dual-listbox>
<lightning-input type=”date” name=”input1″ label=”Enter a date” ></lightning-input>
</template>
<template if:true={obj.isPickList}>
<lightning-combobox
name={obj.fieldName}
label={obj.fieldLabel}
value={selectedValue}
placeholder=”–Select–“
options={obj.PickFieldList}
onchange={handlePickListChange} ></lightning-combobox>
</template>
<template if:true={obj.isRefrence}>
<c-lookup selectedid={obj.SelectedValue} objname={obj.ObjectName} fieldname={obj.fieldName} fieldlabel={obj.fieldLabel} onselected={getReturnId}></c-lookup>
</template>
<template if:true={obj.isNormal}>
<lightning-input type={obj.fieldType} name={obj.fieldName} label={obj.fieldLabel} value={obj.SelectedValue} ></lightning-input>
</template>
</lightning-layout-item>
</template>
</lightning-layout>
</div>
<!–###### MODAL BOX FOOTER Part Start ######–>
<footer class=”slds-modal__footer”>
<lightning-button variant=”brand” label=”Save” title=”Save” icon-name=”utility:save” class=”slds-m-left_x-small slds-m-top_medium” onclick={handleSaveClick}></lightning-button>
<lightning-button variant=”brand” label=”Reset” title=”Reset” icon-name=”utility:refresh” class=”slds-m-left_x-small slds-m-top-medium” onclick={handleResetClick}></lightning-button>
</footer>
</div>
</section>
<div class=”slds-backdrop slds-backdrop_open”></div>
</template>
</div>
</template>

/*RecordPage.js*/
/* eslint-disable no-console */
import { LightningElement, track, wire } from ‘lwc’;
import getAllFields from ‘@salesforce/apex/recordPageController.getAllFields’;
import saveData from ‘@salesforce/apex/recordPageController.saveData’;
export default class RecordPage extends LightningElement {
@track ObjectName = ‘Account’ ;
@track selectedValue = ” ;
@track returnList = [] ;
@track saveDataList = [] ;
@track resetDataList = [] ;
@track currentObject = {} ;
@track ready = true;
@wire(getAllFields,{objectName: ‘$ObjectName’})
wiredData({data,error}){
if(data){
this.returnList = data ;
this.resetDataList = data;
// console.log(‘data->>’+JSON.stringify(data));
// console.log(‘this.returnList->>’+JSON.stringify(this.returnList));
}else if(error){
console.log(‘error->>’+JSON.stringify(error));
}
}

//Below in Init for LWC.
connectedCallback() {}
/* method for saving record*/
handleSaveClick(event){
//console.info(‘returnList :: ‘+JSON.stringify(this.returnList));
this.template.querySelectorAll(‘lightning-input’).forEach(each => {
this.currentObject[each.name] = each.value ;
//this.currentObject.sObjectType= this.ObjectName ;
});
console.info(‘ObjectData :: ‘+JSON.stringify(this.currentObject));
let tempObj = this.currentObject;
tempObj.sObjectType = this.ObjectName;
console.info(‘ObjectData :: ‘+JSON.stringify(tempObj));
/* console.info(‘selectedValue :: ‘+this.selectedValue); */
saveData({
recordData: tempObj
})
.then(result => {
console.log(‘result>>’+JSON.stringify(result));
})
.catch((error) => {
console.log(‘Error received: code’ + JSON.stringify(error));
});
}
/* method for saving record*/
handleResetClick(event){
this.returnList = this.resetDataList ;
this.currentObject = {} ;
this.ready = false ;
this.ready = true ;
}
handlePickListChange(event){
try{
this.currentObject[event.target.name] = event.target.value;
console.info(‘this.currentObject :: ‘+JSON.stringify(this.currentObject));
}catch(ex){
console.info(‘ERROR:: ‘+ex);
}

}
getReturnId(event){
try{
let EventReturn = event.detail;
this.currentObject[EventReturn.fieldname] = EventReturn.recordId ;
console.info(‘EventReturn:: ‘+JSON.stringify(EventReturn));
}catch(ex){
console.info(‘ERROR:: ‘+ex);
}

}
}

/*RecordPage.js-meta.xml*/
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”recordPage”>
<apiVersion>45.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>