đź“Ł Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

Code with Salesforce Languages

Learning Objectives

After completing this unit, you’ll be able to:
  • Identify the benefits of Lightning components.
  • Describe how Visualforce is used in Lightning Experience.
  • Outline the ways Apex is used to support Lightning components and Visualforce.

Get to Know Your Options

There are three core programmatic technologies to learn about as a Salesforce developer.

  • Lightning Component Framework: A UI development framework similar to AngularJS or React.
  • Apex: Salesforce’s proprietary programming language with Java-like syntax.
  • Visualforce: A markup language that lets you create custom Salesforce pages with code that looks a lot like HTML, and optionally can use a powerful combination of Apex and JavaScript.

Let’s do a quick overview of each of these technologies and see what they look like in our DreamHouse app.

Lightning Components

The Lightning Component framework is a user interface development framework for desktop and mobile. As its name suggests, it’s a component-based approach to UI development. Using prebuilt and custom Lightning components, you can quickly develop sleek and consistent UIs for your apps.

If you’re familiar with frameworks like AngularJS, React, or Polymer, you have a good idea of what to expect with Lightning components. The benefit, of course, is that Lightning components are ready to go with all your business data in Salesforce.

Let’s dive back into the DreamHouse app and see Lightning components in action. Let’s take a look at a custom Lightning component in an app, and then look at how it’s created.

From the App Launcher The App Launcher Icon., click Properties. Pick a property from the list to open its detail page. There are quite a few Lightning components on this page, but we’re going to look at one in particular: the map. This map simply shows the location of the property and lets the user enlarge it.

Highliting the map component on the property detail page.
Now, let’s see how this component was created.
  1. Navigate to Setup by clicking the gear menu The Setup gear icon. and then clicking Setup.
  2. In the Quick Find bar, search for and click Lightning Components.
  3. Click Map and then click Developer Console.

The Developer Console is the Salesforce integrated development environment (IDE) that you can use to develop, debug, and test code in your org. Right now, it contains the code for the property map you just saw. We’re not going to dig into the code at the moment—there’s another module for that. But take a few seconds to notice some of its key attributes. It’s XML markup. It contains both Lightning-specific and static HTML tags. It uses a <namespace:tagName> convention for its tags, which each represent a smaller, or child, component.

On the right side of the Developer Console, you also see some additional assets that are part of this component’s bundle. If you click on CONTROLLER, for example, you see some JavaScript. Lightning components use client-side JavaScript controllers and server-side Apex controllers. You can create and access those controllers, as well as other assets like component stylesheets, from the bundle menu.

Another great thing about Lightning components is that they’re mobile-ready. When you create apps for the Salesforce mobile app, you don’t have to worry about the way Lightning components display. You can just add them to the app and let the platform handle the rest.

For more on Lightning components, check out the resources section.

Apex

Earlier, we talked about Process Builder as a low-code tool. While it’s low-code, you can also extend the functionality of Process Builder by writing a little code. Let’s go back to DreamHouse and take a look at a process that sends a push notification whenever a home price changes.

  1. From Setup, search Quick Find for Process Builder and open the Process Builder page.
  2. Click Price Change Push Notification.
  3. Under Immediate Actions, click Push Notification.
  4. Notice the value in the Apex Class field. From the gear menu up top, open the Developer Console.
  5. Click File | Open and use the Filter bar to find PushPriceChangeNotification. Double-click to open it in the Developer Console.

If you’ve ever developed in Java, you can probably figure out most of what’s going on in this class. Again, we’re not going to go over every detail of this implementation. Aside from the Java-like syntax, there are a couple other things to note.

The PushPriceChangeNotification Apex class

First, notice the @InvocableMethod annotation before the method signature. It has a label attribute that allows other tools like Process Builder to execute the method. Another thing to notice is that there are a few queries in the method body.
Property__c property = [SELECT Name, Price__c from Property__c WHERE Id=:propId];

This SQL-like phrase is actually SOQL (Salesforce Object Query Language). You can use SOQL to read records from the database in your code.

Of course, extending Process Builder is only one of many ways you can use Apex to enhance your org’s functionality. For more, take a look at the resources.

Visualforce

The last major pillar of coding on the Salesforce platform is Visualforce. If you’ve done any web development, Visualforce will feel familiar to you. Visualforce lets you create and customize pages in Salesforce as well as integrate with other standard web technologies, including HTML, CSS, and JavaScript.

Before we look at an example, it’s important to talk about the difference between Lightning components and Visualforce pages. The primary difference is right in the name. With Lightning components, you’re developing components that can be pieced together to create pages. With Visualforce, you’re developing entire pages at once. While Lightning components are newer and better for things like mobile development, there are several situations where it can make more sense to use Visualforce. Take a look at the table in User Interface Development Considerations for more details on when to use which.

OK, back to DreamHouse. Let’s look at an example Visualforce page.

  1. From App Launcher click HeatMap. This page shows all the listed properties and their locations in the city.
  2. From the gear menu , launch the Developer Console.
  3. Click File | Open | Pages.
  4. In the Filter bar, enter HeatMap and double-click it to open.

In this file, you see Visualforce markup, HTML markup, CSS, and JavaScript. Notice that the acronym SLDS appears a few times. SLDS (Salesforce Lightning Design System) lets you style your pages so they match the look and feel of Salesforce’s new interface, Lightning Experience. Another thing to notice is that Visualforce uses a similar convention to Lightning components with <apex:tagName>.

Something that’s not shown in this class is the concept of Apex controllers. Before, we mentioned that Lightning components use JavaScript on the client-side and Apex on the server-side. Visualforce pages can also use server-side Apex controllers, and most complex pages use quite a bit. As you continue to explore Visualforce, you’ll get very familiar with Apex controllers.

You can also access and preview Visualforce pages by searching Visualforce Pages from the Quick Find bar in Setup.

retargeting