lightning-record-edit-form and lightning-record-view-form example Salesforce LWC

HomeInfallibleTechie Admin

lightning-record-edit-form and lightning-record-view-form example Salesforce LWC

InfallibleTechie Admin
lightning-record-edit-form and lightning-record-view-form example Salesforce LWC


Aura Component:

  1. <aura:component implements=“force:lightningQuickAction,force:hasRecordId”>  
  2.     <c:caseEscalation recId=“{!v.recordId}”/>  
  3. </aura:component>   



LWC HTML:

  1. <template>  
  2.   
  3.         <div class=“slds-m-around_medium”>     
  4.   
  5.             <template if:true={newBool}>  
  6.                   
  7.                     <lightning-record-edit-form object-api-name=“Case”  
  8.                                                 onsuccess={handleCreate}  
  9.                                                 record-type-id=“0123i000000IC1dAAG”>  
  10.                         <lightning-messages></lightning-messages>  
  11.                         <div class=“slds-grid slds-wrap”>  
  12.                             <div class=“slds-col slds-size_1-of-2”>                              
  13.                                 <lightning-input-field field-name=“Subject”>  
  14.                                 </lightning-input-field>  
  15.                             </div>  
  16.                             <div class=“slds-col slds-size_1-of-2”>  
  17.                                 <lightning-input-field field-name=“Status”>  
  18.                                 </lightning-input-field>  
  19.                             </div>  
  20.                             <div class=“slds-col slds-size_1-of-2”>                              
  21.                                 <lightning-input-field field-name=“Reason”>  
  22.                                 </lightning-input-field>  
  23.                             </div>  
  24.                             <div class=“slds-col slds-size_1-of-2”>  
  25.                                 <lightning-input-field field-name=“Origin”>  
  26.                                 </lightning-input-field>  
  27.                             </div>  
  28.                             <div class=“slds-col slds-size_1-of-2”>  
  29.                                 <lightning-input-field field-name=“ParentId” value={recId}>  
  30.                                 </lightning-input-field>  
  31.                             </div>  
  32.                         </div>  
  33.                         <lightning-button class=“slds-m-top_small”  
  34.                                             type=“submit”  
  35.                                             label=“Create new”>  
  36.                                             </lightning-button>  
  37.                     </lightning-record-edit-form>  
  38.       
  39.             </template>  
  40.   
  41.             <template if:true={parentCaseId}>                      
  42.   
  43.                 <template if:true={viewBool}>  
  44.                   
  45.                         <lightning-record-view-form record-id={parentCaseId}  
  46.                                                     object-api-name=“Case”>  
  47.                             <div class=“slds-grid slds-wrap”>  
  48.                                 <div class=“slds-col slds-size_1-of-2”>                              
  49.                                     <lightning-output-field field-name=“Subject”>  
  50.                                     </lightning-output-field>  
  51.                                 </div>  
  52.                                 <div class=“slds-col slds-size_1-of-2”>  
  53.                                     <lightning-output-field field-name=“Status”>  
  54.                                     </lightning-output-field>  
  55.                                 </div>  
  56.                                 <div class=“slds-col slds-size_1-of-2”>                              
  57.                                     <lightning-output-field field-name=“Reason”>  
  58.                                     </lightning-output-field>  
  59.                                 </div>  
  60.                                 <div class=“slds-col slds-size_1-of-2”>  
  61.                                     <lightning-output-field field-name=“Origin”>  
  62.                                     </lightning-output-field>  
  63.                                 </div>  
  64.                             </div>  
  65.                         </lightning-record-view-form>  
  66.   
  67.                 </template>  
  68.                   
  69.                 <template if:true={editBool}>  
  70.   
  71.                     <lightning-record-edit-form record-id={parentCaseId}  
  72.                                                 object-api-name=“Case”  
  73.                                                 onsuccess={handleSuccess}>  
  74.                         <lightning-messages>  
  75.                         </lightning-messages>  
  76.                         <div class=“slds-grid slds-wrap”>  
  77.                             <div class=“slds-col slds-size_1-of-2”>                              
  78.                                 <lightning-input-field field-name=“Subject”>  
  79.                                 </lightning-input-field>  
  80.                             </div>  
  81.                             <div class=“slds-col slds-size_1-of-2”>  
  82.                                 <lightning-input-field field-name=“Status”>  
  83.                                 </lightning-input-field>  
  84.                             </div>  
  85.                             <div class=“slds-col slds-size_1-of-2”>                              
  86.                                 <lightning-input-field field-name=“Reason”>  
  87.                                 </lightning-input-field>  
  88.                             </div>  
  89.                             <div class=“slds-col slds-size_1-of-2”>  
  90.                                 <lightning-input-field field-name=“Origin”>  
  91.                                 </lightning-input-field>  
  92.                             </div>  
  93.                         </div>  
  94.                         <lightning-button  
  95.                             class=“slds-m-top_small”  
  96.                             variant=“brand”  
  97.                             type=“submit”  
  98.                             name=“update”  
  99.                             label=“Update”>  
  100.                         </lightning-button>  
  101.                     </lightning-record-edit-form>  
  102.   
  103.                 </template>  
  104.   
  105.             </template >  
  106.   
  107.         </div>  
  108.       
  109. </template>  



LWC JS:

  1. import { LightningElement, api, wire, track } from ‘lwc’;  
  2. import fetchCase from ‘@salesforce/apex/CaseEscalationController.fetchCase’;  
  3. import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;  
  4.   
  5. export default class CaseEscalation extends LightningElement {  
  6.   
  7.     @api recId;  
  8.     @track parentCaseId;  
  9.     @track viewBool;  
  10.     @track editBool;  
  11.     @track newBool;  
  12.   
  13.     @wire(fetchCase, { strRecordId: ‘$recId’ })  
  14.     caseRecord({ error, data }) {  
  15.   
  16.         if ( data ) {  
  17.   
  18.             this.parentCaseId = data.Id;  
  19.   
  20.         }   
  21.         if ( this.parentCaseId ) {  
  22.   
  23.             this.newBool = false;  
  24.             this.editBool = true;  
  25.   
  26.         } else{  
  27.               
  28.             this.newBool = true;  
  29.             this.editBool = false;  
  30.   
  31.         }  
  32.         this.viewBool = false;  
  33.           
  34.     }  
  35.   
  36.     handleSuccess( event ) {  
  37.           
  38.         const toastEvent = new ShowToastEvent({  
  39.             title: ‘Case Updated’,  
  40.             message: ‘Case Updated Successfully!!!’,  
  41.             variant: ‘success’  
  42.         });  
  43.         this.dispatchEvent( toastEvent );  
  44.         this.viewBool = true;  
  45.         this.editBool = false;  
  46.         this.newBool = false;  
  47.   
  48.     }  
  49.   
  50.     handleCreate( createEvent ) {  
  51.           
  52.         const toastEvent = new ShowToastEvent({  
  53.             title: ‘Case Created’,  
  54.             message: ‘Case Created Successfully!!!’,  
  55.             variant: ‘success’  
  56.         });  
  57.         this.dispatchEvent( toastEvent );  
  58.         this.viewBool = true;  
  59.         this.editBool = false;  
  60.         this.newBool = false;  
  61.         this.parentCaseId = createEvent.detail.id;  
  62.   
  63.     }  
  64.   
  65. }  



LWC JS-META.XML:

  1. <?xml version=“1.0” encoding=“UTF-8”?>  
  2. <LightningComponentBundle xmlns=“http://soap.sforce.com/2006/04/metadata” fqn=“CaseEscalation”>  
  3.     <apiVersion>47.0</apiVersion>  
  4.     <isExposed>false</isExposed>    
  5.     <targets>      
  6.         <target>lightning__RecordPage</target>      
  7.     </targets>      
  8.     <targetConfigs>      
  9.         <targetConfig targets=“lightning__RecordPage”>      
  10.             <property name=“recId” type=“String” label=“Record Id” description=“Record Id”/>      
  11.         </targetConfig>    
  12.     </targetConfigs>     
  13. </LightningComponentBundle>  



Apex Class:

  1. public class CaseEscalationController {  
  2.       
  3.     @AuraEnabled( cacheable=true )      
  4.     public static Case fetchCase( String strRecordId )  {   
  5.           
  6.         system.debug( ‘Id is ‘ + strRecordId );  
  7.         List < Case > listCases = [ SELECT Id FROM Case WHERE ParentId =: strRecordId LIMIT 1 ];  
  8.           
  9.         if( listCases.size() > 0 )  
  10.             return listCases.get( 0 );  
  11.         else  
  12.             return null;  
  13.           
  14.     }  
  15.   
  16. }  

Output:
Case without already created Escalation Case(Case not tied to the viewing Case through Parent Case)


Case with already created Escalation Case(Case tied to the viewing Case through Parent Case)




2 thoughts on “lightning-record-edit-form and lightning-record-view-form example Salesforce LWC”

    • Yes. If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don't have a default record type. Otherwise, the default record type ID is used.

Leave a Reply