Northern Trail Outfitters: New Sample Application with Lightning Components, Platform Events, and Salesforce DX
Northern Trail Outfitters is a new sample application that demonstrates the power of the Lightning Component Framework, the Salesforce Platform, and Salesforce DX (the new Salesforce developer experience) to build modern apps fast. It is a rebranded and anonymized version of the application showcased during the TrailheaDX keynote. 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 with Salesforce DX.
The application allows Northern Trail Outfitters (NTO), a fictional outdoor clothing company, to manage their relationship with retailers. For example, NTO account reps can create “merchandise mixes” for their large retailers. A merchandise mix is a collection of products a retailer carries for a season. These merchandise mixes are then submitted to the manufacturing division of the company to let them know how many of each product to produce.
Watch the video to see the application in action:
Highlights
No Code—Low Code—Code
Like every application, the NTO app has a set of core requirements: identity management, data security, data entry, analytics, process automation, mobile, social integration, AI, and a CRM core that’s at the heart of most business applications. What’s unique about building apps on the Salesforce platform is that it provides a state-of-the-art, metadata-driven, and trusted implementation of these services that you can configure in a point-and-click environment. As a developer, that means you don’t have to reinvent the wheel, and you can focus on high-value features, not infrastructure or commoditized features. For example, although the NTO app can work without any code customization, the addition of some custom components helps provide a sharper, more specialized user experience (UX) in some areas of the application.
Application Composition
The custom User Experience in the NTO application is built as a set of reusable Lightning components that can be assembled in App Builder by developers or admins. These components expose attributes that can be set in App Builder’s point-and-click environment to customize their behavior. For example:
- MerchandiseFilter allows you to select which filter to expose (search bar, category, subcategory)
- Range allows you to select which record field to filter using the slider
- MerchandiseMix allows you to specify whether to show a category breakdown chart
- MerchandiseList allows you to select how many records per page to display
Rich Interactions
The NTO components provide users with a rich experience and immediate feedback. For example, you can build a merchandise mix by dragging items from a list of available products onto the MerchandiseMix tile list. The MerchandiseMix total is automatically recalculated, and a category breakdown chart is automatically updated and animated. Behind the scenes, you’re populating a related list, but you’re using a user-centric UX as opposed to a system-centric UX.
Third-Party Libraries
The NTO application demonstrates how to use third-party libraries in Lightning Components. It uses the CountUp library to animate the Total MSRP and the Chart.js library to show a category breakdown in the MerchandiseMix component.
Client-Side Caching
The NTO application demonstrates different client-side caching strategies:
- Storable actions are used in the MerchandiseMix component
- Lightning Data Service (beta in Summer ’17) is used in the MerchandisePicture component
- A custom cache solution leveraging a simple JavaScript module pattern is used in the CategorySelector component
Check out the Lightning Component Performance Best Practices blog post for more information on these client-side caching options.
Platform Events
Merchandise mixes are submitted to the manufacturing division of the company to let them know how many of each product to produce. The manufacturing application can be built on a legacy or ERP system. Platform Events (new in Summer ’17) facilitate integration between heterogeneous systems. Check out this blog post for more information.
In the NTO application, a Process Builder process (Mix Status Change) automatically publishes the Mix_Submitted platform event when the status of a mix is changed to “Submitted to Manufacturing.” Other applications can then subscribe to the Mix_Submitted platform event to be notified when a mix is submitted (I’ll share the Manufacturing app in my next post as an example).
Salesforce DX
The NTO application is built with Salesforce DX, the new Salesforce developer experience. 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 use modern development tools and workflows.
Installation Instructions
The source code for the application is available in this Github repository. Follow the instructions below to run the NTO app in your own scratch org:
- Install Salesforce DX. Enable the Dev Hub in your org or sign up for a Dev Hub trial org and install the Salesforce DX CLI. Follow the instructions in the Salesforce DX Setup Guide or in the App Development with Salesforce DX Trailhead module.
- Clone the northern-trail repository:
git clone https://github.com/ccoenraets/northern-trail cd northern-trail
- Create a scratch org and provide it with an alias (nto):
sfdx force:org:create -s -f config/project-scratch-def.json -a nto
- Push the app to your scratch org:
sfdx force:source:push
- Assign the nto permission set to the default user:
sfdx force:user:permset:assign -n nto
- Load sample data:
sfdx force:data:tree:import --plan ./data/sample-data-Merchandise__c-plan.json
- Open the scratch org:
sfdx force:org:open
- Select the Northern Trail app in the App Launcher.
- Create a Merchandise Mix record (Click the Merchandise Mix tab, click New, enter data, and click Save).
- Drag items from the Available Merchandise list and drop them onto the Merchandise Mix component.
Summary
The Northern Trail Outfitters 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!
Resources
- Lightning Components Performance Best Practices
- Modularizing Code in Lightning Components
- Caching Data with Storable Actions
- Trailhead Module: App Development with Salesforce DX
- Trailhead Module: Platform Events Basics
- Trailhead Module: Lightning Components Basics
