Olá, desenvolvedor, Como todos sabemos que o LWC é uma maneira totalmente nova de desenvolver o componente Lightning e não há recursos muito limitados para aprender o LWC.
Então, aqui está este tutorial, vamos aprender como podemos criar uma Pesquisa Reutilizável Personalizada com base na entrada do usuário.
Setp1: – Criar searchComponent
Este é o componente que habilita a funcionalidade de pesquisa. Use o código abaixo para marcação HTML e JavaScript.
<template>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_4-of-4">
<div>
<!-- Create an Input Field where user can enter text to find the
Records-->
<lightning-input variant="label-hidden"
label="Search Record" value={searchKey} type="search"
onchange={handleChange} placeholder="type text here">
</lightning-input>
</div>
</div>
</div>
</template>searchComponent.js
import { LightningElement, track } from 'lwc';
export default class SearchComponent extends LightningElement {
@track searchKey;
handleChange(event){
/* eslint-disable no-console */
//console.log('Search Event Started ');
const searchKey = event.target.value;
/* eslint-disable no-console */
event.preventDefault();
const searchEvent = new CustomEvent(
'change',
{
detail : searchKey
}
);
this.dispatchEvent(searchEvent);
}
}Etapa 2: – Criar o componente recordList
Neste componente, iremos mostrar a lista de todos os registros que serão devolvidos coincidindo com o texto inserido. Aqui está o código para marcação HTML e classe JavaScript.
<template>
<!--<a href="JavaScript:Void(0)" style="text-decoration:none;" onclick={handleSelect}>
<lightning-layout>
<lightning-layout-item>
<lightning-icon icon-name={iconname} size="small"></lightning-icon>
</lightning-layout-item>
<lightning-layout-item>
{record.Name}
</lightning-layout-item>
</lightning-layout>
</a> -->
<div >
<div class="slds-grid slds-wrap
slds-dropdown_length-with-icon-7
slds-dropdown_fluid
slds-p-left_small"
>
<div class="slds-col slds-size_4-of-4 ">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div class="slds-media slds-listbox__option
slds-listbox__option_entity
slds-listbox__option_has-meta"
role="option"
onclick={handleSelect}>
<span class="slds-media__figure slds-listbox__option-icon">
<lightning-icon icon-name={iconname} size="small"></lightning-icon>
</span>
<span class="slds-media__body"
style="padding-top: 9px;font-weight: 600;">
<span class="slds-listbox__option-text
slds-listbox__option-text_entity">
{record.Name}
</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>recordList.js
import { LightningElement, api } from 'lwc';
export default class RecordList extends LightningElement {
@api record;
@api fieldname;
@api iconname;
handleSelect(event){
event.preventDefault();
const selectedRecord = new CustomEvent(
"select",
{
detail : this.record.Id
}
);
/* eslint-disable no-console */
//console.log( this.record.Id);
/* fire the event to be handled on the Parent Component */
this.dispatchEvent(selectedRecord);
}
}Etapa 3: – Crie o componente customLookup
Principal componente que irá conter o componente searchComponent e RecordList componente e também, responsável por chamar o método ápice.
<template>
<template if:false={selectedRecord}>
<div class="slds-p-around_x-small">
<c-search-component
onchange={handleOnchange}>
</c-search-component>
</div>
</template>
<div >
<template if:true={error}>
<template if:true={error.details}>
<template if:true={error.details.body}>
{error.details.body.message}
</template>
</template>
</template>
</div>
<div>
<template if:false={selectedRecord}>
<template if:true={records}>
<template for:each={records} for:item="record">
<c-record-list key={record.Id} record={record}
onselect={handleSelect} iconname={iconname}
fieldname={searchfield}>
</c-record-list>
</template>
</template>
</template>
<template if:false={selectedRecord}>
</template>
</div>
<div class="slds-p-around_x-small">
<template if:true={selectedRecord}>
<div class="slds-combobox__form-element slds-input-has-icon
slds-input-has-icon_left-right" role="none">
<span class="slds-icon_container
slds-icon-standard-account
slds-combobox__input-entity-icon" title="Account">
<lightning-icon icon-name={iconname} ></lightning-icon>
</span>
<input class="slds-input slds-combobox__input
slds-combobox__input-value"
id="combobox-id-5" aria-controls="listbox-id-5"
autocomplete="off" role="textbox" type="text"
placeholder="Select an Option" readonly=""
value={selectedRecord.Name}
disabled
/>
<button class="sicon_container slds-button slds-button_icon
slds-input__icon slds-input__icon_right"
title="Remove selected option"
onclick={handleRemove}>
<lightning-icon icon-name="utility:close" size="small">
</lightning-icon>
<span class="slds-assistive-text">Remove selected option</span>
</button>
</div>
<!--<lightning-layout>
<lightning-layout-item>
<lightning-pill label={selectedRecord.Name} onremove={handleRemove}>
<lightning-icon icon-name={iconname}></lightning-icon>
</lightning-pill>
</lightning-layout-item>
</lightning-layout> -->
</template>
</div>
</template>customLookup.js
import { LightningElement, track, api } from 'lwc';
import findRecords from '@salesforce/apex/CustomLookupController.findRecords';
export default class CustomLookup extends LightningElement {
@track records;
@track error;
@track selectedRecord;
@api index;
@api relationshipfield;
@api iconname = "standard:account";
@api objectName = 'Account';
@api searchfield = 'Name';
/*constructor(){
super();
this.iconname = "standard:account";
this.objectName = 'Account';
this.searchField = 'Name';
}*/
handleOnchange(event){
//event.preventDefault();
const searchKey = event.detail.value;
//this.records = null;
/* eslint-disable no-console */
//console.log(searchKey);
/* Call the Salesforce Apex class method to find the Records */
findRecords({
searchKey : searchKey,
objectName : this.objectName,
searchField : this.searchfield
})
.then(result => {
this.records = result;
for(let i=0; i < this.records.length; i++){
const rec = this.records[i];
this.records[i].Name = rec[this.searchfield];
}
this.error = undefined;
//console.log(' records ', this.records);
})
.catch(error => {
this.error = error;
this.records = undefined;
});
}
handleSelect(event){
const selectedRecordId = event.detail;
/* eslint-disable no-console*/
this.selectedRecord = this.records.find( record => record.Id === selectedRecordId);
/* fire the event with the value of RecordId for the Selected RecordId */
const selectedRecordEvent = new CustomEvent(
"selectedrec",
{
//detail : selectedRecordId
detail : { recordId : selectedRecordId, index : this.index, relationshipfield : this.relationshipfield}
}
);
this.dispatchEvent(selectedRecordEvent);
}
handleRemove(event){
event.preventDefault();
this.selectedRecord = undefined;
this.records = undefined;
this.error = undefined;
/* fire the event with the value of undefined for the Selected RecordId */
const selectedRecordEvent = new CustomEvent(
"selectedrec",
{
detail : { recordId : undefined, index : this.index, relationshipfield : this.relationshipfield}
}
);
this.dispatchEvent(selectedRecordEvent);
}
}Passo 4: – Crie a classe CustomLookupController Apex
public with sharing class CustomLookupController {
public CustomLookupController() {
}
@AuraEnabled(cacheable = true)
public static List<SObject> findRecords(String searchKey, String objectName, String searchField){
String key = '%' + searchKey + '%';
String QUERY = 'Select Id, '+searchField+' From '+objectName +' Where '+searchField +' LIKE :key';
System.debug(System.LoggingLevel.DEBUG, QUERY);
List<SObject> sObjectList = Database.query(QUERY);
return sObjectList;
}
}Etapa 5: – Crie um aplicativo de demonstração e teste a pesquisa
<aura:application extends="force:slds">
<c:customLookup iconname="standard:case"
objectName="Case"
searchfield="CaseNumber"/>
</aura:application>
