I've created a datatable for displaying account records along with view actio. When I'm clicking on view,dynamic component recordform should be called in a overlayLibrary using custom modals.
Below is the code, I'm getting error "This page has an error. You might just need to refresh it. First, would you give us some details? (We're reporting this as error ID: -2015273290)". Earlier I was getting error $A.getCallback[Component not defined]. I'm not sure where I went wrong.
As per my unit testing, code is working finr till alert('hi');
Controller:
public class Account_View_Controller {
@AuraEnabled
public static List<Account> invoke(){
List<Account> accounts = [Select id,name,type from Account limit 5];
return accounts;
}
}
Component:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:appHostable" access="global" controller="Account_View_Controller" >
<aura:attribute name="accounts" type="Object"/>
<lightning:overlayLibrary aura:id="overlayLib"/>
<aura:attribute name="columns" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.show}" />
<div style="height :300px">
<lightning:datatable aura:id="dtTable"
columns="{!v.columns}"
data="{!v.accounts}"
keyField="Id"
onrowaction="{!c.handleRowAction}" />
</div>
</aura:component>
JS:
({
show : function(component, event, helper) {
var actions = [
{label : 'View', name:'View'}
];
component.set('v.columns',[
{label: 'Id', fieldName: 'Id', type: 'text'},
{label: 'name', fieldName: 'Name', type: 'text'},
{label: 'type', fieldName: 'Type', type: 'text'},
{type: 'action', typeAttributes:{rowActions: actions}}
]);
var abc = component.get("c.invoke");
abc.setCallback(this, function(response){
var state=response.getState();
if(state==='SUCCESS'){
console.log('Success');
var result = response.getReturnValue();
component.set("v.accounts",result);
}
});
$A.enqueueAction(abc);
},
handleRowAction: function (cmp, event, helper) {
var action = event.getParam('action');
var row = event.getParam('row');
var recId =row.Id;
$A.createComponent(
"lightning:recordForm",
{
"recordId":recId,
"objectApiName":"Account",
"layoutType":"Full",
"mode":"edit"
},
function(myComp,status,statusMessage){
alert('hi');
var body=myComp;
component.find("overlayLib").showCustomModal({
"header":"Application confirmation",
"body":body,
"footer":"Lightning classes",
"showCloseButton":true,
"cssClass": "mymodal",
closeCallback: function(){
alert('You closed the alert');
}
})
}
);
}
})
