Lightning Web Component v/s Aura v/s Flow with an Example
Today I tried to implement a simple requirement using all 3 approaches of modern Salesforce Development Technologies.
I am not including Apex Triggers here although they are surely one of the ways the same requirement can be fulfilled. But with focus on point & click tools and new avenues of Salesforce in Lightning, I decided to give it hands on and here are my solutions.
The Business Scenario we try to solve here is a short & easy one. I purposely took this simple example to understand when to use what in future. So, Ideally to reduce number of click and navigation Account Manager request to have a Quick Action to create New Contact with Custom Fields via a simple click while being on the Account Page. Though, Salesforce offers itself a New Contact Quick Action from Account Page — I decided to give it a try. With our solution, we can add as many fields we need and not limit to New Contact Quick Action display. So, Lets get started. Below are 3 solutions to the problem.
- Flow Action via Flow Builder
- Aura Component as a Quick Action
- LWC(wrapped in Aura) as a Quick Action
To give you overview of how it looks — below is the capture.
First Solution : Flow was pretty simple and one of the many advantages of this Point & Click tool is ease, less time and no test cases needed. Step 1 is to create a flow to present user a screen to enter Contact fields and if Account id is pulled in via recordId variable that can be used in flow as per Flow API to fetch accountId of underlying page you are on.
Second Step was to activate flow and put this flow as a quick action on Account Page.
Second Solution was to build a custom Aura Component for Quick Contact Page. For both Aura & LWC i used the same Apex Class to fetch data from server. Please note for both LWC & Aura i havent used any format or data validations on fields as i wanted to keep it simple. But we can surely add a helper method to check for all Contact fields format & field validations as displayed in form we construct. As of now, to keep it simple i only coded the Controller file and the UI markup file.
Component File : Used lightning card to ease the formation of layout. The vital thing to note about the component markup is that since we want to launch this quick contact from Account record page — and we need account Id to stamp on new Contact created- we need to implement two interfaces — force:hasRecordId and force:lightningQuickActionWithoutHeader.
The controller file below only calls the getAccountName method from Apex Class to get the data needed and also inserts/upserts the contact in database by passing in the captured contact values in form and accountId. Ensure to make both apex methods @AuraEnabled and the DML method saveContact shouldnt have cacheable=true as it went on giving me error that took me long time to fix.
Third Solution was to implement same requirement by a Lightning Web Component aka LWC. Now the first challenge i faced was i uncovered that LWC can still not be launched as Quick Actions. So, the workaround is to wrap the LWC inside aura component and then launch it as a Quick Action. This was very easy to write. As per the programming model i again only had to write markup in html and client side controller in javascript. We use the same apex class we used above and same apex methods. All we had to do in JS file was to import Apex class methods , handle change events and handle server side calls.
One thing i learned was If we want to create a record via apex, we will need to create a new instance of the sObject in JSON format as {'sobjectType':'Contact'} and then utilize that to set all other attributes. Besides, you can use wire service to fetch data from server easily but not to set/upsert data in server. I had to use the Javascript way of promise object to call the DML on Apex and get the response back. Besides, the LWC was easier to implement as lot of things like Navigating to Account record page after creating contact and showing toast notification was easier. Maybe thats because I wasnt ever a handsOn Aura person. But thats kinda my take on it.
The final step was to again wrap this LWC within Aura to be called as a Quick Action. Note — we pass the recordId parameter while calling child Lwc component here and it gets record id as it implements hasRecordId interface.
So finally the out put is below.
My entire code link:
