19
Sep

Quick steps to create your first Salesforce Lightning App

Sailfin 0 comment
Salesforce is the trusted cloud when it comes to privacy and we are sure the Lightning will strike here thrice. As Salesforce is expanding, new features and enhancement are added in every release. It’s up to you to stay updated and bucket those features for your company.

Lightning is one of the feature that will surely help your business grow faster. It’s responsive, fast, and can be used on the go through your mobile. Framework:

  • The Lightning Component framework is built on the open source Aura framework. It enables you to build apps completely independent of your data in Salesforce.
  • Its available at https://github.com/forcedotcom/aura
  • Sample code: <aura:iteration> and <ui:button>
  • The aura namespace contains components to simplify your app logic, and the ui namespace contains components for user interface elements like buttons and input fields. The force namespace contains components specific to Salesforce.

Prerequisites:

  1. Create a Developer Edition organization
  2. Register a Namespace Prefix
  3. Define a Custom Salesforce Domain Name

Impact on Switching to Lightning:

  • Using Solutions to resolve your customer cases? Solutions are not supported in Lightning.
    Workaround: Migrate to Lightning Knowledge, which offers standard objects that work just like other objects in Salesforce. Lightning Knowledge helps users find answers fast, with Knowledge Search, Knowledge-specific components, and the Knowledge homepage.
  • Before migrating, get familiar with the Lightning Knowledge Limitations, so you’re clear on what’s not included, too.
  • Dashboards created on lightning are unable to be scheduled to refresh automatically.
  • Users can’t create additional Reports & Dashboard folders.
  • List View Restrictions: Inability to grant visibility to users based on Role/Membership of group.
  • Live Agents: Not supported in Lightning. What to do?
    Decide which users can work without this feature, and migrate those users to Lightning Experience.
  • Documents Tab: Users can see the tab and objects in Lightning Experience, but when users open them, tabs are displayed in Salesforce Classic. What to do?
    Migrate to Salesforce Files to save, share, and collaborate around documents.

Planning to Switch to Lightning? Check your org readiness through “Lightning Experience Migration Assistant.”

  1. Go to Lightning Experience Migration Assistant from sidebar setup.
  2. Use the Check Readiness tab to find out the components and functionality that are compatible with lightning and their workaround.

1

  1. Once the readiness check is completed, the Lightning Experience Readiness Report is sent to you via e-mail

Enable Salesforce Lightning

  1. Go to Salesforce1 Quick Start or choose Get Started from sidebar setup.

3 2.Switch to: Turn It On tab

  1. Click Enable.

4 Switch to Lightning:

  1. Click on your name next to setup.
  2. Choose “Switch to Lightning”.

5   6   Developing Component:

  1. Open Developer Console, Click File | New | Lightning Component.
  2. Enter Name and description for component. e.g. helloWorld
  3. If you choose Lightning tab checkbox, it embeds the force:appHostable interface which enables the component to be added to the navigation menu in Salesforce1.
  4. E.g. <aura:component implements= “force:appHostable” > </aura:component>
  5. Click Submit button to create your lightning component.

7   8   9 Create Application:

  1. To create application in lightning, Click File | New | Lightning Application.
  2. Enter the name, and click Ok. E.g. appName.app resource. You may set name accordingly.
  3. Now use c:helloWorld to refer the component helloWorld.cmp using the default namespace c. If your organization has a registered namespace, you can use it to reference. To see the Changes you’ve made, Click Preview.

10   11 Controller: To create a controller for your lightning bundle, click “controller” on the sidebar of the component next to shortcut “Shift+Ctrl+2” on the right. 12 The controller acts as a client side action that handle an event and call a server-side controller action.

The value providers for a component are v (view) and c (controller).

  • Example, {!v.accounts.id} accesses the id field in the accounts record.
  • Example: {!c.doInit} invokes the doInit method in controller

Helper: Helper functions are similar to client-side controller generally used to pass any argument required by the function. It takes in the value parameter set in the controller through the “item” argument.

A helper function can pass in any arguments(component,item,callback) required by the function. 13 Below is the apex class to perform DML operation. It contains @AuraEnabled annotation which is used to expose an apex method to be used up in lightning component. 14 Apply CSS: The top-level elements match the THIS class and render with a grey background.

Note: To use the Salesforce Lightning Design System(SLDS) in your application use extends=”force:slds”

e.g. <aura:application extends=”force:slds”> </aura:application>

You may use slds classes for lightning UI. Go to SLDS 15 Documentation: 16

  • Documentation helps others understand and use your components.
  • Types of Documentation:
    1. Documentation definition (DocDef): Full documentation on a component, including a description, sample code, and a reference to an example. E.g. <aura:documentation> </aura:documentation>
    2. Inline Descriptions: Text-only descriptions, typically one or two sentences, set via the description attribute in a tag.
      g. <aura:component description=” Represents a button element “>
  • The documentation you create will be available at https://<myDomain>.lightning.force.com/auradocs/reference.app where <myDomain> is the name of your custom Salesforce domain.

17 This concludes the complete application flow of your first lightning App. Wasn’t this easy?

Please add your comments in case of any questions. Happy learning!