[SalesForce] Lightning: Fields on Record loaded via force:recordData appear to be read-only / unwriteable

Scenario: I am loading an existing record using force:recordData, but since this component isn't on a record page, it cannot/does not implement force:hasRecordId. Instead, I created an attribute called {!v.contactId} and I set that as the recordId parameter on the force:recordData component. Before init, the contactId attribute is null, but I set it to a valid Contact Id during init, and then afterwards I run the .reloadRecord() method on the recordData component which reloads the record.

Issue: The record is loaded from the database, the simpleContactRecord
attribute returns all of the expected fields, I can set a
lightning:input field value to show the Phone number from the contact
using {!v.simpleContactRecord.Phone}, but when I try to modify the
value in the input field, it doesn't let me. The data shows correctly
on the screen and I can place my cursor into the input field, but if I
try to type anything or delete any existing data it doesn't do
anything. Likewise, if I try to programmatically set the variables
during a save call using component.set("v.simpleContactRecord.Phone,
and then saving the record, it doesn't update the

Based on some other posts and documentation I found online, it seems
like I am approaching the loading of the record correctly – since
there is no record Id available to the page, I need to set it manually
(which I do), and then force a reload of the record (which I do). I
don't understand why I can't edit or update any of the data in this
record, especially since I'm explicitly setting the Mode="EDIT"
parameter on the recordData component. What am I doing wrong?

The full code from my test component is below:


<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" Controller="CreateTicketController">
    <aura:attribute name="contactId" type="String" />
    <aura:attribute name="userId" type="String" />
    <!-- START: Contact Object Records -->
    <aura:attribute name="contactRecord" type="Object" />
    <aura:attribute name="simpleContactRecord" type="Object" />
    <aura:attribute name="contactRecordError" type="String" />
    <!-- END: Contact Object Records -->

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <force:recordData aura:id="contactRecordEditor" 
                      recordUpdated="{!c.handleRecordUpdated}" />

        <lightning:input type="tel" aura:id="phone" label="Phone" name="Phone" value="{!v.simpleContactRecord.Phone}" />
    <div class="slds-form-element">
        <span><br /><lightning:button onclick="{!c.save}" label="Submit" class="slds-button slds-button_brand slds-text-heading_small" /></span>

Client-Side Controller:

    init: function (component, event, helper) {
        console.log('Init actionz');
        var action = component.get("c.getRelatedAccounts");
        var userId = $A.get('$SObjectType.CurrentUser.Id');
        var contactId;
        var relationships;
        console.log('Test Init Actions');

            "userId": userId
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log('Response State: ' + state);
            console.log('is Valid: ' + component.isValid());
            if(component.isValid() && state == "SUCCESS"){
                relationships = JSON.parse(response.getReturnValue());
                console.log('Relationship Length: ' + relationships.length);
                console.log('Relationship 0 Account Id: ' + relationships[0].Contact.AccountId);
                contactId = relationships[0].ContactId;
                console.log('Contact Id: ' + contactId);
                component.set("v.contactId", contactId);
                    $A.getCallback(function() {
                        var rec = component.get("v.contactRecord");
                        var error = component.get("v.contactRecordError");
                        if(error || (rec === null)) {
                            console.log("Error initializing record template: " + error);
                        console.log("Record template initialized: " + rec.apiName);
                        console.log('Simple Contact Record: ' + JSON.stringify(component.get("v.simpleContactRecord")));
        // Invoke the service

Best Answer

I don't understand why I can't edit or update any of the data in this record, especially since I'm explicitly setting the Mode="EDIT" parameter

Your whole issue is exactly on that line where you are setting the mode. Hint - case sensitivity.

<force:recordData aura:id="contactRecordEditor" 
    Mode="EDIT" // this is the culprit here!

And the root cause is the UPPERCASE M in mode.

Change it to mode=EDIT, and you will see it working.

<force:recordData aura:id="contactRecordEditor" 
Related Topic