3 things you need to create a “Most Reusable Lightning Component”

Creating a Lightning Component is easy, as Lightning Framework is very easy to learn and code. The very idea of switching to the component-based framework is to create reusable components which can be used on multiple pages/locations and can display the data dynamically. Are you creating such components?

What is needed to make a component reusable?

A component can be reusable if:

  • It can take the data from the outer world and display information based on the data supplied to it. For example, a component can accept record id from parent component and can record information based on the record id supplied to it.
  • It should raise events based on user interactions, which can be handled in the parent component. For example, an auto search component should fire an event with the user string when typed in character length is more than 3.
  • It should have functions which can return the data upon an on-demand request or call. For example, a list view component should be able to return the number of records displayed on the user’s request.

How does it work in Lightning Framework?

When we talk about Lightning Framework, you can achieve all the qualities using below features.

1. Attributes

Attributes are a great way to make your Lightning Components reusable and I am sure you are already using attributes in your components for storing different variable values. Attributes are not only limited to store the values from the current component’s manipulated data, but these also allow you to accept the data from the parent component.

  • Accept the values from parent/calling component. Parent component can supply these values at the time of component declaration.
  • Use these values to display your component details dynamically.

For example, let’s say you have a multi-select picklist component, which can display list items and multiple values can be selected. In this case, your component should be able to display the list items based on the data supplied to it. So you need to use attributes to accept these list-items from your parent component. Something like below:

<!– Child Component — c:MultiSelect –>

<aura:component>

    <aura:attribute name=”listItems” type=”List”/>

    <lightning:select name=’multiSelect’ aura:id=”multiSelect” label=’List Items’>

        <aura:iteration items=”{!v.listItems}” var=”item”>

            <option value=”{!item}” text=”{!item}” />

        </aura:iteration>

    </lightning:select>

</aura:component>

Above component can be called from a parent component, which can pass the value of “listItems” attribute. Now based on these values, the child component can show different information at different times.

<!– Parent Component — c:ParentComponent–>

<aura:component>

    <c:MultiSelect aura:id=”myMultiSelect” listItems=”[‘Apple’,’Google’,’Salesforce’,’Amazon’]” />

</aura:component>

2. Component Events

Component events are the best way to notify parent component about a change happening in child component. These events are fired from child component and can be handled in parent component.

  • The parent component can then execute JavaScript code whenever the event is being fired from child component.
  • These events can even carry the data as well, which can be supplied by child component and can be used in the parent component. Based on the event data, the parent component can execute different logic.

For example, above MultiSelect component may want to notify the parent component whenever a user is selecting a list item. To achieve this,

First, you need to create an event

<!– Component Event — MultiSelectItemSelection –>

<aura:event type=”COMPONENT” description=”This event will be fired whenever the user selects a list item” >

    <aura:attribute type=”String” name=”listItem” />

    <aura:attribute type=”Boolean” name=”selected” />

</aura:event>

Second, you need to register this event in MultiSelect component and fire it

<!– Register this event in c:MultiSelect component using below line. –>

<aura:registerEvent name=”onItemSelection” type=”c:MultiSelectItemSelection” />


/**

* Fire the event from javascript of c:MultiSelect component

**/

var evt = component.getEvent(“onItemSelection”);

evt.setParams({

    “listItem” : ‘Suply selected list item here’,

    “selected” : true, //shoud be false if user is deselecting a list item

});

evt.fire();

Third, you need to handle this event in the parent component

<!– Handle the component event like this from parent component — c:ParentComponent –>

<c:MultiSelect aura:id=”myMultiSelect” listItems=”[‘Apple’,’Google’,’Salesforce’,’Amazon’]” onItemSelection=”{!c.myJavaScriptFunctionHere}”/>


/*

* This method will be called whenever the child component raise

* onItemSelection event

* */

myJavaScriptFunctionHere : function(component, event, helper){

    //Your javascript code here

}

3. Aura Methods

Aura methods give you the flexibility to make an on-demand call to the child component. The aura:method should be declared and defined in child component, and should be called from the parent component.

  • Aura methods accept parameters. Which mean you can supply the data to aura:method from parent component while making a call.
  • Aura method can also return a value which makes it a lot easier to get some details from the child component.

For example, your parent component may want to get number of selected items in child MultiSelect component. It can easily do so using aura method.

First, you need to define the aura method in the child component

<!– Add below aura method in c:MultiSelect component–>

<aura:method name=”getSelectedItems” action=”{!c.getSelectedItems}”

             description=”This method will return the number of selected item”>

</aura:method>


/*

* This method will be called from aura method and

* will return number of select items

* */

getSelectedItems : function(component, event, helper){

    //Your javascript code here

    return selectedItems;

}

Second, you need to call this method from parent component’s javascript code

<!– Parent Component c:ParentComponent–>

<aura:component>

    <!– Handle the component event like this from parent component — c:ParentComponent –>

   <c:MultiSelect aura:id=”myMultiSelect” listItems=”[‘Apple’,’Google’,’Salesforce’,’Amazon’]” onItemSelection=”{!c.myJavaScriptFunctionHere}”/>

    <lightning:button label=”Get Selected Items”  onclick=”{!c.getSelectedItems}”/>

</aura:component>


/*

* This method will call MultiSelect component’s aura method

* and get selected item

* */

getSelectedItems : function(component, event, helper){

    var selectedItems = component.find(“myMultiSelect”).getSelectedItems();

    console.log(‘Total selected items: ‘+selectedItems);

    //Your logic here

}

So this is how you can create a completely reusable lightning component. Apart from above points, please consider below features as well:

  • Use design resource file to give your component flexibility to accept data from Lightning App Builder.
  • You can fire Application Events as well to notify other components on a lightning page which are not in the same component hierarchy.

Also Read: Lightning Web Component – My First Web Component

Also Read: Designing And Developing Lightning Component – Best Practices

I hope you find this article helpful and create some awesome lightning component. Please not above code is not complete or fully functional component, and is being written just to explain the topic in hand. If you guys have some tips to share, please do so by commenting on this article.

(Visited 690 Times)

Leave a Reply

Your email address will not be published. Required fields are marked *