You need to sign in to do that
Don't have an account?
Naren9
Lightning Web Components SuperBadge - Challenge 4
Hi All,
Getting below error on Lightning Web Components SuperBadge at Step 4.All the Boat Types are displaying in dropdown and when I choose different Boat Types, results are showing.
Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings set for the lightning-combobox in the component boatSearchForm HTML. Check that the component was created according to the requirements, including the correct function for the onchange event, correct options, and values, using the correct case sensitivity.
boarSearchForm.html
-------------------------------
<template>
<lightning-card>
<lightning-layout horizontal-align="center" vertical-align="end">
<lightning-layout-item class="slds-align-middle" padding="horizontal-medium">
<lightning-combobox variant="label-hidden"
label="Boat Type"
value={value}
placeholder="All Types"
options={searchOptions}
onchange={handleSearchOptionChange} class="slds-align-middle">
</lightning-combobox>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
boatSearchForm.js
---------------------------
import { LightningElement,wire,track } from 'lwc';
import getBoatTypes from "@salesforce/apex/BoatDataService.getBoatTypes";
export default class BoatSearchForm extends LightningElement {
selectedBoatTypeId = '';
value='';
// Private
error = undefined;
// Needs explicit track due to nested data
@track searchOptions;
label;
//value;
// Wire a custom Apex method
@wire(getBoatTypes)
boatTypes({ error, data }) {
if (data) {
// console.log('Dataloaded',data);
this.searchOptions = data.map(type => {
// TODO: complete the logic
return {
label:type.Name,
value:type.Id
}
});
this.searchOptions.unshift({ label: 'All Types', value: '' });
} else if (error) {
this.searchOptions = undefined;
this.error = error;
}
}
// Fires event that the search option has changed.
// passes boatTypeId (value of this.selectedBoatTypeId) in the detail
handleSearchOptionChange(event) {
// event.preventDefault();
// Create the const searchEvent
//const boatTypeId=event.detail.value;
this.selectedBoatTypeId=event.detail.value;
console.log('Selected Boat Type Id', this.selectedBoatTypeId);
// searchEvent must be the new custom event search
const searchEvent= new CustomEvent('search',{detail:this.selectedBoatTypeId});
// const searchEvent = new CustomEvent('search', { detail: { boatTypeId: this.selectedBoatTypeId } });
this.dispatchEvent(searchEvent);
}
}
Appreciated your help.
Thanks,
Naren
Getting below error on Lightning Web Components SuperBadge at Step 4.All the Boat Types are displaying in dropdown and when I choose different Boat Types, results are showing.
Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings set for the lightning-combobox in the component boatSearchForm HTML. Check that the component was created according to the requirements, including the correct function for the onchange event, correct options, and values, using the correct case sensitivity.
boarSearchForm.html
-------------------------------
<template>
<lightning-card>
<lightning-layout horizontal-align="center" vertical-align="end">
<lightning-layout-item class="slds-align-middle" padding="horizontal-medium">
<lightning-combobox variant="label-hidden"
label="Boat Type"
value={value}
placeholder="All Types"
options={searchOptions}
onchange={handleSearchOptionChange} class="slds-align-middle">
</lightning-combobox>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
boatSearchForm.js
---------------------------
import { LightningElement,wire,track } from 'lwc';
import getBoatTypes from "@salesforce/apex/BoatDataService.getBoatTypes";
export default class BoatSearchForm extends LightningElement {
selectedBoatTypeId = '';
value='';
// Private
error = undefined;
// Needs explicit track due to nested data
@track searchOptions;
label;
//value;
// Wire a custom Apex method
@wire(getBoatTypes)
boatTypes({ error, data }) {
if (data) {
// console.log('Dataloaded',data);
this.searchOptions = data.map(type => {
// TODO: complete the logic
return {
label:type.Name,
value:type.Id
}
});
this.searchOptions.unshift({ label: 'All Types', value: '' });
} else if (error) {
this.searchOptions = undefined;
this.error = error;
}
}
// Fires event that the search option has changed.
// passes boatTypeId (value of this.selectedBoatTypeId) in the detail
handleSearchOptionChange(event) {
// event.preventDefault();
// Create the const searchEvent
//const boatTypeId=event.detail.value;
this.selectedBoatTypeId=event.detail.value;
console.log('Selected Boat Type Id', this.selectedBoatTypeId);
// searchEvent must be the new custom event search
const searchEvent= new CustomEvent('search',{detail:this.selectedBoatTypeId});
// const searchEvent = new CustomEvent('search', { detail: { boatTypeId: this.selectedBoatTypeId } });
this.dispatchEvent(searchEvent);
}
}
Appreciated your help.
Thanks,
Naren
For all the Trailhead issues please report it here,
https://trailhead.salesforce.com/help?support=home#
https://trailhead.salesforce.com/help
So that our trailhead support engineers will look into it and get back to you.
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Regards,
Salesforce Support.
I'm also having difficulties with challenge #4, I ran into this error:
We can’t find the component boatSearchForm. Make sure the component was created according to the requirements.
Are you able to provide some insight? Anything would help.
-- Juan
Hi Juan/Tanisha,
I think you have missed to create the Lightning App Builder with boatSearchForm. Once it was created mentioned issue will be resolved
If the issue is resolved please mark Naren9 as best answer
--AVN
I faced same issue and able to solve finally.
Please find code below,
https://techtopstories.com/2021/06/salesforce/salesforce-lighting-web-component-super-badge-challenge-4/
import { LightningElement, wire } from 'lwc';
import {NavigationMixin} from 'lightning/navigation';
import getBoatTypes from '@salesforce/apex/BoatDataService.getBoatTypes';
import Boats from '@salesforce/apex/BoatDataService.getBoats';
export default class BoatSearchForm extends NavigationMixin(LightningElement) {
isLoading = false;
searchOptions;
error = undefined;
selectedBoatTypeId='';
value='';
label;
createNewBoat(){
this[NavigationMixin.Navigate]({
type:'standard__objectPage',
attributes:{
objectApiName:'Boat__c',
actionName:'new'
},
});
}
@wire(getBoatTypes)
boatTypes({data,error}){
if(data){
this.searchOptions = data.map(type=>{
return {
label:type.Name,
value:type.Id
}
});
this.searchOptions.unshift({ label: 'All Types', value: '' });
}
else if (error) {
this.searchOptions = undefined;
this.error = error;
}
}
handleLoading(){
}
handleDoneLoading(){
}
handleSearchOptionChange(event) {
this.selectedBoatTypeId=event.detail.value;
// Create the const searchEvent
// searchEvent must be the new custom event search
const searchEvent= new CustomEvent('search',{detail:this.selectedBoatTypeId});
this.dispatchEvent(searchEvent);
}
}
Can some one help,
Thanks in advance
I found the mistake i made:)
It will be helpful if someone post the steps
//HTML /* Javascript code below. My imports may be slightly different than yours depending on your setup */ //XML