LWC Lightning Web Component in Record Context(recordId in LWC)

HomeInfallibleTechie Admin

LWC Lightning Web Component in Record Context(recordId in LWC)

InfallibleTechie Admin

Sample Code:

Example 1:

LWC HTML:

<template>
    <lightning-card>
        {recordId}
    </lightning-card>
</template>

LWC JavaScript: 

import { LightningElement, api } from 'lwc';

export default class RecordPage extends LightningElement {

    @api recordId;
   
}

LWC js-meta.xml:   

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed> 
    <targets> 
        <target>lightning__RecordPage</target> 
    </targets> 
</LightningComponentBundle> 

Output: 

Example 2:

LWC HTML:

<template>  
  <lightning-card  title="Case Mini View">  
      <lightning-record-view-form record-id={recordId}    
                                  object-api-name="Case">    
          <div class="slds-grid slds-wrap">    
              <div class="slds-col slds-size_1-of-2">                                
                  <lightning-output-field field-name="Subject">    
                  </lightning-output-field>    
              </div>    
              <div class="slds-col slds-size_1-of-2">    
                  <lightning-output-field field-name="Status">    
                  </lightning-output-field>    
              </div>    
              <div class="slds-col slds-size_1-of-2">                                
                  <lightning-output-field field-name="Reason">    
                  </lightning-output-field>    
              </div>    
              <div class="slds-col slds-size_1-of-2">    
                  <lightning-output-field field-name="Origin">    
                  </lightning-output-field>    
              </div>    
          </div>    
      </lightning-record-view-form>  
  </lightning-card>  
</template>

LWC JavaScript:

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

LWC js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>  
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
    <apiVersion>48.0</apiVersion>  
    <isExposed>true</isExposed>  
    <targets>  
        <target>lightning__RecordPage</target>  
    </targets>  
</LightningComponentBundle>

Output:

Leave a Reply