Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- AccountList.cmp
- ------------------------
- <aura:component controller="AccountsController">
- <aura:attribute name="accounts" type="List" />
- <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
- <!--
- Use a data table from the Lightning Design System:
- https://www.lightningdesignsystem.com/components/data-tables/
- -->
- <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
- <thead>
- <tr class="slds-text-heading--label">
- <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
- <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
- <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
- <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
- <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
- <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
- <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
- </tr>
- </thead>
- <tbody>
- <!-- Use the Apex model and controller to fetch server side data -->
- <aura:iteration items="{!v.accounts}" var="account">
- <tr>
- <th scope="row"><div class="slds-truncate" title="{!account.Id}">{!account.Id}</div></th>
- <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
- <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
- <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
- <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
- <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
- <td>
- <form onsubmit="{!c.deleteAccount}">
- <input type="hidden" value="{!account.Name}" name="account-name" />
- <!--
- Use a Lightning Base Component
- To display an icon next to the label
- -->
- <lightning:button label="Delete"
- iconName="utility:delete"
- iconPosition="left"
- variant="destructive"
- type="submit"
- />
- </form>
- </td>
- </tr>
- </aura:iteration>
- </tbody>
- </table>
- </aura:component>
- AccountListController.js
- -------------------------
- ({
- doInit: function(component, event, helper) {
- // Fetch the account list from the Apex controller
- helper.getAccountList(component);
- },
- deleteAccount: function(component, event, helper) {
- // Prevent the form from getting submitted
- event.preventDefault();
- // Get the value from the field that's in the form
- var form = event.getSource();
- console.log(form);
- var accountName = '<<TBD>>'; //form.find("account-name").get("v.value");
- confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
- }
- })
- Error Message from clicking Delete Button:
- ------------------------------------------
- Sorry to interrupt
- This page has an error. You might just need to refresh it.
- Action failed: c:AccountList$controller$deleteAccount [event.getSource is not a function]
- Failing descriptor: {c:AccountList$controller$deleteAccount}
Advertisement
Add Comment
Please, Sign In to add comment