この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

UI のカスタマイズ

デフォルトの要件が自分の実装に適していない場合は、管理パッケージで提供されるすべての UI コンポーネントをカスタム実装によって置き換えることができます。

管理パッケージのコンポーネントカードへの項目の追加

管理パッケージの UI コンポーネントカードに新規項目を追加することはサポートされていません。管理パッケージと同じ項目および追加のカスタム項目を表示する UI コンポーネントが必要な場合は、独自のコンポーネントを作成してください。

管理パッケージの SObject への新規項目の追加

管理パッケージに含まれる SObject に新規項目を追加する場合、その項目の値は、tpm-promotion LWC コンポーネントで自動的に使用可能になります。この項目は、実行ユーザがアクセスできる限り、それぞれのコンポーネントプロパティに自動的に読み込まれます。この値を表示/編集するには、TPM_Promotion コンポーネントを含むカスタムコンポーネントを作成して値を表示する必要があります。

属性が自動的に読み込まれる管理パッケージの SObject を次に示します。

Promotion__c
Tactic__c
Tactic_Fund__c
Promotion_Attachment__c
Promotion_Attachment_Link__c
Tactic_Condition_Creation_Definition__c

例

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}

TPM UI でのカスタムデータの追加

UI に新規の SObject を追加するには、カスタム状態の一部としてのレコードを用意します。カスタム状態プロパティは、プロモーション保存時に逐次化され、APEX レイヤーのプロモーション保存プロセスフックにパラメータとして渡されます。

APEX 保存プロセスでこれらのレコードまたはデータを受け取るには、TPM_Promotion コンポーネントでこれらのレコードまたはデータをカスタム状態として設定します。

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}

管理パッケージの SObject の更新

tpm-promotion コンポーネントの API を使用します。

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}

リアクティブな UI の変更

カスタム UI コンポーネントは、tpm-promotion コンポーネントで提供されるイベントを使用して、他の UI コンポーネントで変更された項目への変更に対応できます。

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}