+ Start a Discussion
Alex Valavanis 10Alex Valavanis 10 

Lightning Component application - Blank page


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?

User-added image
Best Answer chosen by Alex Valavanis 10
ANUTEJANUTEJ (Salesforce Developers) 
So I have used the same code in my personal dev org and I was able to place the component directly without encovering in the lightning application and on the Home page and I got the below output 
User-added image

Can you try doing the same once and see if it works?

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Alex,

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.

AnudeepAnudeep (Salesforce Developers) 
Hi Alex, 

Ensure that you are implementing the appHostable interface
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >

If you are doing this already and the error still appears, I recommend checking the browser console for errors 
Alex Valavanis 10Alex Valavanis 10

Thank you. Please see Component, Controller, Helper and Controller Apex:

<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}" />
            <lightning:input type="search" lable="Search" placeholder="Search from Accounts" aura:id="SearchBox"
                         onchange="{!c.searchTable}" />
    <lightning:layout multipleRows="true" horizontalAlign="center">
            <lightning:layoutItem padding="around-small" size="12">
                <lightning:datatable keyField="id" data="{! v.recordList}"
                                     columns="{! v.columns}"
                                     sortedDirection="{!v.sortedDirection}"  />

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)){


    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);
    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 {
    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;}
ANUTEJANUTEJ (Salesforce Developers) 
Can you once confirm if it is still blank after placing it on the detail page?
Alex Valavanis 10Alex Valavanis 10
Hello Anutej,

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.
ANUTEJANUTEJ (Salesforce Developers) 
So I have used the same code in my personal dev org and I was able to place the component directly without encovering in the lightning application and on the Home page and I got the below output 
User-added image

Can you try doing the same once and see if it works?
This was selected as the best answer
Akshay Dhiman 63Akshay Dhiman 63
Hi Alex,

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 />

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.
yasaswy sathuluriyasaswy sathuluri
Hi, I think you need to save the lightning component page without that..you will see an empty page in
Lightning Component application.