How I Built a Basic Salesforce Mobile App With Lightning App Builder | by John Vester | Apr, 2022

toy blocks

Within the fall of 2018, I made a decision to exchange an utility my mother-in-law was utilizing for her actual property enterprise. I made a decision to exchange the applying with an Angular shopper and Spring Boot service working within AWS. The largest lesson I realized was that I felt like I spent extra time making an attempt to know AWS and fewer time making enhancements to her utility.

That each one modified when spring 2020 arrived…

Whereas your entire world was making an attempt to determine the best way to navigate a worldwide pandemic, I used to be diving into the Heroku PaaS… and loving it. Inside a really brief time frame, I used to be in a position to transfer this identical utility over to Heroku.

Whereas I do know that Heroku is utilizing AWS behind the scenes, it has had zero affect on my time. I can keep targeted on what I actually take pleasure in: including worth to customized functions and deploying new releases utilizing primary git-based operations.

Although I perceive Heroku just isn’t a really perfect selection in each scenario, a big majority of the functions working as we speak may make the most of what Heroku has to supply and maintain function groups supporting these functions laser-focused on including new performance.

As I’ve began to do extra work within the cell app house, I questioned if there’s a Heroku-like choice for cell app improvement for constructing Salesforce apps. I made a decision to have a look first at what the Salesforce Engineering group needed to supply.

The Salesforce Lightning App Builder is a point-and-click device to create single-page functions that can be utilized on cell gadgets. Like what Heroku gives from an utility internet hosting perspective, the Lightning App Builder product handles a majority of the applying basis. This permits builders to focus their time on assembly enterprise wants and goals.

The Lightning App Builder helps single-page functions that fall into certainly one of three classes:

  1. app — used for customized functions
  2. dwelling — touchdown web page upon login
  3. file — web page structure for a targeted perspective of knowledge

For this text, I’ll concentrate on the app choice and create a model new utility.

Within the three a long time that I’ve been creating functions, I’ve been a member of greater than my fair proportion of function groups. Throughout that point, I’ve discovered pleasure in listening to artistic builders present witty responses to the ever-popular group supervisor query, “Is it achieved but?”

Whereas agile groups don’t sometimes ask the query the identical manner that conventional undertaking managers would, the necessity to talk your present standing remains to be a part of the each day routine for many function builders. To assist builders maintain issues contemporary, we are going to create the “Stand Up” app utilizing the Lightning App Builder.

Take into account these high-level necessities:

1. Create a customized object (known as Stand Up) to accommodate the next info:
A. Identify (current property) would be the response
B. Sort contains the next values to assign a sort to the response:
i. Constructive
ii. Impartial
iii. Unfavorable
2. Create a Stand Up element and show 4 buttons:
A. Constructive
B. Impartial
C. Unfavorable
D. All
3. The essential movement of the app:
A. Beginning the app will current the 4 buttons (famous above)
B. When the person selects a button, choose a random response that matches the sort property of the customized object. The All button will choose a random response throughout all three varieties.
C. Show the response on the display for the developer to relay through the each day stand-up session.
4. The App will run contained in the Salesforce cell shopper.

With Visual Studio (VS) Code working and the Salesforce Extension Pack put in, getting began with the Stand Up app is so simple as utilizing the Cmd+Shift+P (on my MacBook Professional) or Ctrl+Shift+P (Home windows machines) and typing the next command:

SFDX: Create Challenge

To make issues fast and straightforward, I chosen the Customary choice:

I known as my undertaking “StandUpLightningWebComponent”:

I positioned the undertaking right into a folder known as “stand-up-web-component” and opened a brand new workspace in VS Code:

Subsequent, we have to hook up with a Salesforce org, which I’ll use in certainly one of my current sandboxes. If you must create a brand new one, then try the next URL:

https://developer.salesforce.com/signup

After getting a developer org to make use of, you may then use the next Cmd+Shift+P/Ctrl+Shift+P command to attach VS Code to that org:

SFDX: Authorize an Org

VS Code will immediate for a login URL choice. I chosen the Challenge Default choice:

When requested for a login alias, I merely hit the Enter key:

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

VS Code is now related to my sandbox, and we’re able to get began with the Stand Up element.

Utilizing the browser web page that opened within the part above, I used the Salesforce Setup perspective to create a brand new customized object. If you happen to occurred to shut that browser window, use the next VS Code Cmd+Shift+P/Ctrl+Shift+P command to open the default org in a browser window:

SFDX: Open Default Org

Inside Setup, I merely navigated to Objects and Fields | Object Supervisor. Subsequent, I used the Create | Customized Object choice, as you may see under:

I created a brand new customized object with a label of Stand Up and saved the default object identify of Stand_Up. Nevertheless, I did substitute the default Report Identify worth with Witty Response:

I left default values for every thing else, and I clicked the Save button to ascertain the brand new object.

With the intention to create the Sort property, I navigated to the Fields & Relationships choice and clicked the New button. For this subject, I selected the Picklist choice and clicked the Subsequent button, which led to the next display:

The picklist can be restricted to the three selections famous above. I clicked the Subsequent button twice (to simply accept these values and the default subject safety), after which clicked the Save button so as to add the brand new subject. The Stand Up object is prepared to be used:

Subsequent, I used the Integrations | Knowledge Import Wizard course of in Salesforce to import the next information from the sample-data.csv file into the Stand Up customized object.

All is sweet within the hood!,Constructive
I'm free and want one thing to work on.,Constructive
Needs to be completed as we speak.,Constructive
Been battling a migraine - no replace.,Impartial
It really works nevertheless it hasn't been examined,Impartial
QA is testing issues proper now - fingers crossed.,Impartial
Nonetheless making progress - however not completed.,Impartial
Ready for my merge-request to be accepted.,Impartial
I'm actually enthusiastic about a profession change.,Unfavorable
It's as achieved as it's gonna be - is that adequate?,Unfavorable
My canine ate my code and I'm beginning over.,Unfavorable

In case you are unfamiliar with the method, you may examine the best way to use the import wizard right here:

Data Import Wizard

As soon as the import was accomplished, I created a file known as Stand_Up__c.soql contained in the Scripts | soql part of VS Code, which contained the next contents:

// Use .soql recordsdata to retailer SOQL queries.
// You possibly can execute queries in VS Code by choosing the
// question textual content and working the command:
// SFDX: Execute SOQL Question with At the moment Chosen Textual content

SELECT Id, Identify, Type__c FROM Stand_Up__c ORDER BY Identify ASC

Subsequent, I highlighted the SELECT assertion and used the Cmd+Shift+P/Ctrl+Shift+P command to pick out the next choice:

SFDX: Execute SOQL Question with At the moment Chosen Textual content

This motion produced the next ends in my Terminal tab:

Beginning SFDX: Execute SOQL Question...

12:29:51.99 sfdx drive:knowledge:soql:question --query SELECT Id, Identify, Type__c FROM Stand_Up__c ORDER BY Identify ASC

Querying Knowledge... achievedID NAME TYPE__C
────────────────── ────────────────────────────────────────────────────── ────────
a092L00000E6eX4QAJ Been battling a migraine - no replace. Impartial
a092L00000E6eX2QAJ I'm free and want one thing to work on. Constructive
a092L00000E6eX9QAJ I'm actually enthusiastic about a profession change. Unfavorable
a092L00000E6eXAQAZ It's as achieved as it's gonna be - is that adequate? Unfavorable
a092L00000E6eX5QAJ It really works nevertheless it hasn't been examined Impartial
a092L00000E6eXBQAZ My canine ate my code and I'm beginning over. Unfavorable
a092L00000E6eX6QAJ QA is testing issues proper now - fingers crossed. Impartial
a092L00000E6eX3QAJ Needs to be completed as we speak. Constructive
a092L00000E6eX7QAJ Nonetheless making progress - however not completed. Impartial
a092L00000E6eX8QAJ Ready for my merge-request to be accepted. Impartial
Whole variety of information retrieved: 10.12:29:52.681 sfdx drive:knowledge:soql:question --query SELECT Id, Identify, Type__c FROM Stand_Up__c ORDER BY Identify ASC
ended with exit code 0

Lastly, I wished to drag all of the metadata for the customized object into VS Code. This manner, the customized object could be included within the git-based repository, eliminating the necessity for element customers to create the thing manually.

To import the Stand Up customized object into VS Code, use the next command from the Terminal window:

sfdx drive:supply:retrieve -m CustomObject:Stand_Up__c

The next output appeared in VS Code:

╭─jv@me ~/tasks/jvc/stand-up-web-component/StandUpLightningWebComponent 
╰─$ sfdx drive:supply:retrieve -m CustomObject:Stand_Up__c
Making ready retrieve request... achieved
=== Retrieved Supply
FULL NAME TYPE PROJECT PATH
────────────────── ──────────── ────────────────────────────────────────────────────────────────────────
Stand_Up__c.Type__c CustomField force-app/important/default/objects/Stand_Up__c/fields/Type__c.field-meta.xml
Stand_Up__c CustomObject force-app/important/default/objects/Stand_Up__c/Stand_Up__c.object-meta.xml

It is usually doable to attain the identical end in VS Code by clicking the cloud icon within the toolbar, finding the objects you want to retrieve, and pushing the obtain icon.

On the left-hand aspect of VS code, the Stand Up customized object is now out there:

With the thing and knowledge prepared, we are able to construct the Lightning Internet Element which can be used with the app.

We’ll create the Stand Up controller first, which is able to act as an API to find the suitable response.

We are able to use the next Cmd+Shift+P/Ctrl+Shift+P command to create the StandUpController class:

SFDX: Create Apex Class

I populated the straightforward controller as famous under:

The shopper will name the StandUpController.getRandomResponse()technique, passing within the applicable responseType choice, which is able to return a Stand_Up__c file. If there aren’t any information out there to match the request, then a brand new Stand_Up__c object can be returned with the impartial standing of merely “Ummmm…….”

We at the moment are able to create the Lightning Internet Element for the Stand Up app.

We are able to use the next Cmd+Shift+P/Ctrl+Shift+P command to create the standUp Lightning Internet element:

SFDX: Create Lightning Internet Element

The very first thing we have to do is replace the standUp.js-meta.xml to make this element out there to be used:

Subsequent, the standUp.js must be up to date to course of requests by the app, interacting with the controller we created within the final part:

Lastly, we have to replace the standUp.html file to incorporate the view-layer logic:

Now, we’re able to deploy the Stand Up app to Salesforce.

Pushing all my code from the native machine to Salesforce is straightforward. All I must do is right-click on the force-app/important/default within the navigator and choose the SFDX: Deploy Supply to Org choice:

As soon as accomplished, the next dialog will seem in VS Code:

Now we’re prepared so as to add the Lightning Internet Element to a brand new app in Salesforce.

I converted to the browser tab logged into my Salesforce org and opened the Setup perspective. Subsequent, I navigated to the Apps | App Supervisor web page and clicked the New Lightning App button.

I made a decision to name the brand new app, Stand Up, and even discovered a pleasant little icon to make use of. I used the remainder of the default settings from the wizard, besides the final display, the place I granted all customers entry to this app.

Then, I navigated to the Consumer Interface | Lightning App Builder display. Right here, I created a brand new Lightning App Web page known as Stand Up, which was designed as an app web page with a single area.

On the left aspect of the display, I may see my standUp LWC underneath the Customized part. All I needed to do was drag that element over and drop it into the only area for the Lightning-based web page.

After saving the element, I used the activation course of to show the Lightning web page for purchasers to make the most of.

Throughout the activation section, I set the app identify to Stand Up and located the very best icon on the listing:

To arrange the Lightning expertise, I dropped the Stand Up app onto the fitting aspect of the display:

For the cell navigation, I added the Stand Up Lighting app and made certain it was close to the highest of the listing:

After hitting the Save button, the Stand Up app was prepared to be used.

After launching the Salesforce cell app, I used to be in a position to see the Stand Up app I simply created:

Subsequent, I tapped the Stand Up utility, which displayed the next display with my customized LWC:

Tapping the Any button will return a random response from the Stand_Up__c file set:

The app can also be out there to be used in Salesforce, with out making any updates to the code:

Beginning in 2021, I’ve been making an attempt to stay by the next mission assertion, which I really feel can apply to any IT skilled:

“Focus your time on delivering options/performance which extends the worth of your mental property. Leverage frameworks, merchandise, and providers for every thing else.”

— J. Vester

Similar to I discovered with my analysis of the Heroku platform, I used to be in a position to rapidly introduce a Salesforce cell app by leveraging the Salesforce platform. In doing so, I remained targeted on assembly the wants of the applying somewhat than worrying about foundational and design selections.

Really, this sample adheres to my mission assertion … and the time required to finish this instance was measured in minutes as an alternative of hours and even days.

In case you are within the supply code for this text, merely navigate to the next repository on GitLab:

Have a extremely nice day!

More Posts