You need to sign in to do that
Don't have an account?
Scott Byrd
Error on Aura Components Specialist Challenge 5
Getting the following error: BoatSearchResults.cmp must handle the BoatSelect event by calling a controller function named onBoatSelect
Here is my code:
BoatTile.cmp
Thanks,
Scott Byrd
Here is my code:
BoatTile.cmp
<aura:component description="BoatTile"> <aura:attribute name="boat" type="Boat__c"/> <aura:attribute name="selected" type="Boolean" default="false"/> <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/> <lightning:button name="{!v.boat.Id}" class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}"> <div style="{!'background-image: url(' + v.boat.Picture__c + ')'}" class="innertile"> <div class="lower-third"> <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1> </div> </div> </lightning:button> </aura:component>BoatTileController.js
({ onBoatClick: function(component, event, helper) { let boatId = event.getSource().get("v.name"); let boatClickEvent = component.getEvent('BoatSelect'); boatClickEvent.setParams({'boatId' : boatId}); boatClickEvent.fire(); } });BoatSelect.evt
<aura:event type="COMPONENT" description="BoatSelect"> <aura:attribute name="boatId" type="String"/> </aura:event>BoatSearchResults.cmp
<aura:component controller="BoatSearchResults" > <aura:attribute name="boats" type="Boat__c[]"/> <aura:attribute name="selectedBoatId" Type="String"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:handler name="BoatSelect" event="c.BoatSelect" action="{!c.onBoatSelect}"/> <aura:method name="search" action="{!c.doSearch}"> <aura:attribute name="boatTypeId" type="String"/> </aura:method> <lightning:layout multipleRows="true"> <aura:iteration items="{!v.boats}" var="boat"> <lightning:layoutItem size="4" padding="around-small"> <c:BoatTile boat="{!boat}" selected="{boat.Id === v.selectedBoatId ? true : false)}"/> </lightning:layoutItem> </aura:iteration> <aura:if isTrue="{! empty(v.boats)}"> <lightning:layoutItem size="12" padding="around-small" class="slds-align--absolute-center"> <lightning:formattedText value="No boats found"/> </lightning:layoutItem> </aura:if> </lightning:layout> </aura:component>BoatSearchResultsController.js
({ doInit: function(component, event, helper) { helper.onSearch(component, helper, ""); }, doSearch: function(component, event, helper) { console.log("BoatSearchResults doSearch"); let boatTypeId = event.getParam('arguments').boatTypeId; console.log("boatTypeId: " + boatTypeId); helper.onSearch(component, helper, boatTypeId); }, onBoatSelect: function(component, event, helper) { let boatId = event.getParam('boatId'); component.set('v.selectedBoatId', boatId); console.log('selectedBoatId: ' + component.get('v.selectedBoatId')); } });This code is fully functional, so this is likely something that Trailhead is looking for that I did differently.
Thanks,
Scott Byrd
Replace the code:
BoatSearchResults.cmp:
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com