LWC(Lightning Web Components)でルックアップ検索を作ってみました。

salesforceでは参照関係の項目をよく使いますが、LWC(Lightning Web Components)でもオブジェクトの項目をしていすることで、簡単にルックアップ検索が作成できるみたいなのでやってみました。

取引先に契約者というカスタム項目を作成して、実装をしています。

たぶん親取引先とかでも実装でもよかったかも。

以下が実装のソースになります。

accountLookUp.html

<template>
    <lightning-card title="契約者検索">
        <!-- ルックアップ処理 -->
        <lightning-record-edit-form object-api-name={childObjectApiName} >
            <lightning-input-field id="fieldid" variant="label-hidden" field-name={targetFieldApiName}
                value={ContractUser} onchange={handleChange} >
            </lightning-input-field>
        </lightning-record-edit-form>   
        <lightning-button label="保存" class="slds-m-right_small" onclick={updateAccountRecord}></lightning-button>
    </lightning-card>
</template>

accountLookUp.js

import { LightningElement, wire, api, track } from 'lwc';
// getRecordのAPIを使用可能のする。
import { getRecord } from 'lightning/uiRecordApi';
// AccountのIDフィールドを使用可能にする。
import ACCOUNT_CONTRACT_USER from '@salesforce/schema/Account.ContractUser__c';
// AccountのOwner.Nameフィールドを使用可能にする
import  ACCOUNT_OWNER from '@salesforce/schema/Account.Owner.Name';
// トースト機能を使用できる様にする。（保存時に出力されるメッセージのイベント）
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
// Apexクラスの呼び出し
import accountUpdate from '@salesforce/apexContinuation/AccountUpdateController.accountUpdate';

export default class STP11_EventCompanionRegistration extends LightningElement {
    // レコードのID取得用の宣言
    @api recordId;
    // 画面に設定Id用の変数、値が変更された時に画面が再描画される様に＠trackを付与している。
    @track ContractUser;
    // ルックアップhtml側の設定値
    @api childObjectApiName = 'Account';
    @api targetFieldApiName = 'ContractUser__c';

    // 取引先の初期値を取得
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_CONTRACT_USER], optionalFields: [ACCOUNT_OWNER] })
    accountRecord({data, error}){
    if(data){
        // 契約者を取得
        this.ContractUser = data.fields.ContractUser__c.value;
    } else if(error){
        // 取得した際にエラーが発生した場合にコンソールにエラーを出力
        console.log("error === "+error);
        }
    }
    // ルックアップの値を変更した時に変数を取得しておくメソッド
    handleChange(event) {
        this.ContractUser = event.detail.value;
    }

    // Perform update action.
    updateAccountRecord(){
        // Apexの呼び出し、取引先IDと契約者IDを引数に渡す。
        accountUpdate({accountId: this.recordId, ContractUserId: Object.values(this.ContractUser).toString()}).then(()=> {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: '保存が成功しました。',
                    message: '',
                    variant: 'success',
                }),
            );
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: '保存が失敗しました。',
                    message: '',
                    variant: 'error',
                }),                
            );     
        })
    }
}

accountLookUp.xml

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

AccountUpdateController

public class AccountUpdateController {
    // LWCから呼び出しを可能にするアノテーション
    @AuraEnabled(continuation=true cacheable=false)
    public static void accountUpdate(String accountId,String ContractUserId){
        // Idが「 0,0,5,2,w,0,0,0,0,0,1,p,0,x,F,A,A,Q」の形で入ってきてしまうのでカンマ外す、原因不明
        accountId = accountId.replace(',', '');
        // アカウントレコードのインスタンスを作成
        Account acc = new Account(Id = accountId,ContractUser__c = ContractUserId);
        // レコードのアップデート
        update acc;
    }
}

一点、何故かAPEXにAccountのIDを渡すとコンマ（,）で文字列が区切られてしまうので、文字列を途中で変換しています。

これからもいくつか作っていく中で、原因がわかればと思います。

更にかなり躓いたこととして、

LWC(Lightning Web Components)をVSCODEからデプロイして、ページレイアウトのコンポーネントを更新することを忘れていたので、ずっと更新がうまくいかずはまりました。

わざわざ、JavaScriptからApexを呼び出してみたのも、それが原因だったのかもしれないです。。。。