Skip to content

Instantly share code, notes, and snippets.

@Sunil02kumar

Sunil02kumar/AccountEdit.cmp

Last active January 30, 2024 06:16
Show Gist options
  • Save Sunil02kumar/a1e547cc211e54759c9dda49a6f8ef7b to your computer and use it in GitHub Desktop.
Save Sunil02kumar/a1e547cc211e54759c9dda49a6f8ef7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AccountEdit.cmp
<aura:component >
<aura:attribute name="recordId" type="String" required="true"/>
<aura:attribute name="recordInfo" type="Object" access="private"/>
<aura:attribute name="record" type="Object" access="private"/>
<aura:attribute name="recordError" type="String" access="private"/>
<aura:attribute name="currView" type="String" />
<aura:attribute name="accountRecordType" type="String"/>
<aura:attribute name="isRecordDeleted" type="boolean" default="false" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<force:recordData aura:id="recordHandler" recordId="{!v.recordId}" layoutType="FULL"
targetFields="{!v.recordInfo}" targetError="{!v.recordError}" mode="EDIT"/>
<force:recordData aura:id="newAccountCreator" layoutType="FULL" targetRecord="{!v.record}" targetFields="{!v.recordInfo}"
targetError="{!v.recordError}"/>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.recordError}
</ui:message>
</div>
</aura:if>
<!-- Display an editing form -->
<div class="slds-form--stacked">
<div class="slds-form-element">
<lightning:input type="text" label="Account Name" value="{!v.recordInfo.Name}" />
</div>
<div class="slds-form-element">
<lightning:input type="text" label="Type" value="{!v.recordInfo.Type}" />
</div>
<div class="slds-form-element">
<lightning:input type="text" label="Industry" value="{!v.recordInfo.Industry}" />
</div>
<div class="slds-form-element">
<lightning:input type="text" label="Phone" value="{!v.recordInfo.Phone}" />
</div>
<div class="slds-form-element">
<lightning:button variant="brand" label="Save Record" onclick="{! c.updateRecord }"/>
<lightning:button variant="brand" label="Cancel" onclick="{! c.goToView }"/>
</div>
</div>
</aura:component>
Raw
AccountEditController.js
({
doInit: function(component, event, helper) {
var accRecordTypeValue = null;
if(component.get("v.accountRecordType")){
accRecordTypeValue = component.get("v.accountRecordType");
}
if(component.get("v.recordId")=="" || component.get("v.recordId")==null){
// Prepare a new record from template
console.log('doinit is called while creating new record remplate');
// Prepare a new record from template
component.find("newAccountCreator").getNewRecord(
"Account", // sObject type (entityApiName)
accRecordTypeValue, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var rec = component.get("v.record");
var error = component.get("v.recordError");
if(error || (rec === null)) {
console.log("Error initializing record template: " + error);
return;
}
console.log("Record template initialized: " + rec.sobjectType);
})
);
}
},
updateRecord: function(component, event, helper) {
//console.log(component.find("recordHandler"));
if(component.get("v.recordId")!= null){
//alert('update record logic');
component.find("recordHandler").saveRecord($A.getCallback(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// Saved! Show a toast UI message
// toast supported in lightning experience only
console.log('Update record get called from edit page ');
var resultsToast = $A.get("e.force:showToast");
console.log('resultsToast value:'+resultsToast);
if(resultsToast){
resultsToast.setParams({
"title": "Deleted",
"message": "The record is deleted."
});
resultsToast.fire();
$A.get("e.force:refreshView").fire();
}else{
component.set("v.isRecordDeleted","true");
console.log('updated record and isRecordDeleted is marked as true');
}
}
else {
var errmsg='Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error);
console.log(errmsg);
alert(errmsg);}
}));
}else{
//alert('new record logic');
var selectedRecType=component.get("v.accountRecordType");
//alert('selected recordtype:'+selectedRecType);
if(selectedRecType!="" && selectedRecType!=null){
component.set("v.recordInfo.RecordTypeId",selectedRecType);
}
component.find("newAccountCreator").saveRecord(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// Success! Prepare a toast UI message
// toast supported in lightning experience only
console.log('Update record get called from edit page ');
var resultsToast = $A.get("e.force:showToast");
console.log('resultsToast value:'+resultsToast);
if(resultsToast){
resultsToast.setParams({
"title": "Deleted",
"message": "The record is deleted."
});
resultsToast.fire();
$A.get("e.force:refreshView").fire();
}else{
component.set("v.isRecordDeleted","true");
}
}
else {
var errmsg='Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error);
console.log(errmsg);
alert(errmsg);
}
});
}
},
goToView :function(component, event, helper){
component.set("v.currView","ListView");
}
})
Raw
AccountListView.cmp
<aura:component controller="AccountListViewController" access="global" implements="flexipage:availableForAllPageTypes">
<aura:attribute name="recList" type="List" />
<aura:attribute name="menu" type="List" default="View,Edit,Delete" description="Optional Menu Items"/>
<aura:attribute name="currentView" type="String" default="ListView"/>
<aura:attribute name="selectedRecord" type="String" />
<aura:attribute name="isRefreshRequired" type="boolean" default="false" />
<aura:handler name="change" value="{!v.isRefreshRequired}" action="{!c.refreshListView}"/>
<!--attributes for recordtype selection-->
<aura:attribute name="selectedRecordType" type="String"/>
<aura:attribute name="recordTypeList" type="Object[]"/>
<!--attributes for deleting record from list-->
<aura:attribute name="recordDeleteError" type="String" access="private"/>
<aura:attribute name="recordIdToDelete" type="String" access="private"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>-->
<aura:attribute name="showSpinner" type="Boolean" default="false" />
<c:showSpinnerCmp show="{!v.showSpinner}"/>
<div class="slds-align--absolute-center">
<lightning:button variant="brand" label="Create New" onclick="{!c.createRecordhandler}"/>
</div>
<!--Section for Account List View starts-->
<aura:if isTrue="{!v.currentView =='ListView'}">
<aura:if isTrue="{!v.recList.length > 0}">
<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">Actions</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Industry</th>
<th scope="col">RecordType Name</th>
</tr>
</thead>
<aura:iteration items="{!v.recList}" var="item">
<tr>
<td>
<lightning:buttonMenu iconName="utility:threedots" >
<aura:iteration items="{!v.menu}" var="menuItem">
<lightning:menuItem label="{!menuItem}" value="{!item.Id + '---' + menuItem}" onactive="{!c.onSelectMenuItem}"/>
</aura:iteration>
</lightning:buttonMenu>
</td>
<td> {!item.Name}</td>
<td> {!item.Type}</td>
<td> {!item.Industry}</td>
<td>{!item.RecordType.Name}</td>
</tr>
</aura:iteration>
</table>
</aura:if>
</aura:if>
<!--Section for Account List View ends-->
<!--Section for Account recordType Selection starts-->
<aura:if isTrue="{!v.currentView =='RecordTypeSelection'}">
<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<lightning:buttonIcon class="slds-modal__close" iconName="utility:close" size="large"
variant="bare-inverse" alternativeText="Close" onclick="{!c.defaultCloseAction}" />
<h2 id="header43" class="slds-text-heading--medium">Please select record Type</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="slds-align--absolute-center">
<aura:iteration items="{!v.recordTypeList}" var="item">
<lightning:input aura:id="srd" type="radio" label="{!item.recordTypeLabel}" checked="{!if(v.selectedRecordType==item.recordTypeId,true,false)}"
name="accountType" value="{!item.recordTypeId}" onchange="{!c.onChangeRecordType}"/>
</aura:iteration>
</div>
</div>
<div class="slds-modal__footer">
<lightning:button label="Cancel" variant="neutral" onclick="{!c.defaultCloseAction}"/>
<lightning:button label="Continue" variant="brand" onclick="{!c.onconfirm}"/>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
<!--Section for Account recordType Selection ends-->
<!--Section for Account record View starts-->
<aura:if isTrue="{!v.currentView =='RecordView'}">
<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<lightning:buttonIcon class="slds-modal__close" iconName="utility:close" size="large"
variant="bare-inverse" alternativeText="Close" onclick="{!c.defaultCloseAction}" />
<h2 id="header43" class="slds-text-heading--medium">Account Details</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="slds-align--absolute-center">
<c:AccountView recordId="{!v.selectedRecord}" currView="{!v.currentView}"
isRecordDeleted="{!v.isRefreshRequired}"/>
</div>
</div>
<div class="slds-modal__footer">
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
<!--Section for Account record View ends-->
<!--Section for Account record edit starts-->
<aura:if isTrue="{!v.currentView =='RecordEdit'}">
<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<lightning:buttonIcon class="slds-modal__close" iconName="utility:close" size="large"
variant="bare-inverse" alternativeText="Close" onclick="{!c.defaultCloseAction}" />
<h2 id="header43" class="slds-text-heading--medium">Account Details</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="slds-align--absolute-center">
<c:AccountEdit recordId="{!v.selectedRecord}" currView="{!v.currentView}"
accountRecordType="{!v.selectedRecordType}" isRecordDeleted="{!v.isRefreshRequired}"/>
</div>
</div>
<div class="slds-modal__footer">
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
<!--Section for Account record edit ends-->
<!--Section to display prompt before delete starts-->
<aura:if isTrue="{!v.currentView =='RecordDeleteConfirm'}">
<force:recordData aura:id="recordDeleteHandler" recordId="{!v.recordIdToDelete}" fields="Id"
targetError="{!v.recordDeleteError}" />
<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__header">
<h2 id="header43" class="slds-text-heading--medium">Confirmation</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="slds-align--absolute-center">
Are you sure want to delete account?
</div>
</div>
<div class="slds-modal__footer">
<lightning:button label="Cancel" variant="neutral" onclick="{!c.defaultCloseAction}"/>
<lightning:button label="Confirm" variant="brand" onclick="{!c.confirmDelete}"/>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
<!--Section to display prompt before delete ends-->
</aura:component>
Raw
AccountListViewController.cls
public class AccountListViewController {
@auraEnabled
public static List<Account> findRecords(){
List<Account> returnList=new List<Account>();
returnList=[select id,name,type,industry,RecordType.Name,RecordTypeId from Account order by LastModifiedDate DESC Limit 10];
return returnList;
}
@AuraEnabled
public static string findRecordTypes(){
string returnString='';
List<RecordType> recordList = new List<RecordType> ();
recordList= [Select id, name from RecordType where sobjectType ='Account' and IsActive=true];
List<RecordTypeWrapper> wrapperList=new List<RecordTypeWrapper>();
for(RecordType sb : recordList) {
RecordTypeWrapper rw=new RecordTypeWrapper();
rw.recordTypeLabel=sb.name;
rw.recordTypeId=sb.id;
wrapperList.add(rw);
}
if(wrapperList.size()>0){
returnString= JSON.serialize(wrapperList);
}
system.debug('*****'+returnString);
return returnString;
}
public class RecordTypeWrapper{
public string recordTypeLabel{get;set;}
public string recordTypeId{get;set;}
}
}
Raw
AccountListViewController.js
({
doInit : function(component, event, helper){
var params ={};
helper.callServer(
component,
"c.findRecords",
function(response){
component.set("v.recList",response);
},
params
);
},
confirmDelete : function(component, event, helper){
var selectedId =component.get("v.selectedRecord");
component.set("v.recordIdToDelete",selectedId);
console.log('*******recordIdToDelete:'+component.get("v.selectedRecord"));
component.find("recordDeleteHandler").deleteRecord($A.getCallback(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// Deleted! Show a toast UI message
// toast supported in lightning experience only
console.log('Delete is successfull');
var resultsToast = $A.get("e.force:showToast");
if(resultsToast){
resultsToast.setParams({
"title": "Deleted",
"message": "The record is deleted."
});
resultsToast.fire();
$A.get("e.force:refreshView").fire();
}else{
console.log(' Refreshing list view');
//refresh list view
var params ={};
helper.callServer(
component,
"c.findRecords",
function(response){
component.set("v.recList",response);
component.set("v.currentView","ListView");
},
params
);
}
}else {
var errmsg='Unknown problem, state: ' + saveResult.state +', error: ' + JSON.stringify(saveResult.error);
console.log(errmsg);
alert(errmsg);
}
}));
},
onSelectMenuItem : function(component, event, helper) {
var selectedOption = event.getSource().get('v.value');
var selectedId = selectedOption.split('---')[0];
//alert('*************selectedId:'+selectedId+':selected action:'+selectedOption);
component.set("v.selectedRecord",selectedId);
//console.log(event.getSource());
if (selectedOption.endsWith("Delete")) {
component.set("v.recordIdToDelete",selectedId);
console.log('record id to delete:'+component.get("v.recordIdToDelete"));
component.set("v.currentView","RecordDeleteConfirm");
}else if(selectedOption.endsWith("View")){
component.set("v.currentView","RecordView");
}else if(selectedOption.endsWith("Edit")){
component.set("v.currentView","RecordEdit");
}
},
showSpinner: function(component, event, helper) {
var spinner = component.find("spinner");
$A.util.removeClass(spinner, "slds-hide");
},
hideSpinner: function(component, event, helper) {
//alert('hideSpinner');
var spinner = component.find("spinner");
$A.util.addClass(spinner, "slds-hide");
},
createRecordhandler : function(component, event, helper){
component.set("v.selectedRecord",null);
//component.set("v.selectedRecord","");
//if you pass blank value, then you will get error saying record is either deleted or doesnot exist. specify null
//Call to server to find out if recordType exist for Account
var params ={};
helper.callServer(
component,
"c.findRecordTypes",
function(response){
//alert('Response from controller for recordtypes:'+JSON.stringify(response));
if(response!=''){
var jsonObject=JSON.parse(response);
component.set("v.recordTypeList",jsonObject);
component.set('v.selectedRecordType',jsonObject[0].recordTypeId);
//component.find("srd").set("v.value",jsonObject[0].recordTypeId);
if(jsonObject.length >1){
//alert('more than 2 record type');
component.set("v.currentView","RecordTypeSelection");
}else{
//alert('only 1 record type');
component.set("v.currentView","RecordEdit");
}
}else{
//alert('RecordType doesnot exist');
component.set('v.selectedRecordType',null);
component.set("v.currentView","RecordEdit");
}
},
params
);
},
defaultCloseAction : function(component, event, helper) {
$A.util.addClass(component, "slds-hide");
component.set("v.currentView","ListView");
},
onconfirm : function(component, event, helper){
//alert('confirm get called');
var selectedRecType=component.get("v.selectedRecordType");
component.set("v.currentView","RecordEdit");
},
onChangeRecordType : function(component, event,helper){
var recordTypeValue = event.getSource().get("v.value");
component.set('v.selectedRecordType', recordTypeValue);
},
refreshListView : function(component,event,helper){
console.log('isRefreshRequired value:'+ component.get("v.isRefreshRequired"));
if(component.get("v.isRefreshRequired") == "true"){
console.log('******List view is getting refreshed');
//refresh list view
var params ={};
helper.callServer(
component,
"c.findRecords",
function(response){
component.set("v.recList",response);
component.set("v.currentView","ListView");
},
params
);
}
component.set("v.isRefreshRequired","false");
}
})
Raw
AccountListViewHelper.js
({
callServer : function(component, method, callback, params) {
//alert('Calling helper callServer function');
component.set("v.showSpinner",true);
var action = component.get(method);
if(params){
action.setParams(params);
}
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
callback.call(this,response.getReturnValue());
}else if(state === "ERROR"){
alert('Problem with connection. Please try again.');
}
component.set("v.showSpinner",false);
});
$A.enqueueAction(action);
}
})
Raw
AccountView.cmp
<aura:component >
<aura:attribute name="recordId" type="String" required="true"/>
<aura:attribute name="recordInfo" type="Object"/>
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="currView" type="String" />
<aura:attribute name="isRecordDeleted" type="boolean" default="false" />
<force:recordData aura:id="recordLoader" recordId="{!v.recordId}" layoutType="FULL"
targetFields="{!v.recordInfo}" targetError="{!v.recordError}"/>
<div class="slds-form--stacked">
<div class="slds-form-element">
<label class="slds-form-element__label" for="recordName">Name </label>
<div class="slds-form-element__control">
<ui:outputText value="{!v.recordInfo.Name}" aura:id="recordName"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="recordOwnerName">Owner </label>
<div class="slds-form-element__control">
<ui:outputText value="{!v.recordInfo.Owner.Name}" aura:id="recordOwnerName"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="accType">Type </label>
<div class="slds-form-element__control">
<ui:outputText value="{!v.recordInfo.Type}" aura:id="accType"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="accIndustry">Industry </label>
<div class="slds-form-element__control">
<ui:outputText value="{!v.recordInfo.Industry}" aura:id="accIndustry"/>
</div>
</div>
<div class="slds-form-element">
<lightning:button variant="brand" label="Edit Record" onclick="{!c.editRecordHandler}"/>
<lightning:button variant="brand" label="Delete Record" onclick="{!c.deleteRecordHandler}"/>
<lightning:button variant="brand" label="Back To List View" onclick="{!c.goBack}"/>
</div>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.recordError}
</ui:message>
</div>
</aura:if>
</aura:component>
Raw
AccountViewController.js
({
editRecordHandler : function(component, event, helper) {
component.set("v.currView","RecordEdit");
//alert('editRecordHandler called');
},
goBack : function (component, event, helper){
// Reload the view so components
component.set("v.currView","ListView");
},
deleteRecordHandler: function(component, event, helper) {
component.find("recordLoader").deleteRecord($A.getCallback(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// Deleted! Show a toast UI message
// toast supported in lightning experience only
console.log('Record delete from View page get called');
var resultsToast = $A.get("e.force:showToast");
console.log('resultsToast value:'+resultsToast);
if(resultsToast){
resultsToast.setParams({
"title": "Deleted",
"message": "The record is deleted."
});
resultsToast.fire();
$A.get("e.force:refreshView").fire();
}else{
component.set("v.isRecordDeleted","true");
}
}
else {
var errmsg='Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error);
console.log(errmsg);
alert(errmsg);
}
}));
}
})
Raw
LDSApp.app
<aura:application extends="force:slds">
<c:AccountListView />
</aura:application>
Raw
showSpinnerCmp.cmp
<aura:component >
<aura:attribute name="show" type="Boolean" default="false" />
<aura:handler name="change" value="{!v.show}" action="{!c.spinnerDisplayHandler}"/>
<div class="slds-align--absolute-center">
<lightning:spinner aura:id="spinner" variant="brand" size="large" class="slds=hide"/>
</div>
</aura:component>
Raw
showSpinnerCmpController.js
({
spinnerDisplayHandler : function(component, event, helper) {
console.log('show spinner value changes');
helper.showHideSpinner(component);
}
})
Raw
showSpinnerCmpHelper.js
({
showHideSpinner : function(component) {
var showValue = component.get('v.show');
if(showValue) {
console.log('showValue'+showValue);
var spinner = component.find("spinner");
console.log('spinner'+spinner);
$A.util.removeClass(spinner, "slds-hide");
} else {
console.log('showValue'+showValue);
var spinner = component.find("spinner");
console.log('spinner'+spinner);
$A.util.addClass(spinner, "slds-hide");
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment