Learning Salesforce Lightning Application Development: Build and test Lightning Components for Salesforce Lightning Experience using Salesforce DX

The App Launcher allows you to switch between different Salesforce applications.

The following screenshot shows the App Launcher. All of the applications are represented by cards:

App Launcher helps to switch between apps

The setup  link for Lightning Experience takes you to the standard Setup page for Salesforce administrators to execute admin-related tasks. The following screenshot shows the Setup menu:

The above shows how one can navigate to Setup Screen from the Setup Menu

Once in the Setup menu, find App Manager from the search box. A new Lightning app can be created using the New Lightning Appbutton, and if the application is Classic, you can upgrade it to a Lightning Application.

Creating a Lightning Application

To create a Lightning Application, follow the steps from the App Launcher:

1. Click on the New Lightning App button.
2. Follow the prompt and enter the name of the application (note that the developer name gets auto-populated once you click on the Developer Name field), description, and configure App Branding:

3. Choose between a console app and a standard app. 

4. Optionally, select Utility Bar items. Utility bars are used to carry quick functionalities that need to be accessed quickly, such as taking notes during sales calls, or quickly finding contact details when a service representative is on a call with a customer.
5. Select the Navigation tab:

6. Select the profiles that the application will have access to:

Note

The process of upgrading a classic application to Lightning involves the same steps as highlighted in this section. Classic apps in Salesforce do not appear in Lightning Experience unless you upgrade them.

The creation of a Lightning tab can be achieved by searching for Tabs in the Setup menu. The navigation path for the creation of a tab is Setup | User Interface | Tabs.

The following screenshot shows the tab creation screen:

The above screenshot shows Custom Tab Creation Screen In Set Up Menu

Lightning Page Tabs

Lightning page tabs are created from a Lightning page using the App Builder.

From the Setup menu, navigate to User Interface | Lightning App Builder. The screenshot that follows shortly shows the navigation path for finding the Lightning App Builder.

 

There are three different types of Lightning pages, explained in the following table:

Lightning Page Type	Description
App Page	Used to create an app's navigation for Lightning Experience and Salesforce 1
Home Page	Used to customize the Home Page of Lightning Experience
Record Page	Used to customize the Record Page of Lightning Experience

 

The following screenshot shows the selection options when choosing the type of Lightning page:

A Lightning page comprises multiple Lightning Components. You can use a combination of standard Lightning Components, custom-built Lightning Components, and components installed from Salesforce AppExchange.

 

There are also multiple options to choose the type of layout for a Lightning page. The following screenshot shows the various options:

Lightning App Builder allows administrators to drag and drop various standard and custom components to create a Lightning page.

The following screenshot shows the Lightning App Builder screen that administrators use to create a Lightning page:

The above screenshot shows Lightning App Builder Screen

Once a Lightning page is saved, the activation screen provides options to configure the profile for the page.

On the Record Page, the assignment configuration can be understood with the help of the following screenshot:

Clearly, one overrides the other. ORG DEFAULT is the top level, followed by APP DEFAULT, and then by APP, RECORD TYPE, AND PROFILE.

In a Lightning Application, you can add Lightning Components to the horizontal footer. This can be very useful for adding productive tools such as a simple calculator, reports, recent items, a Computer Telephony Interface (CTI) softphone, and any other quick access tools that your sales or support representatives might find useful.

To make a Lightning Components available as a utility, the component must implement the flexipage:availableForAllPageTypes interface.

The following screenshot shows how you can edit a Lightning Application from the App Manager and add a Utility Bar to a Lightning Application:

The horizontal footer is where Components added to the Utility Bars are displayed. You can control the height and width of utility components, and their ability to load in the background.

The following screenshot shows a utility Component added to a sales application:

List views in Lightning Components are similar to those in Salesforce Classic, but with some additional capabilities, such as creating a Kanban view, using quick charts to display data in graph format, inline editing, adding filters, sorting, and the ability to take mass actions.

The following screenshot shows functionalities present on the List view that can help end users to visualize data and perform actions on it:

The above Screenshot shows the All Opportunities List View 

Note that the NewEdit and View buttons can also be overridden with a custom Lightning Component. To override these standard buttons and views, the navigation path is Setup | Object Manager | <select object> | Button, Links, and Actions. The following screenshot shows how you can override the New button (a similar screen appears for other overrides):

The above screenshot shows how you can override New button on Account with a Custom Lightning Component 

Lightning Experience provides end users with the ability to calendar any object. The following screenshot shows how you can use the Calendar tab to calendar data across objects. The user can follow the prompts and select Field for Start and Field Nameto Display to create a calendar:

Global Actions are available on all pages. The following screenshot shows Global Actions:

You can also create a new custom global action by using a custom Lightning Component. The navigation path from set up manager page is Setup | Global Actions.

The following screenshot shows how you can add a custom Global Action using a Lightning Component:

Publisher actions are available in Salesforce 1 and Lightning Experience, and these are object-specific and available on the Object Detail Lightning page.

To create a publisher action, you can use the Object Manager tab from the Setup menu. The navigation path is Setup | Object Manager | <select object>| Buttons, Links, and Actions.

The following screenshot shows how you can create a publisher action for an Account object using a custom Lightning Component:

The Publisher Action also needs to be configured based on the page layout. This can be achieved via Object Manager. The following screenshot shows how you can configure a custom publisher action:

The Screenshot shows Page Layout Editor In Lightning Experience

With web components, you can do almost anything that can be done with HTML, CSS, and JavaScript, and they can be a portable component that can be re-used easily.

Lightning Components are based on this idea, where each individual component consists of one or multiple components that use Apex, JavaScript, HTML, and CSS on top of Salesforce metadata to build a completely functional unit that can work on multiple Salesforce instances and multiple pages.

To understand how web components work, let's consider the following image. This shows how a page can have multiple components. It's also important to note that, since each of the components can consist of data from a third party, and if components from different namespaces can scrap data, it can diminish data security. Hence, Salesforce has a security mechanism known as Locker service to prevent data from being accessed.

It locks the DOM of the component and, hence, the JavaScript code from the component cannot access data from other components:

A Lightning page can have multiple components. They can be as small as a button component or can consist of components from different namespaces and different vendors. A component is a reusable unit and can be reused in Lightning Experience and Salesforce 1. To make these components interact with each other, the framework provides events. We will explore Lightning events in later chapters.

A Lightning Component bundle consists of four primary sections (there are also Renderer, Design, and SVG sections apart from these four, which we will cover in upcoming chapters):

In the last section of this chapter, we will create a Lightning Component using the Salesforce Developer Console. In Chapter 3, Working with Lightning Component Building Blocks, we will dig deeper into each of these files and explore how to build a functional component for Lightning Experience.

Lightning Component lifecycle

A basic understanding of the sequence of steps that takes place when a Lightning Component communicates with a client and a server will help a great deal before we dive deep into how to build a Lightning Component.

The following diagram shows how a Lightning Component works between the client and server:

 

The key things to note from the previous diagram are as follows:

• A user action instantiates the component and an init event is raised
• The JavaScript controller function calls the helper function to perform any server-side action
• The Apex controller method is invoked from the helper function, the data is returned, and JavaScript callback functions are invoked
• The JavaScript client-side logic can be written to manipulate the DOM, set attributes, and refresh the view

The aim of the section is to demonstrate how to build a simple Lightning Component via the Salesforce Developer Console. We will also explore how to create a simple application to test our component.

The simplest way to create a Lightning Component is to use the Salesforce Developer Console. In later chapters, we will get familiar with source-driven development and the use of an Integrated Development Editor (IDE). For now, let's use the Salesforce Developer Console:

<aura:component > 
    HelloWorld
</aura:component>

<aura:application >
<c:HelloWorld/>
</aura:application>

Let's open the Helloworld application we have built so far again and modify it to include the SLDS:

Error when you try using SVG tags in component markup

<aura:component >
  <article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__figure">
      </div>
      <div class="slds-media__body">
        <h2>
          <a href="JavaScript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]">
            <span class="slds-text-heading_small">Card Header</span>
          </a>
        </h2>
      </div>
    </header>
    <div class="slds-no-flex">
      <button class="slds-button slds-button_neutral">New</button>
    </div>
  </div>
  <div class="slds-card__body slds-card__body_inner">Card Body (custom goes in here)</div>
  <footer class="slds-card__footer">Card Footer</footer>
</article>
</aura:component>

<aura:application extends="force:slds">
    <c:HelloWorld />
</aura:application>

The preceding is a simple demonstration of how to use the Salesforce SLDS in Lightning Component Framework. The Lightning Component framework is pretty powerful and provides many components and patterns. As a designer, you can build a complete application using the component set provided. Through this book, as we move ahead, we will use the SLDS extensively to build the UI for our components.