I found this excellent code sample for Multi-select Combobox. Ideally, I'd like to embed it as Child in my Parent LWC. In trying to do that, I'm stumbling a lot in how to architect communication Parent to Child and back to Parent.
My request: Just because I can outline the process below, doesn't mean I know how to code it. I've read a lot on events, Parent to Child, and Child to Parent articles. I'm not seeing how it all fits together in code yet. Anything you can do to make this less uncertain for me would be helpful.
Also, I may just create all of this as a single component. Please let me know what the consequences are if I go this route.
Here's the desired process:
- User types in Search field (child)
- User clicks enter or hits submit (child) — I guess this is an event
- Parent gets searchTerm from Child -- not sure how yet
- Parent has an @wire function "queryWithSearchTermParam"
- function updates a variable called "options" with a list of options (AccountName, AccountID) on the Child
- User selects 1 or more options
- selected options show as pills under the Search Field (child)
- User sees all selectedOptions as pills
- User clicks Submit button (parent)
- Parent has an Imperative call to Apex Controller because this method will insert records
- Parameters: List of Account IDs, CustomRecordID
- Apex Controller creates junction records based on Account IDs and CustomerRecordID
My current Parent code
import { LightningElement, api, track, wire } from 'lwc';
import getVendorsByName from '@salesforce/apex/RfqSendVendorEmailsController.getVendorsByName';
export default class RfqSendVendorEmails extends LightningElement {
@api recordId; // Request for Quote Id
byNameOptions;
FIELDLABELS = {
SEARCH_BY_VENDOR_NAME : 'Search by Vendor Name',
SEARCH_BY_VENDOR_CITY : 'Search by Vendor City',
SEARCH_BY_VENDOR_TYPE : 'Search by Vendor Type',
SEARCH_BY_VENDOR_SUBTYPE : 'Search by Vendor Sub-type'
}
connectedCallback() {
//this.byNameOptions = JSON.parse('[{"label":"Bob", "value":"123", "isVisible":"false"},{"label":"Chrissey","value":"345","isVisible":"false"}]');
this.setByNameOptions;
}
setByNameOptions() {
console.log('*** this.byNameOptions ' + this.byNameOptions);
this.byNameOptions = getVendorsByName({'Grainger'});
console.log('*** this.byNameOptions ' + this.byNameOptions);
}
}
<template>
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_NAME}
options={byNameOptions}>
</c-multi-select-combobox>
<!--
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_CITY}></c-multi-select-combobox>
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_TYPE}></c-multi-select-combobox>
<c-multi-select-combobox label={FIELDLABELS.SEARCH_BY_VENDOR_SUBTYPE}></c-multi-select-combobox>
-->
public with sharing class RfqSendVendorEmailsController {
public RfqSendVendorEmailsController() {
}
@AuraEnabled (cacheable=true)
public static List<Account> getVendorsByName(String searchTerm){
String term = '%' + searchTerm + '%';
List<Account> vendors = [
SELECT Id
FROM Account
WHERE RecordType.Name = 'Vendor Account'
AND Account.Name LIKE: term
ORDER BY Account.Name ASC
];
System.debug('*** Vendors: ' + vendors);
return vendors;
}
}