function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NAVIN SELVARAJ 5NAVIN SELVARAJ 5 

lightning:recordForm

Hi All,
I would like to display the contact details using <lightning:recordForm/>. But When I am trying to that, It is not working. Could Please help me out regarding this.

Here with I wull put my code. If anyof you having working code with <lightning:recordForm/> Please let me know as well.
<lightning:recordForm
                              recordId="0036F00002XkajhQAB"
                              objectApiName="Contact"
                              fields="Id"
                              columns="2"
                              layoutType ="Full"
                              mode="View"
                              onsuccess="{!c.myAction}"/>
@@@we@@@@@@we@@@
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasSObjectName,force:hasRecordId,force:lightningQuickAction" access="global" > <aura:attribute name="fieldsList" type="String[]" default="['Id', 'Name', 'BillingAddress']"/> <div> <center>

<h1><b>Lightning Record Form<br/> Object_Name: {!v.sObjectName} - Record_Id: {!v.recordId} </b> </h1> </center> </div> <div class="THIS"> <lightning:recordForm recordId="{!v.recordId}" objectApiName="{!v.sObjectName}" fields="{!v.fieldsList}" columns="2" mode="View" onsuccess="{!c.myAction}"/> </div> </aura:component>
SandhyaSandhya (Salesforce Developers) 
Hi,

Refer below blog which has sample code for editing and displaying records with lightning:recordForm

http://sfdcfacts.com/lightning/lightningrecordform-powerful-component-for-viewing-and-editing-record-in-lightning/
 
Please mark it as solved if my reply was helpful. It will make it available for other as the proper solution.
                                             
Best Regards
Sandhya
 
 
bhanu_prakashbhanu_prakash
Hi Navin,
Mark as best answer, If it resloves !!​

Don't hardcode fields in component .
Create a attribute for those fields and call in component and onSucess call your action on controller  
<aura:attribute name ="recordId" type ="Id" default ="" />
<aura:attribute name ="myfields" type ="String[]" default = "['Name','Contact']"/>

  <lightning:recordForm aura:id="recordViewForm"
                              recordId="{!v.recordId}"
                              objectApiName="Opportunity"
                              fields="{!v.myfields}"
                              columns ="2"
                              onsuccess="{!c.myAction}"/>
Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com ​  (https://www.forcelearn.com)
 
NAVIN SELVARAJ 5NAVIN SELVARAJ 5
Hi Sandhya / bhanu_prakash,
I will Show few Details of the contact in table. If i click any contact, I will open the panel in the right side and show the complete details of the contact using lightning:recordForm.
Herewith I will attach my complete code. Please refer and let me know where i went wrong.  
Thanks in Advance.

DataTablePanel.cmp 
<aura:component controller="AccountsController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="test" type="boolean" default="false"/>
    <aura:attribute name="fullPage" type="boolean" default="true"/>
    <aura:attribute name="contactList" type="Contact"/>
    <aura:attribute name="contactObj" type="Contact"/>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name ="myfields" type ="String[]"  
                    default =
                    "[
                     'Id',
                     'FirstName'
                     ]"
                    />

    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <aura:if isTrue="{!(v.fullPage)}">
    <div class="slds-grid slds-gutters">  
        <div class="slds-col slds-size_3-of-3">
       <table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Id">ID</div>
      </th>
        <th scope="col">
        <div class="slds-truncate" title="FIRST NAME">FIRST NAME</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="LAST NAME">LAST NAME</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="EMAIL">EMAIL</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Contact">Contact</div>
      </th>
    </tr>
  </thead>
  <tbody>
        <aura:iteration items="{!v.contactList}" var="ct">
            <aura:if isTrue="{!and(ct.Phone,ct.Email)}">
            <tr>
                <th scope="row" data-label="Id">
                    <div class="slds-truncate"  title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.Id }</div>
                </th>
                 <td data-label="First Name">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.FirstName }</div>
                </td>
                <td data-label="Last Name">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.LastName }</div>
                </td>
                <td data-label="Email">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.Email }</div>
                </td>
                <td data-label="Phone">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.Phone }</div>
                </td>
            </tr>
                </aura:if>
        </aura:iteration>
    </tbody>
</table>
        </div>
    </div>
    </aura:if>

    <aura:if isTrue="{!(!v.fullPage)}">
	<div class="slds-grid slds-gutters">  
  <div class="slds-col slds-size_6-of-10">
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Id">ID</div>
      </th>
        <th scope="col">
        <div class="slds-truncate" title="FIRST NAME">FIRST NAME</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="LAST NAME">LAST NAME</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="EMAIL">EMAIL</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Contact">Contact</div>
      </th>
    </tr>
  </thead>
  <tbody>
        <aura:iteration items="{!v.contactList}" var="ct">
            <aura:if isTrue="{!and(ct.Phone,ct.Email)}">
            <tr>
                <th scope="row" data-label="Id">
                    <div class="slds-truncate"  title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.Id }</div>
                </th>
                 <td data-label="First Name">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.FirstName }</div>
                </td>
                <td data-label="Last Name">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.LastName }</div>
                </td>
                <td data-label="Email">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.Email }</div>
                </td>
                <td data-label="Phone">
                    <div class="slds-truncate" title="{! ct.Id }" onclick="{!c.getContactObject}">{! ct.Phone }</div>
                </td>
            </tr>
                </aura:if>
        </aura:iteration>
    </tbody>
</table>
  </div>
  <div class="slds-col slds-size_4-of-10">
    <aura:if isTrue="{!v.test}">  
    <div class="slds-panel slds-size_full slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
  <div class="slds-panel__header">
    <h2 class="slds-panel__header-title slds-text-heading_small">Panel Header</h2>
   <button class="slds-button" onclick="{!c.closePanel}">
    <lightning:icon iconName="utility:close" size="medium" alternativeText="Move this item up" />
</button>
  </div>
  <div class="slds-panel__body">   
<!--Here Only I need to display the particulr details of the contact using lightning:recordForm, Once the contact is clicked, this panel will be enabled and details are not showing. -->   
       <lightning:card iconName="standard:contact" title="Read Only lightning:recordForm">
        <div class="slds-p-left_large slds-p-right_medium">	
            <lightning:recordForm aura:id="recordViewForm" 
                                  objectApiName="Contact"
                                  recordId="{!v.recordId}"
                                  layoutType ="Full"
                                  mode="view"
                                  />   
        </div>
    </lightning:card>
 
        </div>
</div>
    </aura:if> 
  </div>
</div>
    </aura:if>
</aura:component>

DatTabelPanelController 
({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContactList");
        action.setCallback(this, function(response){
            var data = response.getReturnValue();
            component.set("v.contactList", data);
        });
        $A.enqueueAction(action);
    },
    
    closePanel : function(component, event, helper) {
  			component.set("v.test", false);
        component.set("v.fullPage", true);
    },
    
    getContactObject : function(component, event, helper) {
        var contactId = event.target.title;
        var action = component.get("c.getContact");
        action.setParams({ 
      			"contactId": contactId
 					 });
        action.setCallback(this, function(response){
            var data = response.getReturnValue();
            component.set("v.contactObj", data);
            component.set("v.recordId", contactId);
        });
        component.set("v.test", true);  
        component.set("v.fullPage", false);

		$A.enqueueAction(action);
        
	},
    handleSuccess : function(component, event, helper) {
        alert("Hello World");
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been updated successfully.",
            "type": "success"
        });
        toastEvent.fire();
    }
})

AccountsController 
public class AccountsController 
{      
    @AuraEnabled
    public static List<Contact> getContactList() 
    {  
        List<Contact> contactList = [SELECT Id, FirstName, LastName, Email, Phone FROM Contact];
        System.debug('contactList ::' + contactList);
        return contactList;   
    }
    
    
    @AuraEnabled
    public static Contact getContact(Id contactId) 
    {  
        Contact contactObj = [SELECT Id, FirstName, LastName, Email, Phone FROM Contact WHERE id =: contactId];
        System.debug('contactObj ::' + contactObj);
        return contactObj;   
    }
    
    
    @AuraEnabled
    public static List<Account> getAccountWithCases() 
    {  
        List<Account>  accountContactList = [SELECT Id,CreatedbyID,Account.Name,(SELECT name,Contact.FirstName, Contact.LastName FROM Account.Contacts) FROM Account WHERE Id IN (SELECT AccountId FROM Contact)];
        /*
        for(Account accountObj : accountContactList) {
            if(accountObj.Contacts.size() > 0) {
                 System.debug('accountObj 12::' + accountObj +' '+ accountObj.Contacts);
            }
           
        } */
        
        return accountContactList;
    }
    
    
    
}

Thanks in Advance,
Best Regards,
Navin S ​