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.

UI Customization

All managed packages provided UI components are replaceable by custom implementations if the default requirements are not suited for your implementation.

Add Fields to a Managed Package Component Card

It is not supported to add new Fields to a Managed Package UI Component Card. If you need a UI Component displaying the same fields as the managed package with additional custom fields, develop your own component.

Add New Field on Managed Package SObjects

If you want to add a new field to a Managed Package included the SObjects, the field value is automatically available in the tpm-promotion LWC component. The field will be automatically loaded on the respective component property as long as the running user has access to it. In order to display/edit this value, you’ll need to create a custom component with the TPM_Promotion component included to render it.

The Managed Package SObjects which has their attributes automatically loaded are:

Promotion__c
Tactic__c
Tactic_Fund__c
Promotion_Attachment__c
Promotion_Attachment_Link__c
Tactic_Condition_Creation_Definition__c

Example

1<!-- template -->
2<template>
3   <!-- use tpm-promotion component -->
4   <cgcloud-tpm-promotion 
5        promotion-id={recordId}
6        onpromotionchange={onPromotionChange}
7   ></cgcloud-tpm-promotion>
8   
9   <!-- render text -->
10   <lightning-formatted-text value={myNewField}></lightning-formatted-text>
11</template>
12
13<!-- controller -->
14import { LightningElement, api } from 'lwc';
15
16export default class MyCustomComponent extends LightningElement {
17    @api
18    recordId; // required for the promotion id
19
20    myNewField = '';
21
22    // Listen for promotion change events
23    onPromotionChange(event) {
24        this.myNewField = event.detail.value['MyNewField__c'];
25    }
26}

Add Custom Data in TPM UI

To add new SObjects to the UI, provide the records as part of the custom state. The custom state property is serialized during a promotion save and is passed as a parameter to your APEX layer Promotion Save process hook.

In order to receive these records or data during the APEX save process, configure them as Custom State in the TPM_Promotion component:

1// Custom Component controller
2storeCustomRecords() {
3    // Get the component
4    const promotionComponent = this.template.querySelector('cgcloud-tpm-promotion');
5    promotionComponent.setCustomState( // Set the new Custom State
6        Object.assign( // Use a object assign to ensure we are keeping other values
7            {},
8            customState,
9            { myRecords: myRecords }
10        )
11    );    
12}

Update Managed Packages SObjects

Use the API in the tpm-promotion component.

1// Custom Component controller
2storeCustomValues(){
3    // Get the component
4    const promotionComponent = this.template.querySelector('cgcloud-tpm-promotion');
5
6    // set a promotion field
7    promotionComponent.setPromotionField('cgcloud__Slogan_Language_1__c', 'My new Slogan');
8    
9    // set a tactic field
10    promotionComponent.setTacticField(tacticId, 'cgcloud__Group_Text__c', 'My tactic text');
11    
12    // set a tactic fund field
13    const tacticFunds = promotionComponent.getProperty('tacticFunds');
14    
15    // Retrieved objects are locked, to change them, make a shallow copy and set it
16    const newTacticFunds = [...tacticFunds];
17    newTacticFunds[0] = {...newTacticFunds[0]};
18    newTacticFunds[0].IsDeleted = true;
19    
20    // Set the values
21    promotionComponent.setTacticFunds(tacticFunds);
22}

Reactive UI changes

Using the events provided by the tpm-promotion component, custom UI components can react to changes to fields that have been changed in other UI components:

1<!-- template -->
2<template>
3   <!-- use tpm-promotion component -->
4   <cgcloud-tpm-promotion 
5        promotion-id={recordId}
6        onpromotionchange={onPromotionChange}
7   ></cgcloud-tpm-promotion>
8   
9   {slogan}
10</template>
11
12
13<!-- Controller -->
14import { LightningElement, api } from 'lwc';
15
16export default class MyCustomComponent extends LightningElement {
17    @api
18    recordId; // required for the promotion id
19
20    slogan = '';
21
22    // Listen for promotion change events
23    onPromotionChange(event) {
24        const newSlogan = event.detail.value['cgcloud__Slogan__c'];
25        if (this.slogan != newSlogan) {
26            // Do your custom logic on slogan change
27        }
28        
29        this.slogan = newSlogan;
30    }
31}

Consumer Goods Cloud Developer Guide