Dynamic lightning-record-form component for Viewing a Record with Option to Edit Fields

Do you remember writing Aura Component using Lightning Data Services? Salesforce has introduced a new feature called Lightning Web Component which is based more on Web standard and less framework.

Getting started with Lightning Web Component-

Follow the steps given in Set Up Your Development Environment and it would be better to first understand the basics of Lightning Web Component. All about Lightning Web Components will provide with everything you need to know to get started.

A lightning-record-form component enables you to quickly create forms to add, view, or update a record. Using this component to create record forms is easier than building forms manually with lightning-record-edit-form and lightning-record-view-form. However, lightning-record-form does not support client-side validation quite the same as lightning-record-edit-form. See Client-Side Validation for more information.

The object-api-name attribute is always required, and the record-id is required unless you’re creating a record. This component takes care of field-level security and sharing for you, so users see only the data that they have access to.

Viewing a Record with Option to Edit Fields

Use mode="view" and pass the ID of the record and the corresponding object API name to be displayed. Specify the fields using the fields attribute, or layout-type attribute to display all the fields defined on the Full or Compact layout.

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectname}
        layout-type="Full"
        mode="view">
    </lightning-record-form>
</template>

Steps to follow:-

1. Create a project first:-
   • In Visual Studio code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows. Type SFDX.
   • Select SFDX: Create Project.
   • Enter (enter any name you want) as the project name.
   • Press Enter.
   • Select a folder to store the project.
   • Click Create Project.
2. Authorize Your Developer Edition As an Org in VS Code
   • In Visual Studio Code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows. Type SFDX.
   • Select SFDX: Authorize an Org.
   • Log in using your Dev Hub org credentials.
   • Click Allow.
3. Create a Lightning Web Component
   • In Visual Studio code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
   • Type SFDX.
   • Select SFDX: Create Lightning Web Component.
   • Press Enter to accept the default force-app/main/default/lwc.
   • Type recordForm for the name of the new component.
   • Press Enter.
   • View the newly created files in Visual Studio Code.
4. Paste below code in yourrecordForm.html file:-

The above code has a dynamic recordId property which is defined in recordForm.js file with @api decorator which will expose it publicly. The Lightning Web Component will get the current record id from the URL itself. We have another dynamic property objectname to tell the component via Lightning App Builder about Object to be used. It is defined with the same @api decorator.

The Lightning Web Components programming model has three decorators that add functionality to property or function. The ability to create decorators is part of ECMAScript, but @api, @track and @wire decorators are unique to Lightning Web Components.

To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property. To know more about decorators in Lightning Web Component, read Decorators.

Paste below code to recordForm.js file:-

import { LightningElement, api } from 'lwc';
export default class RecordForm extends LightningElement {
    @api recordId;
    @api objectname;
}

We are not giving any static value to property objectname, we will leave this to admins where they want to use the Lightning Web Component. They can use it on all the supported Objects for lightning-record-form. For a list of supported objects, see the User Interface API Developer Guide.

Have you remembered using Design in the Aura Component and getting the current record id? We are doing the same thing in Lightning Web Component.

The @api recordId; will automatically fetch the current record id and as it has binding with html file, it will render it with current record id.

Have you remembered using Interface to expose your Aura Component to the Home page or Record Page or to an App page? The same we will do in Lightning Web Component using *.js-meta.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="RecordForm">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
    <property name="objectname" type="String" />
    </targetConfig>
</targetConfigs>
</LightningComponentBundle>

Implementing an Aura interface enables you to receive context data or to surface your custom component in different contexts, such as in the Lightning App Builder or Community Builder.

To receive context data in a Lightning web component, import the corresponding module. To surface a component in different contexts, use the targets metadata in your *.js-meta.xml configuration file.

To know more about Interface in Lightning Web Component, see Migrate Interfaces

To deploy the code to your org,

1. Right-click the default folder. 

   

2. Click SFDX: Deploy Source to Org.
   In the Output tab of the integrated terminal, view the results of your deployment. You should have also received a notice that states: SFDX: Deploy Source to Org … ended with exit code 0. This means that the command ran successfully.

Add Component to App in Lightning Experience

1. In Visual Studio Code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
2. Type SFDX.
3. Select SFDX: Open Default Org.
4. Go to the record Page where You want to add the Component in Lightning Experience
5. Click the Setting icon in the right top corner and select edit page option
6. Drag the component to page layout and save it, if not activated already, make to activate it

You will see the Component on Lightning Record Page as below:-

Wooah !!!