Building a basic Lightning UI

Before we dive into the more complex components included in the sample code for the FormulaForce application, let's first create a simple Lightning application to better understand the architecture of Lightning. Think of a Lightning application as a container for your UI, essentially your HTML markup. Containers are effectively things you can navigate to in the browser; they get their own URL based on the name that you give them.

As we will explore later in the chapter, Lightning ExperienceSalesforce MobileLightning Communities, and Lightning Flow are also containers built by Salesforce in the same way as the example that follows.

If you want to follow along with the next few steps, ensure that you have installed Visual Studio Code and have the extension for Lightning Web Components installed. We will be taking a closer look at the features around Lightning later in this chapter.

Follow these steps to create your first Lightning application:

  1. Open Visual Studio Code and create a Salesforce DX project by pressing Cmd Shift P and selecting SFDX: Create Project.
  2. Locate the /force-app/main/default/aura folder in the Explorer pane and right-click on it, selecting the SFDX: Create Lightning Application menu option.
  3. Give your application the name myapp and press Enter to accept the defaults.
  1. A Lightning application in source form is a folder that contains one or more files depending on the type. In this case, you will have a .app file, a .css file, and three .js files. Open the myapp.app file and enter the following markup, and then save the file:
<aura:application> 
  <h2>Success your first Lightning App</h2> 
</aura:application> 
  1. Create a scratch org for your project and push the code to it. Containers are essentially pages that you can navigate to with your browser. These work outside of the standard UIs from Salesforce, but still require you to log in.
  2. After the push operation completes, open the scratch org and take note of the URL in the browser. This might be something like the following for the default Lightning Experience container: https://site-momentum-8333-dev-ed.lightning.force.com/lightning/page/home.
  3. To launch the Lightning application you just created, modify the URL as follows, substituting site-momentum-8333-dev-ed in the URL for your scratch org's domain, as here: https://site-momentum-8333-dev-ed.lightning.force.com/c/myapp.app.
The c in the preceding URL represents the default namespace of your org. If your org has a namespace, or you're attempting to launch a Lightning application from an installed package with a namespace of coolapps, for example, exchange it with the /coolapps/myapp.app namespace.

You should see the following message in your browser:

Success your first Lightning App

This type of Lightning application is known formally as a Standalone Lightning App in the Lightning Components Developer Guide (for more information, you can refer to https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/intro_framework.htm).

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.255.187