📙일지_230727(EP.8)

Use Components in Salesforce Targets

💡 Targets

🎈 targetConfig

https://developer.salesforce.com/docs/platform/lwc/guide/reference-configuration-tags.html

🚗 sampleTarget.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Contact</object>
                <object>Opportunity</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

---

customLwcforFlow

🚓 customLwcforFlow.html

<<template>
    <lightning-card title="LWC in Flow" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <b> Account Name : {AccountName}  </br>
                Account Phone : {AccountPhone}
            </b>
        </div>
    </lightning-card>
</template>

🚓 customLwcforFlow.js

import { LightningElement, api } from 'lwc';

export default class CustomLWCforFlow extends LightningElement {
    @api AccountName;
    @api AccountPhone;
}

🚓 customLwcforFlow.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="AccountName" type="String" label="Account Name" />
            <property name="AccountPhone" type="String" label="Account Phone" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

---

✨ 만들었던 Flow 를 디버그를 했을 때!

SampleScreenAction

🚕 SampleScreenAction.html

<<template>
    <b>Hello World</b>
</template>

🚕 SampleScreenAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

---

SampleHeaderAction

🛺 SampleHeaderAction.js

import { LightningElement, api} from 'lwc';

export default class SampleHeaderAction extends LightningElement {
    @api invoke(){
        console.log("###Hello World");
    }
}

🛺 SampleHeaderAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

salesforce setup-> Object 편집 -> Buttons, Links and action

버튼 생성!!