[SalesForce] Trailhead “Build a Lightning Component to Override a Standard Action” – “Use Lightning Data Service”

I am stuck at the Trailhead: "Build a Lightning Component to Override a Standard Action" – "Use Lightning Data Service"

with the error:

"Challenge Not yet complete… here's what's wrong: The JavaScript
controller markup for the 'PropertyDialog' component is not correct."

Everything is working as expected when I test it.

I only copy pasted what they required so this looks like some other mistakes is creeping in.

PropertyDialog:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="picklistValues" type="Object" />
<aura:attribute name="propertyRecord" type="Property__c" />
<force:recordData aura:id="forceRecord"
            recordId="{!v.recordId}"
            targetFields="{!v.propertyRecord}"
            fields="Id,Name,Beds__c,Baths__c,Price__c,Status__c"
            mode="EDIT" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<c:PicklistValues sObjectName="Property__c" fieldName="Status__c" picklistValues="{!v.picklistValues}" />

<lightning:input aura:id="propName" name="propName" label="Property Name" required="true" />
<lightning:input aura:id="propBeds" name="propBeds" label="Beds" />
<lightning:input aura:id="propBaths" name="propBaths" label="Baths" />
<lightning:input aura:id="propPrice" name="propPrice" label="Price" />
<lightning:select aura:id="propStatus" name="propStatus" label="Status">
<aura:iteration items="{!v.picklistValues}" var="item">
    <option value="{!item}">{!item}</option>
</aura:iteration>

</lightning:select>
<lightning:button variant="neutral" label="Cancel" />
<lightning:button variant="brand" label="Submit" onclick="{!c.saveRecord}" />

PropertyDialogController:

    ({
    doInit : function(component, event, helper) {
        console.log('Property Dialiog init');
        var recordData = component.find("forceRecord");
        recordData.getNewRecord('Property__c', null, false, 
                               $A.getCallback(function() {
            console.log('callback from getNewRecord');                       
            var rec = component.get("v.propertyRecord");
            var error = component.get("v.recordError");
            if (error || (rec === null)) {
                console.log("Error initializing record template: " + error);
                return;
            }
        }));
    },
    saveRecord  : function(component, event, helper){
        console.log('saveRecord start');
        var propBeds = parseInt(component.find('propBeds').get("v.value"), 10);
        var propBaths = parseInt(component.find('propBaths').get("v.value"), 10);
        var propPrice = parseInt(component.find('propPrice').get("v.value"), 10);
        component.set("v.propertyRecord.Name", component.find('propName').get("v.value"));   
        component.set("v.propertyRecord.Beds__c", propBeds);
        component.set("v.propertyRecord.Baths__c", propBaths);
        component.set("v.propertyRecord.Price__c", propPrice);
        component.set("v.propertyRecord.Status__c", "Listed");

        console.log('finished setting fields');
        var tempRec = component.find("forceRecord");
        console.log(tempRec);
        console.log(JSON.stringify(tempRec)) ;
        tempRec.saveRecord($A.getCallback(function(result) {
            console.log(result.state);
            var resultsToast = $A.get("e.force:showToast");
            if (result.state === "SUCCESS") {
                resultsToast.setParams({
                    "title": "Saved",
                    "message": "The record was saved."
                });
                resultsToast.fire(); 
                var recId = result.recordId;
                console.log('record id: '+recId);
                helper.navigateTo(component, recId);

            } else if (result.state === "ERROR") {
                console.log('Error: ' + JSON.stringify(result.error));
                resultsToast.setParams({

                    "title": "Error",
                    "message": "There was an error saving the record: " + JSON.stringify(result.error)
                });
                resultsToast.fire();
            } else {
                console.log('Unknown problem, state: ' + result.state + ', error: ' + JSON.stringify(result.error));
            }
        }));
    }
})

PropertyDialogHelper:

    ({
    navigateTo : function(component, recId) {
        var eventNav = $A.get("e.force:navigateToSObject");
        eventNav.setParams({recordId: recId});
        eventNav.fire();
    }
})

Thanks for the help!

Best Answer

PropertyDialog Component :

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="picklistValues" type="Object" />
    <aura:attribute name="propertyRecord" type="Property__c" />
<force:recordData aura:id="forceRecord"
                recordId="{!v.recordId}"
                targetFields="{!v.propertyRecord}"
                fields="Id,Name,Beds__c,Baths__c,Price__c,Status__c"
                mode="EDIT" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<c:PicklistValues sObjectName="Property__c" fieldName="Status__c" picklistValues="{!v.picklistValues}" />

<lightning:input aura:id="propName" name="propName" label="Property Name" required="true" />
<lightning:input aura:id="propBeds" name="propBeds" label="Beds" />
<lightning:input aura:id="propBaths" name="propBaths" label="Baths" />
<lightning:input aura:id="propPrice" name="propPrice" label="Price" />
    <lightning:select aura:id="propStatus" name="propStatus" label="Status"/>
    <aura:iteration items="{!v.picklistValues}" var="item"/>
    <option value="{!item}">{!item}</option>
<lightning:button variant="neutral" label="Cancel" />
<lightning:button variant="brand" label="Submit" onclick="{!c.saveRecord}" />
<lightning:button onclick="{!c.saveRecord}" label="submit"/>
</aura:component>

PropertyDialog Controller:

({
    doInit : function(component, event, helper) 
    {
     component.find("forceRecord").getNewRecord(
        "Property__c",
        null,
        false,
        $A.getCallback(function() {
            var rec = component.get("v.propertyRecord");
            var error = component.get("v.recordError");
            if (error || (rec === null)) {
                console.log("Error initializing record template: " + error);
                return;
            }
        })
    );   
    },
    saveRecord : function(component, event, helper) {
        var propBeds = parseInt(component.find('propBeds').get("v.value"), 10);
var propBaths = parseInt(component.find('propBaths').get("v.value"), 10);
var propPrice = parseInt(component.find('propPrice').get("v.value"), 10);
component.set("v.propertyRecord.Name", component.find('propName').get("v.value"));    
component.set("v.propertyRecord.Beds__c", propBeds);
component.set("v.propertyRecord.Baths__c", propBaths);
component.set("v.propertyRecord.Price__c", propPrice);
component.set("v.propertyRecord.Status__c", component.find('propStatus').get("v.value"));
var tempRec = component.find("forceRecord");
tempRec.saveRecord($A.getCallback(function(result) {
    console.log(result.state);
    var resultsToast = $A.get("e.force:showToast");
    if (result.state === "SUCCESS") {
        resultsToast.setParams({
            "title": "Saved",
            "message": "The record was saved."
        });
        resultsToast.fire();
        var recId = result.recordId;
helper.navigateTo(component, recId);
    } else if (result.state === "ERROR") {
        console.log('Error: ' + JSON.stringify(result.error));
        resultsToast.setParams({
            "title": "Error",
            "message": "There was an error saving the record: " + JSON.stringify(result.error)
        });
        resultsToast.fire();
    } else {
        console.log('Unknown problem, state: ' + result.state + ', error: ' + JSON.stringify(result.error));
    }
}));
    }

})

PropertyDialog Helper:

({
    navigateTo: function(component, recId) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": recId
        });
        navEvt.fire();
    }
})
Related Topic