I have created one lightning component to show Account list, but while saving it I am getting error
Failed to save undefined: No COMPONENT named markup://c:button found :
[markup://c:AccountsList]: Source
Lightning component code is as shown below –
<aura:component controller="AccountsController">
<aura:attribute name="accounts" type="List" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Use the Apex model and controller to fetch server side data -->
<table class="slds-table slds-table--bordered slds-table--striped">
<thead>
<tr>
<th scope="col"><span class="slds-truncate">ID</span></th>
<th scope="col"><span class="slds-truncate">Name</span></th>
<th scope="col"><span class="slds-truncate">Type</span></th>
<th scope="col"><span class="slds-truncate">Number Of Employees</span></th>
<th scope="col"><span class="slds-truncate">Ticker Symbol</span></th>
<th scope="col"><span class="slds-truncate">Phone</span></th>
<th scope="col"><span class="slds-truncate">Details</span></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr>
<td>{!account.Id}</td>
<td>{!account.Name}</td>
<td>{!account.Type}</td>
<td>{!account.NumberOfEmployees}</td>
<td>{!account.TickerSymbol}</td>
<td>{!account.Phone}</td>
<td>
<c:button class="slds-button slds-button--neutral"
label="Details"
svgXlinkHref="/resource/SLDS090/assets/icons/standard-sprite/svg/symbols.svg#account"
svgClass="slds-icon slds-icon-text-default"
onclick="{!c.showDetails}"
data="{!account.Id}"
/>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>
AccountsController code —
public class AccountsController {
@AuraEnabled
public static List<Account> getAccounts(){
return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, BillingStreet,
BillingCity, BillingState, BillingPostalCode
FROM Account ORDER BY createdDate ASC];
}
}
AccountsListController.js code —
({
doInit: function(component, event, helper) {
//Fetch the expense list from the Apex controller
helper.getAccountList(component);
},
showDetails: function(component, event, helper) {
//Get data via "data-data" attribute from button (button itself or icon's parentNode)
var id = event.target.getAttribute("data-data") || event.target.parentNode.getAttribute("data-data")
alert(id + " was passed");
}
})
AccountsListHelper.js code —–
({
//Fetch the accounts from the Apex controller
getAccountList: function(component) {
var action = component.get("c.getAccounts");
//Set up the callback
var self = this;
action.setCallback(this, function(actionResult) {
component.set("v.accounts", actionResult.getReturnValue());
});
$A.enqueueAction(action);
}
})
Please note that my Org is not namespaced.
Best Answer
If you want to use
c:button
, you need to create this component as well.Create a lightning component named "button" with the following code
for
buttonController.js
, you can define a default action-You can change the attributes in button component according to your requirement also.