本篇參考：
https://developer.salesforce.com/docs/platform/lwc/guide/reference-graphql.html
https://developer.salesforce.com/docs/platform/lwc/guide/reference-refreshgraphql.html
https://developer.salesforce.com/docs/platform/graphql/guide/graphql-wire-lwc.html
https://developer.salesforce.com/docs/component-library/bundle/lightning-record-picker/documentation
背景：想象一下我們以前做項目如果需要一個搜索功能的時候，比如搜索Account列表數據，查詢條件可以基於Owner或者某個自定義的lookup字段進行查詢時，我們通常要如何設計？
- 創建custom lookup component來支持；
- 通過 lightning-record-edit-form搭配 lightning-input-field，input-field字段綁定着lookup字段來實現。
先不評論方案的好壞，這兩種都需要花費不少的時間以及考慮不同的點，可擴展性達不到保證。 除此以外，有時還需要考慮其他的問題，比如通過哪個字段進行搜索，顯示哪個字段，UI效果穩定性等等。現在我們就不用有這樣的顧慮了，因爲 lightning-record-picker來了。
一. lightning-record-picker
lightning-record-picker組件允許你基於輸入的內容返回所對應的數據列表並且直接進行渲染，使用 GraphQL wire adapter來進行數據搜索，數據顯示以及數據選擇一條以後的信息獲取。 至於GraphQL是什麼，我們後續再說。
我們先看一下 lightning-record-picker的最簡單的一個例子，只需要html的代碼，js不需要任何內容。
<template> <lightning-record-picker label="Accounts" placeholder="Search Accounts..." object-api-name="Account"> </lightning-record-picker> </template>
效果顯示：這個UI效果，如果做過 custom lookup組件的小夥伴應該很熟悉，除🔍的位置不同以外，其他的效果基本一致。
lightning-record-picker除這個最基礎的以外，還支持哪些擴展呢？
1. Filter: 就像lookup字段支持 Lookup Filter一樣，我們在使用搜索功能時，有時希望加一些前置的過濾條件，從而初始時就過濾掉我們不需要的數據。lightning-record-picker也支持filter功能而且用法很簡單。我們對上面的代碼進行一下改造
recordPickerSample.html：增加了filter屬性
<template> <lightning-record-picker label="Accounts" placeholder="Search Accounts..." filter={filter} object-api-name="Account"> </lightning-record-picker> </template>
recordPickerSample.js： 增加了filter變量，我們可以看到結構體主要兩部分：
- criteria: 用於指定我們的過濾的條件，包含三部分，並且這三部分都是必填內容：
- fieldPath: object api name
- operator: 操作符
- value: 過濾字段的值
- filterLogic：可選項，如果不包含這個值，默認所有的條件是AND，如果需要自定義，則添加這個值。
注：官方文檔中這裏的代碼寫的是錯誤的，如果直接複製粘貼無法運行，因爲filterLogic位置不正確。
import { LightningElement, track, wire } from 'lwc';
export default class recordPickerSample extends LightningElement {
filter = {
criteria: [
{
fieldPath: 'AccountSource',
operator: 'ne',
value: 'Other'
},
{
fieldPath: 'Type',
operator: 'eq',
value: 'Prospect'
}
],
filterLogic: '1 OR 2',
}
}
上面的代碼主要實現的是搜索記錄時，要求記錄還需要滿足 AccountSource不等於Other或者Type等於Prospect。除此以外，我們看到operator的值有點怪，ne和eq，這些代表什麼呢？
| Function | Description |
| eq | Equals。 |
| ne | Not Equals. |
| lt | less than。 |
| gt | great than。 |
| lte | Less than or equal |
| gte | Greater than or equal |
| like | 和soql中的用法相同 |
| in | 和soql中的IN用法相同 |
| nin | 和soql中的Not IN用法相同 |
| inq | 元素在一個query集中，和soql的 in子查詢相同 |
| ninq | 元素不在一個query集中，和soql的not in 子查詢相同 |
| includes | multi picklist包含某個值 |
| excludes | multi picklist不包含某個值 |
2. Display: 默認我們會顯示搜索的Name字段的值，如果我們需要顯示其他的值，我們可以通過display-info屬性來實現。目前additional fields 只支持1個，即列表最多隻允許顯示兩個字段。我們將上面的代碼進行增強。
recordPickerSample.html：增加 display-info屬性
<template> <lightning-record-picker label="Accounts" placeholder="Search Accounts..." filter={filter} display-info={displayInfo} object-api-name="Account"> </lightning-record-picker> </template>
recordPickerSample.js：聲明變量，變量使用 additionalFields。
import { LightningElement, track, wire } from 'lwc';
export default class recordPickerSample extends LightningElement {
filter = {
criteria: [
{
fieldPath: 'AccountSource',
operator: 'ne',
value: 'Other'
},
{
fieldPath: 'Type',
operator: 'eq',
value: 'Prospect'
}
],
filterLogic: '1 OR 2',
}
displayInfo = {
additionalFields: ['Owner.Name']
}
}
效果顯示：
<template> <lightning-record-picker label="Accounts" placeholder="Search Accounts..." filter={filter} display-info={displayInfo} matching-info={matchingInfo} object-api-name="Account"> </lightning-record-picker> </template>
recordPickerSample.js: matchingInfo屬性可以設置兩個信息： primaryField以及additionalFields參數。儘管additionalFields參數傳遞是數組，但是目前仍然最多也只允許1個值。
import { LightningElement, track, wire } from 'lwc';
export default class recordPickerSample extends LightningElement {
filter = {
criteria: [
{
fieldPath: 'AccountSource',
operator: 'ne',
value: 'Other'
},
{
fieldPath: 'Type',
operator: 'eq',
value: 'Prospect'
}
],
filterLogic: '1 OR 2',
}
displayInfo = {
additionalFields: ['Phone']
}
matchingInfo = {
primaryField: { fieldPath: 'Name' },
additionalFields: [ { fieldPath: 'Phone' } ]
}
}
效果顯示：demo中通過Phone的信息也可以搜索出想要的信息
4. 事件： 組件封裝了幾個標準行爲的事件，其他的小夥伴自行查看，這裏只介紹 change事件，handler用於返回所選中的recordId信息。demo會和下面的一起介紹。
二. lightning-record-picker實現WhatId等多選擇的效果
<template> <div class="slds-form-element"> <label class="slds-form-element__label">Select a record</label> <div class="slds-form-element__control slds-combobox-group"> <lightning-combobox label="Select Object" variant="label-hidden" options={objNametList} value={selectedObject} onchange={handleTargetSelection} > </lightning-combobox> <lightning-record-picker object-api-name={selectedObject} placeholder="Search..." label="Select a record" variant="label-hidden" onchange={handleRecordSelect} class="slds-size_full slds-combobox-addon_end" > </lightning-record-picker> </div> </div> </template>
dynamicRecordPickerSample.js
import { LightningElement } from 'lwc';
export default class dynamicRecordPickerSample extends LightningElement {
objNametList = [
{label: 'Account',value: 'Account'},
{label: 'Contact',value: 'Contact'},
{label: 'Opportunity',value: 'Opportunity'},
{label: 'Case',value: 'Case'}
];
selectedObject = 'Account';
currentSelectedRecordId;
handleObjectChange(event) {
this.selectedObject = event.target.value;
}
handleRecordSelect(event) {
this.currentSelectedRecordId = event.detail.recordId;
console.log('*** this.currentSelectedRecordId : ' + this.currentSelectedRecordId);
}
}
效果顯示：
總結： 篇中主要介紹了lightning-record-picker的使用，record-picker基於GraphQL的wire adapter來實現，後續的篇章中有機會也會講一下GraphQL Wire Adapter等相關知識。官方文檔中有一些錯誤，導致複製粘貼無法運行，不要懷疑自己，修改以後重新嘗試。篇中有錯誤地方歡迎指出，有不懂歡迎留言。