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

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)





No comments:

Post a Comment