No Apex Lightning components!

No Apex Lightning components!

No Apex needed for submitting the form data to backend from Spring ’18, 2018 release, In Spring ’18 salesforce introduced following two new base lightning components which brings flexibility in submitting the form to backend with FLS and Field level validation enforced.

lightning:recordEditForm and lightning:inputField.

By using this new base lightning component No custom javascript and no Apex needed for updating the form data to backend.

Also two more new base lightning components for showing the form in UI level with lot more metadata information and SLDS styling.

lightning:recordViewForm and lightning:outputField.

 

Working Example : –

I created this as a Lightning record page on case object, Div class properties in components are utilised from Lightning design system for perfect field alignment,

I just created a boolean attribute called editMode which will be fired when the user clicks on Edit button to show the form in Edit mode, Once user clicks on submit record Onsuccess event associated with  <lightning:recordEditForm> will be fired to set the flag to false to display the form in view mode. editMode value changes are done with the help of lightning controller.

Finally i created a CSS called CaseLightningComponent.css to have a perfect alignment of fields

 

CaseLightningComponent.cmp

<aura:component description="LightningComponent" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<aura:attribute name="recordId" type="Id" />
 <aura:attribute name="editMode" type="Boolean" default="false" />

<div class="slds-box slds-theme_default">

<aura:if isTrue="{!v.editMode}">
 
 
 <lightning:recordEditForm aura:id="recordViewForm" onsuccess="{!c.submitCase}" recordId="{!v.recordId}" objectApiName="Case">
 <lightning:messages />
 
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 
 <lightning:inputField fieldName="SuppliedName" />
 </div>
 
 <div class="slds-col" style="width:100%">
 <lightning:inputField fieldName="SuppliedPhone" />
 </div> 
 
 <div class="slds-col" style="width:100%">
 <lightning:inputField fieldName="SuppliedEmail" />
 </div> 
 
 </div> 
 <lightning:button aura:id="submit" type="submit" label="Submit record" class="slds-m-top_medium" />
 </lightning:recordEditForm>
 
 
 <!--- UI level Form display -->
 <aura:set attribute="else">
 <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
 <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Case"> 
 <div class="slds-grid">
 <div class="slds-col" style="width:100%">
 
 <lightning:outputField fieldName="SuppliedName" />
 </div>
 
 <div class="slds-col" style="width:100%">
 <lightning:outputField fieldName="SuppliedPhone" />
 </div> 
 
 <div class="slds-col" style="width:100%">
 <lightning:outputField fieldName="SuppliedEmail" />
 </div> 
</div> 
 
 <lightning:button variant="brand" onclick="{!c.editCase}" name="edit" label="Edit" class="slds-m-top_medium"/>
 </lightning:recordViewForm>
 </div> 
 </aura:set> 
 </aura:if>
 </div>

</aura:component>

 

CaseLightningComponentController.js

({   

editCase: function(cmp, event, helper) {      

  cmp.set('v.editMode', true);    },     

submitCase: function(cmp, event, helper) {     

   cmp.set('v.editMode', false);

    }, 

   })

CaseLightningComponent.css

.THIS .slds-col {
 
 padding-top: 24px;
 
 padding-left: 32px;
 
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*