Salesforce.com Lightning Custom Components with Bootstrap

Salesforce Lightning Architecture

We can use Lightning App builder to build lightning apps for every screen(Responsive design) by drag and drop of Lightning Components and Visualforce pages into a one canvas.

Lightning Components are small reusable applications which are the building blocks to a lightning application and there are three types of components:

• Standard components - built by Salesforce.com
• Custom components - built by developers
• Apex exchange components - built by Salesforce.com partners

In this post we are going to discuss Custom Components.

Custom components

Developers can create their own custom components. So the Administrators can create lightning apps on demand, using these components. A component is a collection of files.

Structure of a Lightning Component

Let’s create a Custom Component

1.Enable my domain in your org

For security purposes, Lightning Components require you to define a custom Salesforce domain name for your organization.

2.Upload Bootstrap as a static resource

• Download the salesforce.com optimized Bootstrap package.
• Unzip that package and go to Setup > Build > Develop > Static Resources and click New.
• Specify bootstrap as the Name, then click the Choose File button, and select the bootstrap.css in the dist/css directory of the unzipped bootstrap folder.

• Click Save.

3.Create a Namespace

• Go to Packages from setup menu.
• Click Edit.
• Review the selections and then click Continue.
• Enter the namespace prefix you want to register (eg: absi_dev).
• Click Check Availability.
• Click Review My Selections.
• Click Save.
• It’s a best practice to create a Namespace.

4.Create an Apex class as the controller to write SOQL/Logic

• Open Developer Console, click File > New > Apex Class. Name it as AccountController and click OK.

	public with sharing class AccountController {
	@AuraEnabled
	public static List<Account> findAll() {
	return [SELECT id, Name, AccountNumber, Fax,Industry,Type FROM Account LIMIT 10];
	}
	}

view rawAccountController.apxc hosted with ❤ by GitHub

Code for AccountController class

• Click File > Save to save the file.
• The @AuraEnabled method annotation makes a method available to Lightning applications.

5. Creating the Lightning Application

• In the Developer Console, click File > New > Lightning Application. Name it as MyAccounts and click Submit.
• Click File > Save.
• After Saving you can see this stack.

6. Creating a Component to get Data from AccountController

• In the developer console click File > New > Lightning Component.
• Name it as accountListComponent.
• Click Submit.

	<aura:component controller="absi_dev.AccountController" implements="flexipage:availableForAllPageTypes" >
	<aura:attribute name="accounts" type="Account[]"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<div class="table table-bordered">
	<table class="table table-striped">
	<thead>
	<tr>
	<th>Account Name</th>
	<th>Account Number</th>
	<th>Fax</th>
	<th>Industry</th>
	<th>Type</th>
	</tr>
	</thead>
	<tbody>
	<aura:iteration items="{!v.accounts}" var="account">
	<tr>
	<td>{!account.Name}</td>
	<td>{!account.AccountNumber}</td>
	<td>{!account.Fax}</td>
	<td>{!account.Industry}</td>
	<td>{!account.Type}</td>
	</tr>
	</aura:iteration>
	</tbody>
	</table>
	</div>
	</aura:component>

view rawaccountListComponent.cmp hosted with ❤ by GitHub

Code for accountListComponent Component

• To appear components in lightning pages and the App Builder, a component must implement the flexipage:availableForAllPageTypes interface.
• In a component, use “v (view)” to access the collection of attributes.

7. Create a Controller for accountListComponent

• Click Controller from the file list.

	({
	doInit : function(component, event, helper) {
	var action = component.get("c.findAll");
	action.setCallback(this, function(a) {
	component.set("v.accounts", a.getReturnValue());
	});
	$A.enqueueAction(action);
	}
	}
	})

view rawaccountListComponentController.js hosted with ❤ by GitHub

Code for accountListComponent’s Controller

• doInit() function helps to load data to the component.
• component.get("c.findAll") returns an instance of server side action.
• action.setCallback() this function uses to set the retrieved account objects to components v.accounts attribute.
• $A.enqueueAction() function adds the action to a queue and action calls are synchronous and run in batches.

8. Add accountListComponent to the Application UI

• In developer console File > Open Lightning Resources.
• MyAccounts > Application.

	<aura:application >
	<link href='/resource/bootstrap/' rel="stylesheet"/>
	<div class="container">
	<nav role="navigation" class="navbar navbar-inverse">
	<div class="navbar-header">
	<a href="#" class="navbar-brand">Accounts Details</a>
	</div>
	<div id="navbarCollapse" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Profile</a></li>
	<li><a href="#">Messages</a></li>
	</ul>
	</div>
	</nav>
	</div>
	<div class="container">
	<div class="row">
	<div class="col-sm-12">
	<absi_dev:accountListComponent/>
	</div>
	</div>
	</div>
	</aura:application>

view rawApplication.app hosted with ❤ by GitHub

Code for the lightning application

• File > Save All.
• Click Preview or Update Preview.

Lightning Application

Conclusion

The objective of this blog is to show that how easy to create an attractive and functional component with bootstrap. The only external resource we have to use here is Bootstrap package. By using this kind of technology developers can fastly develop robust mobile and web applications on demand.