TPM Promotion Header Slot LWCs

The slot-specific LWCs related to the promotion header provide access to various promotion header sections in the LWC layer.

Table 1. TPM Promotion Header Slot LWC Reference
Component Name	Description	LWC Properties
`tpm-promotion-header-icon`	Displays the icon on the TPM promotion header.	`use-sobject-icon`: Boolean. Indicates whether the icon displayed on the promotion header is an SObject icon(`true`) or the default static image (`false`).
`tpm-promotion-header-breadcrumbs`	Displays the breadcrumbs on the TPM promotion header.	`promotion-id`: ID. Required. The record ID of the promotion to load. `use-sobject-label`: Boolean. Indicates whether the links targeting the promotion record list has the promotion SObject plural label (`true`) or the default custom label, `PP_TIT_PROMOTION_LIST` (`false`).
`tpm-promotion-header-slogan`	Displays the promotion slogan on the TPM promotion header.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-subtitle`	Displays the promotion subtitle with the referenced account or account set name, date from and date through values.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-promotion-planning-button`	Displays the promotion planning navigation button icon to be used in a lighting-button-group on the promotion header.	`promotion-id`: Id. Required. The record ID of the promotion to load. `group-order`: String. The rounded border on lightning-button-group. Possible values are `first`, `middle`, and `last`.
`tpm-promotion-header-promotion-pl-button`	Displays the promotion P&L navigation button icon to be used in a lighting-button-group on the promotion header. The promotion P&L navigation button is displayed if the visibility and editability of the EARight element, `PROMOTION_PLANNING_GRID_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load. `group-order`: String. The rounded border on lightning-button-group. Possible values are `first`, `middle`, and `last`.
`tpm-promotion-header-edit-mode-button`	Displays the promotion edit mode button when the promotion isn’t yet in the edit mode. For push promotions, you also see an icon, which is only visible when the push is in progress. When the push is in progress the edit button is disabled. The promotion edit mode button is displayed if the visibility and editability of the EARight element, `PROMOTION_EDIT_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-add-tactic-button`	Displays the add tactic button when the promotion is in the edit mode. The add tactic button is displayed if the visibility and editability of the EARight element, `ADD_TACTIC_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-duplicate-tactic-button`	Displays the duplicate tactic button when the promotion is in the edit mode, and a tactic is focused. It duplicates the selected tactic. The duplicate tactic button is displayed if the visibility and editability of the EARight element, `TACTIC_DUPLICATE_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-delete-tactic-button`	Displays the delete tactic button when the promotion is in the edit mode, and a tactic is focused. It deletes the selected tactic. The delete tactic button is displayed if the visibility and editability of the EARight element, `TACTIC_DELETE_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-predict-uplift-button`	Displays the predict uplift button when the promotion is in the edit mode, and the uplift prediction feature is enabled for the promotion and user.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-kpi-validations`	Displays the KPI validations UI component when the promotion is calculated and validation KPIs emit errors.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-push-area`	Displays the push promotion button when the promotion is pushable, and the promotion is displayed. It also displays a message indicating whether the promotion must be pushed. The push promotion button is displayed if the visibility and editability of the EARight element, `PROMOTION_PUSH_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-cancel-button`	Displays the cancel button when the promotion is in the edit mode.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-save-and-refresh-button`	Displays the save and refresh button when the promotion is in the edit mode.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-done-button`	Displays the done button when the promotion is in the edit mode.	`promotion-id`: ID. Required. The record ID of the promotion to load.
`tpm-promotion-header-pl-filter-button`	Displays the promotion P&L filters button when the promotion is in P&L view.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-scenario-planning-button`	Displays the scenario planning button on the toolbar. The scenario planning button is displayed if the visibility and editability of the EARight element, `SCENARIO_PLANNING_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.
`tpm-promotion-header-attachments-button`	Displays the attachments button on the toolbar. The attachments button is displayed if the visibility and editability of the EARight element, `PROMOTION_ATTACHMENT_BUTTON`, is true.	`promotion-id`: Id. Required. The record ID of the promotion to load.

Example

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>

Consumer Goods Cloud Developer Guide

TPM Promotion Header Slot LWCs

Example