Sample Code:
HTML:
<template>
Test from Record Detail Page – {recordId}.
<lightning-record-form
object-api-name=”Account”
record-id={recordId}
layout-type=”Compact”
columns=”1″
mode=”readonly”>
</lightning-record-form>
</template>
Test from Record Detail Page – {recordId}.
<lightning-record-form
object-api-name=”Account”
record-id={recordId}
layout-type=”Compact”
columns=”1″
mode=”readonly”>
</lightning-record-form>
</template>
JavaScript:
import { LightningElement,api } from ‘lwc’;
export default class RecordDetailComponent extends LightningElement {
@api recordId;
}
js-meta.xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
<targetConfig targets=”lightningCommunity__Default”>
<property
name=”recordId”
type=”String”
label=”Record Id”
description=”Automatically bind the page’s record id to the component variable”
default=”{!recordId}” />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
<targetConfig targets=”lightningCommunity__Default”>
<property
name=”recordId”
type=”String”
label=”Record Id”
description=”Automatically bind the page’s record id to the component variable”
default=”{!recordId}” />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Output:
