Tips To Develop Lightning components

CategoriesBlog / Salesforce Lightning

Sukanya Banekar

February 1, 2018

As a Salesforce developer I was good at developing almost everything in Salesforce but I had no knowledge about development in lightning and suddenly I got a chance to work on a project using lightning. Now I am amazed to develop everything in lightning.

Things you get ready made and unique in Lightning Component:

  1. Look and Feel – User gets built in UI in lightning. As developer just have to apply respective css classes to the lightning component elements.
  2. Interfaces – While creating lightning component it asks bundles to select, so that developer don’t have to worry about copying the interfaces from browser. 
  3. Single Page Application – It is single page application. The best thing about it it loads the page once, and perform activities when user interact with the page. It means lightning component is more of a client side application.
  4. Bundles – Easy to choose element from bundle and continue coding. Developer don’t have to navigate anywhere to write javascript / css for lightning component. 
  5. Events – This is the magical and interesting part of lightning component to communicate with other components even if the have in relationship between each other.
  6. Responsiveness – Due to inbuilt css and javascript, lightning component makes dynamic appearance. So once developed no need to worry about mobile view or desktop view. Much time saving to manage responsiveness.
  7. Easy to fit in other places – Lightning component can be used in anywhere in salesforce except javascript action button. You can use it in Visualforce page, Lightning app, Record page, Standard button (New/Edit), other lightning components, flexipages etc
  8. Aura framework – Lightning component has got an aura namespace, which has got its own elements like ui namespace has inputtext,button etc. It has got attributes which works as variables to hold the data and perform some operations.

Lightning Application:

  • The powerful tool to use lightning component in visualforce page.
  • Act as a container for Lightning component to easily develop apps.

How to use lightning component in visualforce page:

First of all why to use lightning component in visualforce page?

To override New standard buttons of records where you need parent id to save child record. Developer won’t get parent id through related list of parent record using lightning component so there he/she needs standard visualforce page to bind with lightning component.

Lightning application plays a vital role to connect lightning component and visualforce page.

Following are the steps to get parent record id while saving child record from related list in lightning experience:

Step 1:

Create Lightning component to override New button (for example create component to save contact record from account related list of Account)

Name: NewContact.cmp

Step 2: Create Lightning application with extending ltng:outApp so that you can use it in visualforce page. The access of the app should be global and call aura:dependency for lightning component.

Name: ContactApp.app

Step 3: Create an extension class to get account id

Step 4: Create standard visualforce page and get account id from extension

This is how you can use lightning component in visualforce page.

Types of expression in lightning component to pass data from one component to another:

  1. Bound Expression
  2. Unbound Expression

Bound expression : These expression are used with the aura:attributes. They are symbolically defined with ‘!’ (exclamation). If you use them and perform some operation at javascript then you can see the result on component if they are exposed. The big use of them is in parent child relationship lightning component structure. You can easily access child components attribute in parent component as below:

Parent.cmp

<aura:component>
<aura:attribute name=”accessChild” type=”String”/>
<c:Child childVar=”{!v.accessChild}”/>
</aura:component>

Child.cmp

<aura:component>
<aura:attribute name=”childVar” type=”String”/>
</aura:component>

Unbound Expression : These expression are also used with the aura:attribute. They symbolically defined with ‘#’. If you don’t want to show operated result on lightning component make use of them. So in above example if you send something from parent component to child component and you don’t want to get back the changed value from child component in parent component then make use of this expression.

So this is how you can take care of basic things about Lightning Component. I will be publishing 2nd part of this blog very soon. It will cover Lightning Events.

If you know some great tips apart from this please let us know in the comments 🙂 !!!

Leave a Comments