You need to sign in to do that
Don't have an account?
Tina0204
Hi,
I am getting the above error while completing hte challenge. Everything is working fine, still I dont know what is being missed.. Can someone help me out.
My code is as below:
BoatSearchForm.cmp
<aura:component controller="BoatDetailsController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="showNewButton" type="Boolean"/>
<aura:attribute name="boatType" type="BoatType__c[]"/>
<aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
<aura:registerEvent name="boatsearch" type="c:boatSearchEvent"/>
<lightning:layout horizontalAlign="center">
<lightning:layoutItem class="slds-grid_vertical-align-center">
<lightning:select name="Boat Types" label="" aura:id='selectComp'>
<option value="">All Types</option>
<aura:iteration items="{!v.boatType}" var="boat">
<option value="{!boat.Id}" text="{!boat.Name}"></option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-grid_vertical-align-center slds-p-horizontal_medium slds-p-top_medium">
<lightning:button variant="brand" label="Search" onclick="{! c.handleSearch }"/>
<aura:if isTrue='{!v.showNewButton}'>
<lightning:button variant="neutral" label="New" onclick="{! c.createNewRecord }" />
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
BoatSearchFormController:
({
doInit : function(component, event, helper) {
var isEnabledcreateRecordEvent = $A.get("e.force:createRecord");
if(isEnabledcreateRecordEvent){
console.log("isEnabledcreateRecordEvent--"+isEnabledcreateRecordEvent);
component.set('v.showNewButton',true);
}
helper.getBoatTypes(component, event, helper);
},
createNewRecord : function(component, event, helper) {
var createRecordEvent = $A.get("e.force:createRecord");
if(createRecordEvent){
var selected =component.find('selectComp').get('v.value');
console.log("selected---"+selected);
createRecordEvent.setParams({
"entityApiName": "Boat__c",
'defaultFieldValues': {
'BoatType__c': selected
}
});
}
createRecordEvent.fire();
},
handleSearch : function(component, event, helper) {
var selectedboatType =component.find('selectComp').get('v.value');
var searchEvent = $A.get("e.c:boatSearchEvent");
searchEvent.setParams({
"boatTypeID" : selectedboatType});
searchEvent.fire();
}
})
BoatSearchResults.cmp:
<aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="boats" type="Boat__c[]"/>
<aura:attribute name="boatTypeId" type="String"/>
<aura:attribute name="selectedBoatId" type="Boolean"/>
<aura:handler name="init" value="{!this}" action="{!c.doSearch}"/>
<aura:handler event="c:boatSearchEvent" action="{!c.handleBoatSearchEvent}"/>
<lightning:layout horizontalAlign="spread" multipleRows="true">
<aura:if isTrue="{!v.boats.length > 0}">
<aura:iteration items="{!v.boats}" var="boat">
<lightning:layoutitem >
<c:BoatTile boat="{!boat}" selectedBoatId="{!boat.Id==v.selectedBoatId ? true : false}"/>
</lightning:layoutitem>
</aura:iteration>
<aura:set attribute="else">
<lightning:layoutitem class="slds-align_absolute-center">
<ui:outputText value="No boats found" />
</lightning:layoutitem>
</aura:set>
</aura:if>
</lightning:layout>
</aura:component>
BoatSearchResultsController:
({
search: function(component, event, helper){
var params = event.getParam('arguments');
alert(params.boatTypeId); //<---getting proper value
alert(component.set("v.boatTypeId", params.boatTypeId)); //<---here I am getting undefined
var a = component.get('c.doSearch');
$A.enqueueAction(a);
},
doSearch : function (component, event, helper){
alert(component.get("v.boatTypeId")); //<---here I am getting undefined
helper.onSearch(component); //calling helper method
},
handleBoatSearchEvent : function(component, event, helper) {
console.log("In boatSearchEvent handler");
var id = event.getParam("boatTypeID");
component.set("v.boatTypeId",id);
}
})
BoatSearchResultsHelper:
({
onSearch : function(component) {
console.log("onSearch: In onSearch helper");
var action = component.get("c.getBoats");
action.setParams({boatTypeId:component.get("v.boatTypeId")});
action.setCallback(this, function(response) {
var state = response.getState();
console.log("State---"+state);
if (state === "SUCCESS")
{
console.log('onSearch : inside success state');
var boatIds = response.getReturnValue();
console.log("When in onSearch boatIds---"+boatIds);
component.set("v.boats", boatIds);
}
});
$A.enqueueAction(action);
}
})
Error in Lightning Component Framework SB step 3
Hi,
I am getting the above error while completing hte challenge. Everything is working fine, still I dont know what is being missed.. Can someone help me out.
My code is as below:
BoatSearchForm.cmp
<aura:component controller="BoatDetailsController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="showNewButton" type="Boolean"/>
<aura:attribute name="boatType" type="BoatType__c[]"/>
<aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
<aura:registerEvent name="boatsearch" type="c:boatSearchEvent"/>
<lightning:layout horizontalAlign="center">
<lightning:layoutItem class="slds-grid_vertical-align-center">
<lightning:select name="Boat Types" label="" aura:id='selectComp'>
<option value="">All Types</option>
<aura:iteration items="{!v.boatType}" var="boat">
<option value="{!boat.Id}" text="{!boat.Name}"></option>
</aura:iteration>
</lightning:select>
</lightning:layoutItem>
<lightning:layoutItem class="slds-grid_vertical-align-center slds-p-horizontal_medium slds-p-top_medium">
<lightning:button variant="brand" label="Search" onclick="{! c.handleSearch }"/>
<aura:if isTrue='{!v.showNewButton}'>
<lightning:button variant="neutral" label="New" onclick="{! c.createNewRecord }" />
</aura:if>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
BoatSearchFormController:
({
doInit : function(component, event, helper) {
var isEnabledcreateRecordEvent = $A.get("e.force:createRecord");
if(isEnabledcreateRecordEvent){
console.log("isEnabledcreateRecordEvent--"+isEnabledcreateRecordEvent);
component.set('v.showNewButton',true);
}
helper.getBoatTypes(component, event, helper);
},
createNewRecord : function(component, event, helper) {
var createRecordEvent = $A.get("e.force:createRecord");
if(createRecordEvent){
var selected =component.find('selectComp').get('v.value');
console.log("selected---"+selected);
createRecordEvent.setParams({
"entityApiName": "Boat__c",
'defaultFieldValues': {
'BoatType__c': selected
}
});
}
createRecordEvent.fire();
},
handleSearch : function(component, event, helper) {
var selectedboatType =component.find('selectComp').get('v.value');
var searchEvent = $A.get("e.c:boatSearchEvent");
searchEvent.setParams({
"boatTypeID" : selectedboatType});
searchEvent.fire();
}
})
BoatSearchResults.cmp:
<aura:component controller="BoatSearchResults" implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="boats" type="Boat__c[]"/>
<aura:attribute name="boatTypeId" type="String"/>
<aura:attribute name="selectedBoatId" type="Boolean"/>
<aura:handler name="init" value="{!this}" action="{!c.doSearch}"/>
<aura:handler event="c:boatSearchEvent" action="{!c.handleBoatSearchEvent}"/>
<lightning:layout horizontalAlign="spread" multipleRows="true">
<aura:if isTrue="{!v.boats.length > 0}">
<aura:iteration items="{!v.boats}" var="boat">
<lightning:layoutitem >
<c:BoatTile boat="{!boat}" selectedBoatId="{!boat.Id==v.selectedBoatId ? true : false}"/>
</lightning:layoutitem>
</aura:iteration>
<aura:set attribute="else">
<lightning:layoutitem class="slds-align_absolute-center">
<ui:outputText value="No boats found" />
</lightning:layoutitem>
</aura:set>
</aura:if>
</lightning:layout>
</aura:component>
BoatSearchResultsController:
({
search: function(component, event, helper){
var params = event.getParam('arguments');
alert(params.boatTypeId); //<---getting proper value
alert(component.set("v.boatTypeId", params.boatTypeId)); //<---here I am getting undefined
var a = component.get('c.doSearch');
$A.enqueueAction(a);
},
doSearch : function (component, event, helper){
alert(component.get("v.boatTypeId")); //<---here I am getting undefined
helper.onSearch(component); //calling helper method
},
handleBoatSearchEvent : function(component, event, helper) {
console.log("In boatSearchEvent handler");
var id = event.getParam("boatTypeID");
component.set("v.boatTypeId",id);
}
})
BoatSearchResultsHelper:
({
onSearch : function(component) {
console.log("onSearch: In onSearch helper");
var action = component.get("c.getBoats");
action.setParams({boatTypeId:component.get("v.boatTypeId")});
action.setCallback(this, function(response) {
var state = response.getState();
console.log("State---"+state);
if (state === "SUCCESS")
{
console.log('onSearch : inside success state');
var boatIds = response.getReturnValue();
console.log("When in onSearch boatIds---"+boatIds);
component.set("v.boats", boatIds);
}
});
$A.enqueueAction(action);
}
})
Please create an Apex class BoatSearchResults as below.
public class BoatSearchResults {
@AuraEnabled
public static List<Boat__c> getBoats(String boatTypeId){
List<Boat__c> boats=null;
if(boatTypeId==null||boatTypeId.length()==0){
boats=[Select Name,
Picture__c
from Boat__c ];
}else{
boats=[Select Name,BoatType__c,Contact__r.Name,
Description__c,Geolocation__c,Length__c,
Picture__c,Price__c,Year_Built__c
from Boat__c
Where BoatType__c=:boatTypeId];
}
return boats;
}
}