Account Lightning Component : Advanced features

This is a continuation of the Account Lightning Component blog.

Features added:

• Edit Link against each Account
• Delete Link again each Account.

Upcoming features:

• Pagination in Client Side.

Code: GitHub

Please let me know in comments if you have any specific requirements which I can help with.

Embed a Lightning Component in a VF page

To display a Lightning Component inside a VF page, please follow these 3 steps.

1. Create a Lightning App.
2. Create a Lightning Component.
3. Call the Lightning app and Component inside your VF page.

Here is the code for Lightning App and VF page: GitHub.

Note: For the Lightning component you can use the previous example.

Where can we use Lightning Components

This is very common question I have come across. These are several ways we can use a Lightning component. I will be adding an example for each of them.

1. In a Lightning app.
2. Inside another Component.
3. In a Custom Action.
4. In a Tab using Lightning Component tab.
5. In Lightning App builder.
6. In a record Home Page.
7. Embed in a VF page.

Pass record Id in Salesforce Lightning component

If you are calling your Lightning component from a Custom Action then you might want to pass record Id to do some query. It can be achieved by using VF pages.

Pass Record Id:

1. Create a Intermediate VF 
• This VF page will capture the record Id or any another details from that record.
• It will also determine if the action is triggered from Desktop or Salesforce1 and will create the URL based on it.
2. Create a VF page to load the Lightning app.
• It will also pass the parameters to the Lighting component.
3. On your Custom Action, use the Intermediate VF page.

Code : GitHub

Note: Custom buttons are Not supported in Lightning i.e. you wont be able to see any custom button in your detail page.

Account Lightning Component

I have created this custom lightning component to Create Accounts on a friend's request. I would be happy to help if you have have any specific requirements or need any help to understand any Lightning concepts.

Features:

• Display Accounts in a table.
• Provides an ability to create New Accounts.
• Perform mandatory field validation in the Client side.
• Uses SLDS.

Features in the next post:

• Edit/Delete Link against each Account.
• Pagination to show navigation links like Next, Last etc.

Here is the Code: GitHub

How/Where to use the Lightning Component.

Note: Please install SLDS as static resource to get the awesome UI.

Screenshots:

Lightning Component/Component bundle

• They are the self-contained and reusable units of an App. Apps can be either a single component or group of multiple components.
• Components are standalone and can be resolved in client side (i.e. browser) without making iterative server calls.
• Component bundle consists of 8 resources. The most important ones are 
• Component:
• This is where you can build your UI using Aura tags.
• Controller:
• Just like Apex controller used in VF pages, we have controller for Lightning Components.
• These controller can perform all the logical task in the client side without any server calls.
• It is done using Javascript.
• They also acts as an bridge and can call the server Apex methods.
• Helper:
• The reusable code of your component can be built here.
• It is a best practice to write the code in helper so that the component is lightweight and the application flow is easy to understand.
• Style:
• Any custom CSS can be stored here. 
• Before building any custom CSS, have you seen the Salesforce Lightning Design System (SLDS). It allows you to build jaw dropping UI without any CSS! 

What is Lightning component framework and Aura Framework

Lightning component framework:

• It is a UI framework which allows you to build dynamic and interactive apps.
• It is supported by both Mobiles and Desktop.
• It uses Apex on server side and Javascript on client side.
• The UI is built using Components.
• The server operations like SOQL and DML operations etc. can be done using the same Apex classes which you have built. The Apex methods should be public static with @AuraEnabled annotation.

Aura Framework:

• Aura is an open source framework which allows you to build application independent of your data in salesforce.
• It supports multilayered component development to separate the client and server.
• The Lightning Components are built on Aura framework.
• It takes care of the server, browser and devices leaving you to focus on building your logic.