ルーキー会#12 お題回答

1. お題解説

2. Apex OpportunityTableController
2
public class OpportunityTableController {
@AuraEnabled
public static List<Opportunity> getOpportunities (String accId) {
List<Opportunity> oppList = [SELECT
id,Name
,StageName
,Amount
FROM
Opportunity
WHERE
AccountId = :accId
AND isClosed = false
];
return oppList;
}
}

3. LightningComponent COMPONENT（前半）
3
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId"
controller="OpportunityTableController">
<aura:attribute name="oppList" type="Opportunity[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<table border="1">
<thead>
<tr>
<th>商談名</th>
<th>フェーズ</th>
<th>金額</th>
</tr>
</thead>

4. LightningComponent COMPONENT（後半）
4
<tbody>
<aura:iteration items="{!v.oppList}" var="opp">
<tr>
<td>
<ui:outputText value="{!opp.Name}" />
</td>
<td>
<ui:outputText value="{!opp.StageName}" />
</td>
<td>
<ui:outputText value="{!opp.Amount}" />
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</aura:component>

5. LightningComponent CONTROLLER
5
({
doInit : function(component, event, helper) {
helper.getOpps(component,event);
}
})

6. LightningComponent HELPER
6
({
getOpps : function(component,event) {
var action = component.get("c.getOpportunities");
action.setParams({
"accId" : component.get("v.recordId")
});
action.setCallback(this, function(response) {
var result = response.getReturnValue();
component.set("v.oppList", result);
});
$A.enqueueAction(action);
}
})

7. LightningComponent STYLE
7
table.THIS {
background-color: white;
}
後はアプリケーションビルダーで取引先のページに配置して完成！