+ Start a Discussion
sheila srivatsavsheila srivatsav 

load record using LDS

I am tring to get the basic right for working on force:recorddata
I want to load the record when I click any opportunity record in lightning but no record values are showing up.
<aura:component implements="flexipage:availableForAllPageTypes,
                            force:lightningQuickAction,
                            force:hasRecordId"
                             access="global">
	
    <!--define the object ion which u want to perform the operations-->
    <aura:attribute name="oppor"
                    type="Opportunity"/>

     <aura:attribute name="recordId" type="String"/>

    <aura:attribute name="recordError" 
                    type="String" 
	                description="An error message bound to force:recordData"/>
        
    <aura:attribute name="opporRecord" 
                    type="Opportunity" 
	                description="A simplified view record object to be displayed"/>

       

    <force:recordData aura:id="forceRecordCmp"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.oppor}"
                      targetFields="{!v.opporRecord}"
                      targetError="{!v.recordError}" 
                      recordUpdated="{!c.handleRecordUpdated}"
                      fields="ID,Name,StageName,Amount"/>
    
    <div class="slds-box">
    <div class="slds-text-heading_medium">
            Load Opportunity - Data Service
        </div>
        
          <div class="slds-form--stacked slds-tile">
            <div class="slds-form-element">
                <label class="slds-form-element__label"  >Name: </label>
                <div class="slds-form-element__control">
                  <ui:outputText class="slds-input" 
                    value="{!v.opporRecord.Name}" />
                </div>
            </div> 
            <div class="slds-form-element">
                <label class="slds-form-element__label" >Stage name : </label>
                <div class="slds-form-element__control">
                  <ui:outputTextArea class="slds-input"  
                    value="{!v.opporRecord.StageName}"  />
                </div>
            </div> 
              
               <div class="slds-form-element">
                <label class="slds-form-element__label" >Amount : </label>
                <div class="slds-form-element__control">
                  <ui:outputTextArea class="slds-input"  
                    value="{!v.opporRecord.Amount}"  />
                </div>
            </div> 
              
              
        </div> 
    </div>
</aura:component>

I created a new action and added the button to the page layout of opportunity object.
Now when I click any opportuntity record then I just a poup appears but I don't see any values of the selected record.

please correct me if I am doing wrong.

thanks
sheila
 
Best Answer chosen by sheila srivatsav
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Try this code. It is displaying and saving records correctly.

Component:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="recordInfo" type="Object" />
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordId" type="String"/>

    <aura:handler event="force:refreshView" action="{!c.isRefreshed}" />
    
    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      layoutType="FULL"        
                      mode="EDIT"
                      targetRecord="{!v.recordInfo}"                        
                      targetFields="{!v.simpleRecord}"    
                      targetError="{!v.recordError}"
                      />
    
    
    
    <div class="slds-form--stacked">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="recordName">Opportunity Name</label>
            <div class="slds-form-element__control">
                <lightning:input label="name" value="{!v.simpleRecord.Name}" aura:id="accName"/>
            </div>
        </div>
        
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="recordOwnerName">Stage Name</label>
            <div class="slds-form-element__control">
                <lightning:input label="stage" value="{!v.simpleRecord.StageName}" aura:id="accStage"/>
            </div>
        </div>
        
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="accType">Close Date </label>
            <div class="slds-form-element__control">
                <lightning:input label="date" value="{!v.simpleRecord.CloseDate}" aura:id="accDate"/>
            </div>
        </div>
        
        <lightning:button aura:id="saveButton"
                          label="Save Button"
                          onclick="{!c.SaveOppor}">
        </lightning:button>
    </div>
</aura:component>

Controller:
({
    SaveOppor : function(component, event, helper) {
        component.find("recordLoader").saveRecord(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                // record is saved successfully
                
                var resultsToast = $A.get("e.force:showToast");
                resultsToast.setParams({
                    "title": "Saved",
                    "message": "The record was saved.",
                    "mode":"sticky"
                });
                resultsToast.fire();
                $A.get('e.force:refreshView').fire();
                
            } 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));
            }
        });
    },
    
    isRefreshed: function(component, event, helper) {
        location.reload();
    },
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Sheila,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

Component:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="recordInfo" type="Object" />
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="curView" type="String" />	
    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      layoutType="FULL"                      
                      targetRecord="{!v.recordInfo}"                        
                      targetFields="{!v.simpleRecord}"    
                      targetError="{!v.recordError}"
                      />
    
    <div class="slds-form--stacked">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="recordName">Opportunity Name</label>
            <div class="slds-form-element__control">
                <ui:outputText value="{!v.simpleRecord.Name}" aura:id="accName"/>
            </div>
        </div>
        
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="recordOwnerName">Stage Name</label>
            <div class="slds-form-element__control">
                <ui:outputText value="{!v.simpleRecord.StageName}" aura:id="accStage"/>
            </div>
        </div>
        
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="accType">Close Date </label>
            <div class="slds-form-element__control">
                <ui:outputText value="{!v.simpleRecord.CloseDate}" aura:id="accDate"/>
            </div>
        </div>
    </div>
</aura:component>

Screenshots:
User-added image


User-added image

Also, please refer to the below links which might help you further.

https://www.jitendrazaa.com/blog/salesforce/lightning-data-services-standard-controller-for-lightning-components/

http://sfdcmonkey.com/2017/07/31/lightning-data-service/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
sheila srivatsavsheila srivatsav
Hi Khan
I got the result from ur code.

My query is why do we have to create a record page and then use available:forrecordHome interface.
Can we make it work without this?


 
Raj VakatiRaj Vakati
Try this code
 
<aura:component implements="flexipage:availableForAllPageTypes,
                            force:lightningQuickAction,
                            force:hasRecordId"
                access="global">
    
    <!--define the object ion which u want to perform the operations-->
    
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="simpleRecord" type="Object" />
    <aura:attribute name="recordError" type="String" />
    
    <force:recordData aura:id="recordEditor"
                      layoutType="COMPACT"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordError}"
                      targetRecord="{!v.record}"
                      targetFields="{!v.simpleRecord}"
                      mode="EDIT" />
    
    
    
    
    <div class="slds-box">
        <div class="slds-text-heading_medium">
            Load Opportunity - Data Service
        </div>
        
        <div class="slds-form--stacked slds-tile">
            <div class="slds-form-element">
                <label class="slds-form-element__label"  >Name: </label>
                <div class="slds-form-element__control">
                    <ui:outputText class="slds-input" 
                                   value="{!v.simpleRecord.Name}" />
                </div>
            </div> 
            <div class="slds-form-element">
                <label class="slds-form-element__label" >Stage name : </label>
                <div class="slds-form-element__control">
                    <ui:outputTextArea class="slds-input"  
                                       value="{!v.simpleRecord.StageName}"  />
                </div>
            </div> 
            
            <div class="slds-form-element">
                <label class="slds-form-element__label" >Amount : </label>
                <div class="slds-form-element__control">
                    <ui:outputTextArea class="slds-input"  
                                       value="{!v.simpleRecord.Amount}"  />
                </div>
            </div> 
            
            
        </div> 
    </div>
</aura:component>
 
({
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
            // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            // there’s an error while loading, saving, or deleting the record
        }
    }
})

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sheila,

You need to create a record page to display related records. And the component must implement flexipage:availableForRecordHome or flexipage:availableForAllPageTypes for it to be available in the App Builder when editing a record homepage.  If the component should only be available for record home pages then it should implement the more restrictive flexipage:availableForRecordHome which will indicate that the system should enforce that the component is only available in the App Builder component panel when editing a record homepage.

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Regards,
Khan Anas
sheila srivatsavsheila srivatsav
Hi khan

I am doing the save functionality also

can u pls go through code?
for selected opportunity reord, its not displaying values and not saving
 
<aura:component implements="flexipage:availableForAllPageTypes,force:lightningQuickAction,flexipage:availableForRecordHome,force:hasRecordId"
                            access="global">
	
    <!--define the object ion which u want to perform the operations-->
    <aura:attribute name="oppor"
                    type="Opportunity"/>
    
     <aura:attribute name="recordId" 
                     type="String"/>
    <aura:attribute name="recordError" 
                    type="String" 
	                description="An error message bound to force:recordData"/>
        
    <aura:attribute name="opporRecord" 
                    type="Opportunity" 
	                description="A simplified view record object to be displayed"/>

      <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.oppor}"
                      targetFields="{!v.opporRecord}"
                      targetError="{!v.recordError}" 
                      mode="EDIT"
                      layoutType="FULL"
                      fields="Name,StageName,Amount"
                       recordUpdated="{!c.recordUpdated}"/>
                      
    
    <div class="slds-box">
    <div class="slds-text-heading_medium">
            Load Opportunity - Data Service
        </div>
        
          <div class="slds-form--stacked slds-tile">
            <div class="slds-form-element">
              
                <div class="slds-form-element__control">
                 <lightning:input aura:id="Name" 
                                  label="Name"
                             value="{!v.oppor.Name}"/>

                </div>
            </div> 
            <div class="slds-form-element">
                
                <div class="slds-form-element__control">
                    <lightning:input aura:id="StageName" 
                                     label="StageName"
                                     value="{!v.oppor.StageName}"/>

                </div>
            </div> 
              
               <div class="slds-form-element">
              
                <div class="slds-form-element__control">
                    <lightning:input aura:id="amt" 
                           label="Amount"
                             value="{!v.oppor.Amount}"/>

                </div>
            </div> 
              
              
        </div> 
                    <lightning:button aura:id="saveButton"
                                            label="Save Button"
                              onclick="{!c.SaveOppor}">
            </lightning:button>

    </div>
</aura:component>


({
	SaveOppor: function(component, event, helper) {
        component.find("recordLoader").saveRecord(function(saveResult) {
                if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                    // record is saved successfully
                    
                    var resultsToast = $A.get("e.force:showToast");
                    resultsToast.setParams({
                        "title": "Saved",
                        "message": "The record was saved.",
                        "mode":"sticky"
                    });
                    resultsToast.fire();
                    
                } 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));
                }
            });
 
    },
    
    recordUpdated : function(component, event, helper){
        var changeType = event.getParams().changeType;
		if (changeType === "CHANGED") {
            component.find("recordLoader").reloadRecord();
        }
    }
   
})

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Try this code. It is displaying and saving records correctly.

Component:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="recordInfo" type="Object" />
    <aura:attribute name="simpleRecord" type="Object"/>
    <aura:attribute name="recordId" type="String"/>

    <aura:handler event="force:refreshView" action="{!c.isRefreshed}" />
    
    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      layoutType="FULL"        
                      mode="EDIT"
                      targetRecord="{!v.recordInfo}"                        
                      targetFields="{!v.simpleRecord}"    
                      targetError="{!v.recordError}"
                      />
    
    
    
    <div class="slds-form--stacked">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="recordName">Opportunity Name</label>
            <div class="slds-form-element__control">
                <lightning:input label="name" value="{!v.simpleRecord.Name}" aura:id="accName"/>
            </div>
        </div>
        
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="recordOwnerName">Stage Name</label>
            <div class="slds-form-element__control">
                <lightning:input label="stage" value="{!v.simpleRecord.StageName}" aura:id="accStage"/>
            </div>
        </div>
        
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="accType">Close Date </label>
            <div class="slds-form-element__control">
                <lightning:input label="date" value="{!v.simpleRecord.CloseDate}" aura:id="accDate"/>
            </div>
        </div>
        
        <lightning:button aura:id="saveButton"
                          label="Save Button"
                          onclick="{!c.SaveOppor}">
        </lightning:button>
    </div>
</aura:component>

Controller:
({
    SaveOppor : function(component, event, helper) {
        component.find("recordLoader").saveRecord(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                // record is saved successfully
                
                var resultsToast = $A.get("e.force:showToast");
                resultsToast.setParams({
                    "title": "Saved",
                    "message": "The record was saved.",
                    "mode":"sticky"
                });
                resultsToast.fire();
                $A.get('e.force:refreshView').fire();
                
            } 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));
            }
        });
    },
    
    isRefreshed: function(component, event, helper) {
        location.reload();
    },
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer