---
schema_version: "1"
id: bf503e537f9289f197c1fb5a0bb1cebd64787a58cd145b2afa8d5cd0bd5308f0
title: Sample Custom Components for Forecasts Pages
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-custom-for-app-builder-forecasts-page.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-custom-for-app-builder-forecasts-page.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 6cfed9664a8196ce96816c15d88c1f321e22bd94fee0b702ec00c08e2f0d773f
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# 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.

<!-- otherprops: set_clipboard -->
```nolang
<aura:component implements="lightning:availableForForecastingPage">
    <lightning:messageChannel type="lightning__forecasting_flexipageUpdated"
            onMessage="{!c.handleMessage}" scope="APPLICATION"/>
    
    <aura:attribute name="ownerId" type="string" default="owner"/>
    <aura:attribute name="forecastingTypeId" type="string" />
    <aura:attribute name="user" type="Object"/>
    <aura:attribute name="forecast" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <force:recordData aura:id="recordLoader"
    recordId="{!v.ownerId}"
    fields="Name, Email, Phone, Title"
    targetFields="{!v.user}"
    />    
    
     <force:recordData aura:id="recordLoader2"
    recordId="{!v.forecastingTypeId}"
    fields="DateType, RoleType, MasterLabel, IsAmount, IsActive"
    targetFields="{!v.forecast}"
    />    
    
    <div> 
        <lightning:card iconName="standard:user" title="{!v.user.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-truncate">Email : <lightning:formattedText title="Email" value="{!v.user.Email}" /></p>
                <p class="slds-truncate">Phone : <lightning:formattedText title="Phone" value="{!v.user.Phone}" /></p>
                <p class="slds-truncate">Title : <lightning:formattedText title="Title" value="{!v.user.Title}" /></p>
            </div>
        </lightning:card>
    </div>
    
    <div> 
        <lightning:card iconName="standard:forecasts" title="{!v.forecast.MasterLabel}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-truncate">Role Type : <lightning:formattedText aura:id="roleType" title="RoleType" value="{!v.forecast.RoleType}" /></p>
                <p class="slds-truncate">Date Type : <lightning:formattedText title="DateType" value="{!v.forecast.DateType}" /></p>
            </div>
        </lightning:card>
    </div>
</aura:component>
```

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

<!-- otherprops: set_clipboard -->
```nolang

({
/*
This JavaScript controller is called on component initialization.
It makes a call to the server to run the actions to display information. 
After the server returns the values, it sets the appropriate values to display 
on the client side.
*/
    handleMessage : function(cmp, message, helper) {
        // Read the message argument to get the values in the message payload
        cmp.set("v.ownerId", message.getParam("forecastingOwnerId"));
        cmp.set("v.forecastingTypeId", message.getParam("forecastingTypeId"));
        var record = cmp.find("recordLoader");
        record.set("v.recordId", cmp.get("v.ownerId"));
        record.reloadRecord();
        var record2 = cmp.find("recordLoader2");
        record2.set("v.recordId", cmp.get("v.forecastingTypeId"));
        record2.reloadRecord();
    }
})
```

**See Also**  


-   [*Lightning Web Components Dev Guide*: Use Components in Salesforce Targets](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use)