+ Start a Discussion
filippe nunes 4filippe nunes 4 

aura components specialist step 5

Hello everyone, i need any help

i passed in the step5 superbadge aura components specialist however when i click on picture, it's no Highlight the Selected Boat.

my code:

BoatSelect.evt

<aura:event type="APPLICATION">
    <aura:attribute name="boatId" type="String"/>
</aura:event>

BoatTile.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:registerEvent name="boatSelect" type="c:BoatSelect"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="selected" type="Boolean" default="false"/>
    <lightning:button 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) {
        var boatId = component.get('v.boat.Id');
        var createEvent = component.getEvent('boatSelect');
        createEvent.setParams({
            'boatId': boatId
        });
        createEvent.fire();
        console.log('BoatTile=boatId: ' + boatId);
    }
})

BoatTile.css

.THIS.tile {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 220px;
    padding: 1px !important ;
    margin: 7px;
}
.THIS.tile.selected {
    border: 3px solid rgb(0, 112, 210);
}
.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

BoatSearchResult.cmp
<aura:component controller="BoatSearchResults" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
    <aura:registerEvent name="formsubmit" type="c:FormSubmit"/>
    <aura:attribute name="boats" type="Boat__c[]"/>
    <aura:attribute name="boatTypeId" type="String"/>
    <aura:attribute name="selectedBoatId" type="String"/>
    <aura:method name="search" action="{!c.doSearch}">
        <aura:attribute name="boatTypeId" type="String"/>
    </aura:method>
    <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows='true'>
        <aura:if isTrue="{!v.boats.length > 0}">
            <lightning:layoutItem flexibility="grow">
                <aura:iteration items="{!v.boats}" var="boat">
                    <c:BoatTile boat="{!boat}" selected="{!boat.Id == v.selectedBoatId ? true : false}"/>
                </aura:iteration>
            </lightning:layoutItem>
            <aura:set attribute="else">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                    <ui:outputText value="No boats found"/>
                </lightning:layoutItem>
            </aura:set>
        </aura:if>
    </lightning:layout>
</aura:component>

BoatSearchResultController.js
({
    doInit: function(component, event, helper) {
        helper.onSearch(component);
    },
    doSearch: function(component, event, helper) {
        var params = event.getParam('arguments');
        component.set('v.boatTypeId', params.boatTypeId);
        helper.onSearch(component);
    },
    onBoatSelect: function(component, event, helper) {
        var params = event.getParam('boatId');
        component.set('v.selectedBoatId', params);
    }
})

VinayVinay (Salesforce Developers) 
Hi,

We have separate Trailhead team who can help you with these issues.So,can you please use the below link to reach out to them so that one of the agent will get in touch with you.

Support:https://trailhead.salesforce.com/help

Thank you!

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks,
Vinay Kumar
Athira VenugopalAthira Venugopal
Hi Flippie, I am having this same problem, But the differnce is I am not able to pass this challenge, But my selected boat is highlighted with the border color