Bringing Data From REST to Your Salesforce Lightning Component Part 2

August 10, 2016

 

In the last lesson we built a very basic record home component.  In this lesson we’ll add some data we’re receiving from Apex and display it in the component. We’ve previously shown how you can integrate with a third party. I’ve adapted Mike’s example into a WeatherUtil class that pulls from Weather Underground (you’ll need your own API key, dev keys are free).

 

One of they key things added into the class are the static methods with the @AuraEnabled annotation. We’ll be using the getLocalWeatherByRecord method to get the weather for our Account records.

 

WeatherUtil (Apex class)

 

 

 

 

 

 

In our component we’ll need to add the controller=”WeatherUtil” to let the component know we’ll be using the WeatherUtil class as a backend Apex class. We also need an attribute to hold the weather data in, and some DOM to present the weather data.

 

Component Body

 

 

 

 

 

 

 

 

 

 

 

 

 

In our client side JS controller we need to add some code to our initial method to call a helper method that will communicate with the Apex backend utility class. The showDetails method is used to show extra hidden data about the weather.

 

JS Controller

 

 

 

In the helper we add a method to get the local weather, and a layout method that will take our results and properly handle them.

 

JS Helper

 

After you save your component, open an Account that has ShippingCity and ShippingState populated to see the results. If you didn’t add the component in the first lesson, add the component to a record home lightning page, then save and activate to see the results.


 

 

Easier Record Home Component Testing

 

Sometimes testing a component within Lightning Experience can be a hassle. I’ve found refreshing can be a bit awkward due to some caching they’re doing. Getting the latest version of your component to show immediately isn’t as simple as opening the record again. To combat this I’ve put my component into a custom app during development so I can more easily refresh.

 

It’s a simple process to imitate a record home component living in LEX. First create a new Lightning Application inside the dev console (or your respective Lightning capable IDE).  Inside the Lightning Application body make your record component and pass it a recordId and sObjectName (if applicable).  

 

To match the styling of the Lightning Design System since a custom application doesn’t have it automatically loaded like Lightning Experience does, add a static resource version of it with ltng:require.

 

Application Body

 

I added some width and margin styling to make it similar to the panel it’d live in on the record home layout. This isn’t required but is helpful in seeing what it would actually look like.

 

Style

 

Now browse to /c/yourapp.app and you’ll be able to see the component as it would appear on the record home.

 

If your company or nonprofit is interested in taking your Salesforce org into the Lightning era, contact us:

 

 

 

Please reload

Recent Posts
Please reload

CRM Science is an award-winning, strategic Salesforce Silver Consulting Partner focused on delivering practical end-to-end solutions to financial services institutions, manufacturing companies, senior living providers, and other industries. We partner with you throughout your Salesforce journey, specializing in developing business processes, implementation across the different Salesforce clouds, and integrating third-party solutions so you can innovate faster, better engage with customers and improve your bottom line with a unified system. 

We are recognized by Salesforce and were awarded the 2016 Partner Innovation Award for Connected Ecosystem, 2017 Partner Innovation Award for Einstein Analytics, 2018 Partner Innovation Award for Lightning Leadership, and 2019 Partner Innovation Award for Community Cloud.

Ready to find the solution to your Salesforce puzzle? Contact us at info@crmscience.com! 

Partner Innovation Award 2018
Partner Innovation Award 2017
Partner Innovation Award 2016
Philadelphia 100 fastest growing companies

Copyright © 2011-2019 CRM Science, Inc. All rights reserved.