Lightning

Salesforce Cookies #8

Naval Sharma Salesforce Cookies , , , , , ,

How to use namespace in managed lightning components

If you are working on a lightning component and it’s going to be a part of a managed package then you need to take care of namespace in client side JS code if you are accessing any custom field. This can be handled in various ways but I found one very quick way to handle this. Using wrapper could be a best way but it’s time consuming so you can use the following way.

Get the namesapce from server side controller and use that in the lightning components.

NamespaceDemoComp.cmp

NamespaceDemoCompController.cls

NamespaceDemoCompController.js

NamespaceDemoCompHelper.js

So, you can see in the above example that using namespace in JS code can save lot of time as compared to wrapper classes. Expense__c is a custom object and this code will take care of the namespace automatically based on the running environment. If there is a namespace then it will be added as suffix with field’s API names in JS code.

Happy coding 🙂

Salesforce Cookies #7

Naval Sharma Salesforce Cookies , , , , , , , , , , , , ,

Untitled

Calling a child lightning component method from the parent lightning component

When we have multiple nested components then we may run into a scenario in which our parent lightning component is supposed to call a method of its child component. This is a very common use case.


simplifies the code needed for a parent component to call a method on a child component that it contains

The lightning component framework has  which simplifies the code needed for a parent component to call a method on a child component that it contains. Following example states pretty everything you want to know about it.

Declare the method defination and it’s parameters in child component as explained below.

<aura:method name="handleShowHidePopupEvent" action="{!c.handleShowHidePopupEventAction}" description="Method to show or hide the popup from a button on the parent component">
    <aura:attribute name="showPopup" type="Boolean" default="true"/>
</aura:method>

Create a handler method in the client side controller of the same child component

({
   handleShowHidePopupEventAction : function(cmp, event) {
     var params = event.getParam('arguments');
     if (params) {
       var showPopup = params.showPopup;
       if(showPopup) {
         var cmpTarget = cmp.find('popupParentDiv');
         $A.util.removeClass(cmpTarget, 'slds-hide');
       } else {
         var cmpTarget = cmp.find('popupParentDiv');
         $A.util.addClass(cmpTarget, 'slds-hide');
       }
     }
   }
})

Above code snippet is toggling a parent div of the popup (model). You can also write any specific logic here which you just want to have in the child component only.

Calling method from the parent component – To close the popup after executing the save button logic or cancel button logic

<c:editRecordComponent aura:id="editRecordCmp"/>
<button class="slds-button" type="button" onclick="{!c.saveRecord}"> Save & Close </button>
<button class="slds-button" type="button" onclick="{!c.cancel}"> Cancel </button></pre>

Method in parent component controller

({
  cancel : function(cmp, helper, event){

    var editRecordCmp = component.find("editRecordCmp");
    editRecordCmp.handleShowHidePopupEvent( false );
  }
})

can also return a value once the execution has been completed.

To read more about, please check aura:method in Lightning Components Developer Guide.

Happy coding 🙂

Salesforce Cookies #2

Naval Sharma Salesforce Cookies , , , , , , ,

Now using Lightning Design System in Lightning Application is easier – No static resource is required to include CSS files. An application automatically gets Lightning Design System styles and design tokens if it extends force:slds.

Same behaviour can be accomplished in Visualforce pages with the help of apex:slds component. Include  /> in a Visualforce page to use Lightning Design System stylesheets in the page.

Validate Visualforce form in lightning speed using VFValidator

Naval Sharma Salesforce Recipes , , , , ,

While working on custom development, I found that form validation is the essential need for any developer in terms of data quality. I took a couple of hours to write code for the validation whether it is client side or server side and which gave me an idea to come up with a generic solution which can be used by any developer. To come up with a generic solution, I created one Visualforce component which can be embedded in any Visualforce page to validate the form.

Using VFValidator, you can do the common form validations. I am trying to evolve this as much as I can. I will try to keep my post very simple so everyone can be benefitted.

How to use VFValidator

Using VFValidator is very straightforward and quick. You just need to embed the VF component in your Visualforce page. Here is the syntax.

<c:VFValidator formId="FORM_ID"/>

FORM_ID : Form where you want to have the validation. 
By default its "frm" if you are not passing the ID.

After embedding the component, you will have to use some specific classes with your input components. Each class has its own purpose and there are limited classes which you can use. Here are the details about each class and its purpose.

  • required : To make a field required
  • email : To check the validity of the email address
  • phone :  To verify a valid phone number, only allows 123-456-7890 format
  • number  : To restrict field for digits only
  • password: To check the password strength, Must be 8 characters and must contain 1 digit and special character

VFValidator Sample code

<c:VFValidator></c:VFValidator>
<apex:inputText id="firstName" styleClass="required slds-input" value="{!Contact.FirstName}"/>

Screenshot_1.png

If you want to check the demo of VFValidator then here is the VFValidator DEMO Link. I have also created a GitHub repository.

Please feel free to give your feedback. Thanks in advance!!