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