SFDC Stop - Always the latest about Salesforce


Full Tutorial Series with videos, free apps, live sessions, salesforce consulting and much more.


Telegram logo   Join our Telegram Channel

Sunday 15 April 2018

Create a Lightning Component to view a record in 5 minutes (lightning:recordViewForm)

Recently, Salesforce has launched a number of new tags to make your task of building custom lightning components more easier. This is the first post in the Salesforce Lightning Tags Tutorial Series. In this post, I am going to talk about one of those tag which is :- <lightning:recordViewForm />. So, in the next 5 minutes we are going to learn about this tag and make our lightning component to view a specific record. Excited ? Let's get started..!!

I am going to make a lightning app and a single lightning component which will be called by that application so that you can see the preview directly without embedding that component in any page. So the time starts now..!!

LightningRecordViewApp.app - Lightning Application

<!-- 
    Lightning Application to call LightningRecordViewCmp.
    This app is extending force:slds to implement styling for using lightning design system classes
-->
<aura:application extends="force:slds">
    <!-- Calling LightningRecordViewCmp and passing a record Id -->
    <c:LightningRecordViewCmp recordId="0037F00000666yOQAQ" />
</aura:application>
As you can see in the above code, I have made a simple lightning application in which I have extended force:slds so that we can use slds in our application as well as in all the lightning components that are included in this application. This application is calling LightningRecordViewCmp by passing a recordId of a contact record as I am going to display a contact record in my lightning component. So, let's jump on to the component now.

LightningRecordViewCmp.cmp - Lightning Component

<!-- Lightning Component to display a record -->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <!-- 
        Using lightning:recordViewForm tag record Id and objectApiName is required to fetch record.
        For custom objects, do check you have __c in the api name
    -->
    <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Contact">
        <!-- Using lightning:card tag with a title -->
        <lightning:card title="Contact Details">
            <!-- lightning:card body section starts -->
            <p class="slds-p-horizontal_small">
                <!-- Forming a grid of two equal columns -->
                <div class="slds-grid">
                    <div class="slds-col slds-size_1-of-2">
                        <!-- 
                            Using lightning:outputField Tag with fieldName = Api name of field,
                            if you are using a custom field, do check you have __c in the api name
                         -->
                        <lightning:outputField fieldName="FirstName" />    
                        <lightning:outputField fieldName="LastName" />    
                        <lightning:outputField fieldName="MobilePhone" />    
                    </div>
                    <div class="slds-col slds-size_1-of-2">
                        <lightning:outputField fieldName="AccountId" />    
                        <lightning:outputField fieldName="Department" />    
                        <lightning:outputField fieldName="Birthdate" />    
                    </div>
                </div>
            </p>
        </lightning:card>        
    </lightning:recordViewForm>
</aura:component>
In the above code, you can see that I have made a lightning component which is implementing force:hasRecordId along with the other implementations used to include lightning component in page, tabs and other locations. The force:hasRecordId tag adds a hidden attribute to our lightning component which we can access by its name i.e. recordId. Now, I have used lightning:recordViewForm tag. This tag mainly require 2 attributes i.e. the recordId of the record we have to fetch and the objectApiName i.e. the api name of object whose record we are getting. I have given the record Id of a contact by accessing the record Id we have passed through application and used Contact as the objectApiName as it is a standard object, in case of custom object, you can use it's api name that will include __c in the end. In the body of this tag I have made a simple lightning card with title Contact Details and in the card body, I have used simple slds classes to divide the body into two equal halves.

I have used lightning:outputField to display the fields of the contact record. It is another lightning tag given by salesforce which looks for the recordId in the parent lightning:recordViewForm and fetch the correct value based on the fieldName you have given for that particular record. The fieldName should be the api name of the field. In case of custom field, you'll be having __c at the end so make sure to use the exact api name. In my case, I have accessed the contact fields by giving their api names.

If you look at the second half, I have used AccountId which is the api name of account lookup on contact object. You'll see the account name in the app preview but when you embed this component in any contact detail page, you'll see the link to account instead of just name. So, this tag supports lookup field as well. Amazing..!!

Now, when you run your app, you'll see a lightning component like this:-


Congratulations..!! You just made a custom lightning component within 5 minutes to display a record. Tired of reading or just scrolled down ?? Don't worry, you can watch the video too.



You can access the whole code for this component and for all other components that we'll be discussing about in future by visiting the github repository here. If you liked this post then do share it in your circle so that others can get benefit too. And don't forget to comment your views and how you implemented this tag in your use case. For more deeper understanding about lightning:recordViewForm you can visit the original documentation of Salesforce here.

Happy Trailblazing..!!

15 comments:

  1. Rahul Sir Hi,

    In the coming times, can we have a tutorial on field set(Where we can add fields dynamically),schema,wrapper class.(whenever you get time)

    ReplyDelete
    Replies
    1. Surely will keep this in the pipeline. Thanks for your suggestion :-)

      Delete
  2. Replies
    1. I will publish a new one by coming monday Aman. Stuck in professional work. Sorry for the delay.

      Delete
  3. Could you please guide how to access other links on Lightning.

    ReplyDelete
    Replies
    1. Hi Pramita, Can you please elaborate what you're trying to ask regarding other links ?

      Delete
  4. Hi Rahul,
    Hope you are doing well. I have a concerned in lightning. My query is that I am unable to do the implementation of Google Autocomplete Address Validator in lightning, but same it works for Classic on Visualforce Page. I have had convert the visualforce based code into the lightning component with another Google API key but still it fires the error. Somewhere,it may be the way I have done go wrong.

    Scanerio: When user select the Street i.e. input box from google Address Validator,then it will autopopulate the value of field city,state,PostalCode and Country on the basis of street number.

    Hope you understand above explanation.

    Quick response is much appreciated.

    Thanks& Regards,
    M B KRRISH KUMAR

    ReplyDelete
    Replies
    1. Already replied you at mail. Kindly message me on twitter directly if you have any further queries. My twitter handle:- https://www.twitter.com/rahulcoder

      Delete
  5. Its a Great illustration Rahul. Thanks for sharing. I made sure am following your blog :)

    ReplyDelete
    Replies
    1. Thanks for the same :-) Make sure to share this in your network if you find it useful.

      Delete
  6. Hi Rahul,
    What if I want to view the record with inline editing and also if I have custom components added within the form such as upload ? Please let me know how to achieve this.

    ReplyDelete
    Replies
    1. Hi Arpitha, can you DM me the whole use case as it's difficult to discuss this using comments. You can post your query on the telegram group :- https://t.me/joinchat/LavReljDKkknR_k8cnM-HQ and I'll respond there

      Delete
  7. Hi Rahul,

    Can you please answer how to preview image which is a field using RecordViewForm in lightning?

    ReplyDelete
    Replies
    1. Hi Akshata, can you give some more info ? How are you storing an image in a field ? Is it a URL or something else ?

      Delete
  8. Hi Rahul,

    Thanks for making such video tutorials. Really helpful for new developers.

    ReplyDelete