---
schema_version: "1"
id: 5231b04bc6bb7f0752adb2f5a6b1daaa09c7d5d2071042f3f968f016a081dea9
title: TPM Promotion Header Slot LWCs
collection: legacydeveloper
version: current
locale: en-us
portal_url: https://docs.salesforce.com/legacydeveloper/current/en-us/retail_api/tpm_promotion_header_slot_lwcs_reference.md
canonical_url: https://developer.salesforce.com/docs/atlas.en-us.retail_api.meta/retail_api/tpm_promotion_header_slot_lwcs_reference.htm
source_site: developer.salesforce.com
content_type: documentation
content_hash: a3f83ab5d15a51071b25d94729816d3ca2535fe9d819a68b67c8bb14dabd8c83
description: The slot-specific LWCs related to the promotion header provide access to various promotion header sections in the LWC layer.
---
# 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 class="featureTable sort_table" summary="">
        <caption><span class="tablecap">Table 1. TPM Promotion Header Slot LWC Reference</span></caption>



        <thead class="thead sorted" align="left">
          <tr>
            <th class="featureTableHeader  " id="d10336e48">Component Name</th>

            <th class="featureTableHeader  " id="d10336e51">Description</th>

            <th class="featureTableHeader  " id="d10336e54">LWC Properties</th>

          </tr>

        </thead>

        <tbody class="tbody">
          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-icon</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the icon on the TPM promotion header.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">use-sobject-icon</samp>: Boolean.
              Indicates whether the icon displayed on the promotion header is an
              SObject icon(<samp class="codeph nolang">true</samp>) or the default
              static image (<samp class="codeph nolang">false</samp>).
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-breadcrumbs</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the breadcrumbs on the TPM promotion header.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <ul class="ul bulletList">
                <li class="li">
                  <samp class="codeph nolang">promotion-id</samp>: ID. Required.
                  The record ID of the promotion to load.
                </li>

                <li class="li">
                  <samp class="codeph nolang">use-sobject-label</samp>: Boolean.
                  Indicates whether the links targeting the promotion record list
                  has the promotion SObject plural label&nbsp;(<samp class="codeph nolang">true</samp>) or the default custom
                  label, <samp class="codeph nolang">PP_TIT_PROMOTION_LIST</samp> (<samp class="codeph nolang">false</samp>).&nbsp;
                </li>

              </ul>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-slogan</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the promotion slogan on the TPM promotion header.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-subtitle</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the promotion subtitle with the referenced account or
              account set name, date from and date through values.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-promotion-planning-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the promotion planning navigation button icon to be used in
              a lighting-button-group on the promotion header.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <ul class="ul bulletList">
                <li class="li">
                  <samp class="codeph nolang">promotion-id</samp>: Id. Required.
                  The record ID of the promotion to load.
                </li>

                <li class="li">
                  <samp class="codeph nolang">group-order</samp>: String. The
                  rounded border on lightning-button-group. Possible values are
                  <samp class="codeph nolang">first</samp>, <samp class="codeph nolang">middle</samp>, and <samp class="codeph nolang">last</samp>.
                </li>

              </ul>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-promotion-pl-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the promotion P&amp;L navigation button icon to be used in a
              lighting-button-group on the promotion header. The promotion P&amp;L
              navigation button is displayed if the visibility and editability of the
              EARight element, <samp class="codeph nolang">PROMOTION_PLANNING_GRID_BUTTON</samp>, is true.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <ul class="ul bulletList">
                <li class="li">
                  <samp class="codeph nolang">promotion-id</samp>: Id. Required.
                  The record ID of the promotion to load.
                </li>

                <li class="li">
                  <samp class="codeph nolang">group-order</samp>: String. The
                  rounded border on lightning-button-group. Possible values are
                  <samp class="codeph nolang">first</samp>, <samp class="codeph nolang">middle</samp>, and <samp class="codeph nolang">last</samp>.
                </li>

              </ul>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-edit-mode-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the promotion edit mode button when the promotion isn’t yet
              in the edit mode. <p class="p">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.</p>
              The promotion edit mode
              button is displayed if the visibility and editability of the EARight
              element, <samp class="codeph nolang">PROMOTION_EDIT_BUTTON</samp>, is
              true.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-add-tactic-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the add tactic button when the promotion is in the edit
              mode. <p class="p">The add tactic button is displayed if the visibility and
                editability of the EARight element, <samp class="codeph nolang">ADD_TACTIC_BUTTON</samp>, is true.</p>
            </td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-duplicate-tactic-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the duplicate tactic button when the promotion is in the
              edit mode, and a tactic is focused. It duplicates the selected tactic.
              <p class="p">The duplicate tactic button is displayed if the visibility and
                editability of the EARight element, <samp class="codeph nolang">TACTIC_DUPLICATE_BUTTON</samp>, is true.</p>
            </td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-delete-tactic-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the delete tactic button when the promotion is in the edit
              mode, and a tactic is focused. It deletes the selected tactic. <p class="p">The
                delete tactic button is displayed if the visibility and editability
                of the EARight element, <samp class="codeph nolang">TACTIC_DELETE_BUTTON</samp>, is true.</p>
            </td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-predict-uplift-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">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.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-kpi-validations</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the KPI validations UI component when the promotion is
              calculated and validation KPIs emit errors.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-push-area</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">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.<p class="p">The push promotion button is
                displayed if the visibility and editability of the EARight element,
                <samp class="codeph nolang">PROMOTION_PUSH_BUTTON</samp>, is
                true.
              </p>
            </td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-cancel-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the cancel button when the promotion is in the edit
              mode.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-save-and-refresh-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the save and refresh button when the promotion is in the
              edit mode.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-done-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the done button when the promotion is in the edit
              mode.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: ID. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-pl-filter-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the promotion P&amp;L filters button when the promotion is
              in P&amp;L view.</td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-scenario-planning-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the scenario planning button on the toolbar. <p class="p">The scenario
                planning button is displayed if the visibility and editability of
                the EARight element, <samp class="codeph nolang">SCENARIO_PLANNING_BUTTON</samp>, is true.</p>
            </td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d10336e48" data-title="Component Name"><samp class="codeph nolang">tpm-promotion-header-attachments-button</samp></td>

            <td class="entry" headers="d10336e51" data-title="Description">Displays the attachments button on the toolbar. <p class="p">The attachments
                button is displayed if the visibility and editability of the EARight
                element, <samp class="codeph nolang">PROMOTION_ATTACHMENT_BUTTON</samp>, is true.</p>
            </td>

            <td class="entry" headers="d10336e54" data-title="LWC Properties">
              <samp class="codeph nolang">promotion-id</samp>: Id. Required. The
              record ID of the promotion to load.
            </td>

          </tr>

        </tbody>

      </table>

## Example

<!-- MyHeader.html -->
<template>
  <cgcloud-tpm-promotion-header-component promotion-id={recordId}>
    <!-- Icon Slot -->
    <cgcloud-tpm-promotion-header-icon slot="icon"></cgcloud-tpm-promotion-header-icon>

    <!-- Breadcrumbs -->
    <div slot="breadcrumbs" style="display: flex">
      <cgcloud-tpm-promotion-header-breadcrumbs
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-breadcrumbs>
    </div>

    <!-- Title -->
    <div slot="title" style="display: flex">
      <cgcloud-tpm-promotion-header-slogan
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-slogan>
    </div>

    <!-- Subtitle -->
    <div slot="subtitle" style="display: flex">
      <cgcloud-tpm-promotion-header-subtitle
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-subtitle>
    </div>

    <!-- Navigation -->
    <lightning-button-group slot="navigation">
      <cgcloud-tpm-promotion-header-promotion-planning-button
        promotion-id={recordId}
        group-order="first"
      ></cgcloud-tpm-promotion-header-promotion-planning-button>
      <cgcloud-tpm-promotion-header-promotion-pl-button
        promotion-id={recordId}
        group-order="last"
      ></cgcloud-tpm-promotion-header-promotion-pl-button>
    </lightning-button-group>

    <!-- Left anchor buttons -->
    <div slot="left-buttons" style="display: flex">
      <cgcloud-tpm-promotion-header-edit-mode-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-edit-mode-button>
      <cgcloud-tpm-promotion-header-add-tactic-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-add-tactic-button>
      <cgcloud-tpm-promotion-header-duplicate-tactic-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-duplicate-tactic-button>
      <cgcloud-tpm-promotion-header-delete-tactic-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-delete-tactic-button>
      <cgcloud-tpm-promotion-header-predict-uplift-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-predict-uplift-button>
    </div>

    <!-- Right anchor buttons -->
    <div slot="right-buttons">
      <cgcloud-tpm-promotion-header-kpi-validations
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-kpi-validations>
      <cgcloud-tpm-promotion-header-push-area
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-push-area>
      <cgcloud-tpm-promotion-header-cancel-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-cancel-button>
      <cgcloud-tpm-promotion-header-save-and-refresh-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-save-and-refresh-button>
      <cgcloud-tpm-promotion-header-done-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-done-button>
      <cgcloud-tpm-promotion-header-pl-filter-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-pl-filter-button>
    </div>

    <!-- Full Height buttons -->
    <div slot="fullheight-buttons">
      <cgcloud-tpm-promotion-header-scenario-planning-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-scenario-planning-button>
      <cgcloud-tpm-promotion-header-attachments-button
        promotion-id={recordId}
      ></cgcloud-tpm-promotion-header-attachments-button>
    </div>
  </cgcloud-tpm-promotion-header-component>
</template>

<!-- MyHeader.js -->
import { LightningElement, api } from 'lwc';

export default class SamplePromotionHeaderCustom extends LightningElement {
    @api recordId;
}

<!-- MyHeader.js-meta.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>SAMPLE: Custom Promotion Header Component</masterLabel>
    <targets>
        <target>lightning\_\_RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning\_\_RecordPage">
            <objects>
                <object>cgcloud\_\_Promotion\_\_c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
    <!-- This property is required if LWS is Disabled -->
    <runtimeNamespace>cgcloud</runtimeNamespace>
</LightningComponentBundle>