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.

Salesforce lightning : What has changed

This is same question which popped in my mind. 

• What has changed? 
• What happens to my previous development work if I turn on Lightning experience.
• Do I need to rewrite my Apex classes, VF pages, buttons etc.

Well, the first thing calm down! All your stuffs are right there and most of it will work fine with a few modifications and yes there are some exceptions which I will cover in the upcoming posts.

P.S. Lightning is evolving fast i.e. if it is not supported yet, it will be very soon.

Salesforce is moving from page-centric web application model to app-centric model. You may ask what benefits can we reap from this approach. Here are some of the magic of app-centric model:

• Isolated/resuable components: It allows us to create isolated components i.e. you can create a component and 'drag and drop' anywhere without any modifications at all. Tell me more.
• Interactive experience: To deliver it we need client side scripting. Lightning uses Javascript to create, modify, transform, and animate the user interface rather than completely replacing it a page at a time. 
• Faster loading: The components are standalone and uses client side scripting. This helps in minimizing server calls resulting in improved performance.

Why use Salesforce Lightning?

Lightning is awesome! Before going into the details. Let me ask you, have you seen the new UI? If not, check it now. You will be truly awestruck with the look and feel. Lightning is not enabled yet? Please see this Enable Salesforce lightning post.

                                           

• Have you noticed the header and the sidebar is gone, it was too boring anyways!
• We have the new sidebar which displays all the tabs. Don't see your custom tabs? Here's how to see it.
• Did you see how the new record detail page is arranged. Beautiful, isn't it?
• Now Sales reps can manage all the related details from the same screen. 
• Account insight is a luxury feature for the Sales reps to have.
• Forget about running report every time you need data classification. You can create chart from the list view with few clicks.
• Interactive assistant - Your own Jarvis!

It’s not just a great new user experience. It’s also packed with new features to help you sell faster, work more productively, and make better decisions.

Explore the new features here.

But what about my previous code. Here what you need to know.

How to enable Salesforce lightning

Just 3 easy steps:

1. Enable custom domain. Check out this trailhead if you don't have a custom domain.
2. Goto Setup - Lightning experience.
3. Turn On Lightning experience. Click on your name on the right hand corner and select 'Switch to Lightning experience'. Voila!
4. Optional 
1. Rollout Strategy : Create a new Profile or permission set and enable 'Lightning experience for the selected pilot users.
2. Turn on 'Account Insights' to see the intuitive component on Account detail page which provides the Sales rep with the latest News for that Account to help them impress the customers . More on it later.

If you want to read further then you can refer this trailhead.

How to add tabs in Lightning menubar

I know this step is not well documented in the Lightning trailhead. So here are the steps.

1. Go to Setup -> Navigation Menu.
2. Create a New Navigation menu.
3. Add all the tabs. 
• You can see all the tabs here including Standard, Custom, VF page, Lightning, Lightning page tabs.
4. Assign this Navigation Menu to the profiles in the next step.