In this article we will look at implementing a simple lightning component that displays a list of contacts in a table. We will add a simple client side search box which searches all columns in the table.

Demo Link: https://forcetree-developer-edition.na147.force.com/s/datatabledemo

Create a Lightning Component 'lightningPathExample.cmp' with the following code.

• Note that each li tag represents a path and in our example has three paths hence three li tag's. Also note that each li tag has a aura:id attribute. We will use this in javascript to mark a path as complete or incomplete

Now, let's add some coloring and change the current path to orange. We will also change the complete path to gray.

Add the following CSS code to 'lightningPathExample.css'

Use Case:

Control component visibility on a lightning page. We would like to show a component on a lightning record page only when the user is assigned a specific permission set. We will use custom permissions to achieve this.

What is custom permissions?

Custom permission let you define your own permissions for use within your salesforce environment. You could then assign these permissions to either a permission set or a profile. More details here.

The Solution

A most common use case for javascript buttons is a simple field update, onclick of the button a field/fields are updated and the page is refreshed.

With the onset of Lightning javascript buttons are no longer supported and hence have to be replaced. A simple solution would be to use Visualforce which works both in the Lightning UI and classic. However, there is a known issue where the page does not reload/get the updated information when you a do a page redirect using PageReference in Visualforce.

Know Issue: https://success.salesforce.com/issues_view?id=a1p3A0000001C8QQAU&title=data-not-updated-in-ui-after-an-apex-update-in-lightning-experience

I hope the issue gets fixed soon. In the meanwhile, here is a code snippet to replicate the same functionality using lightning components.

LIGHTNING:

Under Buttons, Links and Actions for the object create a new action and link it to the lightning component created above.

CLASSIC:

Use Visualforce or a simple Visual Flow to replicate the field update behavior in classic. Here is a link to get you started with Flows

https://developer.salesforce.com/docs/atlas.en-us.salesforce_vpm_guide.meta/salesforce_vpm_guide/vpm_records_update.htm

Lightning Experience / Lightning UI:

• Lightning Experience can be turned ON at the profile level, or for individual users using permission sets.
• ALL standard profiles are lightning UI enabled by default, when you enable Lightning UI for your organization. [Workaround: Replace standard profiles with custom profiles]
• Visualforce pages work as usual in the lightning UI, however you might want to do a sanity check to make sure nothing is broken.
• Visualforce pages open with the old look and feel. The old look and feel is referred to as Salesforce Classic.

Where to learn more?

There are tons of resources in trailhead. Collect your badges and learn the fun way.

https://developer.salesforce.com/trailhead/trail/lex_admin_migration

Lightning Design System:

Lightning Design system is a front end framework for developing web applications. Using the Lightning Design system you could design visualforce pages or standalone web pages that look and feel the same way as the Lightning UI. A few pointers.

• Lightning Design system could be though of as an equivalent to 'Twitter Bootstrap'.
• To download and start using visit https://www.lightningdesignsystem.com/
• The design system is purely made up of CSS files.
• The design system comes with pre-built components such as pop-up modals, tree structure, buttons etc.
• Lightning Design system focuses mainly on the front end. Data manipulation and processing will still be done using Apex and Visualforce/other desired markup language.

Where to learn more?

 Trailhead again. Use this trail to learn more https://developer.salesforce.com/trailhead/module/lightning_design_system

Lightning App Builder:

The Lightning App builder is a drag and drop tool to build lightning pages. Salesforce offers a few components by default, including 'Recent Items', 'Assistant', 'List View' etc. In addition you can create your own custom components using the Lightning Design system, or use third party components supplied by AppExchange applications like SKuid

Access from SetUp -> Lightning App Builder