项目中，我们经常会用到关联List，标准ListView的做成这里就不多说了，今天我们使用Lwc自定义开发一个关联List，完成之后的效果请看下图，开发主要分为两部分，第一部分是使用【lightning-datatable】标签做成ListView，第二部分是使用【lightning-record-form】标签做成表单。
关于【lightning-datatable】，在之前的博客中也有提到过，请参照Salesforce学习 Lwc（十）【lightning-datatable】
效果展示：
lightingWebComponentContactList.html
代码语言：javascript复制<template>
<div style="border: 1px solid #D8D8D8; border-radius: 5px;">
<article class="slds-card">
<div class="slds-card__header slds-grid ">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__body">
<h2 class="slds-card__header-title">
<div class="slds-card__header slds-truncate " title="Contact">
<div class="slds-m-left_small slds-m-top_medium">
<lightning-icon icon-name="standard:contact" size="small"></lightning-icon>
<span class="slds-m-left_small" style="font-weight: bold">取引先責任者一覧</span>
</div>
</div>
</h2>
</div>
<!-- 「新規」ボタン -->
<div class="slds-text-align_right slds-m-top_x-small">
<lightning-button
label="新規"
title="新規取引先責任者を作成する"
onclick={openModal}
class="slds-m-right_x-small">
</lightning-button>
</div>
</header>
</div>
<div class="slds-scrollable" >
<!-- 取引先責任者リスト -->
<lightning-datatable
key-field="Id"
data={contactList}
columns={columns}
show-row-number-column
hide-checkbox-column>
</lightning-datatable>
</div>
</article>
</div>
<!-- 新規取引先責任者ダイアログ -->
<template if:true={isShowModal}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- ヘッダー-->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon
icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" >
</lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading_medium slds-hyphenate">新規取引先責任者</h2>
</header>
<!-- 入力部分-->
<div class="slds-modal__content slds-p-around_medium">
<lightning-record-form
object-api-name="Contact"
fields={createFields}
onsuccess={onSuccess}
columns="2"
oncancel={closeModal}
onsubmit={onSubmit}>
</lightning-record-form>
</div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</template>lightingWebComponentContactList.js
代码语言：javascript复制import { LightningElement, track, wire, api } from 'lwc';
/** トーストメッセージを表示する */
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import { refreshApex } from '@salesforce/apex';
import getContacts from '@salesforce/apex/ContactListForLwcController.getContactsByAccountId';
/** カスタム表示ラベル：取引先責任者を取得でエラーが発生しました。 */
import ERROR_GETCONTACTS from '@salesforce/label/c.ErrMsg_GetContacts'
/** 新規取引先責任者作成用項目取得 */
import FIELD_LASTNAME from '@salesforce/schema/Contact.LastName';
import FIELD_FIRSTNAME from '@salesforce/schema/Contact.FirstName';
import FIELD_DEPARTMENT from '@salesforce/schema/Contact.Department';
import FIELD_TITLE from '@salesforce/schema/Contact.Title';
import FIELD_PHONE from '@salesforce/schema/Contact.Phone';
import FIELD_EMAIL from '@salesforce/schema/Contact.Email';
export default class LightingWebComponentContactList extends LightningElement {
// 画面で表示しているレコードID
@api recordId;
// 取引先責任者リストヘッダー
@track columns = [
{label:'取引先責任者名', fieldName:'Name' }
,{label:'部署', fieldName:'Department'}
,{label:'役職', fieldName:'Title' }
,{label:'電話', fieldName:'Phone', type:'phone'}
,{label:'メール', fieldName:'Email', type: 'email'}
];
// 取引先責任者取得結果
resultContact = [];
// 取引先責任者リストデータ
@track contactList = [];
// 新規作成モーダルダイアログ表示フラグ
@track isShowModal = false;
// 新規ダイアログ表示項目
createFields = [FIELD_LASTNAME, FIELD_FIRSTNAME, FIELD_DEPARTMENT, FIELD_TITLE, FIELD_PHONE, FIELD_EMAIL];
/**
* 取引先責任者取得
*/
@wire ( getContacts, ( { 'accountId' : '$recordId' } ) )
setContactList( result ){
this.resultContact = result;
if( result.data ){
this.contactList = result.data;
}else if( result.error ){
// トーストでエラー表示
this.showToast(ERROR_GETCONTACTS, result.error.details.body.message, 'error', 'sticky');
}
}
/**
* modalダイアログオープン
*/
openModal(){
this.isShowModal = true;
}
/**
* modalダイアログクローズ
*/
closeModal(){
this.isShowModal = false;
}
/**
* 新規 取引先責任者データ作成実行
*/
onSubmit( event ){
// 更新を止める
event.preventDefault();
let fields = event.detail.fields;
// 取引先IDをセット
fields.AccountId = this.recordId;
console.log(JSON.stringify(fields));
// 更新再開
this.template.querySelector('lightning-record-form').submit(fields);
}
/**
* 新規データ作成成功時メソッド
* 更新データ画面描画
*/
onSuccess(event) {
// 確認用コード
const contact = event.detail;
console.log(JSON.stringify(contact));
const updatedRecord = event.detail.id;
console.log('onsuccess: ', updatedRecord);
// @wireのキャッシュをクリアして、取引先責任者データを再取得する。
refreshApex(this.resultContact);
//ダイアログクローズ
this.isShowModal = false;
//データ作成報告
this.showToast('SUCCESS','取引先責任者が作成されました。','success','pester');
}
/*
*トーストによるメッセージ表示
*/
showToast(title,message,varient,mode) {
const event = new ShowToastEvent({
title : title
,message : message
,variant : varient //info/success/warning/error
,mode : mode //sticky クローズボタンを押すまで表示
//pester 3秒間表示
//dismissable sticky pester
});
this.dispatchEvent(event);
}
}
