3

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.

3 Answers 3

1

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

<aura:component >
   <!-- Attributes for the button -->
   <aura:attribute name="label" type="String" description="This is the button label"/>
   <aura:attribute name="class" type="String" description="SLDS class"/>
   <aura:attribute name="onclick" type="Aura.Action" default="{!c.myAction}" description="This allows handling onClick events"/>
   <aura:attribute name="data" type="String" description="Any data to be passed via html5 data- attribute"/>

   <!-- Attributes for SVG -->
   <aura:attribute name="svgXlinkHref" type="String" description="svgIcon's xlink-href"/>
   <aura:attribute name="svgClass" type="String" description="svgIcon CSS classname"/>

   <button class="{!v.class}"  onclick="{!v.onclick}" data-data="{!v.data}"><c:svg xlinkHref="{!v.svgXlinkHref}" class="{!v.svgClass}" />{!v.label}</button>
</aura:component>

for buttonController.js, you can define a default action-

({
    myAction : function(component, event, helper) {

    }
})

You can change the attributes in button component according to your requirement also.

0

Without seeing the rest of your code that's in the init handler and the AccountsController, it's pretty difficult for anyone to give you a definitive answer to your question. That having been said, it's likely that the issue is you don't have an Event Handler defined for the onclick="{!c.showDetails}" event in c:button class.

1
  • Thanks for your answer. I have added other code as well. I am still facing the same issue. Jan 7, 2016 at 5:39
0

I am a beginner in lightning and I thought that button is a standard component available for use. But this is not the case. We will have to create our own custom button and svg components to use in it other components. Below is the link which will guide us in creating button component -
creating custom button component

2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .