lightning-record-form in LWC

 Using lightning-record-form we can create forms to add, view, or update a record.

Sample syntax:

<lightning-record-form

    record-id="IdOfParticularRecord"

    object-api-name="Account"

    layout-type="Compact"

    columns="1"

    mode="readonly">

</lightning-record-form>

For all the above mode we need to specify the fields or the layoutType attribute.

We use fields attribute to pass record field as an array of string.The fields are
displayed in the order we list them.

We use layoutType attribute to specify a Full or Compact layout. If we use this then the field
available on the layout are displayed in the form.

If both fields and layoutType are provided, the fields we define in the fields attribute are displayed
first and than the other fields from the given layout type. If a field is available in both the fields attribute and layout type attribute, the field is displayed before the other fields from the layout type.

Note:

1)Not all standard object are supported.
For ex: Event and task.

2)If you do not specify the mode attribute, its default value is edit.

Let us create a lightning web component using lightning-record-form which we will place on Account detail page.

recordDetailCheckComp.html

<template>

    <lightning-card

            variant="narrow"

            icon-name="standard:Account"

            title="custom detail view">

       <lightning-record-form

    record-id={recordId}

    object-api-name="Account"

    layout-type="Full"

    columns="2"

    mode="view">

</lightning-record-form>

 

    </lightning-card>

</template>

recordDetailCheckComp.js

import { LightningElement,api } from 'lwc';

 

export default class RecordDetailCheckComp extends LightningElement {

 

    @api recordId;

 

}

recordDetailCheckComp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

Output: