Sample Custom Components for Forecasts Pages

1<aura:component implements="lightning:availableForForecastingPage">
2    <lightning:messageChannel type="lightning__forecasting_flexipageUpdated"
3            onMessage="{!c.handleMessage}" scope="APPLICATION"/>
4    
5    <aura:attribute name="ownerId" type="string" default="owner"/>
6    <aura:attribute name="forecastingTypeId" type="string" />
7    <aura:attribute name="user" type="Object"/>
8    <aura:attribute name="forecast" type="Object"/>
9    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
10
11    <force:recordData aura:id="recordLoader"
12    recordId="{!v.ownerId}"
13    fields="Name, Email, Phone, Title"
14    targetFields="{!v.user}"
15    />    
16    
17     <force:recordData aura:id="recordLoader2"
18    recordId="{!v.forecastingTypeId}"
19    fields="DateType, RoleType, MasterLabel, IsAmount, IsActive"
20    targetFields="{!v.forecast}"
21    />    
22    
23    <div> 
24        <lightning:card iconName="standard:user" title="{!v.user.Name}" >
25            <div class="slds-p-horizontal--small">
26                <p class="slds-truncate">Email : <lightning:formattedText title="Email" value="{!v.user.Email}" /></p>
27                <p class="slds-truncate">Phone : <lightning:formattedText title="Phone" value="{!v.user.Phone}" /></p>
28                <p class="slds-truncate">Title : <lightning:formattedText title="Title" value="{!v.user.Title}" /></p>
29            </div>
30        </lightning:card>
31    </div>
32    
33    <div> 
34        <lightning:card iconName="standard:forecasts" title="{!v.forecast.MasterLabel}" >
35            <div class="slds-p-horizontal--small">
36                <p class="slds-truncate">Role Type : <lightning:formattedText aura:id="roleType" title="RoleType" value="{!v.forecast.RoleType}" /></p>
37                <p class="slds-truncate">Date Type : <lightning:formattedText title="DateType" value="{!v.forecast.DateType}" /></p>
38            </div>
39        </lightning:card>
40    </div>
41</aura:component>

1({
2/*
3This JavaScript controller is called on component initialization.
4It makes a call to the server to run the actions to display information. 
5After the server returns the values, it sets the appropriate values to display 
6on the client side.
7*/
8    handleMessage : function(cmp, message, helper) {
9        // Read the message argument to get the values in the message payload
10        cmp.set("v.ownerId", message.getParam("forecastingOwnerId"));
11        cmp.set("v.forecastingTypeId", message.getParam("forecastingTypeId"));
12        var record = cmp.find("recordLoader");
13        record.set("v.recordId", cmp.get("v.ownerId"));
14        record.reloadRecord();
15        var record2 = cmp.find("recordLoader2");
16        record2.set("v.recordId", cmp.get("v.forecastingTypeId"));
17        record2.reloadRecord();
18    }
19})