LWCボタンの作成

要件

・Lightning画面でLWCのコンポーネントボタンを配置する
・親オブジェクトの関連子オブジェクトを作成する（デフォルト値を設定）
・親が特定のタイプの場合、子れコートを作成する画面へ、そうではない場合、エラーメッセージを表示

参照資料

・Lwcサンプル　https://github.com/trailheadapps/lwc-recipes#readme
・ボタン作成 https://www.greytrix.com/blogs/salesforce/2022/02/24/how-to-create-quick-action-button-using-lightning-web-component/
・ToastMessage　https://www.sfdcpoint.com/salesforce/lightning-web-component-lwc-toast-messages/

ポイント

①Lwcの宣言にLightning__RecordAction用に追記してから、RecordPageのアクションとして選べられる(navToNewRecordWithDefaults.js-meta.xml)

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

※Headlessアクションの場合、TargetConfigは下記(ScreenAction -> Action)

   <targetConfig targets="lightning__RecordAction">
     <actionType>Action</actionType>
   </targetConfig>

②親RecordIdと関連値を取得する

 @api recordId; // parent id

LDSのgetRecordと取得項目を定義

import { getRecord } from 'lightning/uiRecordApi';

const fields = [
        'Account.Name',
        'Account.Type'
    ];

取得したAccountIdを新規ContactにDefault設定（navToNewRecordWithDefaults.js）

import { LightningElement, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

import { getRecord } from 'lightning/uiRecordApi';

const fields = [
        'Account.Name',
        'Account.Type'
    ];
export default class NavToNewRecordWithDefaults extends NavigationMixin(
    LightningElement
) {
    @api recordId; // parent id

    @wire(getRecord, { recordId: '$recordId', fields })
    account;

    get type() {
        // !!! it neccessory to judge data wheather it is null
        if (!this.account.data){ return false; }
        return this.account.data.fields.Type.value;
    }


    navigateToNewContactWithDefaults() {
        const defaultValues = encodeDefaultFieldValues({
            FirstName: 'Morag',
            LastName: this.type,
            LeadSource: 'Other',
            AccountId: this.recordId
        });

 
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'new'
            },
            state: {
                defaultFieldValues: defaultValues,
                // !!! When finish, return to ralated list
                navigationLocation: 'RELATED_LIST'
            }
        });
    }
}

navToNewRecordWithDefaults.html

<template>
    <lightning-card
        title="NavToNewRecordWithDefaults"
        icon-name="custom:custom96"
    >
        <lightning-button
            name="new-with-defaults"
            label="Go to New Contact with Defaults"
            class="slds-var-m-around_medium"
            onclick={navigateToNewContactWithDefaults}
        ></lightning-button>

        <c-view-source source="lwc/navToNewRecordWithDefaults" slot="footer">
            Navigate to a new recordxx page5 {type} with default values. In this example,
            a new contact page.
        </c-view-source>
    </lightning-card>
</template>