Building a Basic Salesforce Mobile App with Lightning App Builder

\ In the fall of 2018, I decided to replace an application my mother-in-law was using for her real estate business. I decided to replace the application with an Angular client and Spring Boot service running inside of AWS. The biggest lesson I learned was that I felt like I spent more time trying to understand AWS and less time making enhancements to he**r application.**

\ That all changed when spring 2020 arrived…

\ While the entire world was trying to figure out how to navigate amid a global pandemic, I was diving into the Heroku PaaS… and loving it. Within a very short period of time, I was able to move this same application over to Heroku. While I know that Heroku is using AWS behind the scenes, it has had zero impact on my time. I can stay focused on what I truly enjoy: adding value to custom applications and deploying new releases using basic git-based operations.

\ Though I understand Heroku is not an ideal choice in every situation, a large majority of the applications running today could take advantage of what Heroku has to offer and keep feature teams supporting those applications laser-focused on adding new functionality.

\ As I’ve started to do more work in the mobile app space, I wondered if there is a Heroku-like option for mobile app development for building Salesforce apps. I decided to take a look first at what the Salesforce Engineering team had to offer.

\ # About the Lightning App Builder

The Salesforce Lightning App Builder is a point-and-click tool to create single-page applications that can be used on mobile devices. Like what Heroku offers from an application hosting perspective, the Lightning App Builder product handles a majority of the application foundation. This allows developers to focus their time on meeting business needs and objectives.

\ The Lightning App Builder supports single-page applications that fall into one of three categories: \n

1. App - used for custom applications 2. Home - landing page upon login 3. Record - page layout for a focused perspective of data

\n For this article, I will focus on the App option and create a brand new application.

# A “Stand Up” Use Case

In the three decades that I have been creating applications, I have been a member of more than my fair share of feature teams. During that time, I have found joy in hearing creative developers provide witty responses to the ever-popular team manager question, “Is it done yet?”

\n While agile teams don’t typically ask the question the same way that traditional project managers would, the need to communicate your current status is still part of the daily regimen for most feature developers. To help developers keep things fresh, we will create the “Stand Up” app using the Lightning App Builder.

\ Consider these high-level requirements: \n

1. Create a custom object (called Stand Up) to house the following information:

1. Name (existing property) will be the response 2. Type includes the following values to assign a type to the response:

1. Positive 2. Neutral 3. Negative 2. Create a Stand Up component and display four buttons:

1. Positive 2. Neutral 3. Negative 4. All 3. The basic flow of the app:

1. Starting the app will present the four buttons (noted above) 2. When the user selects a button, select a random response that matches the type property of the custom object. The All button will select a random response across all three types. 3. Display the response on the screen for the developer to relay during the daily stand-up session. 4. The App will run inside the Salesforce mobile client.

# Lightning App Builder in Action

With __[Visual Studio (VS) Code](https://code.visualstudio.com/)__ running and the __[Salesforce Extension Pack](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode)__ installed, getting started with the Stand Up app is as simple as using the Cmd+Shift+P (on my MacBook Pro) or Ctrl+Shift+P (Windows machines) and typing the following command:

\ `SFDX: Create Project`

\ To make things quick and easy, I selected the Standard option:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-lla3yew.png)

I called my project **StandUpLightningWebComponent**:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-67b3yzz.png)

I placed the project into a folder called **stand-up-web-component** and opened a new workspace in VS Code:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-cyc3y20.png)

Next, we need to connect to a Salesforce org, which I will use one of my existing sandboxes. If you need to create a new one, then check out the following URL:

\n __ __

\ Once you have a developer org to use, you can then use the following Cmd+Shift+P/Ctrl+Shift+P command to connect VS Code to that org:

\ `SFDX: Authorize an Org`

\n VS code will prompt for a login URL option. I selected the Project Default option:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-ghd3ysi.png)

When asked for a login alias, I simply hit the Enter key:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-i8e3y4b.png)

A browser window appeared, and I logged in to my sandbox org. The following dialog appeared:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-qcf3ynt.png)

\ VS Code is now connected to my sandbox, and we are ready to get started with the Stand Up component.

## Creating the Stand Up Custom Object

Using the browser page that opened in the section above, I used the Salesforce Setup perspective to create a new custom object. If you happened to close that browser window, use the following VS Code Cmd+Shift+P/Ctrl+Shift+P command to open the default org in a browser window:

\ ```javascript SFDX: Open Default Org ```

\n Within **Setup**, I simply navigated to **Objects and Fields | Object Manager**. Next, I used the **Create | Custom Object** option:

![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-yug3y2i.png)

I created a new custom object with a label of **Stand Up** and kept the default object name of **Stand_Up**. However, I did replace the default Record Name value with **Witty Response**:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-8jh3ydz.png)

I left default values for everything else, and I clicked the **Save** button to establish the new object.

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-47i3y9u.png)

In order to create the Type property, I navigated to the **Fields & Relationships** option and clicked the **New** button. For this field, I chose the **Picklist** option and clicked the **Next** button, which led to the following screen:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-pej3yjr.png)

The picklist will be limited to the three choices noted above. I clicked the **Next** button twice (to accept these values and the default field security), and then clicked the **Save** button to add the new field. The Stand Up object is ready for use:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-f4k3yy1.png)

Next, I used the **Integrations | Data Import Wizard** process in Salesforce to import the following records from the `sample-data.csv` file into the **Stand Up**custom object. \n

```javascript All is good in the hood!,Positive I am free and need something to work on.,Positive Should be finished today.,Positive Been battling a migraine - no update.,Neutral It works but it hasn't been tested,Neutral QA is testing things right now - fingers crossed.,Neutral Still making progress - but not finished.,Neutral Waiting for my merge-request to be approved.,Neutral I am honestly thinking about a career change.,Negative It is as done as it is gonna be - is that good enough?,Negative My dog ate my code and I am starting over.,Negative ```

\ If you are unfamiliar with the process, you can read about how to use the import wizard here:

\ __[Data Wizard](https://help.salesforce.com/s/articleView?id=sf.data_import_wizard.htm&type=5)__

\ Once the import was completed, I create a file called Stand_Up__c.soql file inside the Scripts | soql section of VS Code, which contained the following contents:

\ ```javascript // Use .soql files to store SOQL queries. // You can execute queries in VS Code by selecting the // query text and running the command: // SFDX: Execute SOQL Query with Currently Selected Text

SELECT Id, Name, Type__c FROM Stand_Up__c ORDER BY Name ASC ```

\ Next, I highlighted the SELECT statement and used the Cmd+Shift+P/Ctrl+Shift+P command to select the following option: \n

```javascript SFDX: Execute SOQL Query with Currently Selected Text ```

\n This action produced the following results in my Terminal tab:

\ ```javascript Starting SFDX: Execute SOQL Query...

12:29:51.99 sfdx force:data:soql:query --query SELECT Id, Name, Type__c FROM Stand_Up__c ORDER BY Name ASC

Querying Data... done

ID NAME TYPE__C ────────────────── ────────────────────────────────────────────────────── ──────── a092L00000E6eX4QAJ Been battling a migraine - no update. Neutral a092L00000E6eX2QAJ I am free and need something to work on. Positive a092L00000E6eX9QAJ I am honestly thinking about a career change. Negative a092L00000E6eXAQAZ It is as done as it is gonna be - is that good enough? Negative a092L00000E6eX5QAJ It works but it hasn't been tested Neutral a092L00000E6eXBQAZ My dog ate my code and I am starting over. Negative a092L00000E6eX6QAJ QA is testing things right now - fingers crossed. Neutral a092L00000E6eX3QAJ Should be finished today. Positive a092L00000E6eX7QAJ Still making progress - but not finished. Neutral a092L00000E6eX8QAJ Waiting for my merge-request to be approved. Neutral

Total number of records retrieved: 10.

12:29:52.681 sfdx force:data:soql:query --query SELECT Id, Name, Type__c FROM Stand_Up__c ORDER BY Name ASC ended with exit code 0 ```

\ Finally, I wanted to pull all the metadata for the custom object into VS Code. This way, the custom object can be included in the git-based repository, eliminating the need for component users to create the object manually.

\ To import the Stand Up custom object into VS Code, use the following command from the Terminal window:

\ ```javascript sfdx force:source:retrieve -m CustomObject:Stand_Up__c ```

\ The following output appeared in VS Code:

\ ```javascript ╭─jv@me ~/projects/jvc/stand-up-web-component/StandUpLightningWebComponent ╰─$ sfdx force:source:retrieve -m CustomObject:Stand_Up__c Preparing retrieve request... done === Retrieved Source FULL NAME TYPE PROJECT PATH ────────────────── ──────────── ──────────────────────────────────────────────────────────────────────── Stand_Up__c.Type__c CustomField force-app/main/default/objects/Stand_Up__c/fields/Type__c.field-meta.xml Stand_Up__c CustomObject force-app/main/default/objects/Stand_Up__c/Stand_Up__c.object-meta.xml ```

\ It is also possible to achieve the same result in VS Code by clicking the cloud icon in the toolbar, locating the items you wish to retrieve and pushing the download icon.

\ On the left-hand side of VS code, the Stand Up custom object is now available:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-vul3yy4.png)

With the object and data ready, we can build the Lightning Web Component which will be used with the app.

## Creating the Stand Up Controller

We will create the Stand Up controller first, which will act as an API to locate the appropriate response.

\n We can use the following Cmd+Shift+P/Ctrl+Shift+P command to create the StandUpController class:

\ ```javascript SFDX: Create Apex Class ```

\ I populated the simple controller as noted below:

\ ```javascript public with sharing class StandUpController { @AuraEnabled(cacheable=false) public static Stand_Up__c getRandomResponse(String responseType) { List responseList;

if (responseType.equals('all')) { responseList = [SELECT Name, Type__c FROM Stand_Up__c]; } else { responseList = [SELECT Name, Type__c FROM Stand_Up__c WHERE Type__c = :responseType]; }

return getRandomFromList(responseList); }

private static Stand_Up__c getRandomFromList(List responseList) { if (responseList == null || responseList.isEmpty()) { Stand_Up__c standUpResponse = new Stand_Up__c(); standUpResponse.Name = 'Ummmm.......'; standUpResponse.Type__c = 'Neutral';

return standUpResponse; }

Integer count = responseList.size(); Integer rand = Math.floor(Math.random() * count).intValue();

return responseList[rand]; } } ```

\ The client will call the `StandUpController.getRandomResponse()` method, passing in the appropriate `responseType` option, which will return a `Stand_Up__c` record. If there are no records available to match the request, then a new `Stand_Up__c` object will be returned with the neutral status of simply “Ummmm.......”

## Creating the Stand Up Lightning Web Component

We are now ready to create the Lightning Web Component for the Stand Up app.

\ We can use the following Cmd+Shift+P/Ctrl+Shift+P command to create the standUp Lightning Web component:

\ ```javascript SFDX: Create Lightning Web Component ```

\n The first thing we need to do is update the`standUp.js-meta.xml` to make this component available for use:

\ ```javascript 53.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ```

\ Next, the `standUp.js` needs to be updated to process requests by the app, interacting with the controller we created in the last section:

\ ```javascript import { LightningElement } from 'lwc'; import getRandomResponse from '@salesforce/apex/StandUpController.getRandomResponse';

export default class StandUp extends LightningElement { standUpResponse = null; error = null;

getPositiveResponse() { this.getRandomResponseFromSalesforce('Positive'); }

getNeutralResponse() { this.getRandomResponseFromSalesforce('Neutral'); }

getNegativeResponse() { this.getRandomResponseFromSalesforce('Negative'); }

getAnyResponse() { this.getRandomResponseFromSalesforce('all'); }

getRandomResponseFromSalesforce(responseType) { this.standUpResponse = null; this.error = null; getRandomResponse({responseType}) .then((standUp) => { this.standUpResponse = standUp.Name; }) .catch((error) => { this.error = JSON.stringify(error); }); } } ```

\ Finally, we need to update the `standUp.html` file to include the view-layer logic:

\ ```javascript Select the type of update you wish to find:

Today's Update: {standUpResponse}

Error: {error}

```

\ Now, we are ready to deploy the Stand Up app to Salesforce.

## Deploying to Salesforce

Pushing all my code from the local machine to Salesforce is simple. All I need to do is right click on the **force-app/main/default** in the navigator and select the **SFDX: Deploy Source to Org** option:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-e3m3yqs.png)

Once completed, the following dialog will appear in VS Code:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-e6n3yc1.png)

Now we are ready to add the Lightning Web Component to a new app in Salesforce.

## Creating a New Lightning App in Salesforce

I switched over to the browser tab logged into my Salesforce org and opened the **Setup** perspective. Next, I navigated to the **Apps | App Manager** page and clicked the **New Lightning App** button.

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-jlo3yrg.png)

I decided to call the new app Stand Up and even found a nice little icon to use. I used the rest of the default settings from the wizard, except the last screen, where I granted all users access to this app.

\n Then, I navigated to the**User Interface | Lightning App Builder** screen. Here, I created a new **Lightning App Page** called **Stand Up**, which was designed as an **App Page** with a single region.

\n On the left side of the screen, I could see my standUp LWC under the Custom section. All I had to do was drag that component over and drop it into the single region for the Lightning-based page.

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-9dp3ydf.png)

After saving the component, I used the activation process to expose the Lightning page for clients to utilize.

\n During the activation phase, I set the App Name to **Stand Up** and found the best icon on the list:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-asq3yib.png)

To set up the Lightning Experience, I dropped the Stand Up app onto the right side of the screen:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-u0r3y3g.png)

For the Mobile Navigation, I added the **Stand Up** Lighting app and made sure it was near the top of the list:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-26s3ypc.png)

After hitting the **Save** button, the Stand Up app was ready for use.

# Using the Stand Up App

After launching the Salesforce mobile app, I was able to see the Stand Up app I just cre**ated:**

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-x3t3yu9.jpeg)

Next, I tapped the **Stand Up** application, which displayed the following screen with my custom LWC:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-jqu3y6v.jpeg)

\ Tapping the **Any** button will return a random response from the `Stand_Up__c` record set:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-0bv3yj6.jpeg)

The app is also available for use in Salesforce, without making any updates to the code:

\ ![](https://cdn.hackernoon.com/images/cINIFbqqBHP6eJ0PSVZp9TroFeI3-usw3y2p.png)

# Conclusion

Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: \n

> *“Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.”* > > \ > *- J. Vester*

\ Just like I found with my evaluation of the Heroku platform, I was able to quickly introduce a Salesforce mobile app by leveraging the Salesforce platform. In doing so, I remained focused on meeting the needs of the application rather than worrying about foundational and design decisions.

\ Truly, this pattern adheres to my mission statement … and the time required to complete this example was measured in minutes instead of hours or even days.