2

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, "5555555555"); and then saving the record, it doesn't update the value.

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:

Component:

<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" 
                      Mode="EDIT"
                      layoutType="FULL" 
                      targetRecord="{!v.contactRecord}"
                      targetFields="{!v.simpleContactRecord}"
                      targetError="{!v.contactRecordError}"
                      recordId="{!v.contactId}" 
                      recordUpdated="{!c.handleRecordUpdated}" />

    <form>
        <lightning:input type="tel" aura:id="phone" label="Phone" name="Phone" value="{!v.simpleContactRecord.Phone}" />
    </form>
    <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>
    </div>
</aura:component>

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');
        component.set("v.userId",userId);

        action.setParams({
            "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);
                component.find("contactRecordEditor").reloadRecord(
                    true,
                    $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);
                            return;
                        }
                        console.log("Record template initialized: " + rec.apiName);
                        console.log('Simple Contact Record: ' + JSON.stringify(component.get("v.simpleContactRecord")));
                    })
                );
            }
        });
        // Invoke the service
        $A.enqueueAction(action);
    }
})
5

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" 
    mode="EDIT"
    ...
    ...
/>
  • 2
    Damn. I always miss the easy stuff. I guess I have to burn "Lightning components are case sensitive" into my brain. I'm still learning all of the new lightning component stuff so pardon my dust while I clear out my brain of old habits. Thanks again Jayant – Morgan Marchese Oct 24 '18 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.