LWC の設定

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>