Create Components for Forecasts Pages

Create custom Lightning web components that are available in Lightning forecasts pages.

In the component’s configuration file, add the lightning__ForecastingPage target and set <isExposed> to true.

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>55.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__ForecastingPage</target> </targets> <targetConfigs> <targetConfig targets="lightning__ForecastingPage"> <property type="String" name="forecastingTypeId" label="forecast ID" /> </targetConfig> </targetConfigs> </LightningComponentBundle>

The lightning__ForecastingPage target adds properties to your component. Declare the properties in the component’s JavaScript file.

For a list of properties supported by the lightning__ForecastingPage target, see Lightning Aura Components Developer Guide: Create Components for Forecast Pages.

// custom.js import { LightningElement, api } from "lwc"; import { publish, subscribe, unsubscribe, createMessageContext, releaseMessageContext, } from "lightning/messageService"; import SAMPLEMC from "@salesforce/messageChannel/lightning__forecasting_flexipageUpdated"; export default class LMCWebComponentDemo extends LightningElement { receivedMessage = ""; myMessage = ""; _forecastingTypeId; @api get forecastingTypeId() { return this._forecastingTypeId; } set forecastingTypeId(value) { this._forecastingTypeId = value; } subscription = null; context = createMessageContext(); constructor() { super(); } handleChange(event) { this.myMessage = event.target.value; } publishMC() { const message = { messageToSend: this.myMessage, sourceSystem: "From LWC", }; publish(this.context, SAMPLEMC, message); } subscribeMC() { if (this.subscription) { return; } this.subscription = subscribe(this.context, SAMPLEMC, (message) => { this.displayMessage(message); }); } unsubscribeMC() { unsubscribe(this.subscription); this.subscription = null; } displayMessage(message) { this.receivedMessage = message ? JSON.stringify(message, null, "\t") : "no message payload"; } disconnectedCallback() { releaseMessageContext(this.context); } }

When the Lightning forecasts page changes, such as owner or forecast type, the page header publishes a Lightning message. You can subscribe to the lightning__forecasting_flexipageUpdated LightningMessageChannel to update your custom components based on Lightning forecasts page header changes.

Lightning forecasts pages don’t support any standard or custom events published from custom components.

Access the properties in the component’s template.

<!-- custom.html --> <template> <lightning-card title="LMC Web Component" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <p>MessageChannel: MyMessageChannel__c</p> <br /> </div> <!-- Default/basic --> <div class="slds-p-around_medium lgc-bg"> <lightning-input type="text" label="Enter some text" value={myMessage} onchange={handleChange} ></lightning-input> <lightning-button label="Publish" onclick={publishMC}></lightning-button> </div> <div class="slds-p-around_medium lgc-bg"> <lightning-button label="Subscribe" onclick={subscribeMC}></lightning-button> <lightning-button label="Unsubscribe" onclick={unsubscribeMC}></lightning-button> <p>Latest Message Received</p> <lightning-formatted-text value={receivedMessage}></lightning-formatted-text> </div> <div class="slds-p-around_medium lgc-bg"> <p>forecastingTypeId</p> <lightning-formatted-text value={forecastingTypeId}></lightning-formatted-text> </div> </lightning-card> </template>

To ensure that custom components appear correctly, enable them to adjust to variable widths.

Note

The Summer '25 guide is now live

Looking for the Component Reference? Go to https://developer.salesforce.com/docs/component-library/.