Book Image

Learning Salesforce Lightning Application Development

By : Mohit Shrivatsava
Book Image

Learning Salesforce Lightning Application Development

By: Mohit Shrivatsava

Overview of this book

Built on the Salesforce App Cloud, the new Salesforce Lightning Experience combines three major components: Lightning Design System, Lightning App Builder, and Lightning Components, to provide an enhanced user experience. This book will enable you to quickly create modern, enterprise apps with Lightning Component Framework. You will start by building simple Lightning Components and understanding the Lightning Components architecture. The chapters cover the basics of Lightning Component Framework semantics and syntax, the security features provided by Locker Service, and use of third-party libraries inside Lightning Components. The later chapters focus on debugging, performance tuning, testing using Lightning Testing Services, and how to publish Lightning Components on Salesforce AppExchange.
Table of Contents (22 chapters)
Title Page
PacktPub.com
Foreword
Contributors
Preface
Index

The Lightning Design system


A real-world application involves UI widgets such as lists, tables, cards, modal, and many more. For its Lightning Experience UI, Salesforce uses a common design pattern, which is an open source project known as the Lightning Design System. You can read more about the Lightning Design System, and the patterns and components provided from the official documentation located at https://www.Lightningdesignsystem.com.

Lightning Components can use the styles provided by the Lightning Design System. Let's modify our HelloWorld component to display HelloWorld in a card format, using the card components provided by the Salesforce Lightning Design System (SLDS).

Creating a simple card component using SLDS 

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

  1. To open the existing Lightning Component, in Developer Console, use File | Open Lightning Resource, search for the HelloWorld component, and select Open Selected.
  2. Copy the code that is in the SLDS card component from SLDS (https://www.Lightningdesignsystem.com/components/cards/).
  3. Paste the markup as it is on the HelloWorld component file. You will get an error, as shown in the following screenshot:

Error when you try using SVG tags in component markup

  1. The error is because of the SVG tag (we will see how to use SVG tags in later chapters). Let's remove the highlighted portion for now to allow the save operation. The complete code for the component is as follows:
<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>
  1. Also, to make sure SLDS is imported into the shell application for testing, we will need to extend the application to use the force:slds base component. Let's modify our HelloworldApp as follows:
<aura:application extends="force:slds">
    <c:HelloWorld />
</aura:application>

 

  1. Let's preview the application and see the SLDS card in the browser. The following screenshot shows the results rendered on the browser:

Note

If you drag these components into the Lightning App Builder, the SLDS will be automatically imported by Salesforce, but for the application created using <aura:application> useextends="force:slds".

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.