Apex Code Development You need to sign in to do that
Don't have an account?
Alex Valavanis 10 Lightning Component application - Blank page
Hello,
I created a custom Lightning Component as i wanted to implement a Client Side Search functionality.
However, when i click "Preview" in Developer Console to test it i receive a white blank page. (code is correct and i have also have myDomain deployed.
Any ideas?
I created a custom Lightning Component as i wanted to implement a Client Side Search functionality.
However, when i click "Preview" in Developer Console to test it i receive a white blank page. (code is correct and i have also have myDomain deployed.
Any ideas?
Can you try doing the same once and see if it works?
All Answers
Can you place the component on the detail page and see if it still shows a blank page?
Also, can you once check if there are any errors that are coming up while previewing it?
Can you check if there is a similar issue when you have another lightning component instead of this component?
Can you look into the above and respond.
Thanks.
Ensure that you are implementing the appHostable interface
If you are doing this already and the error still appears, I recommend checking the browser console for errors
Thank you. Please see Component, Controller, Helper and Controller Apex:
Component
<aura:component controller="LightningDTCTRL" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="recordList" type="List"/>
<aura:attribute name="allData" type="List" />
<aura:attribute name="columns" type="List"/>
<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="string" default="asc" />
<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
<span>
<lightning:input type="search" lable="Search" placeholder="Search from Accounts" aura:id="SearchBox"
onchange="{!c.searchTable}" />
</span>
<lightning:layout multipleRows="true" horizontalAlign="center">
<lightning:layoutItem padding="around-small" size="12">
<lightning:datatable keyField="id" data="{! v.recordList}"
columns="{! v.columns}"
hideCheckboxColumn="true"
onsort="{!c.updateSorting}"
sortedBy="{!v.sortedBy}"
sortedDirection="{!v.sortedDirection}" />
</lightning:layoutItem>
</lightning:layout>
</aura:component>
Controller Javascript
({
doInit : function(component, event, helper) {
component.set('v.columns', [
{label: 'Id', fieldName:'Id',sortable:true,type:'text', initialWidth: 300},
{label: 'Name', fieldName:'Name',sortable:true,type:'text', initialWidth: 400},
{label: 'Phone', fieldName:'Phone',sortable:true,type:'text', initialWidth: 300},
{label: 'Created Date', fieldName:'CreatedDate',sortable:true,type:'text', initialWidth: 400}
]);
helper.getAccounts(component, helper);
},
updateSorting: function (cmp, event, helper) {
var fieldName = event.getParam('fieldName');
var sortDirection = event.getParam('sortDirection');
cmp.set("v.sortedBy", fieldName);
cmp.set("v.sortedDirection", sortDirection);
helper.sortData(cmp, fieldName, sortDirection);
},
searchTable: function (cmp, event, helper) {
var allRecords = cmp.get("v.allData");
var searchFilter = event.getSource().get("v.value").toUpperCase();
var tempArray =[];
var i;
for(i=0; i<allRecords.length; i++){
if((allRecords[i].Name && allRecords[i].Name.toUpperCase().indexOf(searchFilter) != -1) ||
(allRecords[i].Phone && allRecords[i].Phone.toUpperCase().indexOf(searchFilter) != -1)){
tempArray.push(allRecords[i]);
}
}
cmp.set("v.recordList",tempArray);
}
})
HELPER
({
getAccounts : function(component, helper) {
var action = component.get("c.getAccountList");
action.setCallback(this, function(response) {
var state = response.getState();
var data;
if(state === 'SUCCESS'){
var result = response.getReturnValue();
component.set("v.recordList", result);
component.set("v.allData", result);
}
});
$A.enqueueAction(action);
},
sortData: function (cmp, fieldName, sortDirection) {
var fname = fieldName;
var data = cmp.get("v.recordList");
var reverse = sortDirection !== 'asc';
data.sort(this.sortBy(fieldName, reverse))
cmp.set("v.recordList", data);
},
sortBy: function (field, reverse) {
var key = function(x) {return x[field]};
reverse = !reverse ? 1 : -1;
return function (a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
}
}
})
Controller Apex
public class LightningDTCTRL {
@AuraEnabled
public static list<Account> getAccountList(){
List<Account> accList= [Select Id, Name, Phone, CreatedDate From Account Order By CreatedDate];
if(accList != null && accList.size()>0){
return accList;
}
else{return null;}
}
}
What do you mean blank after placing it on the detail page? Page is blank when i click on "Preview" from the dev console.
Also - regarding your question if i have a similar issue with other components, this is my first component so i cannot compare. I created the above in my personal dev environment.
Can you try doing the same once and see if it works?
Try using force:appHostableinterface in your aura component:
<aura:component implements="force:appHostable">
If this doesn’t solve the problem try using(access="global" implements="ltng:allowGuestAccess") in your aura app.
Refer to the below code:
<aura:application extends="force:slds" access="global" implements="ltng:allowGuestAccess" >
<c:lightningDT />
</aura:application>
If both of these don’t work out please share your code so that I can figure out what could be the issue. I would be glad to help you out!
Hope this explanation will resolve your query. Mark, it as the best answer if you find it helpful.
Thanks
Akshay
Lightning Component application.
Yash