Code with Salesforce Languages
- 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.
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.
Let’s do a quick overview of each of these technologies and see what they look like in our DreamHouse app.
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 , 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.
- Navigate to Setup by clicking the gear menu and then clicking Setup.
- In the Quick Find bar, search for and click Lightning Components.
- 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.
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.
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.
- From Setup, search Quick Find for Process Builder and open the Process Builder page.
- Click Price Change Push Notification.
- Under Immediate Actions, click Push Notification.
- Notice the value in the Apex Class field. From the gear menu up top, open the Developer Console.
- Click PushPriceChangeNotification. Double-click to open it in the Developer Console. and use the Filter bar to find
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.
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.
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.
- From App Launcher click HeatMap. This page shows all the listed properties and their locations in the city.
- From the gear menu , launch the Developer Console.
- Click .
- In the Filter bar, enter HeatMap and double-click it to open.
You can also access and preview Visualforce pages by searching Visualforce Pages from the Quick Find bar in Setup.