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

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>

This Gist brought to you by gist-it.view rawsrc/aura/LightningRecordViewApp/LightningRecordViewApp.app

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>

This Gist brought to you by gist-it.view rawsrc/aura/LightningRecordViewCmp/LightningRecordViewCmp.cmp

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:-