Return to Question

Code for OPTION 1 : Using force:recordData

Code for OPTION 2 : Using lightning:recordData

Code for OPTION 1 : Using force:recordData (you can access the changed data but do not have page layouts)

Code for OPTION 2 : Using lightning:recordData (you have page layouts but cannot access the changed data)

p.s. could someone with more cred than me create a Lightning:recordForm tag so us stackexchange noobs can tag posts properly :)

Code for OPTION 1 : Using force:recordData

<!-- recordData.cmp -->

<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">

<aura:attribute name="record" type="Object"/> 
<aura:attribute name="recordFields" type="Object"/>
<aura:attribute name="recordError" type="String"/>

<force:recordData aura:id="recordHandler"
  recordId="{!v.recordId}"            
  targetFields="{!v.recordFields}"    
  targetError="{!v.recordError}"     
  recordUpdated="{!c.handleRecordUpdated}"
  layoutType="FULL"
  mode="EDIT"                      
/>

<!-- This component does not provide page layout  rendering  so you have to manually display editing fields  -->
<div class="Record Details">
    <lightning:card iconName="action:edit" title="{! 'Edit ' + v.recordFields.Name}">
      </div>
        <lightning:input label="Credit" value="{!v.recordFields.Credit__c }"/>
          <!-- show other editing fields here -->
        <lightning:button label="Save" variant="brand" onclick="{!c.handleSave}" />
      </div>
    </lightning:card>
</div>

</aura:component>

// recordDataController.js

handleSave : function(component, event, helper) {
var recFields = component.get('v.recordFields');

// Iterate through new field value before saving and do stuff
Object.getOwnPropertyNames(recFields).forEach(
    function (val, idx, array) {
        if (recFields[val] != null){
            doStuff(val, recFields[val]))
        }
    });

  if (isStuffSuccess()) {
    helper.saveRecord(component);
  } else {
    //show error
  }
},

Code for OPTION 2 : Using lightning:recordData

<!--recordForm.cmp -->


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >

  <!--Specify fields or use page layout fields -->
  <aura:attribute name="fields" type="List" default=""/>

  <lightning:recordForm 
     recordId = "{! v.recordId}"
     fields = "{!v.fields}"
     objectApiName="Account" 
     layoutType="Full" 
     columns = "2"
     mode = "Edit"
     onload = "{!c.handleLoad}"
     onsubmit = "{!c.handleSubmit}"
     onsuccess = "{!c.handleSuccess}" 
     onerror = "{!c.handleError}"               
  />
  <lightning:messages />

    <!-- This component automatically shows fields honouring page layout -->

</aura:component>

.

// recordFormController.js

    handleSubmit: function(component, event, helper) {
      console.log("> handleSubmit");   
      event.preventDefault();
    
      // How to access changed Account field values?
    }

p.s. could someone with more cred than me create a Lightning:recordForm tag so us stackexchange noobs can tag posts properly :)