实例学习
1.dataTableComponent
通过该实例练习，我们会掌握下面相关知识点的运用：
- lightning-datatable 的使用
- Popup Modal画面
- 子通知父（子→父）：CustomEvent
- 共享JS代码
dataTableLWC.cls
public with sharing class dataTableLWC {
@AuraEnabled(cacheable = true)
public static List<Account> fetchAccounts(){
return [SELECT Id,Name,Phone,Type,Industry,Rating,Website FROM Account LIMIT 100];
}
}
commonUtils.js
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
const showToastInfo = (that, message, mode) => {
const modevalue = (mode != null ? mode : 'dismissable');
const event = new ShowToastEvent({
title: 'info',
message: message,
variant: 'info', //info/success/warning/error
mode: modevalue //sticky：クローズボタンを押すまで表示 pester：3秒間表示 dismissable：sticky+pester
});
that.dispatchEvent(event);
};
const showToastSuccess = (that, message, mode) => {
const modevalue = (mode != null ? mode : 'dismissable');
const event = new ShowToastEvent({
title: 'success',
message: message,
variant: 'success', //info/success/warning/error
mode: modevalue //sticky：クローズボタンを押すまで表示 pester：3秒間表示 dismissable：sticky+pester
});
that.dispatchEvent(event);
};
const showToastWarning = (that, message, mode) => {
const modevalue = (mode != null ? mode : 'dismissable');
const event = new ShowToastEvent({
title: 'warning',
message: message,
variant: 'warning', //info/success/warning/error
mode: modevalue //sticky：クローズボタンを押すまで表示 pester：3秒間表示 dismissable：sticky+pester
});
that.dispatchEvent(event);
};
const showToastError = (that, message, mode) => {
const modevalue = (mode != null ? mode : 'dismissable');
const event = new ShowToastEvent({
title: 'error',
message: message,
variant: 'error', //info/success/warning/error
mode: modevalue //sticky：クローズボタンを押すまで表示 pester：3秒間表示 dismissable：sticky+pester
});
that.dispatchEvent(event);
};
export {showToastInfo,showToastSuccess,showToastWarning,showToastError};
commonUtils.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
modalLwc.html
<template>
<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>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<dl class="slds-list_horizontal slds-wrap">
<dt class="slds-item_label slds-truncate" title="Name">Name:</dt>
<dd class="slds-item_detail slds-truncate">{record.Name}</dd>
<dt class="slds-item_label slds-truncate" title="Phone">Phone:</dt>
<dd class="slds-item_detail slds-truncate">{record.Phone}</dd>
<dt class="slds-item_label slds-truncate" title="Type">Type :</dt>
<dd class="slds-item_detail slds-truncate">{record.Type}</dd>
<dt class="slds-item_label slds-truncate" title="Industry">Industry :</dt>
<dd class="slds-item_detail slds-truncate">{record.Industry}</dd>
<dt class="slds-item_label slds-truncate" title="Website">Website :</dt>
<dd class="slds-item_detail slds-truncate">{record.Website}</dd>
<dt class="slds-item_label slds-truncate" title="Rating">Rating :</dt>
<dd class="slds-item_detail slds-truncate">{record.Rating}</dd>
</dl>
</div>
<footer class="slds-modal__footer">
<lightning-button variant="brand" label="Close" title="Close" onclick={closeModal}></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
modalLwc.js
import {LightningElement,track,api} from 'lwc';
export default class ModalLwc extends LightningElement {
@api record = {};
closeModal() {
const selectEvent = new CustomEvent('close', {});
this.dispatchEvent(selectEvent);
}
}
modalLwc.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
dataTableComponent.html
<template>
<lightning-datatable
key-field="id"
data={dataList}
onrowaction={handleRowAction}
row-number-offset={rowOffset}
hide-checkbox-column="true"
columns={columns}>
</lightning-datatable>
<template if:true={bShowModal}>
<c-modal-lwc record={record} onclose={closeModal}></c-modal-lwc>
</template>
</template>
dataTableComponent.js
import {LightningElement,wire,track} from 'lwc';
import {showToastSuccess,showToastError} from 'c/commonUtils';
import fetchAccounts from '@salesforce/apex/dataTableLWC.fetchAccounts';
const columns = [
{
label: 'Name',
fieldName: 'Name'
},
{
label: 'Phone',
fieldName: 'Phone'
},
{
label: 'Type',
fieldName: 'Type'
},
{
label: '',
type: 'button-icon',
initialWidth: 75,
typeAttributes: {
iconName: 'action:preview',
title: 'Preview',
variant: 'border-filled',
alternativeText: 'View'
}
}
];
export default class DataTableComponent extends LightningElement {
@track columns = columns;
@track record = {};
@track rowOffset = 0;
@track dataList = {};
@track bShowModal = false;
@wire(fetchAccounts)
wiredFetchAccounts({error, data}) {
if (data) {
this.dataList = data;
showToastSuccess(this, '処理を正常に完了しました。');
} else if (error) {
showToastError(this, error.body.message);
}
}
handleRowAction(event) {
const row = event.detail.row;
this.record = row;
this.bShowModal = true;
}
closeModal(event) {
this.bShowModal = false;
}
}
dataTableComponent.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
2.customSearch
通过该实例练习，我们会掌握下面相关知识点的运用：
- Html的入力数据传递到Js里面
- Apex方法的调用：Call a method imperatively
- 用单纯html结合SLDS，一览数据表示
customSearchController.cls
public with sharing class customSearchController {
@AuraEnabled(cacheable=true)
public static list<contact> getContactList(string searchKey) {
string sTempSearchKey = '%' + searchKey + '%';
list<contact> lstContact = new list<contact>();
for(contact oCon : [Select id,Name,Email,FirstName,LastName,Phone
From Contact
WHERE name LIKE : sTempSearchKey]){
lstContact.add(oCon);
}
if(lstContact.size() == 0){
throw new AuraHandledException('No Record Found..');
}
return lstContact;
}
}
customSearch.html
<template>
<div class="slds-m-around_medium">
<div class="slds-m-bottom_small">
<lightning-input type="text" value={sVal} label="Contact Name" onchange={updateSeachKey}></lightning-input>
</div>
<lightning-button label="Search" onclick={handleSearch} variant="brand"></lightning-button>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-m-top_small">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="First Name">First Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Last Name">Last Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Email">Email</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={contacts} for:item="contact">
<tr class="slds-hint-parent" key={contact.Id}>
<td>
<div class="slds-truncate">{contact.FirstName}</div>
</td>
<td>
<div class="slds-truncate">{contact.LastName}</div>
</td>
<td>
<div class="slds-truncate">
<lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>
</div>
</td>
<td>
<div class="slds-truncate">
<lightning-formatted-email value={contact.Email}></lightning-formatted-email>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
customSearch.js
import {LightningElement,track} from 'lwc';
import {showToastError} from 'c/commonUtils';
import getContactList from '@salesforce/apex/customSearchController.getContactList';
export default class customSearch extends LightningElement {
@track contacts;
sVal = '';
updateSeachKey(event) {
this.sVal = event.target.value;
}
handleSearch() {
if (this.sVal !== '') {
getContactList({searchKey: this.sVal})
.then(result => {
this.contacts = result;
})
.catch(error => {
showToastError(this, error.body.message);
this.contacts = null;
});
} else {
showToastError(this, 'Search text missing..');
}
}
}
customSearch.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
3.datatableUpdateExample
该实例是 Developer Guide 里面的一个Sample。
ContactController.cls
public with sharing class ContactController {
@AuraEnabled(cacheable=true)
public static List<Contact> getContactList() {
return [
SELECT Id, FirstName, LastName, Title, Phone, Email
FROM Contact
WITH SECURITY_ENFORCED
LIMIT 10
];
}
}
datatableUpdateExample.html
<template>
<lightning-card title="Datatable Example" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={contact.data}>
<lightning-datatable
key-field="Id"
data={contact.data}
columns={columns}
onsave={handleSave}
draft-values={draftValues}>
</lightning-datatable>
</template>
<template if:true={contact.error}>
<!-- handle Apex error -->
</template>
</div>
</lightning-card>
</template>
datatableUpdateExample.js
import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
const COLS = [
{ label: 'First Name', fieldName: 'FirstName', editable: true },
{ label: 'Last Name', fieldName: 'LastName', editable: true },
{ label: 'Title', fieldName: 'Title' },
{ label: 'Phone', fieldName: 'Phone', type: 'phone' },
{ label: 'Email', fieldName: 'Email', type: 'email' }
];
export default class DatatableUpdateExample extends LightningElement {
@track error;
@track columns = COLS;
@track draftValues = [];
@wire(getContactList)
contact;
handleSave(event) {
const recordInputs = event.detail.draftValues.slice().map(draft => {
const fields = Object.assign({}, draft);
return { fields };
});
const promises = recordInputs.map(recordInput => updateRecord(recordInput));
Promise.all(promises).then(contacts => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Contacts updated',
variant: 'success'
})
);
this.draftValues = [];
return refreshApex(this.contact);
}).catch(error => {
// Handle error
});
}
}
datatableUpdateExample.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
<targets>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>