Pure Aloe Sample App Part 1: Lightning Components & Salesforce DX

Pure Aloe is a new sample application that demonstrates the power of the Salesforce Platform to build modern apps fast. In this blog post, I share the source code of the application, highlight some of its key features, and provide simple instructions to install it as a Salesforce DX project.

Pure Aloe is a rebranded and anonymized version of the Karibu Centre application showcased during the Dreamforce’17 Developer Keynote. Karibu Centre empowers families in rural Kenya by providing education to children and jobs to parents on its aloe farm. With a goal of creating a self-sustaining model, the aloe Karibu harvests is turned into soaps and other skin care products it sells through distributors and on its own “Organic Savanna” e-commerce site.

Karibu uses Salesforce to manage their its core activities: education, agriculture, and retail. In part 1 of this blog post series, we focus on agriculture, and specifically how Karibu uses Salesforce to manage its aloe fields.

Lightning components

The Pure Aloe application takes advantage of new Base Lightning components available in Winter ’18. For example:

<lightning:tree> is used in the harvestFieldList component to show the harvest fields organized by crop.
<lightning:datatable> is used in the harvestFieldList component to show the harvest fields in a table view.
<lightning:dualListbox> is used in the irrigationDialog component to refine the field selection.
<lightning:slider> component is used in the harvestFieldMap component to allow the user to zoom in and out.

SVG

The harvestFieldMap component shows the harvest fields as an interactive map powered by SVG. SVG vectors are regular DOM elements that you can manipulate in JavaScript in the Lightning component’s controller or helper. For example, you can change the stroke of a polygon to highlight the selected field, change the color of a polygon to represent the field status, or apply CSS transforms to scale the map as the user zooms in and out.

Lightning Data Service

The Lightning Data Service (GA in Winter’18) is used in the harvestField component to retrieve the record data.

The Lightning Data Service is set to EDIT mode so you can also use it to update the record. For example, when you flip the irrigation toggle, the Lightning Data Service is used to save the new irrigation status. You don’t need to write any server-side code to retrieve or update data.

In addition, when you change the record in the harvestField component, all the other components pointing to the same record are notified in real time. For example, when you toggle the irrigation on and off in the harvestField component, the corresponding field is automatically updated in the harvestFieldMap component to display or hide the irrigation icon.

Dynamic Lightning page

Dynamic Lightning pages allow you to create conditional layouts. For example, the Harvest Field record page shows the alert component to draw the user’s attention when the harvest field status is either Alert or Warning. The alert component is not shown when the status of the harvest field is OK. This is done by adding a visibility filter to the component in App Builder.

Custom page template

In addition to standard templates (2 columns, header and 2 columns, and so on), you can now create your own templates that can be used in App Builder. For example, in Pure Aloe, the Two columns with expandable main area template allows you to hide/show the right column to provide more real estate to the main content area when needed. A custom page template is just a Lightning component. You define the layout of your template in the .cmp file, and you declare the different areas in the .design file. Check out expandTemplate.cmp and expandTemplate.design for an example.

Salesforce DX

The Pure Aloe application is built as a Salesforce DX project. With Salesforce DX, the master version of your application’s source code (metadata and code) lives in a version control system (like GitHub), not your org. This makes it easy to collaborate with other developers and to use modern development tools and workflows.

Source code

The source code and installation instructions are available in this GitHub repository.

Summary

The Pure Aloe sample app demonstrates the power of the Lightning Component framework, the Salesforce Platform, and Salesforce DX to build applications faster than with any other platform. Try it out today. And because Salesforce DX keeps source code in version control, it’s easier than ever to contribute to the project and submit pull requests!

Check out Part 2 of the series.

Resources

Trailhead Module: App Development with Salesforce DX
Trailhead Module: Lightning Components Basics
Lightning Components Performance Best Practices

About the author

Christophe Coenraets is a Developer Evangelist at Salesforce where he focuses on the Salesforce Platform, JavaScript frameworks, mobile, and enterprise architecture. Prior to joining Salesforce, Christophe held senior technical positions at Adobe, Macromedia, Sybase and Powersoft where he helped Enterprise customers design, architect and implement strategic applications. Christophe has been a regular speaker at conferences worldwide for the last 15 years. You can follow him on Twitter @ccoenraets.