LoginSignup
1
0

More than 1 year has passed since last update.

画面がないLWCボタン

Last updated at Posted at 2022-10-16

要件

・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/
・Headlessボタン
 https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_quick_actions_headless

ポイント

①Lwcの宣言にLightning__RecordAction用に追記してから、RecordPageのアクションとして選べられる
※Headlessアクションの場合、TargetConfigは下記(ScreenAction -> Action)
(navToNewRecordWithoutScreen.js-meta.xml)

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle
    xmlns="http://soap.sforce.com/2006/04/metadata"
    fqn="navToNewRecordWithoutScreen">
    <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>Action</actionType>
       </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

②Invoke方法

import { LightningElement, api, wire } from "lwc";
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import { NavigationMixin } from 'lightning/navigation';
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';
import { getRecord } from 'lightning/uiRecordApi';

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

export default class NavToNewRecordWithoutScreen extends NavigationMixin(
    LightningElement
) {
    isExecuting = false;
    //bind recordId
    _recordId;
    @api set recordId(value) {
        this._recordId = value;
    }

    get recordId() {
        return this._recordId;
    }

    @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;
    }

    @api invoke() {
        if(this.type == 'Technology Partner'){
            let event = new ShowToastEvent({
                title: 'Type Error!',
                message: 'Hi there! Starting...' + this.type,
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(event);
        }else{
            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'
                }
            });
        

        }


        console.log("Hi, I'm an action12.");


    }

}

Html

<template></template>

追記

LDSのレコードから、値を取得するは、LWCの自身のgetFieldValueを使うことを進める
例:

import { getRecord,getFieldValue,createRecord } from 'lightning/uiRecordApi';

example

get type() {
        return getFieldValue(this.account.data, 'Account.Type');
    } 
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0