+ Start a Discussion
Naren9Naren9 

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
AbhishekAbhishek (Salesforce Developers) 
Hi,

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.
Naren9Naren9
Issue resolved by changing the  value={selectedBoatTypeId} in lightning-combobox.
Juan Victoriano 7Juan Victoriano 7
// boatSearchForm.html

<template>
  <lightning-layout>
    <lightning-layout-item class="slds-align-middle">
      <lightning-combobox class="slds-align-middle"
      name="boatTypes"
      value={selectedBoatTypeId}
      options={searchOptions}
      onchange={handleSearchOptionChange}></lightning-combobox>
    </lightning-layout-item>
  </lightning-layout>
</template>

// boatSearchForm.js

// imports
// import getBoatTypes from the BoatDataService => getBoatTypes method';
export default class BoatSearchForm extends LightningElement {
  selectedBoatTypeId = '';
  
  // Private
  error = undefined;
  
  searchOptions;
  
  // Wire a custom Apex method
    boatTypes({ error, data }) {
    if (data) {
      this.searchOptions = data.map(type => {
        // TODO: complete the logic
      });
      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) {
    // Create the const searchEvent
    // searchEvent must be the new custom event search
    searchEvent;
    this.dispatchEvent(searchEvent);
  }
}

// boatSearchForm.js-xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>
Hello Naren9,

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
 
Tanisha LaddhaTanisha Laddha
Hi Juan, Facing the same error, let me know how you resolved this.
Naresh A ConsumerNaresh A Consumer

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

sreenivasulu tirumalasetttysreenivasulu tirumalasettty

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/
 
portgus Ace 7portgus Ace 7
User-added image

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
 
portgus Ace 7portgus Ace 7
const searchEvent= new CustomEvent('search',{detail:{boatTypeId:this.selectedBoatTypeId}});

I found the mistake i made:)
SALONI JAISSALONI JAIS
In LWC specialist Superbadge challenge 4. Where we need to create LWC Boatsearchform. I mean inside which project?
It will be helpful if someone post the steps