ABSI - far beyond system integration

On 02 March 2016     By Malinda Lamahewage      Cloud , Salesforce

The Lightning Component Framework helps us to create dynamic web applications to both mobile and desktop applications. This framework is to build single page applications with rich UIs for Salesforce users.

Lightning Component Framework uses Multi-tier and Event-driven architectures, so the code is  neat and components can talk with each other by using events. Lightning Component uses Javascript for client side and Apex for server side.

A component is an encapsulated entity, so the consumers can focus on their App regardless of a component's inside implementation. This allows consumers to build Lightning Applications on demand without taking too much time. A component can contain other components or HTML, CSS,Javascript files. This flexibility helps developers to build attractive UIs.

Salesforce1 Lightning

 

Lightning Design System

Salesforce lightning Design System is a UI library which helps developers to build applications very attractively and responsively. This is similar to Twitter Bootstrap but works well with Salesforce features. This design system contains four types of resources.

  • CSS
  • Icons
  • Fonts
  • Design Tokens

Lightning Design System

Also Salesforce people introduced four design principles.

  • Clarity - Eliminate ambiguity. Enable people to see, understand, and act with confidence. The new UI has reduced clutter so that users can easily find the information they need.
  • Efficiency - Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster. For instance, the new Lightning UI buttons improve the prominence of calls to action.
  • Consistency - Create familiarity and strengthen intuition by applying the same solution to the same problem. For example, the new UI enforces one button style across all contexts.
  • Beauty - Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

In this blog post we are going to create a Lightning App for Salesforce1 using Lightning Custom Components and Lightning Design System. This is the App that we are going to build.

Salesforce Lightning - My Movies

 

Lightning App Demo

1. Create a Custom Object in your org

  • Object Name: Movie
  • Fields: Name, Category, Description, ImageUrl, Ratings

Salesforcce Lightning App - Movie

 

2. Install the Lightning Design System to your Org

First Download the latest Lightning Design System Package.

Salesforce Lightning - Design System Package

Salesforce Lightning - Install

 

3. Create a server side Apex Controller class

  • Open developer console > File > New > Apex Class
  • MovieController class:

 

4.Create a Lightning Component for display data

Salesforce Lightning - Movie Library

  • Open developer console > File > New > Lightning Component
  • Name it as movieListComponent
  • Code:
  • implements="flexipage:availableForAllPageTypes" enables the component to the Lightning App Builder.
  • Go to installed packages in your org. and copy the Lightning Design System package Name (eg: SLDS0122)

Salesforce Lightning - Installed Package

  • < ltng:require styles="/resource/SLDS0122/assets/styles/salesforce-lightning-design-system-ltng.css" />
    This code line enables the Lightning Design System to your component.
  • To apply Lightning Designs you need to write your code between < div class="slds">< /dv> Tags.

 

5. Javascript Helper Class for movieListComponent’s Controller

  • On the movieListComponent’s stack, click the HELPER button.

Salesforce Lightning - Custom Component Movies

  • Code:

 

6. Javascript Controller for movieListComponent

  • Click on the CONTROLLER button

 

    

7. Search Bar Component

  • Open developer console > File > New > Lightning Component
  • Code:

 

8. Search Bar Component

Salesforce Lightning - Search Movie

  • Open developer console > File > New > Lightning Component
  • Name it as searchBarComponent
  • Code:

 

9.Search Bar Component’s Controller

  • Click on the CONTROLLER button
  • Code:

 

10.Header Component

Salesforce Lightning - My Movies (2)

  • Open developer console > File > New > Lightning Component
  • Name it as headerComponent
  • Code:

 

11.Details Component

Salesforce Lightning - Movie Description

    
  • Open developer console > File > New > Lightning Component
  • Name it as movieDetailsComponent
  • Code:

 

12.Detail Component’s Controller

  • Click on the CONTROLLER button
  • Code:

 

13. Footer Component

  • Open developer console > File > New > Lightning Component
  • Name it as footerComponent
  • Code:

 

14. Creating the lightning app using our custom components

  • Go to Setup > Build > Develop > Lightning App Builder
  • There you can see our custom components at the bottom left side
  • Now drag those components to the canvas

Salesforce Lightning - App

  • Click Save Button on the above menu
  • Now click Activation button
  • Then you will see this popup window

Salesforce Lightning - Movie Rental

  • Give a name to the App
  • Select an Icon
  • Click Save
  • Now your app has launched to the Salesforce1

 

Conclusion

Salesforce Lightning Components and design framework help to build attractive and high performance web apps to both desktops and mobiles on demand. This blog helps to create a functional app with lightning framework for beginners. After following this blog you can create industry level Lightning apps easily for both mobiles and desktops.