Nov 17th, 2021
Posted on Feb 26, 2019 Tools & Tips
Let’s look at how we would port this functionality over into Lightning. The way to do this is via a new Lightning Component that will be added to the Case Page Layout.
Simple enough. This is a Detail Button on Case that, on-click, performs the following:
You don’t need to understand it, you just need to know “it works”. Having reviewed your current solution in Classic, let’s look at how we would replicate this functionality in Lightning Experience via a Lightning Component.
The LEX Way: Step 1) Create a Lightning Component (“Build the Button”)
Adjust your <aura stub as follows and save your component.
There is a lot of power in those simple lines. I will highlight some of the critical parts:
The LEX Way: Step 2) Revise your webservice class
For a method to be visible and usable from a Lightning Component, the @AuraEnabled annotation must be used for that method. And while we are making minor changes to this class, let’s also add two simple methods to support a query and an update. All methods must be @AuraEnabled. We will use all three methods in our final solution.
Your revised calloutClass.cls should look like:
Create a Component Controller via the Developer Console. You can simply click on the “Controller” row in the console as shown, and a new controller stub will be created for you:
Next, modify your controller stub. Your final controller should look like:
This is a fairly simple controller, and much of this should be viewed as “boilerplate” as you will use this type of pattern for many of your controller or helper methods. Ultimately, there is no substitute for reviewing and understanding the official Salesforce.com Lightning Component Documentation. Note the following:
Create a Component Helper via the Developer Console, this is where we will write our updated Case to the SF database. You can simply click on the “Helper” row in the console as shown, and a new helper stub will be created for you:
Next, modify your helper stub. Your final helper should look like:
This is a fairly simple helper. Like our controller, much of this should be viewed as “boilerplate” as you will use this type of pattern for many of your controller or helper methods. Note the following:
Step 5) Finished! Add the Component to the appropriate Page Layout.
Disclaimer: the intent of this post was NOT to teach Lightning Components or the Lightning Framework. It is assumed that the reader will engage with the official Salesforce.com Documentation, including Trailheads. Stay engaged, keep learning, and have fun!
The team at EightCloud has consistently delivered projects on time and with great attention to detail. Our consultant is particularly adaptable to our changing needs and is always thorough and accountable on everything we ask him to engage on. Couldn't ask for a better partner as we scale out our SF.com implementation!"
- Michelle Wai, Arizent
Partners and friends, we are proud to share the new EightCloud brand and website with you. Our transformation reflects our commitment to helping you achieve Salesforce excellence through a focus on efficiency, expertise and genuine partnership.
We wish you the best and look forward to connecting with you soon!