function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Daniel Probert 10Daniel Probert 10 

date not displaying lighting component

i've had this a couple of time in the last few week where a lighting component will not out put a date field to the page in an iteration.

apex class
@AuraEnabled
public static List<Start_Network_Activity__c> getSNAEvents(){
        return [SELECT ID,End_Date__c,Date__c,Name FROM Network_Activity__c];
}

component (not entire componet but the issue parts are there)
<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ActivityCtrl" >

<!-- fire onload controller to populate page with content -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<!-- setup a list of records that are default loaded onto the page ready for filtering in progress records -->
    <aura:attribute access="global" name="activities" type="Network_Activity__c[]" />

<table aura:id="activitytable" class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal slds-show">
                                <thead>
                                    <tr class="slds-text-title_caps">
                                        <th scope="col">
                                            <div class="slds-truncate" title="Title of Activity">Title of Activity</div>
                                        </th>
                                        <th scope="col">
                                            <div class="slds-truncate" title="Status">Start Date</div>
                                        </th>
                                        <th scope="col">
                                            <div class="slds-truncate" title="Status">End Date</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <aura:iteration items="{!v.activities}" var="act">
                                        <tr class="slds-hint-parent">
                                            <td data-label="Title of Activity">
                                                <div class="slds-truncate" title="{!act.Name}"><a href="{!'/one/one.app?#/sObject/'+ act.Id + '/view'}" target="_blank">{!act.Name}</a></div>
                                            </td>
                                            <td data-label="Type">
                                                <div class="slds-truncate" title="{!act.RecordTypeName__c}">{!act.RecordTypeName__c}</div>
                                            </td>
                                            <td data-label="Start Date">
                                                <div class="slds-truncate" title="{!act.Date__c}"><ui:outputDate value="{!act.Date__c}"/></div>
                                            </td>
                                            <td data-label="End Date">
                                                <div class="slds-truncate" title="{!act.End_Date__c}"><ui:outputDate value="{!act.End_Date__c}"/></div>
                                            </td>
                                        </tr>
                                    </aura:iteration>
                                    
                                </tbody>
                            </table>
</aura:component>

controller
 
({
    // preloads the content on the page
	doInit : function(component, event, helper) {
helper.getActivities(component);
	}
)}

js helper
 
{(
getActivities: function(component, event) {
        
        // prepare a var to pull in a list of activities from the db
        var action = component.get("c.getSNAEvents");
        // perform the actual call to db
        action.setCallback(this, function(response) {
            // get the query state so we can handle error
            var state = response.getState();
            // confirm if the call was successful
            if (state === "SUCCESS") {
                // get the response in a var
                var storeResponse = response.getReturnValue();
                // check the length of the response if it is zero we need to display an error message
                if (storeResponse.length == 0) {
                   console.log('no records');
                } else {
                    component.set("v.activities", storeResponse);
                }
            } else {
               console.log('error');
            }
        });                           
        $A.enqueueAction(action);
    }
)}

permissions are fine, as debug shows the field is pulling back the only way i can get it to display is by making it into a formula field and then displaying the formula which works fine.

what am i missing? ​
Best Answer chosen by Daniel Probert 10
Prathyu bPrathyu b
Hi Daniel,

Your code looks correct. But can you do below changes and check the output in console log.
1. Add LIMIt to your apex Query like : SELECT ID,End_Date__c,Date__c,Name FROM Network_Activity__c LIMIT 100
2. Add console.log in js Helper to check the out put in console. Like: 
else {
console.log(storeResponse);
 component.set("v.activities", storeResponse);
}
 

All Answers

Prathyu bPrathyu b
Hi Daniel,

Your code looks correct. But can you do below changes and check the output in console log.
1. Add LIMIt to your apex Query like : SELECT ID,End_Date__c,Date__c,Name FROM Network_Activity__c LIMIT 100
2. Add console.log in js Helper to check the out put in console. Like: 
else {
console.log(storeResponse);
 component.set("v.activities", storeResponse);
}
 
This was selected as the best answer
Daniel Probert 10Daniel Probert 10
thanks Prathyu I added the limit to the query and the dates started appearing
Prathyu bPrathyu b
Great Daniel. you are welcome :)
It is a best practise to Add LIMIT to the apex Query if there is no Criteria for selection.