LWC Configuration

In order to access the TPM promotion data in LWC layer, the tpm-promotion service component is used. Use the tpm-promotion component to hook into the promotion state and be able to extract data from the promotion (through events) and push new data to the promotion (through methods).

tpm-promotion component

1<!-- YourComponent.html -->
2<template>
3    <!-- Include the component in your markup -->
4    <cgcloud-tpm-promotion 
5        data-id="fwk" 
6        promotion-id={recordId}
7        <!-- Define event handlers for the data you need on your component -->
8        oneditmodechange={onEditModeChange}
9    ></cgcloud-tpm-promotion>
10    
11    <!-- Sample button -->
12    <lightning-button variant="neutral" label="Toggle Edit Mode" onclick={handleEditModeClick}></lightning-button>
13</template>
14
15<!-- YourComponent.js -->
16import { api, LightningElement } from 'lwc';
17
18export default class YourComponent extends LightningElement {
19    @api
20    recordId; // Record id is used to initialize the tpm-promotion component
21    
22    onEditModeChange(event) {
23        // This event is called every time the Edit mode changes
24        // for the promotion
25        this.editMode = event.detail.value;
26    }
27    
28    handleEditModeClick() {
29        // You can push changes/alter the state of the promotion
30        // by calling the component methods
31        // State changes will be notified to all the components of the page
32        this.template.querySelector('cgcloud-tpm-promotion')
33            .setEditMode(!this.editMode);
34    }
35}<!-- YourComponent.js-meta.xml -->
36<?xml version="1.0" encoding="UTF-8"?>
37<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
38    <apiVersion>55.0</apiVersion>
39    <isExposed>true</isExposed>
40    <targets>
41        <target>lightning__RecordPage</target>
42    </targets>
43    <targetConfigs>
44        <targetConfig targets="lightning__RecordPage">
45            <objects>
46                <object>cgcloud__Promotion__c</object>
47            </objects>
48        </targetConfig>
49    </targetConfigs>
50    <runtimeNamespace>cgcloud</runtimeNamespace>
51</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

When setting the runtimeNamespace property in the metadata file, your component cannot use modules from the ‘@salesforce’ package (any import whose route starts with @salesforce).

Troubleshooting

Question: When my component runs, I get the error Scoped imports are not allowed when runtime namespace is specified.
Answer: This error appears when trying to use “@salesforce” modules in your component. When specifying a runtimeNamespace in the metadata file, your component cannot access “@salesforce” resources. To perform APEX calls and other actions that require those modules, use the tpmGenericUtils modules available functions.
Question: When my component runs, I get the error Attempting to reference cross-namespace module
Error scenarios
- Your component does not have the runtimeNamespace property set up on it metadata file. To fix it, add the runtimeNamespace property with the namespace cgcloud to your component.
- Your component includes other custom components that do not have the runtimeNamespace property in their metadata. Add the runtimeNamespace property with the namespace cgcloud to the included components (also to the included components of the included ones). All the components used by another component with a runtimeNamespace defined must have the runtimeNamespace property in their metadata.

Consumer Goods Cloud Developer Guide

LWC Configuration

Troubleshooting