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