Sample Custom Components for Forecasts Pages

Review samples of custom Aura components that you can implement in Lightning forecasts pages. Lightning forecasts pages don’t support any standard or custom events published from custom components.

Here’s an example of a custom Aura component you can include in your Lightning forecasts page. To appear on the page, custom Aura components implement lightning:availableForForecastingPage. This component applies the context of the selected forecast.

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>

The component calls a JavaScript controller function, handleMessage(), on initialization.

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})

Lightning Aura Components Developer Guide

Sample Custom Components for Forecasts Pages

See Also