function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Roronoa_ZoroRoronoa_Zoro 

need help with Lightning Component Framework Specialist superbadge step 2

Hi, 
I have created the following components for this step:

BoatSearchForm.cmp
<aura:component controller="BoatSearchForm" implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 

           <lightning:select aura:id='typeSelect' name='selectItem' onchange=''>
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 
         <lightning:button label="Search" variant="brand"  />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>

BoatSearchController.js
({
     doInit: function(component) 
    {
       console.log('inside do init '); 
        debugger;
       var action=component.get('c.getSearchOptions');
        action.setcallback(this,function(response)
         {
             debugger;
             var state = response.getState();
             if (state === "SUCCESS")
             {
                 debugger;
                 console.log('inside success state');
                 component.set('v.searchOptionToIdMap',response.getReturnValue());
                 var custs = [];
                 var conts = response.getReturnValue();
                 for(var key in conts)
                 {
                    console.log('populated list');
                     custs.push({value:conts[key], key:key});
                 }
                 component.set("v.searchOptions", custs);
             }
             
         }); 
    }, 
     createBoat: function (component) 
     {
            console.log('inside controller');
            var createRecordEvent = $A.get('e.force:createRecord');
            if (createRecordEvent) 
            {
                    var typeName = component.find('typeSelect').get('v.value');
                    var typeMap = component.get('v.searchOptionToIdMap');
                    var typeId = null;
                    if (typeName && typeMap && typeMap[typeName]) 
                    {
                            typeId = typeMap[typeName];
                    }
                    createRecordEvent.setParams({
                        'entityApiName': 'Boat__c',
                        'defaultFieldValues': {
                            'BoatType__c': typeId
                        }
                    });
                    createRecordEvent.fire();
            }
       }
})
BoatSearchHelper.js
({
    renderNewButton: function (component) {
    var createRecordEvent = $A.get('e.force:createRecord');
    if (createRecordEvent) {
        component.set('v.showNewButton', true);
    }
}})

Apex Controller:
public with sharing class BoatSearchForm
{
        @AuraEnabled
        public static Map<String, String> getSearchOptions() 
        {
                List<BoatType__c> boatTypes = [SELECT Id, Name FROM BoatType__c LIMIT 400];
                Map<String, String> returnMap = new Map<String, String>();
                if(!boatTypes.isEmpty())
                {
                        for(BoatType__c bt: boatTypes)
                        {
                            returnMap.put(bt.Name, bt.Id);
                        }
                }
                return returnMap;
        }
}
FriendswithBoat.app
<aura:application extends="force:slds">
    <lightning:layout >
                 
                 <lightning:card title="Find a Boat" class="slds-m-top_10px" >
                          <c:BoatSearchForm />
                 </lightning:card>

    </lightning:layout>
</aura:application>

Whenever I try to load my app I get this error:
User-added image

Something is wrong with my component. I am not able to identify it. Can anyone help me with this?
Chidanand MChidanand M
I am also experiencing the same isuue. 
Pratik BansodPratik Bansod
Scratched my head a lot on this!! Please add lable in <lightning:select> tag of the lightning component.
<lightning:select aura:id='typeSelect' label="Please select"  name='selectItem' onchange=''>
It worked for me. Please mark as best answer if the issue is resolved!!!
@jeronimoburgers ☁@jeronimoburgers ☁
@shashi, this forum should be considered to provide help, hints and tips. Not complete solutions. Trailhead and Superbadges in particular should be a learning experience, not a copy & paste excercise. 
shashi kumar 58shashi kumar 58
Sure
Kamesh SinghKamesh Singh
Hi @shashi kumar 58, I am stuck with this superbadge step 2.
Can you please help me?
Manish Anand 22Manish Anand 22
Hi All,

I am stuck in challenge 2. Functionality is working as expected. But I get error as - Challenge Not yet complete... here's what's wrong: 
The BoatSearch component should instantiate the BoatSearchForm and BoatSearchResults components.

Below is my BoatSearch component.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Find a Boat"  class="slds-m-top_10px">
        <c.BoatSearchForm/>
    </lightning:card>
    <lightning:card title="Matching Boats">
        <c.BoatSearchResults/>
    </lightning:card>
</aura:component>

Any lead is appreciated.

Thanks,
Manish.​
pankaj singla 39pankaj singla 39
@Manish Anand
You have used dot(.) to initialise the components rather than colon(:). Use the below code to initialize the components
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" > <lightning:card title="Find a Boat" class="slds-m-top_10px"> <c:BoatSearchForm/> </lightning:card> <lightning:card title="Matching Boats"> <c:BoatSearchResults/> </lightning:card> </aura:component>