+ Start a Discussion
dlCamelotdlCamelot 

Wrapper to show on lightning page

Trying to create a wrapper class that contains a custom variable.  So far, I have a regular table list, but want to add a custom variable (int) called 'Score'  which will be a calculation.  This variable will never be stored in a field.

Component Class: 
public class AccountScores {
  @AuraEnabled
  public static List<Account> getAccounts() {
    return [SELECT Id, name, industry, Type, Location__c, Phone
    FROM Account ORDER BY createdDate ASC LIMIT 10];
      
      
  }
}
Lightning Component:
<aura:component controller="AccountScores" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<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="Score">Score</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="{____}">{!THIS WILL BE THE CUSTOM SCORE}</div></td>
          <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
          <td>
            <form class="account-form" onsubmit="{!c.deleteAccount}">
              <input type="hidden" value="{!account.Name}" class="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"
                                />
            </form>
          </td>
        </tr>
      </aura:iteration>
    </tbody>
  </table>
</aura:component>
Any ideas where  to start?  Code is helpful.
 
GulshanRajGulshanRaj
Here is complete code
Component:
<aura:component controller="AccountScoreController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<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="Score">Score</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.AccountID}">{!account.AccountID}</div></th>
          <td><div class="slds-truncate" title="{!account.AccountName}">{!account.AccountName}</div></td>
          <td><div class="slds-truncate" title="{!account.AccountIndustry}">{!account.AccountIndustry}</div></td>
          <td><div class="slds-truncate" title="{!account.Score}">{!account.Score}</div></td>
          <td><div class="slds-truncate" title="{!account.AccountPhone}">{!account.AccountPhone}</div></td>
          <td>
            <form class="account-form" onsubmit="{!c.deleteAccount}">
              <input type="hidden" value="{!account.Name}" class="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"
                                />
            </form>
          </td>
        </tr>
      </aura:iteration>
    </tbody>
  </table>
</aura:component>

Controller:
public with sharing class AccountScoreController {
	@AuraEnabled
  	public static List<AccountWrapper> getAccounts() {
  		List<AccountWrapper> accWrap = new List<AccountWrapper>();

     for(Account acc:[SELECT Id, name, industry, Type, Location__c, Phone
    FROM Account ORDER BY createdDate ASC LIMIT 10])
     {
     	accWrap.add(new AccountWrapper(acc));
     }
     return accWrap;
  }
  public class AccountWrapper
  {
  	@AuraEnabled 
  	public  Id AccountID{get;set;}
  	@AuraEnabled
  	public  String AccountName{get;set;}
  	@AuraEnabled
  	public  String AccountIndustry{get;set;}
  	@AuraEnabled
  	public  String AccountType{get;set;}
  	@AuraEnabled
  	public  System.Location AccountLocation{get;set;}
  	@AuraEnabled
  	public  String AccountPhone{get;set;}
  	@AuraEnabled
  	public  Integer Score{get;set;}

  	public AccountWrapper(Account acc)
  	{
  		this.AccountID=acc.Id;
  		this.AccountName=acc.name;
  		this.AccountIndustry=acc.industry;
  		this.AccountType=acc.Type;
  		this.AccountLocation=acc.Location__c;
  		this.AccountPhone=acc.Phone;
  		this.Score= 3; // or user your own calculation

  	}
  }

}

Regards
Gulshan Raj​​