March 4, 2020

LWC Lightning Web Component in Record Context

Sample Code:

LWC HTML:

  1. <template>  
  2.   
  3.     <lightning-card  title="Case Mini View">  
  4.         <lightning-record-view-form record-id={recordId}    
  5.                                     object-api-name="Case">    
  6.             <div class="slds-grid slds-wrap">    
  7.                 <div class="slds-col slds-size_1-of-2">                                
  8.                     <lightning-output-field field-name="Subject">    
  9.                     </lightning-output-field>    
  10.                 </div>    
  11.                 <div class="slds-col slds-size_1-of-2">    
  12.                     <lightning-output-field field-name="Status">    
  13.                     </lightning-output-field>    
  14.                 </div>    
  15.                 <div class="slds-col slds-size_1-of-2">                                
  16.                     <lightning-output-field field-name="Reason">    
  17.                     </lightning-output-field>    
  18.                 </div>    
  19.                 <div class="slds-col slds-size_1-of-2">    
  20.                     <lightning-output-field field-name="Origin">    
  21.                     </lightning-output-field>    
  22.                 </div>    
  23.             </div>    
  24.         </lightning-record-view-form>  
  25.     </lightning-card>  
  26.   
  27. </template

LWC JavaScript:

  1. import { LightningElement, api } from 'lwc';  
  2.   
  3. export default class CaseMiniView extends LightningElement {  
  4.   
  5.     @api recordId;  
  6.       


LWC js-meta.xml:

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


Output:


No comments:

Post a Comment