Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Inderjit Singh WaraichInderjit Singh Waraich 

Lightning Component Framework Specialist SuperBadge - Issue with Step 6.

I am getting below error
User-added image

but my application has 
User-added image

May I know why am not able to pass this challenge ?
 
Best Answer chosen by Inderjit Singh Waraich
Inderjit Singh WaraichInderjit Singh Waraich
<aura:set attribute="title">
                        {!v.boat.Contact__r.Name}'s boat
                    </aura:set>

Please try as above

All Answers

Inderjit Singh WaraichInderjit Singh Waraich
Solved.
Adam TylerAdam Tyler
What was the issue?
Inderjit Singh WaraichInderjit Singh Waraich
Need to define title by aura:set tag rather than  using direct title attribute of lightning card
Adam TylerAdam Tyler
Thank you!!
Abhishek-tandonAbhishek-tandon
I tried multiple options but nothing is working
  
<aura:set attribute="title">
                        {!concat(v.boat.Contact__r.Name) +'’s boat'}
                    </aura:set>
  
<aura:set attribute="title">
                        {!v.boat.Contact__r.Name +'’s boat'}
                    </aura:set>





 
Inderjit Singh WaraichInderjit Singh Waraich
<aura:set attribute="title">
                        {!v.boat.Contact__r.Name}'s boat
                    </aura:set>

Please try as above
This was selected as the best answer
Brian KesslerBrian Kessler
I'm getting really pissed of with Trailhead checking implementation details!
Especially when they disallow obvious and clean code in favour of the non-obvious and cockamamie.
Inderjit Singh WaraichInderjit Singh Waraich
@Jeremiah in place of boat you need to set using selectedBoat variable as you are pulling event param in that var. This is mistake which i see in your code.
PatMcClellan__cPatMcClellan__c
I'm stuck at this point as well with the boat data not getting pulled into the force:recordData. 

The data of type Boat__c comes in from the SelectedBoat.evt under the parameter name boat. Note: these are only a few fields that came in with the SOQL search, not the full set of fields that force:recordData should provide. 
<aura:event type="APPLICATION" description="BoatSelected fired from BoatTileController's onBoatClick handler">
    <aura:attribute name="boat" type="Boat__c"/>
</aura:event>
BoatDetails.cmp  receives the event and handles it with onBoatSelected... 
<aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>
BoatDetailsController.js has the onBoatSelected function, which pulls the boat param from the event (in Boat__c format). That boat param isn't all of the record fields we need -- we really are only supposed to need the Id, to feed to Lightning Data Service (LDS). So I don't set v.boat to boat here (commented out below. It doesn't work if it's uncommented, either.) I just set v.id by pulling the Id field from boat. You'll see my console.log line where I've confirmed that this works: boat data received, and the id attribute on BoatDetails.cmp is successfully set.  
onBoatSelected : function(component, event, helper){

        var boat = event.getParam("boat");
        //component.set("v.boat", boat);
        component.set("v.id", boat.Id);
        console.log("BoatDetails received the boat and set the id: " + component.get("v.id"));
    },
At this point, when I run it, selecting a boat successfully sets the id attribute, but the LDS isn't accessing that and loading the boat fields. The boat attribute on the component remains undefined. So, I added this line to the onBoatSelected function, to force a reload: 
component.find("service").reloadRecord(true);
Now, boat appears to be getting a value because my conditional markup is rendering BoatDetails.cmp in the browser. 
<aura:if isTrue="{! !empty(v.boat)}">
        <article class="slds-card">
                <lightning:tabset>
                    <lightning:tab label="Details" id="details">
                        <c:BoatDetail boat="{!v.boat}"/>
                    </lightning:tab>
                    <lightning:tab label="Reviews" id="boatreviewtab">
                        Sample review
                    </lightning:tab>
                    <lightning:tab label="Add Review" id="addReview">
                        Sample add review
                    </lightning:tab>
                </lightning:tabset>
        </article>
    </aura:if>
However, I'm getting an empty record, as LDS seems to be wiping out any boat data I had put in, and more importantly, isn't accessing the data for the boat designated by v.id.

Here's the force:recordData markup, along with the aura:attribute declarations.  
<aura:attribute name="id" type="Id"/>
    <aura:attribute name="boat" type="Boat__c"/>

    <aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>

    <force:recordData aura:id="service"
                      recordId="{!v.id}"
                      mode="VIEW"
                      fields="Id, Name, Description__c,
                              Price__c, Length__c,
                              Contact__r.Name, Contact__r.Email,
                              Contact__r.HomePhone, BoatType__r.Name,
                              Picture__c"
                      targetRecord="{!v.boat}"
                      recordUpdated="{!c.onRecordUpdated}" />


What am I screwing up? :)
PatMcClellan__cPatMcClellan__c
The error I'm getting is this:
The onBoatSelected handler in the BoatDetails controller must force Lightning Data Service to load the specified record, using logic in the controller.

I've been over all the docs for Lightning Data Service, as well as the Trailhead modules on it, and I can't find any reference to forcing the LDS to load a specific record. All the examples I see are where they're using the recordId implicit in the page, using force:hasRecordId. But in this case, we want to feed it the boat id that we extracted from the BoatSelected.evt, which I've inserted into v.id.  

I included a reload line in my onBoatSelectedHandler: 
component.find("service").reloadRecord();
But that doesn't seem to work, and it's not what the validation is checking for.

So how do you force LDS to reload a record? (Or load it in the first place!)
Sunil SirangiSunil Sirangi

@Pat_McClellan : I was struck at same place as you. Gone through most of documentation available, but could not find any pointers to forcing the LDS to load a specific record. I even tried the below approcah of setting recordId of force:recordData but could not get the boat details loaded.

BoatDetails.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler event="c:boatselected" action="{!c.onBoatSelected}"/> 
    <!--APPLIACTION Event Handler will not have name attribute where as COMPONENT Event does-->    
    <aura:attribute name="boat" type="Boat__c" access="public"/>
    <aura:attribute name="id" type="Id" default="" access="public"/>
    <force:recordData aura:id="service"                      
                      fields="Id,Name,Description__c,Price__c,Length__c,Contact__r.Name,Contact__r.Email,Contact__r.HomePhone,BoatType__r.Name,Picture__c"
                      targetRecord="{!v.boat}" 
                      targetFields="{!v.boat}"                      
                      recordUpdated="{!c.onRecordUpdated}"
                      />
    <aura:if isTrue="{! !empty(v.boat)}">
        <lightning:tabset >
            <lightning:tab label="Details">
                <c:BoatDetail boat="{!v.boat}"/>
            </lightning:tab>
            <lightning:tab label="Reviews">
                
            </lightning:tab>
            <lightning:tab label="Add Review">
                
            </lightning:tab>
        </lightning:tabset>
    </aura:if>
</aura:component>

BoatDetailsController.js

({
    onBoatSelected : function(component, event, helper) {
        console.log('Inside Boat Selected Event:');
        var boat = event.getParam("boat");
        component.set("v.id",boat.Id);
        component.set('v.selectedBoat',boat);
        console.log('Completed Boat Selected Application EVENT:'+boat.Id);
        var tempRec = component.find("service");
        tempRec.set("v.recordId", boat.Id);
        tempRec.reloadRecord();
        console.log("Record template initialized: " + boat.Id);
    },
    onRecordUpdated : function(component, event, helper){
        
    }
})
PatMcClellan__cPatMcClellan__c
Sunny, you don't have the recordId param in your force:recordData markup. Add that: recordId="{!v.id}". That's where LDS is supposed to find the record to go get.
Sunil SirangiSunil Sirangi
I was setting the recordId in BoatDetailsController.js dynamically thinking it may work. But it did not work either the way you mentioned.
Sunil SirangiSunil Sirangi

@Pat_McClellan

Below code now shows the Boat Details :
 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler event="c:boatselected" action="{!c.onBoatSelected}"/> 
    <!--APPLIACTION Event Handler will not have name attribute where as COMPONENT Event does-->    
    <aura:attribute name="boat" type="Boat__c" access="public"/>
    <aura:attribute name="id" type="Id" default="" access="public"/>
    <force:recordData aura:id="service"
					  recordId="{!v.id}"	                      
                      fields="Id,Name,Description__c,Price__c,Length__c,Contact__r.Name,Contact__r.Email,Contact__r.HomePhone,BoatType__r.Name,Picture__c"
                      targetFields="{!v.boat}"
                      recordUpdated="{!c.onRecordUpdated}"
                      />
    <aura:if isTrue="{! !empty(v.boat)}">
        <lightning:tabset >
            <lightning:tab label="Details">
                <c:BoatDetail boat="{!v.boat}"/>
            </lightning:tab>
            <lightning:tab label="Reviews">
                
            </lightning:tab>
            <lightning:tab label="Add Review">
                
            </lightning:tab>
        </lightning:tabset>
    </aura:if>
</aura:component>
  
({
    onBoatSelected : function(component, event, helper) {
        console.log('Inside Boat Selected Event:');
        var boat = event.getParam("boat");
        component.set("v.id",boat.Id);
        component.set('v.selectedBoat',boat);
        console.log('Completed Boat Selected Application EVENT:'+boat.Id);
        var tempRec = component.find("service");
        tempRec.set("v.recordId", boat.Id);
        tempRec.reloadRecord();
        console.log("Record template initialized: " + boat.Id);
    },
    onRecordUpdated : function(component, event, helper){
        
    }
})

Give it a try.
PatMcClellan__cPatMcClellan__c
Yes, it works, but there are some lines in your code that aren't necessary. In your handler, you only need this: 
onBoatSelected : function(component, event, helper){

        var boat = event.getParam("boat");
        component.set("v.id", boat.Id);
        component.find("service").reloadRecord();
        console.log("BoatDetails received the boat and set the id: " + component.get("v.id"));
    },
I figured out, based on your code, that my error was in the markup, on the targetFields line. In the docs, they say targetFields param is "A simplified view of the fields in targetRecord, to reference record fields in component markup." But it turns out, IF you specify fields, that's where it puts them, rather than using targetRecord. ARGH!

So my markup now looks like this: 
<aura:component description="BoatDetails"
                implements="flexipage:availableForAllPageTypes">


    <aura:attribute name="id" type="String"/>
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:attribute name="recordError" type="String"/>

    <aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>

    <force:recordData aura:id="service"
                      recordId="{!v.id}"
                      mode="VIEW"
                      fields=  "Id,
                                Name,
                                Description__c,
                                Price__c, Length__c,
                                Contact__r.Name,
                                Contact__r.Email,
                                Contact__r.HomePhone,
                                BoatType__r.Name,
                                Picture__c"

                      targetFields="{!v.boat}"
                      targetError="{!v.recordError}"
                      recordUpdated="{!c.onRecordUpdated}" />

    <aura:if isTrue="{! !empty(v.boat)}">
        <article class="slds-card">
                <lightning:tabset>
                    <lightning:tab label="Details" id="details">
                        <c:BoatDetail boat="{!v.boat}"/>
                    </lightning:tab>
                    <lightning:tab label="Reviews" id="boatreviewtab">
                        Sample review
                    </lightning:tab>
                    <lightning:tab label="Add Review" id="addReview">
                        Sample add review
                    </lightning:tab>
                </lightning:tabset>
        </article>
    </aura:if>
</aura:component>
Thanks for your collaboration. See you on the next step!

 
Sunil SirangiSunil Sirangi
@Pat_McClellan: Thanks for the suggestions. I will update my code accordingly. 
karthikeyan perumalkarthikeyan perumal
Hello, 

I am getting below Error while  checking the challenge 6,

if possible please share BoatDetail.cmp and controller code to check, 

User-added image

But i have included the lightning button with  onFullDetails event with controller method. 

here is my code: 
  
<lightning:button  label="Full Details" onclick="{!c.onFullDetails }" />
kinldy share boatDetail.cmp and controller. 

Thanks in Advance
Karthik

 
Sunil SirangiSunil Sirangi
try below code by removing extra space in your onclick 
<lightning:button label="Full Details" onclick="{!c.onFullDetails}" />
karthikeyan perumalkarthikeyan perumal
@sunnysfdcdev

i solved the error by  adding the  <aura:set>  now i am getting different error. eventhough i added the controler method, 

can you share your controller code of Boatdetailcontroller.JS
  
onFullDetails:function(component, event, helper) {
       
var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({
      
    });
    urlEvent.fire();
	}
User-added image

Thanks in advance

Thanks
karthik
 
karthikeyan perumalkarthikeyan perumal
Hello, 

Use below updated code
BoatDetail.cmp  ( added lingtning button in set attribute) 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="boat" type="Boat__c[]" />
    
	<lightning:card iconName="utility:anchor">
	<aura:set attribute="Actions">
            <lightning:button label="Full Details" onclick="{!c.onFullDetails}" />
        </aura:set>
  		<aura:set attribute="title">
    		{!v.boat.Contact__r.Name}'s Boat
 		</aura:set>
        
        <lightning:layout multipleRows="true">
    		<lightning:layoutItem size="6" padding="around-small">
         	<div class="slds-p-horizontal--small">
    <div class="boatproperty">
        <span class="label">Boat Name:</span>
        <span></span>
    </div>
    <div class="boatproperty">
        <span class="label">Type:</span>
        <span></span>
    </div>
    <div class="boatproperty">
        <span class="label">Length:</span>
        <span> ft</span>
    </div>
    <div class="boatproperty">
        <span class="label">Est. Price:</span>
        <span><lightning:formattedNumber value="{!v.boat.Price__c.value}" style="currency"
 currencyCode="USD" currencyDisplayAs="symbol"/></span>
    </div>
    <div class="boatproperty">
        <span class="label">Description:</span>
        <span><ui:outputRichText value="{!v.boat.Description__c}"/></span>
    </div>
</div>

    		</lightning:layoutItem>

    		<lightning:layoutItem size="6" padding="around-small">
                
                <lightning:button variant='neutral' label='Full Details' onclick='{!c.onFullDetails}'/>
 
         	<div class="imageview" style="[set image as background here]" />
    		</lightning:layoutItem>
		</lightning:layout>
        
    </lightning:card>
    
</aura:component>

hope this will work for you. 

Thanks
karthik
 
karthikeyan perumalkarthikeyan perumal
Hello, 

At last  crossed stage 6. 

Thanks
kartik
 
karthikeyan perumalkarthikeyan perumal
hello Jeremiah, 

Use below  updated code.  you have to check  event is supported by deployment platform or not. if yes display button. else no.
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="boat" type="Boat__c[]" />
    
	<lightning:card iconName="utility:anchor">
	 <aura:set attribute="Actions">
	 
                 <aura:if isTrue="{!v.Event}">
                  <lightning:button label="Full Details" onclick="{!c.onFullDetails}" disabled="false" />
                  <aura:set attribute="else"> 
                      <lightning:button label="Full Details" onclick="{!c.onFullDetails}" disabled="true" />
                 </aura:set>
                  </aura:if>
            
        </aura:set>
  		<aura:set attribute="title">
    		{!v.boat.Contact__r.Name}'s Boat
 		</aura:set>
        
        <lightning:layout multipleRows="true">
    		<lightning:layoutItem size="6" padding="around-small">
         	<div class="slds-p-horizontal--small">
    <div class="boatproperty">
        <span class="label">Boat Name:</span>
        <span></span>
    </div>
    <div class="boatproperty">
        <span class="label">Type:</span>
        <span></span>
    </div>
    <div class="boatproperty">
        <span class="label">Length:</span>
        <span> ft</span>
    </div>
    <div class="boatproperty">
        <span class="label">Est. Price:</span>
        <span><lightning:formattedNumber value="{!v.boat.Price__c.value}" style="currency"
 currencyCode="USD" currencyDisplayAs="symbol"/></span>
    </div>
    <div class="boatproperty">
        <span class="label">Description:</span>
        <span><ui:outputRichText value="{!v.boat.Description__c}"/></span>
    </div>
</div>

    		</lightning:layoutItem>

    		<lightning:layoutItem size="6" padding="around-small">
                                
         	<div class="imageview" style="[set image as background here]" />
    		</lightning:layoutItem>
		</lightning:layout>
        
    </lightning:card>
    
</aura:component>
 hope this will help you

Thanks
karthik
 
PatMcClellan__cPatMcClellan__c
Karthik... good news, I passed the challenge. Bad news... my Full Details button doesn't show up on the page now. I don't understand the aura:if isTrue"{!v.Event}" line. What is Event in this context? I can't find anything about this in the docs... I'd love to read about it.
Sunil SirangiSunil Sirangi

@Pat_McClellan

BoatDetail Component. See in my component how i handled the Full Details Button. 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="boat" type="Boat__c"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	<aura:attribute name="showButton" type="Boolean" default="false"/>    
    <lightning:card iconName="utility:anchor">        
        <aura:set attribute="title">
            {!v.boat.Contact__r.Name}'s boat
        </aura:set>
        <aura:set attribute="actions">
            <aura:if isTrue='{!v.showButton}'>
            <lightning:button label="Full Details" onclick="{!c.onFullDetails}"/>
            </aura:if>
        </aura:set>
        <p class="slds-p-horizontal_small">
            <lightning:layout >                
                <lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
                    <div class="slds-p-horizontal--small">
                        <div class="boatproperty">
                            <span class="label">Boat Name:</span>
                            <span><ui:outputText value="{!v.boat.Name}"/></span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Type:</span>
                            <span><ui:outputText value="{!v.boat.BoatType__r.Name}"/></span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Length:</span>
                            <span><ui:outputText value="{!v.boat.Length__c}"/> ft</span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Est. Price:</span>
                            <span><lightning:formattedNumber value="{!v.boat.Price__c}" currencyCode="USD" style="currency" currencyDisplayAs="symbol"/></span>
                        </div>
                        <div class="boatproperty">
                            <span class="label">Description:</span>
                            <span><ui:outputRichText class="slds-text-longform" value="{!v.boat.Description__c}"/></span>
                        </div>
                    </div>
                </lightning:layoutItem>
                <lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
                    <div class="imageview" style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}"/>
                </lightning:layoutItem>
            </lightning:layout>
        </p>
    </lightning:card>
</aura:component>
Sunil SirangiSunil Sirangi
Guys, In challenge 8, i was struck at the point of hyperlinking the CreatedBy to redirect to user detail page. How do we define hyperlinks in lightning. Can anyone share any info on this part.
PatMcClellan__cPatMcClellan__c
Hey Sunny, please start a new thread for Challenge 8. Otherwise, we'll never be able to track the threads! :)
Sunil SirangiSunil Sirangi
Link for Step 8 : https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MVBYQA4
Pablo Gonzalez Alvarez 3Pablo Gonzalez Alvarez 3
Be VERY CAREFUL with javascript case sensitivty which even applies to sobject names and field names. None of my code was working because I had the following
  
component.set("v.id",boat.id);

When it should be
  
component.set("v.id",boat.Id);

See the difference between id and Id. 
Anoop Bhaskaran 5Anoop Bhaskaran 5
PatMcClellan__c you got any information on {!v.Event},  I am curious.


Anoop

 
@jeronimoburgers ☁@jeronimoburgers ☁
@Pat - in your init controller you check if the event is available. Then you enable the button conditionally.

Markup: 
<aura:component implements="flexipage:availableForAllPageTypes" >
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="enableFullDetails" type="Boolean" default="false"/>
    
    <aura:attribute name="boat" type="Boat__c" access="public"/>
	
	<lightning:card footer="Card Footer" iconName="utility:anchor">
        <aura:set attribute="title">
            <!-- {!concat(v.boat.Contact__r.Name, '\'s Boat')} -->
			{!v.boat.Contact__r.Name}'s Boat
        </aura:set>
        
		<aura:set attribute="actions">
            <aura:if isTrue="{!v.enableFullDetails}">
            	<lightning:button label="Full Details" onclick="{!c.onFullDetails}"/>
			</aura:if>
        </aura:set>
...
...

Controller: 
({
    init: function(component, event, helper) {
        component.set("v.enableFullDetails", $A.get("e.force:navigateToSObject"));
    }
    , onFullDetails: function(component, event, helper) {
		var navEvt = $A.get("e.force:navigateToSObject");
		navEvt.setParams({
			"recordId": component.get("v.boat.Id")
		});
    	navEvt.fire();
	}
})
I actually tried to move the returned function into an attribute with type="Function" but that did't work. Still don't understand why not.

So similar to:
  
<aura:attribute name="navigateToSObject" type="Function"/>

And in the controller: 
init: function(component, event, helper) {
        component.set("v.navigateToSObject", $A.get("e.force:navigateToSObject"));
    }

Hope this helps.

Oh yeah, this also did not pass:
  
<aura:set attribute="title">
            {!concat(v.boat.Contact__r.Name, '\'s Boat')}
        </aura:set>

Jeroen
Emilien Guichard 40Emilien Guichard 40
Hello,

I'm also having issue with this step, the application event is not triggering the method is the handler...

I have started a new thread about this :
https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=9060G0000005OTXQA2

could you please have a look ? this is a bit frustrating ;)

thanks a lot !
Emilien Guichard 40Emilien Guichard 40
Hi all,

Finally found what was blocking the application event reception.

It seems that an application event doesn't require a name in its handler, so by changing : 
<aura:handler name="BoatSelected" event="c:BoatSelected" action="{!c.onBoatSelected}" />
to 
<aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}" />
in BoatDetails.cmp, it is now working.

Hope it will help others.
 
Poonam Agarwal 7Poonam Agarwal 7
Hi.......I am not getting the image in the Details tab of BoatDetails component...Plz help
User-added image

Below is my code for BoatDetail.cmp -

<aura:component access="global" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="boat" type="Boat__c" access="public"/>
    
    <lightning:card iconname="utility:anchor" ><!--title="{!v.boat.Contact__r.Name+'\'s Boat'}" >-->
        <aura:set attribute="actions">
            <lightning:button label="Full Details" onclick="{!c.onFullDetails}" />
        </aura:set>
        <aura:set attribute="title">
            {!v.boat.Contact__r.Name}'s boat
        </aura:set>
        <p class="slds-p-horizontal_small">
        <lightning:layout>
            
            <lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
                <div class="slds-p-horizontal--small">
                    <div class="boatproperty">
                        <span class="label">Boat Name:</span>
                        <span>{!v.boat.Name}</span>
                    </div>
                    <div class="boatproperty">
                        <span class="label">Type:</span>
                        <span>{!v.boat.BoatType__r.Name}</span>
                    </div>
                    <div class="boatproperty">
                        <span class="label">Length:</span>
                        <span>{!v.boat.Length__c} ft</span>
                    </div>
                    <div class="boatproperty">
                        <span class="label">Est. Price:</span>
                        <span><lightning:formattedNumber style="currency" currencyCode="USD" value="{!v.boat.Price__c}"/></span>
                    </div>
                    <div class="boatproperty">
                        <span class="label">Description:</span>
                        <span><lightning:formattedRichText value="{!v.boat.Description__c}" /></span>
                    </div>
                </div>
            </lightning:layoutItem>
            
            <lightning:layoutItem flexibility="grow" size="6" mediumDeviceSize="6" largeDeviceSize="6">
                <div class="imageview" style="{!'background-image:url(\''+v.boat.Picture__c+'\')'}" />
            </lightning:layoutItem>
            
        </lightning:layout>
        </p>
    </lightning:card>
    
</aura:component>
 
himanshu mehra 4himanshu mehra 4
Hi Poonam,

Issue you mentioned in your last comment related to BoatDetail component css.
Please update your BoatDetail.css as suggested in "Display Boat Details" section. Hope this will resolve your issue.
 
anindya halder 9anindya halder 9
As funny as it gets , It was stopping me  because I used $A.get("event.force:navigateToSObject") in BoatDetailController.   I did everything possible but still I ws getting the error "onFullDetails function should fire the appropriate event".  The final solution was changing it to $A.get("e.force:navigateToSObject")
Michael PaulsonMichael Paulson
I'm wondering if anyone might know what's happening here. I haven't been able to get the boat details component to load anything (if I remove the aura:if it just shows as blank, so I know that's not the issue). And when I print out the boat variable in the console from either the BoatTile or the BoatDetails controllers, "boat" is showing up as null (after "var boat = component.get("v.boat");" in the BoatTile controller and "var boat = event.getParam("boat");" int he BoatDetails controller). Additionally, I can actually see the name show up in the BoatTile component for a split second before it goes back to being blank.

So I tried submitting it in Trailhead to see if they'd give me a helpful error and it just said I had passed. I'm stumped and hoping for some help. Thanks!
swapna Ravula 22swapna Ravula 22
Hi,
Can some one please help me out with the below issue.
User-added image
ElDeibizElDeibiz

This challenge ipoint s really annoying. More even than other testing requirements that are absurdly codified.

The text says:

<<The card’s header is the Boat Contact’s name, concatenated with “’s Boat.”>>
But the testing is done with the apostrophe char and without an ending dot: 's boat

Salesforce test couldn't even take it from the cards' inlne title 

title="{!v.boat.Contact__r.Name + '\'s boat'}"
teeshuteeshu
I am stuck at challenge 6

Challenge Not yet complete... here's what's wrong:
The BoatDetails component's tabs shouldn't display if the component’s boat attribute is undefined. Either use the empty function or check for undefined.
Please help
teeshuteeshu
Challenge Not yet complete... here's what's wrong:
The BoatDetails component's tabs shouldn't display if the component’s boat attribute is undefined. Either use the empty function or check for undefined.
User-added image