Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

TPM Promotion Header LWC

The tpm-promotion-header-component service component provides access to the TPM promotion header in the LWC layer. This component is part of the TPM managed package.

This component is a wrapper for accessing the entire promotion header. You can customize a specific section of the header (LWC slot)—without changing the default behavior of the other sections—through a slot-specific promotion header LWC. Customizable promotion header slots are:

icon: A 32x32 pixel image.
breadcrumbs: A component to display the page breadcrumbs.
title: The promotion title
subtitle: The promotion subtitle
navigation: A group of button icons.
left-buttons: The action buttons and components that are anchored to the left of the header toolbar.
right-buttons: The action buttons and components that are anchored to the right of the header toolbar.
fullheight-buttons: The buttons that span the complete height of the header.

For information on slot-specific promotion header LWCs, see TPM Promotion Header Slot LWCs.

Example

Here’s an example of a custom promotion header component with the default behavior.

1<!-- MyHeader.html -->
2<template>
3   <cgcloud-tpm-promotion-header-component
4        promotion-id={recordId}>
5   </cgcloud-tpm-promotion-header-component>
6</template>
7
8
9
10<!-- MyHeader.js -->
11import { LightningElement, api } from 'lwc';
12
13export default class SamplePromotionHeaderCustom extends LightningElement {
14    @api recordId;
15}
16
17<!-- MyHeader.js-meta.xml -->
18<?xml version="1.0" encoding="UTF-8"?>
19<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
20    <apiVersion>59.0</apiVersion>
21    <isExposed>true</isExposed>
22    <masterLabel>SAMPLE: Custom Promotion Header Component</masterLabel>
23    <targets>
24        <target>lightning__RecordPage</target>
25    </targets>
26    <targetConfigs>
27        <targetConfig targets="lightning__RecordPage">
28            <objects>
29                <object>cgcloud__Promotion__c</object>
30            </objects>
31        </targetConfig>
32    </targetConfigs>
33    <!-- This property is required if LWS is Disabled -->
34    <runtimeNamespace>cgcloud</runtimeNamespace>
35</LightningComponentBundle>

Here’s an example of a custom promotion header component with TPM default behavior:

1<!-- MyHeader.html -->
2<template>
3  <cgcloud-tpm-promotion-header-component promotion-id={recordId}>
4    <!-- Icon Slot -->
5    <cgcloud-tpm-promotion-header-icon slot="icon"></cgcloud-tpm-promotion-header-icon>
6
7    <!-- Breadcrumbs -->
8    <div slot="breadcrumbs" style="display: flex">
9      <cgcloud-tpm-promotion-header-breadcrumbs
10        promotion-id={recordId}
11      ></cgcloud-tpm-promotion-header-breadcrumbs>
12    </div>
13
14    <!-- Title -->
15    <div slot="title" style="display: flex">
16      <cgcloud-tpm-promotion-header-slogan
17        promotion-id={recordId}
18      ></cgcloud-tpm-promotion-header-slogan>
19    </div>
20
21    <!-- Subtitle -->
22    <div slot="subtitle" style="display: flex">
23      <cgcloud-tpm-promotion-header-subtitle
24        promotion-id={recordId}
25      ></cgcloud-tpm-promotion-header-subtitle>
26    </div>
27
28    <!-- Navigation -->
29    <lightning-button-group slot="navigation">
30      <cgcloud-tpm-promotion-header-promotion-planning-button
31        promotion-id={recordId}
32        group-order="first"
33      ></cgcloud-tpm-promotion-header-promotion-planning-button>
34      <cgcloud-tpm-promotion-header-promotion-pl-button
35        promotion-id={recordId}
36        group-order="last"
37      ></cgcloud-tpm-promotion-header-promotion-pl-button>
38    </lightning-button-group>
39
40    <!-- Left anchor buttons -->
41    <div slot="left-buttons" style="display: flex">
42      <cgcloud-tpm-promotion-header-edit-mode-button
43        promotion-id={recordId}
44      ></cgcloud-tpm-promotion-header-edit-mode-button>
45      <cgcloud-tpm-promotion-header-add-tactic-button
46        promotion-id={recordId}
47      ></cgcloud-tpm-promotion-header-add-tactic-button>
48      <cgcloud-tpm-promotion-header-duplicate-tactic-button
49        promotion-id={recordId}
50      ></cgcloud-tpm-promotion-header-duplicate-tactic-button>
51      <cgcloud-tpm-promotion-header-delete-tactic-button
52        promotion-id={recordId}
53      ></cgcloud-tpm-promotion-header-delete-tactic-button>
54      <cgcloud-tpm-promotion-header-predict-uplift-button
55        promotion-id={recordId}
56      ></cgcloud-tpm-promotion-header-predict-uplift-button>
57    </div>
58
59    <!-- Right anchor buttons -->
60    <div slot="right-buttons">
61      <cgcloud-tpm-promotion-header-kpi-validations
62        promotion-id={recordId}
63      ></cgcloud-tpm-promotion-header-kpi-validations>
64      <cgcloud-tpm-promotion-header-push-area
65        promotion-id={recordId}
66      ></cgcloud-tpm-promotion-header-push-area>
67      <cgcloud-tpm-promotion-header-cancel-button
68        promotion-id={recordId}
69      ></cgcloud-tpm-promotion-header-cancel-button>
70      <cgcloud-tpm-promotion-header-save-and-refresh-button
71        promotion-id={recordId}
72      ></cgcloud-tpm-promotion-header-save-and-refresh-button>
73      <cgcloud-tpm-promotion-header-done-button
74        promotion-id={recordId}
75      ></cgcloud-tpm-promotion-header-done-button>
76      <cgcloud-tpm-promotion-header-pl-filter-button
77        promotion-id={recordId}
78      ></cgcloud-tpm-promotion-header-pl-filter-button>
79    </div>
80
81    <!-- Full Height buttons -->
82    <div slot="fullheight-buttons">
83      <cgcloud-tpm-promotion-header-scenario-planning-button
84        promotion-id={recordId}
85      ></cgcloud-tpm-promotion-header-scenario-planning-button>
86      <cgcloud-tpm-promotion-header-attachments-button
87        promotion-id={recordId}
88      ></cgcloud-tpm-promotion-header-attachments-button>
89    </div>
90  </cgcloud-tpm-promotion-header-component>
91</template>
92
93<!-- MyHeader.js -->
94import { LightningElement, api } from 'lwc';
95
96export default class SamplePromotionHeaderCustom extends LightningElement {
97    @api recordId;
98}
99
100<!-- MyHeader.js-meta.xml -->
101<?xml version="1.0" encoding="UTF-8"?>
102<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
103    <apiVersion>59.0</apiVersion>
104    <isExposed>true</isExposed>
105    <masterLabel>SAMPLE: Custom Promotion Header Component</masterLabel>
106    <targets>
107        <target>lightning__RecordPage</target>
108    </targets>
109    <targetConfigs>
110        <targetConfig targets="lightning__RecordPage">
111            <objects>
112                <object>cgcloud__Promotion__c</object>
113            </objects>
114        </targetConfig>
115    </targetConfigs>
116    <!-- This property is required if LWS is Disabled -->
117    <runtimeNamespace>cgcloud</runtimeNamespace>
118</LightningComponentBundle>

Here’s an example of a custom promotion header component with a custom promotion title and custom button.

1<!-- MyHeader.html -->
2<template>
3  <cgcloud-tpm-promotion-header-component promotion-id={recordId}>
4    
5    <!-- Non specified slots will use default implementation>
6
7    <!-- Title -->
8    <div slot="title" style="display: flex">
9      <h1>{myTitle}</h1>
10    </div>
11
12    <!-- Left anchor buttons, we keep default buttons and add a new one -->
13    <div slot="left-buttons" style="display: flex">
14      <cgcloud-tpm-promotion-header-edit-mode-button
15        promotion-id={recordId}
16      ></cgcloud-tpm-promotion-header-edit-mode-button>
17      <cgcloud-tpm-promotion-header-add-tactic-button
18        promotion-id={recordId}
19      ></cgcloud-tpm-promotion-header-add-tactic-button>
20      <cgcloud-tpm-promotion-header-duplicate-tactic-button
21        promotion-id={recordId}
22      ></cgcloud-tpm-promotion-header-duplicate-tactic-button>
23      <cgcloud-tpm-promotion-header-delete-tactic-button
24        promotion-id={recordId}
25      ></cgcloud-tpm-promotion-header-delete-tactic-button>
26      <cgcloud-tpm-promotion-header-predict-uplift-button
27        promotion-id={recordId}
28      ></cgcloud-tpm-promotion-header-predict-uplift-button>
29      <lightning-button label="Button" variant="brand" onclick={onButtonClick}></lightning-button>
30    </div>
31  </cgcloud-tpm-promotion-header-component>
32</template>
33<!-- MyHeader.js -->
34import { LightningElement, api } from 'lwc';
35
36export default class SamplePromotionHeaderCustom extends LightningElement {
37    @api recordId;
38    
39    myTitle = 'Hello World!';
40    
41    onButtonClick() {
42        alert('Hello World!');
43    }
44}
45
46<!-- MyHeader.js-meta.xml -->
47<?xml version="1.0" encoding="UTF-8"?>
48<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
49    <apiVersion>59.0</apiVersion>
50    <isExposed>true</isExposed>
51    <masterLabel>SAMPLE: Custom Promotion Header Component</masterLabel>
52    <targets>
53        <target>lightning__RecordPage</target>
54    </targets>
55    <targetConfigs>
56        <targetConfig targets="lightning__RecordPage">
57            <objects>
58                <object>cgcloud__Promotion__c</object>
59            </objects>
60        </targetConfig>
61    </targetConfigs>
62    <!-- This property is required if LWS is Disabled -->
63    <runtimeNamespace>cgcloud</runtimeNamespace>
64</LightningComponentBundle>

If your org has Lightning Web Security enabled, the runtimeNamespace property on the metadata file isn’t required.

Lightning web security is a feature that must be tested before enabling. LWC Security

Note

Consumer Goods Cloud Developer Guide

TPM Promotion Header LWC

Example