Build the Geolocation App Using Salesforce CLI
Learning Objectives
- Describe how you use the CLI to create an Apex class.
- Describe how you use the CLI command to create an Aura component.
What Are We Building?
We’ll build our feature—our geolocation app—by writing code locally, and then synchronizing it to our scratch org, where we can test it. We’ll work our way through Apex and several Aura components.
To keep our focus on Salesforce CLI and scratch orgs, we’re going to provide you the code for a geolocation app that uses Aura components.
This diagram shows a high-level overview of the component interactions:
This design makes your app flexible and easier to maintain. As your app and business requirements evolve, you can replace the component that displays the data without reworking the component that queries the data. This design also allows you to reuse these components independently in other applications.
- The Account Search component calls a server-side action to search for accounts.
- The Apex method returns the SOSL search results.
- The Account Search component fires an event notifying other components of the data.
- Components that handle the event display the data to the user.
Create the Account Search Apex Controller
In this step, you create an Apex controller that lets your Aura components retrieve a list of accounts with their location information. Apex classes are stored in a folder called classes
in the force-app/main/default
folder of your Salesforce DX project. You can use the CLI to quickly scaffold a new Apex class.
- From within the
geolocation
project directory, run this command from the root of your project. - Open
force-app/main/default/classes/AccountSearchController.cls
and replace the scaffold code with this code, then save the file. - Now, deploy (synchronize) your new code to your default scratch org which you created in the previous unit.
project deploy start
command looks something like this:
The output of the
Create the Accounts Loaded Aura Event
Using the single responsibility design principle, we delegate the display of the search results by firing an event that is handled by the Account Map and Account List components you create in later steps.
- Create the event in the aura folder.
- Open
force-app/main/default/aura/AccountsLoaded/AccountsLoaded.evt
and replace the contents with this code, then save the file. - Deploy your new code to the scratch org.
project deploy start
command looks something like this:
The output of the
Create the Account Search Aura Component
Next, we’re going to repeat much of this process to create an AccountSearch component. Aura component files are grouped together in bundles, which are stored in folders inside the force-app/main/default/aura
folder. Similar to Apex classes, you can scaffold an Aura component from the command line.
- Create the component in the
aura
folder: As you can see, all the required files are created. - Open
force-app/main/default/aura/AccountSearch/AccountSearch.cmp
and replace its contents with the following code, then save the file. This component has an input field for the user to enter search terms, such as account name or address, and registers event handlers when the component is initialized or the search term changes.
- Open
force-app/main/default/aura/AccountSearch/AccountSearchController.js
and replace its contents with the following code, then save the file. The client-side controller handles the component initialization event and when the search term changes. It calls the helper file to perform the search based on the user’s input.
- Open
force-app/main/default/aura/AccountSearch/AccountSearchHelper.js
and replace its contents with the following code, then save the file. - Deploy the new source to the scratch org.
Create the Account List Aura Component
Next, we create an Aura component that displays accounts in a data table. To know what data to show, it subscribes to the c:AccountsLoaded
event that you created in a previous step.
- Create the component in the
aura
folder. - Open
force-app/main/default/aura/AccountList/AccountList.cmp
and replace its contents with the following code, then save the file. This component listens for the AccountsLoaded event and displays the event data in a table. As the user searches and finds different results, the list updates accordingly.
- Open
force-app/main/default/aura/AccountList/AccountListController.js
and replace its contents with the following code, then save the file. The client-side controller’sonAccountsLoaded
function transforms the event data into the format expected by the<lightning:datatable>
component. TheonRowAction
function navigates to the account record of the row the user interacted with.
- Deploy the new code to the scratch org.