+ Start a Discussion
PatMcClellan__cPatMcClellan__c 

Lightning Component Framework Specialist SuperBadge - Challenge 8

I have the BoatReviews.cmp built and it looks correct, but I'm not sure the best way to pull the boatReview.CreatedById from the link on the name. I'm thinking it should be coded into the iteration markup, then the onUserInfoClick handler could extract the boatReview.CreatedById from the event... but I can't figure out how to make that work.

I've tried <a href> and <ui:outputURL> in the markup... can't make it work.

How about a hint?
Best Answer chosen by PatMcClellan__c
PatMcClellan__cPatMcClellan__c
Finally figured it out! Whew.

I ended up using this markup:
<a href="javascript:void(0)" onclick="{!c.onUserInfoClick}" data-userid="{!boatReview.CreatedBy.Id}">
     {!boatReview.CreatedBy.Name}
</a>
And this in the controller:
onUserInfoClick : function(component,event,helper){
        var userId = event.currentTarget.getAttribute("data-userid");
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId" : userId,
        });
        navEvt.fire()

    },
This resource was the key:
https://salesforce.stackexchange.com/questions/141115/value-binding-with-html-elements-in-lightning-framework

 

All Answers

PatMcClellan__cPatMcClellan__c
Finally figured it out! Whew.

I ended up using this markup:
<a href="javascript:void(0)" onclick="{!c.onUserInfoClick}" data-userid="{!boatReview.CreatedBy.Id}">
     {!boatReview.CreatedBy.Name}
</a>
And this in the controller:
onUserInfoClick : function(component,event,helper){
        var userId = event.currentTarget.getAttribute("data-userid");
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId" : userId,
        });
        navEvt.fire()

    },
This resource was the key:
https://salesforce.stackexchange.com/questions/141115/value-binding-with-html-elements-in-lightning-framework

 
This was selected as the best answer
Medhanie Habte 37Medhanie Habte 37
Awesome, but I am also trying to figure out how to invoke a refresh method that refreshes the boatdetails component

My imperfect code below.
 
({
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"));
    },
    onRecordUpdated : function(component, event, helper){
        
    }, 
    onBoatReviewAdded : function(component, event, helper) {
	console.log("Event received");
	component.find("details").set("v.selectedTabId", "boatreviewtab");
	
},
    
    refresh : function(component, event, helper) {
    var action = component.get('c.myController');
    action.setCallback(cmp,
        function(response) {
            var state = response.getState();
            if (state === 'SUCCESS'){
                $A.get('e.force:refreshView').fire();
            } else {
                 //do something
            }
        }
    );
    $A.enqueueAction(action);
}
    
    
})

 
PatMcClellan__cPatMcClellan__c
I'm working on the same thing, but from the directions, I think it's simpler than you're doing. I think the refresh handler simply needs to call the doInit.

I can't test that because, for some reason, I can't get my aura:method working on this one. (similar to the aura:method call we did from BoatSearchController to BoatSearchResults.search().)

Here's what I've done so far:
In BoatReviews.cmp, I registered the aura:method to make it public:
<!-- set up the aura:method for refresh -->
    <aura:method name="refresh"
                 action="{!c.refresh}"
                 description="invokes refresh whenever boat is updated">
    </aura:method>
Next, in BoatReviewsController.js, I added the refresh method:
refresh : function(component,event,helper){
        console.log("refresh called")
        this.doInit;
    }
In BoatDetails.cmp, I added an aura:id to the line where I call BoatReviews, giving it the shorter name BRcmp:
<lightning:tab label="Reviews" id="boatreviewtab">
          <c:BoatReviews boat="{!v.boat}" aura:id="BRcmp"/>
 </lightning:tab>
Then, in BoatDetailsController.js, I am trying to call the method using the syntax found here (and used previously for BoatSearch):
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cmp_methods_sync.htm
onRecordUpdated : function(component, event, helper){
        //invoke a refresh on the reviews tab, calling public method refresh
        //BRcmp is the aura:id for the component when invoked in BoatDetails.cmp
        var boat = component.get("v.boat");
        console.log("onRecordUpdated called | boat: " + boat.Id);

        var BRcmp = component.find("BRcmp");
        console.log(BRcmp);
        var auraMethodResult = BRcmp.refresh();
        console.log("auraMethodResult: " + auraMethodResult);
},
However, this is throwing an error as soon as I select a boat -- before the BoatDetails component is rendered. The error says you can't call refresh on undefined -- meaning that the BRcmp is undefined. I think BRcmp is undefined at that point because, before a boat is selected, that BoatDetails component isn't rendered: no BoatDetails means no BoatReviews.

So I'm thinking I need some kind of test to see if BoatDetails is rendered, which is dependent on having a value for v.boat. Since I've already set var boat = component.get("v.boat"), I'll try an if statement, so it doesn't try to refresh until after there's been at least one boat selected. I have to quit for today, but that's where I'll pick up tomorrow. Please let me know if you make progress on this.







 
Medhanie Habte 37Medhanie Habte 37
Looks great, but all references to BRCmp should be BoatReviews
PatMcClellan__cPatMcClellan__c
I made those changes, but I'm still getting the same error. Using component:find(), It can't seem to find the BoatReviews component on the BoatDetails.cmp.
PatMcClellan__cPatMcClellan__c
OK, I got it worked out. The problem is that the BoatReviews component isn't defined until after the first time the tab is activated. So, trying to do a component.find(BoatReviews) for the refresh was returning "undefined". You don't really need to refresh it if it's the first access, so I just added an if statement to check for that:

In BoatDetailsController.js...
if(typeof BoatReviews != 'undefined'){
            var auraMethodResult = BoatReviews.refresh();
            console.log("auraMethodResult: " + auraMethodResult);
        }
That makes it function as required. 

Now, I'm getting the following validation error:
Challenge Not yet complete... here's what's wrong: 
The BoatReviews component doesn't have an event handler registered with aura:handler that reloads data from Apex any time the value of the component’s boat attribute is changed

I thought that's what I just implemented with the public method, which triggers doInit, which reloads data from Apex. Do we need to be catching an event -- I think that would be redundant.
 
PatMcClellan__cPatMcClellan__c
I've gone over this 25 times and can't spot what the validation is looking for. It works, but it doesn't validate (see error in post above). The instructions say:
 
The output of the component needs to be refreshed any time a user selects a different boat or adds a new review. The component has an event handler that reloads data from Apex any time that the value of the component’s boat attribute is changed. It defines a public method, refresh, that invokes the component’s doInit() controller method. The refresh() method is invoked from the BoatDetails.onBoatReviewAdded() method and the BoatDetails.onRecordUpdated()method.

So in BoatReviews.cmp, I defined the public method, refresh, that invokes the component's doInit() controller method.
<!-- set up the aura:method for refresh -->
    <aura:method name="refresh" action="{!c.doInit}" access="public"
                 description="BoatDetailsController.js invokes refresh whenever boat is updated">
    </aura:method>
That doInit handler calls helper.onInit:

BoatReviewsController.js
doInit : function(component,event,helper){
        console.log("BRCjs: doInit");
        helper.onInit(component, event);
    },
BoatReviewsHelper.js: this function pulls the list of reviews from the server with APEX class BoatReviews, getAll() method and assigned the result to v.boatReviews.
onInit : function(component, event){
                var boat = component.get("v.boat");
                console.log("BRHjs:onInit started: boatId is " + boat.Id);
                var action = component.get("c.getAll");
                action.setParams({"boatId" : boat.Id});
                console.log("boatId: " + boat.Id);

                //add the callback behavior for when the response is received
                action.setCallback(this,function(response){
                    var state = response.getState();
                    if (state === "SUCCESS"){
                        component.set("v.boatReviews", response.getReturnValue());
                        console.log("APEX success");
                        }
                        else {
                        console.log("Failed with state: " + state);
                        }
                });
                //send action off to be executed in APEX
                $A.enqueueAction(action);
    },
Finally, in BoatDetailsController.js, I'm calling the refresh() from both onRecordUpdated, and onBoatReviewAdded.
onRecordUpdated : function(component, event, helper){
        var boat = component.get("v.boat");
        console.log("onRecordUpdated called | boat: " + boat.Id);

        //invoke a refresh on the reviews tab, calling public method refresh
        var BoatReviews = component.find("BoatReviews");
        console.log("BoatReviews: " + BoatReviews);
        if(typeof BoatReviews != 'undefined'){
            BoatReviews.refresh();
        }
    },

    onBoatReviewAdded : function(component, event, helper){
        console.log("BDCjs: onBoatReviewAdded")
        component.find("tabs").set("v.selectedTabId", "boatreviewtab");

        //invoke a refresh on the reviews tab, calling public method refresh
        var BoatReviews = component.find("BoatReviews");
        //BRcmp is the aura:id for the component when invoked in BoatDetails.cmp
        BoatReviews.refresh();

    },

Again, it works as it's suppose to (as I understand the directions/functionality), but it won't validate.

FYI, I also tried having the refresh aura:method action="{!c.refresh}", and then have a refresh function that points to this.doInit. That also works but did not validate, and it's a pointless extra step in the path.

Any advice?
 
PatMcClellan__cPatMcClellan__c
Figured it out: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_valueChange.htm
Avinash kumar 64Avinash kumar 64
Was just going to reply on your query, but you found out by yourslef, that even better. :)
PatMcClellan__cPatMcClellan__c
I passed the challenge, but that last bit seems redundant. When I choose a new boat, the refresh handler is called by onBoatSelected AND the doInit handler is called by this new aura:handler. It's making 2 calls to APEX. I don't understand...
Rahul Agrawal 43Rahul Agrawal 43

Hi PatMcClellan,

I followed the instruction you mentioned in the post to solve the issue: Challenge Not yet complete... here's what's wrong: 
The BoatReviews component doesn't hyperlink the CreatedBy name and invoke a controller function named onUserInfoClick().

But still I am getting the same issue again.

I think I am doing something wrong in the Component.
Below is the code of BoatReviews.component
 

<ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->
        <aura:if isTrue="{!v.boatReviews.length==0}">
            <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                <ui:outputText value="No Reviews Available" />
            </lightning:layoutItem>
        </aura:if>
        <div class="slds-feed">
            <ul class="slds-feed__list">
                <aura:iteration items="{!v.boatReviews}" var="boatReview">
                    <li class="slds-feed__item">
                        <div>
                            <a href="javascript:void(0)" onclick="{!c.onUserInfoClick}" data-userid="{!boatReview.CreatedBy.Id}">
                                {!boatReview.CreatedBy.Name}
                            </a> - {!boatReview.CreatedBy.CompanyName}
                        </div>
                        <div>
                        	{!boatReview.CreatedDate}
                        </div>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </ui:scrollerWrapper>
 



Is here anything I am missing?

Thanks,

PatMcClellan__cPatMcClellan__c
Here's my markup for that section:
<div class="slds-media__body">
   <div class="slds-grid slds-has-flexi-truncate">
      <a href="javascript:void(0)" onclick="{!c.onUserInfoClick}"
          data-userid="{!boatReview.CreatedBy.Id}">
          {!boatReview.CreatedBy.Name}
      </a>
      &nbsp; &mdash; &nbsp; {!boatReview.CreatedBy.CompanyName}
   </div>
   <p><lightning:formattedDateTime value="{!boatReview.CreatedDate}" 
                                   year="numeric" month="short" day="numeric"  
                                   hour="2-digit" minute="2-digit" hour12="true"/></p>
</div>
Your href markup looks clean. I would check to see if you're getting the values you need. Also, check your onUserInfoClick controller.
 
Rahul Agrawal 43Rahul Agrawal 43
Thanks Pat,
It worked, but now I am struggling with another issue:
Challenge Not yet complete... here's what's wrong: 
The BoatReviews component doesn't have an event handler registered with aura:handler that reloads data from Apex any time the value of the component’s boat attribute is changed

 var BoatReviews = component.find("BoatReviews");
above code gives undefined value.

should I use an event to refresh the tab?
Rakhi Rajput 2Rakhi Rajput 2
Hi Rahul, 
Is the issue sorted?
I have added below to me BoatReviews component and it worked. I have finally cleared the step.

<aura:handler name="change" value="{!v.boat}" action="{!c.refresh}"/>
BijaySBijayS
Hi ,

I am not able to view the FiveStarRating  component, it doesn't even load.

FiveStarRatingController.js:
({
	afterScriptsLoaded : function(component, event, helper) {
        debugger;
		var domEl = component.find("ratingarea").getElement();
        var currentRating = component.get("v.value");
 		var readOnly = component.get("v.readonly");
		var maxRating = 5;
        var callback = function(rating) {
            debugger;
            component.set('v.value',rating);
            console.log("Value of " + component.ger('v.value'));
            component.ratingObj = rating(domEl,currentRating,maxRating,callback,readOnly);
            debugger;
        }
	},
    
    onValueChange: function(component,event,helper) {
        if (component.ratingObj) {
            var value = component.get('v.value');
            component.ratingObj.setRating(value,false);
        }             
    }
})


FiveStarRating.cmp:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="value" type="Integer" default="0" />
    <aura:attribute name="readonly" type="Boolean" default="false" />
	<aura:handler name="change" value="{!v.value}" action="{!c.onValueChange}"/>
    <ltng:require styles="{!$Resource.fivestar.rating.css}" />
	<ltng:require scripts="{!$Resource.fivestar.rating.js}"
    		afterScriptsLoaded="{!c.afterScriptsLoaded}" />    
	<ul aura:id="ratingarea" class="{!v.readonly ? 'readonly c-rating' : 'c-rating'}"></ul>
</aura:component>


AddReviews.cmp:
<div class="slds-form-element"> <c:FiveStarRating value="{!v.boatReview.Rating__c}" readonly="false"/> </div>

BatReviews.cmp:
 
<div class="slds-post__content slds-text-longform">
                                    <p>{!boatReview.Name}</p>
                                    {!boatReview.Comment__c}
                                <c:FiveStarRating value="{!boatReview.Rating__c}" readonly="true"/>

                                </div>
                                <footer class="slds-post__footer">
                                    <c:FiveStarRating value="{!boatReview.Rating__c}" readonly="true"/>

                                </footer>
                            </article>
                            <c:FiveStarRating value="{!boatReview.Rating__c}" readonly="true"/>


May be i am missing something silly , can anyone help me out?
Thanks in advance.

Regards,
Bijay
PatMcClellan__cPatMcClellan__c
Hi Bijay, I think you may be missing one of the required static resources in your styles. Try this:
 
<ltng:require styles="{!join(',', $Resource.fivestar +'/rating.css', $Resource.fivestar +'/stars.svg')}"
I hope that fixes it for you. BTW, what's your debugger? Can you share the code?
 
Nicole RebeloNicole Rebelo
I am receiving the following error:
We couldn't find a public method named refresh on the BoatReviews component that invokes the component’s doInit() controller method.
 
BoatReview Component

<aura:handler name="change" value="{!v.boat}" action="{!c.refresh}"/>


BoatReview Controller

refresh : function(component, event, helper){
        this.doInit(component, event, helper);
}

Am I missing something obvious?
PatMcClellan__cPatMcClellan__c
Hey Nicole. This public method concept was new to me too. Check out this link: (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm

You'll need to revise the code in your markup:
<!-- set up the aura:method for refresh -->
    <aura:method name="refresh" action="{!c.doInit}" access="public"
                 description="BoatDetailsController.js invokes refresh whenever boat is updated">
    </aura:method>
Hope that helps.
Nicole RebeloNicole Rebelo
That did it. Thanks!
gauravbtgauravbt
@Nicole , @ Pat --

I am getting this error 
Challenge Not yet complete... here's what's wrong: 
The BoatReview component doesn't include a public attribute named boat of type BoatType__c.Please help..

BoatReviews.cmp

<aura:component>
     <aura:attribute name="boat" type="BoatType__c" access="public"/>
    <aura:handler name="change" value="{!v.boat}" action="{!c.refresh}"/>
    <!-- set up the aura:method for refresh -->
    <aura:method name="refresh" action="{!c.doInit}" access="public"
                 description="BoatDetailsController.js invokes refresh whenever boat is updated">
    </aura:method>
     
    <ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->
        <aura:if isTrue="{!v.boatReviews.length==0}">
            <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                <ui:outputText value="No Reviews Available" />
            </lightning:layoutItem>
        </aura:if>
        <div class="slds-feed">
            <ul class="slds-feed__list">
                <aura:iteration items="{!v.boatReviews}" var="boatReview">
                    <li class="slds-feed__item">
                        <div class="slds-media__body">
                       <div class="slds-grid slds-has-flexi-truncate">
                            <a href="javascript:void(0)" onclick="{!c.onUserInfoClick}"
          data-userid="{!boatReview.CreatedBy.Id}">
          {!boatReview.CreatedBy.Name}
      </a>
                        &nbsp; &mdash; &nbsp; {!boatReview.CreatedBy.CompanyName}
   </div>
                         <p><lightning:formattedDateTime value="{!boatReview.CreatedDate}" 
                                   year="numeric" month="short" day="numeric"  
                                   hour="2-digit" minute="2-digit" hour12="true"/></p>
                        </div>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </ui:scrollerWrapper>
    
    
</aura:component>
Abhinav Dev VatsAbhinav Dev Vats
User-added image

Hi All,

I got stuck with the error mentioned above in Lightning Component Framework Specialist- Step 8 even after trying multiple time.
Can some one please share resolution for the same?
 
dedwivedidedwivedi
Hi @AjayKumar, @Abhinav Dev Vats, @gauravbt
Kindly check if your BoatReview component have Apex controller, If not please use as below :

public with sharing class BoatReviews{
    public List<BoatReview__c> getAll(){
    List<BoatReview__c> lstBR = [Select ID, Name, Comment__c, Rating__c, LastModifiedDate, CreatedDate, CreatedBy.Name,                            CreatedBy.SmallPhotoUrl, CreatedBy.CompanyName from BoatReview__c];
        return lstBR;
    }
}

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" 
                controller="BoatReviews">
    <aura:attribute name="boat" type="BoatType__c" access="public"/>
    <aura:attribute name="data-userid" type="id" access="public"/>
    <aura:attribute name="boatReviews" type="BoatReview__c[]" access="private"/>

Try this and let me know !! Thanks :)
dedwivedidedwivedi
Hi @AjayKumar,
Share your BoatReviews.cmp code. It's better to start a new thread for this.
sherry pengsherry peng
HI, @gauravbt

Actually, the error message is wrong. It is looking for a boat attribute of Boat__c type in BoatReviews component. 
Kurkin AlexandreKurkin Alexandre
Hi Deepak Dwivedi 7,
Actually BoatReviews Apex controller looks like follows 
 
public with sharing class BoatSearchResults  {
    @AuraEnabled
    public static List<Boat__c> getBoats(String boatTypeId) {
      if(boatTypeId != '')  {
             return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
                    FROM Boat__c
                    WHERE BoatType__c =:boatTypeId];
      } else {
          return [SELECT id, BoatType__c, picture__c, name,contact__r.Name
                    FROM Boat__c];
      }
    }
}

 
umesh atryumesh atry
BoatReviews Apex controller will be as following :
public with sharing class BoatReviews
{
    @AuraEnabled
    public static List<BoatReview__c>  getAll(String boatTypeId)
    {
        
        return [SELECT Id, Comment__c,Rating__c,CreatedBy.Id,CreatedBy.Name,CreatedBy.SmallPhotoUrl,CreatedBy.CompanyName,LastModifiedDate,CreatedDate from BoatReview__c where Boat__c =: boatTypeId];
    }
}


I cleared my steps with help of this controller.
gauravbtgauravbt
@umesh atry , @Kurkin , @everbody - The above is not heling . Here are my componetns and controller , but still Challenge 8 is giving teh same error 
Challenge Not yet complete... here's what's wrong: 
The BoatReview component doesn't include a public attribute named boat of type BoatType__c.

BoatReviews.cmp and BoatReviews.apex
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" 
                controller="BoatReviews">
    <aura:attribute name="boat" type="BoatType__c" access="public"/>
    <aura:attribute name="data-userid" type="id" access="public"/>
    <aura:attribute name="boatReviews" type="BoatReview__c[]" access="private"/>

    <aura:handler name="change" value="{!v.boat}" action="{!c.refresh}"/>
    <!-- set up the aura:method for refresh -->
    <aura:method name="refresh" action="{!c.doInit}" access="public"
                 description="BoatDetailsController.js invokes refresh whenever boat is updated">
    </aura:method>
     
    <ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->
        <aura:if isTrue="{!v.boatReviews.length==0}">
            <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                <ui:outputText value="No Reviews Available" />
            </lightning:layoutItem>
        </aura:if>
        <div class="slds-feed">
            <ul class="slds-feed__list">
                <aura:iteration items="{!v.boatReviews}" var="boatReview">
                    <li class="slds-feed__item">
                        <div class="slds-media__body">
                       <div class="slds-grid slds-has-flexi-truncate">
                            <a href="javascript:void(0)" onclick="{!c.onUserInfoClick}"
          data-userid="{!boatReview.CreatedBy.Id}">
          {!boatReview.CreatedBy.Name}
      </a>
                        &nbsp; &mdash; &nbsp; {!boatReview.CreatedBy.CompanyName}
   </div>
                         <p><lightning:formattedDateTime value="{!boatReview.CreatedDate}" 
                                   year="numeric" month="short" day="numeric"  
                                   hour="2-digit" minute="2-digit" hour12="true"/></p>
                        </div>
                    </li>
                </aura:iteration>
            </ul>
        </div>
    </ui:scrollerWrapper>
   </aura:component>


BoatReviews.apex
 
public with sharing class BoatReviews
{
    @AuraEnabled
    public static List<BoatReview__c>  getAll(String boatTypeId)
    {
        
        return [SELECT Id, Comment__c,Rating__c,CreatedBy.Id,CreatedBy.Name,CreatedBy.SmallPhotoUrl,CreatedBy.CompanyName,LastModifiedDate,CreatedDate from BoatReview__c where Boat__c =: boatTypeId];
    }
}

 
sai sekhar 1sai sekhar 1
@gauravbt

I am also facing the same issue.did you find any solution for it.
sai sekhar 1sai sekhar 1
@gauravbt

check this out it worked for me.

https://developer.salesforce.com/forums/ForumsMain?id=9060G0000005PRhQAM

 
sherry pengsherry peng
@sai Sekhar1 @gauravbt,
The error message is misleading. Actually it is looking for a public attribute named boat of type Boat__c on BoatReviews component. 
For this super badge, no need to create a BoatReview component. 
Emilien Guichard 40Emilien Guichard 40
Hello everbody,

I managed to pass the 8ty step of the superbadge thanks to your help but when I try the app, when I change the boat I am getting the following error :

Uncaught Action failed: c:BoatReviews$controller$refresh [Cannot read property 'doInit' of undefined]

Could you please help figure this out ?

Thanks a lot
Emilien Guichard 40Emilien Guichard 40
Also another point, when I enter a new review I am redirected to the Review tab but with the following error :

Uncaught Action failed: c:BoatDetails$controller$onBoatReviewAdded [Cannot read property 'refresh' of undefined]
 
Mangadivya kasaniMangadivya kasani
@ Emilien Guichard 40
Have you resolved the issue.I am also facing the same error.


Thanks
Mangadivya kasaniMangadivya kasani
And I am also getting the error like Uncaught Action failed: c:AddBoatReview$controller$onSave [Cannot read property 'fire' of null].

here is my code:
onSave : function(component, event, helper) {
        component.set("v.boatReview.Boat__c",component.get("v.boat").Id);
        component.find("service").saveRecord(function(saveResult){
            if(saveResult.state==="SUCCESS" || saveResult.state === "DRAFT")
            {
               console.log("====Successfully save the record===="); 
               var resultsToast = $A.get("e.force:showToast");
                if(resultsToast)
                {
                    resultsToast.setParams({
                        "title": "Saved",
                        "message": "Boat Review Created"
                    });
                    resultsToast.fire(); 
                }
                else
                {
                    alert('Boat Review Created');
                }
            }
            else if (saveResult.state === "ERROR") {
                var errMsg='';
                console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                component.set("v.recordError", errMsg);
            }
            else
            {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
                      
        });
        var boatReviewAddedEvnt=component.getEvent("boatReviewAdded");
                boatReviewAddedEvnt.fire();
                 helper.onInit(component,event);
       
    },
anyone plese help me here

Thanks,
Divya.
 
sonal gupta 36sonal gupta 36
Hi
I am getting error "Failed to save BoatSearchForm.cmp: Invalid definition for null:BoatSearchForm: null: Source" for saving BoatSearchForm.comp in step 2.
Any help?
Please see code below

<aura:component controller="BoatSearchForm" implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 

           <lightning:select aura:id='typeSelect' label='Please select' name='selectItem' >
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>
             </aura:iteration>
         </lightning:select>
       </lightning:layoutItem>

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 
         <lightning:button label="Search" variant="brand" onclick='{!c.onFormSubmit}' />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>
        </aura:if>
       </lightning:layoutItem>

    </lightning:layout>

</aura:component>
Tami_LauTami_Lau
I was running into the error "Uncaught Action failed: c:BoatReviews$controller$refresh [Cannot read property 'doInit' of undefined]" too when changing the boat. It turns out you can't call a controller method from within the same controller.

Changing this.doInit to helper.onInit fixed the error.