function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
pankaj singla 39pankaj singla 39 

Trailhead Lightning Component Framework Specialist Step 6 - Getting Attribute name issue

Hi,
I am facing issue with Step 6. I am able to pass the chalenge but the functionality is not working. The error is I am not able to get the Id of the selected boat in the BoatTileController. PFB my Code
#Parent Component- BoatSearchResults.cmp 
<aura:component controller="BoatSearchResults">
    <aura:method name="search" action="{!c.search}" 
                        description="Sample method with parameters" access="public"> 
       <aura:attribute name="param1" type="String"/> 
    </aura:method>
    <aura:attribute name="boats" type="Boat__c[]" />
    <aura:attribute name="boatTypeId" type="string" default="" />
    <aura:attribute name="selectedBoatId" type="Id" default="" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
    <lightning:layout multipleRows="true" horizontalAlign="center">

    	    <aura:iteration items="{!v.boats}" var="boatVar">
                <lightning:layoutItem flexibility="grow"  class="slds-m-right_small" >   
                	<c:BoatTile boat="{!boatVar}" selected="{!boatVar.Id == v.selectedBoatId ? 'true' : 'false' }"/>
                </lightning:layoutItem>
            </aura:iteration>
    		
               
            <aura:if isTrue="{!v.boats.length==0}">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                    <ui:outputText value="No boats found" />
                </lightning:layoutItem>
            </aura:if>

    </lightning:layout>
</aura:component>

#Child Component: BoatTile.cmp 
<aura:component >

    <aura:attribute name="boat" type="Boat__c" />
    <aura:attribute name="selected" type="boolean" default="false"/>
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
    <aura:attribute name="selectedBoatId" type="Id"/>

        <lightning:button label="Packed!" onclick="{!c.onBoatClick}"
                          class="{! v.selected ? 'tile selected' : 'tile' }">
            <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>

Controller: BoatTileController
  
({
    onBoatClick : function(component, event, helper) {
        var cmpEvent = component.getEvent("BoatSelect");
        //var boatId = component.get("v.boat.Id");
        var bb=component.get("v.boat");
        console.log('var bb is-'+bb.id);
        var boatId = event.getSource().get("v.label");
        console.log('boatId-'+boatId);
        cmpEvent.setParams({
            "boatId" : boatId
        });
        cmpEvent.fire();
    }
})

I need to get the attribute boat in the BoatTileController but it shows the value as Undefined. Please help me resolve the issue.
 
Ajay K DubediAjay K Dubedi
Hi Pankaj,

For your issue in component please try the below code:
  
//BoatSearchResults.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                access="global" controller="BoatSearchResults">
    <aura:handler name="init" action="{!c.doSearch}" value="{!this}"/>
    <aura:attribute name="boatTypeId" type="String" />
    <aura:attribute name="boats" type="Boat__c[]" /> 
    <aura:handler name="BoatSelect" event="c:BoatSelect" action="{!c.onBoatSelect}"/>
     <aura:attribute name="selectedBoatId" type="Id"/>

    <lightning:layout multipleRows="true" >

        <aura:iteration items="{!v.boats}" var="boat">
            <lightning:layoutItem padding="around-small">
                <c:BoatTile boat="{!boat}"
                            selected="{!boat.Id == v.selectedBoatId ? 'true' : 'false' }"/>
            </lightning:layoutItem>
        </aura:iteration>

        <aura:if isTrue="{!v.boats.length==0}">
            <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">
                <ui:outputText value="No boats found" />
            </lightning:layoutItem>
        </aura:if>

    </lightning:layout>
</aura:component>

//BoatTile.cmp


<aura:component >

    <aura:attribute name="boat" type="Boat__c" />
    <aura:attribute name="selected" type="boolean" default="false"/>
    <aura:registerEvent name="boatselected" type="c:BoatSelected"/>
    <aura:attribute name="selectedBoatId" type="Id"/>
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>

        <lightning:button onclick="{!c.onBoatClick}"
                          class="{! v.selected ? 'tile selected' : 'tile' }">
            <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

({
    onBoatClick : function(component, event, helper) {
        var cmpEvent = component.getEvent("BoatSelect");
        //var boatId = component.get("v.boat.Id");
        var bb=component.get("v.boat");
        console.log('var bb is-'+bb.id);
        var boatId = event.getSource().get("v.label");
        console.log('boatId-'+boatId);
        cmpEvent.setParams({
            "boatId" : boatId
        });
        cmpEvent.fire();
    }
})

Please make it best if it helps you.

Thanks,
Ajay
 
pankaj singla 39pankaj singla 39
Hi Ajay,

Thanks for quick response. I have tried the code but no success.
Regards,
Pankaj