You need to sign in to do that
Don't have an account?
venkatesh Raaye 12
Superbadge Lightning Component Framework Specialist step 7
Challenge Not yet complete... here's what's wrong:
The BoatReviewAdded event isn't configured correctly. There is something missing or improperly configured in the BoatReviewAdded.evt file.
BoatDetails
AddBoatReview.cmp
AddBoatReviewController.js
AddBoatRiewHelper.js
Can Someone please suggest me with the solution...
The BoatReviewAdded event isn't configured correctly. There is something missing or improperly configured in the BoatReviewAdded.evt file.
BoatDetails
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="selTabId" type="Id"/> <aura:attribute name="boat" type="Boat__c"/> <aura:attribute name="id" type="Id" /> <aura:attribute name="recordError" type="String"/> <aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}" /> <aura:registerEvent name="BoatReviewAdded" type="c:BoatReviewAdded"/> <aura:handler name="BoatReviewAdded" event="c:BoatReviewAdded" action="{!c.onBoatReviewAdded}"/> <force:recordData aura:id="service" layoutType="FULL" 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" targetError="{!v.recordError}" targetFields="{!v.boat}" mode="EDIT" recordUpdated="{!c.onRecordUpdated}" /> <aura:if isTrue="{!not(empty(v.id))}"> <lightning:tabset variant="scoped" selectedTabId="{!v.selTabId}" aura:id="details"> <lightning:tab label="Details" id="details" > <c:BoatDetail boat="{!v.boat}"/> </lightning:tab> <lightning:tab label="Reviews" id="boatreviewtab" > </lightning:tab> <lightning:tab label="Add Review" id="addReview" > <c:AddBoatReview boat="{!v.boat}"/> </lightning:tab> </lightning:tabset> </aura:if> <aura:if isTrue="{!not(empty(v.recordError))}"> <div class="recordError"> <ui:message title="Error" severity="error" closable="true"> {!v.recordError} </ui:message> </div> </aura:if> </aura:component>BoatDetailsController.Js
({ onBoatSelected : function(component, event, helper) { var boatSelected=event.getParam("boat"); component.set("v.id",boatSelected.Id); component.find("service").reloadRecord() ; }, onRecordUpdated : function(component, event, helper) { }, onBoatReviewAdded : function(component, event, helper) { console.log("Event received"); component.set("v.selTabId", "boatreviewtab"); } })
AddBoatReview.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="boatReview" type="BoatReview__c" access="public"/> <aura:attribute name="boatReviewRecord" type="Object" access="public"/> <aura:attribute name="boat" type="Boat__c"/> <aura:attribute name="recordError" type="String" access="private"/> <aura:registerEvent name="BoatReviewAdded" type="c:BoatReviewAdded"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <force:recordData aura:id="service" targetError="{!v.recordError}" targetRecord="{!v.boatReviewRecord}" targetFields="{!v.boatReview}" fields="Id,Name,Comment__c,Boat__c" recordUpdated="{!c.onRecordUpdated}" /> <lightning:layout multipleRows="true"> <lightning:layoutItem size="12" padding="around-small"> <lightning:input name="title" label="Title" value="{!v.boatReview.Name}"/> </lightning:layoutItem> <lightning:layoutItem size="12" padding="around-small"> <label class="slds-form-element__label" for="input-id-01">Description</label> <lightning:inputRichText value="{!v.boatReview.Comment__c}" disabledCategories="FORMAT_FONT"/> </lightning:layoutItem> <lightning:layoutItem size="12" class="slds-align--absolute-center"> <lightning:button iconName="utility:save" label="Submit" onclick="{!c.onSave}"/> </lightning:layoutItem> </lightning:layout> <aura:if isTrue="{!not(empty(v.recordError))}"> <div class="recordError"> <ui:message title="Error" severity="error" closable="true"> {!v.recordError} </ui:message> </div> </aura:if> </aura:component>
AddBoatReviewController.js
({ doInit : function(component, event, helper) { helper.onInit(component,event); }, onSave : function(component, event, helper) { var toast = $A.get("e.force:showToast"); component.find("service").saveRecord(function(saveResult) { if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") { if (!$A.util.isUndefinedOrNull(toast)) { toast .setParams({"title":"Saved", "message":"The record was saved."}) .fire(); } else { alert("Successfully saved, question mark?"); } } else { console.log('Error: ' + JSON.stringify(saveResult.error)); } }); component.getEvent("BoatReviewAdded").fire(); helper.onInit(component, event, helper); }, onRecordUpdated : function(component, event, helper) { var eventParams = event.getParams(); if(eventParams.changeType === "CHANGED") { var changedFields = eventParams.changedFields; var saveResultsToast = $A.get("e.force:showToast"); if(saveResultsToast!='undefined') { saveResultsToast.setParams({ "title": "Saved", "message": "Boat Review Saved" }); saveResultsToast.fire(); } else { alert('Boat Review Saved'); } } } })
AddBoatRiewHelper.js
({ onInit : function(component, event, helper) { // Prepare a new record from template component.find("service").getNewRecord( "BoatReview__c", null, false, $A.getCallback(function() { var rec = component.get("v.boatReview"); var error = component.get("v.recordError"); console.log('hey', JSON.stringify(rec)); if (error || (rec === null)) { console.log("Error initializing record template: " + error); } else { rec.Boat__c = component.get("v.boat").Id; component.set("v.boatReview.Boat__c",component.get("v.boat").Id); console.log("Record template initialized: " + rec.sobjectType); } }) ); } })BoatReivewAdded.evt
<aura:event type="APPLICATION" description="Event template"> <aura:attribute name="BoatReviewAdded" type="Boat__c"/> </aura:event>
Can Someone please suggest me with the solution...
You should define your event for a component not for an application.You are gonna use it on a component.
I passed the challenge i hope this helps :)