Apex Code Development You need to sign in to do that
Don't have an account?
Andrew Aldis 15 Lightning Formatted fields show functions
I am trying to create a HTML table in a lightning component to show a list of contacts related to a account. I have the list but am trying to use lightning:formattedName and lightning:formattedphone components to display the name and phone nujmber however when I go to the page it shows functions rather than the correct information. Please see my code and the image below. Does anyone know why this is happening and what I can do to correct it? ui:output fields work like with the email, but not the lightning formatted which I have used several times before.
<aura:iteration items="{!v.contacts}" var="c">
<tr class="tableRow">
<td class="tableCol col1">
<lightning:formattedName aura:id="c.Id" firstName="{!c.FirstName}" lastName="{!c.LastName}" />
</td>
<td class="tableCol col2">
{!c.Title}
</td>
<td class="tableCol col3">
<ui:outputCheckbox value="{!c.RIA_Primary_Contact__c}" />
</td>
<td class="tableCol col4">
<p>
<lightning:formattedPhone value="{!c.Phone}"></lightning:formattedPhone>
</p>
</td>
<td class="tableCol col5">
<ui:outputEmail value="{!c.Email}" />
</td>
</tr>
</aura:iteration>
<aura:iteration items="{!v.contacts}" var="c">
<tr class="tableRow">
<td class="tableCol col1">
<lightning:formattedName aura:id="c.Id" firstName="{!c.FirstName}" lastName="{!c.LastName}" />
</td>
<td class="tableCol col2">
{!c.Title}
</td>
<td class="tableCol col3">
<ui:outputCheckbox value="{!c.RIA_Primary_Contact__c}" />
</td>
<td class="tableCol col4">
<p>
<lightning:formattedPhone value="{!c.Phone}"></lightning:formattedPhone>
</p>
</td>
<td class="tableCol col5">
<ui:outputEmail value="{!c.Email}" />
</td>
</tr>
</aura:iteration>
<aura:iteration items="{!v.contacts}" var="c"> <tr class="tableRow"> <td class="tableCol col1"> <lightning:formattedName aura:id="cId" firstName="{!c.FirstName}" lastName="{!c.LastName}" /> </td> <td class="tableCol col2"> {!c.Title} </td> <td class="tableCol col3"> <ui:outputCheckbox value="{!c.RIA_Primary_Contact__c}" /> </td> <td class="tableCol col4"> <p> <lightning:formattedPhone value="{!c.Phone}"></lightning:formattedPhone> </p> </td> <td class="tableCol col5"> <ui:outputEmail value="{!c.Email}" /> </td> </tr> </aura:iteration>CMP
<aura:component controller="Firm_Mobile_ContactList_CTRL" implements="lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId"
access="global">
<aura:attribute name="contacts" type="List" />
<aura:attribute name="device" type="String" />
<aura:attribute name="recordId" type="String" />
<aura:attribute name="sortedBy" type="String" />
<aura:attribute name="sortedDirection" type="String" default="asc" />
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<div class="Body">
<table class="contactTable">
<tr class="tableHeaderRow" >
<th class="tableHeaderCol col1" onclick="{!c.sort}" id="Name">
NAME
</th>
<th class="tableHeaderCol col2" onclick="{!c.sort}" id="Title">
TITLE
</th>
<th class="tableHeaderCol col3" onclick="{!c.sort}" id="RIA_Primary_Contact__c">
PRIMARY
</th>
<th class="tableHeaderCol col4" onclick="{!c.sort}" id="Phone">
WORK#
</th>
<th class="tableHeaderCol col5" onclick="{!c.sort}" id="Email">
EMAIL
</th>
</tr>
<aura:iteration items="{!v.contacts}" var="c">
<tr class="tableRow">
<td class="tableCol col1">
<a href="" >{!c.Name}</a>
</td>
<td class="tableCol col2">
{!c.Title}
</td>
<td class="tableCol col3">
<ui:outputCheckbox value="{!c.RIA_Primary_Contact__c}" />
</td>
<td class="tableCol col4">
<a href="{!'tel:'+c.Phone}" >
<ui:outputPhone aura:id="phone" value="{!c.Phone}" />
</a>
</td>
<td class="tableCol col5">
<ui:outputEmail aura:id="email" value="{!c.Email}" />
</td>
</tr>
</aura:iteration>
</table>
</div>
</aura:component>
Controller
({
init: function (component, event, helper) {
var action = component.get("c.getContacts");
var firmId = component.get("v.recordId")
action.setParams({
"firmId": firmId
});
action.setCallback(this, function (result) {
var device = $A.get("$Browser.formFactor");
component.set('v.device', device);
var contacts = result.getReturnValue();
console.log(contacts);
component.set('v.contacts', contacts);
component.set('v.sortedBy', "name");
component.set('v.sortedDirection', "asc");
});
$A.enqueueAction(action);
},
sort: function (component, event, helper) {
console.log('sort called');
var rectarget = event.currentTarget;
var fieldName = rectarget.getAttribute("id");
console.log('fieldName is ' + fieldName);
var sortDirection = component.get('v.sortedDirection');
console.log('sortDirection is ' + sortDirection);
if (sortDirection == 'asc') {
sortDirection = 'desc';
} else {
sortDirection = 'asc'
}
console.log
component.set("v.sortedBy", fieldName);
component.set("v.sortedDirection", sortDirection);
},
})
APEX CONTROLLER
public with sharing class Firm_Mobile_ContactList_CTRL {
@auraEnabled
public static list<Contact> getContacts(string firmId){
list<Contact> contacts = [select Id, Name, FirstName, LastName, Title, RIA_Primary_Contact__c, Phone, Email from Contact where AccountId = :firmId order by Name asc];
if(contacts.size() > 0){
return contacts;
}else{
return null;
}
}
}