You need to sign in to do that
Don't have an account?
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:

Something is wrong with my component. I am not able to identify it. Can anyone help me with this?
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:
Something is wrong with my component. I am not able to identify it. Can anyone help me with this?
<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!!!
Can you please help me?
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.
Any lead is appreciated.
Thanks,
Manish.
You have used dot(.) to initialise the components rather than colon(:). Use the below code to initialize the components