Salesforce: Building Responsive Tables with Lightning

on

Mobile devices like smartphones and tablets have quickly become our go-to for a whole range of digital services that we rely on every day. The skyrocketing of mobile internet usage in the last few years requests to marketing unit departments to design responsive websites and web applications.

With the Winter’16 release, Salesforce.com became more compliant with the responsive development framework introducing Lightning Components and Lightning Design System as developer tools to build responsive web templates.

In the Spring’16 release Lightning Out feature has been released to extend capabilities of Lightning Apps. It essentially lets developers use Lightning Components in external web containers without using iframes, in our scenario we are going to use this feature for embedding the component in a Visualforce Page.

This six steps guide aims to show a real use case application of these tools. In particular, a list of Accounts will be created and it will be displayed in a lightning responsive table. Finally, we will embed our data in a Visualforce Page in order to reuse this component both in Salesforce Classic than in Lightning Experience.

1 Step: Download the Lightning Design System

Before going deep with apex development, you need to set up your environment downloading the Lightning Design System and uploading it as a static resource (name: “slds_resource”) in Salesforce. The zip file contains the CSS framework that will style our component.

2 Step: Create the Apex Controller

First, you need to build the business logic for populating the list, in our scenario we are going to use “Account” as source object.

Let’s start the development phase opening the Developer Console and clicking on “New Apex Class”. As resource name set “AccountListCtrl” and type the following snippet of code:

Providing “@AuraEnabled” annotation the developer makes apex methods contained in the controller available to Lightning Components.

3 Step: Create the responsive Lightning Component

In the Developer Console click on “New Lightning Component”, use “AccountListCmp” as resource name and type the following snippet of code:

Our Lightning Component will contain two different attributes for managing variables retrieved by the server:

  • “accounts”: it represents the list of accounts displayed in the table using the aura:iteration tag
  • “accountsLength”: it indicates the number of records displayed in the table

Then digit the following code on “CONTROLLER” element in the right bar:

Finally, click on “HELPER” element and digit the following code in the right bar::

4 Step: Create the Lightning Application

Now it’s time to embed the Lightning Component inside a dependancy Lightning Application, this is a required step to expose Lightning Components in Visualforce Pages. In the Developer Console click on “New Lightning Application”, digit “AccountListApp” as resource name and type the following snippet of code:

Note that this app is globally accessible and it extends ltng:outApp.

5 Step: Create the Visualforce Page

In this guide, Visualforce Pages are used as web containers for Lightning Components. So click on “New Visualforce Page”, use “AccountListPage” as resource name and type apex code shown below:

6 Step: Embed the Visualforce Page in a Visualforce tab

The final step requires you to create a Visualforce Tab that will host the Visualforce Page (click here for the Salesforce official guide). Then you can add this tab in your standard app, if you are using Salesforce Classic, or in the Navigation Menu for Lightning Experience applications.

 

What’s next: Do you want to add the search bar functionality to your lightning data table? Click here to read the guide on Sales4k.

 

(Visited 4,613 times, 15 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *