You need to sign in to do that
Don't have an account?
Abhijeet Kumar 1
Trailhead Aura component Specialist step 7
Hi I am Stuck With the Step 7 steps in the Aura component Superbadges.
Please find the required code as below:
Error:
Add Boat Review :
Boat Detais:
Please find the required code as below:
Error:
Challenge Not yet complete... here's what's wrong: AddBoatReviews isn't instantiated in BoatDetails.cmp. BoatDetails should instantiate AddBoatReview in the “Add Review” tab, passing boat data to the component.
Add Boat Review :
<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> Controller: ({ doInit : function(component,event,helper) { helper.onInit(component,event,helper); }, onSave : function(component, event, helper) { component.find("service").saveRecord(function(saveResult) { if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") { // record is saved successfully var resultsToast = $A.get("e.force:showToast"); if(resultsToast) { resultsToast.setParams({ "title": "Saved", "message": "The record was saved." }); resultsToast.fire(); } else { alert("The record was saved"); } var newBoatReviewAddedEvent = component.getEvent("BoatReviewAdded"); newBoatReviewAddedEvent.fire(); helper.onInit(component,event,helper); } else if (saveResult.state === "INCOMPLETE") { // handle the incomplete state console.log("User is offline, device doesn't support drafts."); } else if (saveResult.state === "ERROR") { // handle the error state console.log('Problem saving contact, error: ' + JSON.stringify(saveResult.error)); } else { console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error)); } }); }, onRecordUpdated : function (component, event , helper ) { var eventParams = event.getParams(); if(eventParams.changeType === "CHANGED") { var resultsToast = $A.get("e.force:showToast"); if(resultsToast) { resultsToast.setParams({ "title": "Saved", "message": "The record was saved." }); resultsToast.fire(); } else { alert("The record was saved"); } } } }) Helper: ({ 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); } }) ); } })
Boat Detais:
<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> Controller ({ 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"); } })