Friday 2 June 2017

Configure Properties in Lightning Component #Salesforce

Hi All, this blog post is about using lightning properties, this one of the great feature of the lightning component where you can see how dynamic you can make your lightning component, I am just showing a sample usage, I am pretty sure that we can use it in much more effective way.

Currently we have only few types of properties in lightning component i.e. Text, Integer and Boolean.
You can manipulate it and use it in more better way.

Here is it how it looks and how you can use it,

Note : Properties will be only visible when you define it in the Lightning component, and you can use the properties after adding it on the detail page / home page in lightning experience.

This is how it looks when you define properties in lightning component.



To define property in Salesforce you need to define Design:attribute in your design resource of lightning component.

For example below is our  lightning component having properties defined.
To appear in the Lightning App Builder or on a Lightning page, a component must implement the flexipage:availableForAllPageTypes interface.



<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickAction,force:hasRecordId" access="global" >
 
    <aura:attribute name="check" type="boolean" access="global"/>
    <aura:attribute name="Name" type="String" access="global"/>
    <aura:attribute name="Number" type="Integer" access="global"/>
    <aura:attribute name="Picklist" type="String" access="global"/>
    
    "{!v.check}" toggle on check, like below
    <BR/>
    <aura:if isTrue="{!v.check}">
     <!-- toggle content -->
    </aura:if>
    
    "{!v.Name}" Show or Hide on the basis of user input
    
    <BR/>
    
    "{!v.Number}" only integer 1,22,333 allowed
    <BR/>
    
    "{!v.Picklist}" User can chose in between few options.
    
</aura:component>


And here is the code of design resource, we have defined 4 different types of properties here.


<design:component >
 
    <!-- properties -->
    <design:attribute name="check" label="Check" />
    <design:attribute name="Name" label="Label" />
    <design:attribute name="Number" label="Number" description="Only numbers." />
    <design:attribute name="Picklist" label="Pick One" datasource="Yes,No, May be" default="Yes" description="Please select one"/>
    
</design:component>

No go ahead, add you you lightning component in a detail page of any object in lightning experience, and then set the properties values.

I've tried to create more type of property but can't as the error itself show while you try to create a new type of property. You'll get something like below




How to remove a Property !

That is a little tricky part while adding your property its easy add an attribute in component and then in design done. But while removing it, you need to use these below steps to remove it from the lightning component

1. Remove Implements from the lightning component source.
2. Then remove Design attribute from the design resource.
3. Now remove the attribute in the component. click save.

Done.

Hope this helps!!
thanks