Creation of a form that allows you to find an opportunity by name and display the necessary information about the opportunity in a table.
So I'm using Lightning Web Component to create a form to retrieve the opportunity when the user search by name. The result found must return the opportunity fields (StageName, Amount...) with a tab or a datatable (I use a tab)
Important: LWC will be displayed on all accounts in the related section or at home. The result is not correct, it returns the condition to false" No results "
<template>
<lightning-card title="Liste d'opportunités du compte" icon-name="standard:opportunity">
<div class="slds-p-horizontal_small">
<!--BOUTON SEARCH-->
<lightning-input type="search" label="Rechercher" value={searchOppo} onchange={handleKeyChange}
placeholder="Search..."></lightning-input>
<lightning-button label="Search" onclick={handleSearch} variant="brand"></lightning-button>
</div>
<div if:true={messageResult} class="slds-p-horizontal_small">
<p class="slds-p-horizontal_small">No result found</p>
</div>
<!--CONDITIONNEMENT TO DISPLAY RESULTS-->
<template if:true={showSearchValues}>
<div class="slds-p-horizontal_small">
<ul class="slds-list_vertical-space">
<template for:each={opportunityList} for:item="actObj">
<li key={actObj.Id} onclick={handleParentSelection} data-value={actObj.Id}
data-label={actObj.Name} class="slds-p-around_small slds-text-link" style="cursor:pointer;">
{actObj.Name} </li>
</template>
</ul>
</div>
<div class="slds-table">
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-title_caps" scope="col"> Name </th>
<th class="slds-text-title_caps" scope="col"> Stage </th>
<th class="slds-text-title_caps" scope="col"> Close Date </th>
<th class="slds-text-title_caps" scope="col"> Amount </th>
</tr>
</thead>
<tbody>
<tr class="slds-hint-parent">
<td data-label="Name">{selectedOpportunity.Name}</td>
<td data-label="Stage">{selectedOpportunity.StageName}</td>
<td data-label="Close Date">{selectedOpportunity.CloseDate}</td>
<td data-label="Amount">{selectedOpportunity.Amount}</td>
</tr>
</tbody>
</table>
</div>
</template>
</lightning-card>
</template>
import { LightningElement, wire, track, api } from 'lwc';
import findOpportunityByAccount from '@salesforce/apex/OpportunitySearchControllerLWC.findOpportunityByAccount';
export default class displayOpportunityList extends LightningElement {
@track opportunityName ='';
@track opportunityList;
@track opportunityId;
@track messageResult = false;
@track showSearchValues =false;
@track selectedOpportunity;
@api accountId;
accountId;
opportunities = [];
error;
@wire(findOpportunityByAccount, { accountId: '$accountId' }) opportunities;
wiredOpportunities({ error, data }) {
if (data) {
this.opportunityList = data;
this.showSearchValues = data.length > 0;
this.messageResult = data.length === 0 && this.opportunityName !== '';
} else if (error) {
console.log(error);
}
}
// METHOD //
handleKeyChange(event) {
this.opportunityName = event.target.dataset.label;
}
handleSearch() {
// Perform some validation if needed
findOpportunityByAccount({
accountId: this.accountId,
opportunityName: this.opportunityName
})
.then(result => {
this.opportunityList = result;
this.showSearchValues = result.length > 0;
this.messageResult = result.length === 0 && this.opportunityName !== '';
this.error = undefined;
})
.catch(error => {
this.error = error;
this.opportunityList = [];
this.showSearchValues = false;
this.messageResult = true; // Show message in case of error
});
}
}
public with sharing class OpportunitySearchControllerLWC {
@AuraEnabled(cacheable=true)
public static List<Opportunity> findOpportunityByAccount(String opportunityName) {
// Filter opportunities based on the opportunityName
return [SELECT Id, Name, StageName, Amount FROM Opportunity WHERE Name LIKE :('%' + opportunityName + '%')];
}
}
In your Apex class, your parameter is String opportunityName
, however in your LWC the wire method is passing through the value accountId
.
If you're trying to retrieve based on AccountId
, I think you want to do something like:
@AuraEnabled(cacheable=true)
public static List<Opportunity> findOpportunityByAccount(String accountId) {
// Filter opportunities based on the opportunityName
return [SELECT Id, AccountId, Name, StageName, Amount FROM Opportunity WHERE AccountId = :accountId];
}
Or, you can edit the wire method call to be the correct variable if you actually want to search by Opportunity.Name
.