Day: September 26, 2018

Apex Cacheable methods


With salesforce winter 19 release, Salesforce introduces another way to improve the performance of the lightning component cache by mark an Apex method as storable (cacheable) instead of using setStorable() on every JavaScript action. With the apex storable methods, you can centralize your caching notation for a method in the Apex class instead of doing at client side javascript. Marking a method as storable improves your component’s performance by quickly showing cached data from client-side storage without waiting for a server trip. If the cached data is stale, the framework retrieves the latest data from the server.

How to Use?

To cache data returned from an Apex method for any component with an API version of 44.0 or later, annotate the Apex method with
@AuraEnabled(cacheable=true). For example, the following method is made as cacheable

Here is the complete apex class.

Lightning Component 

JavaScript controller

Now if the javascript code we no need to use setStorable() action instead we are using cachable apex methods.

Can I use javascript storable along with Cachable methods?

Yes ..You can able to use both setStorable and apex cacheable methods together. But recommended will update an existing component to API version 44.0, remove setStorable() calls in JavaScript code along with Apex Cachable methods.

Can I use the Cacheable methods in visualforce?

You can able to use the cacheable methods in visualforce controller also. Here is the simple page that calls the apex controller with cachable actions.

Multiple Sections with lightning:accordion

In this blog, I am going to show how to open Multiple Sections with lightning: accordion with winter 19 enhancement. An earlier version of the accordion doesn’t allow more than one content panel to be open at the same time, and it takes a lot of effort to do that to do that by using jquery or other javascript libraries. Now with allowMultipleSectionsOpen attribute on the accordion, you can able to open multiple sections of the accordion at the same time. By default, only one accordion section is expanded at a time.

Apex Class

The below simple class will fetch all the accounts and its contacts. In this example, we will be displaying account and its contacts as an accordion section.

Lightning Component

The below component will be displayed in the accordion with multiple sections capability.


Code Highlights  

  1. The below attribute is to hold the account object and its contacts

2. The below Aura init handler to get the data from the server and set to the account list attribute

3. The below line shows the accordion to open multiple sections of the accordion at the same time by setting an allowMultipleSectionsOpen attribute to true.

4. Iteration all the collection to show the accordion sections.

5 . the below line is to create an accordion section.

The below image shows the multiple sections of the accordion at the same time

EmpJs Streaming API


Salesforce introduced a new component lightning:empApi  with winter 19 to support streaming API. Prior to winter 19 in order to use the streaming API, we need to upload the CometD javascript libraries to the static resource and we need to use cometD by using ltng:require along with afterscriptsloaded . But with the new EmpJs Streaming API library which subscribes to a streaming channel and listens to event messages using a shared CometD connection without using the CometD static resource. This component is supported only in desktop browsers. The lightning:empApi component provides access to methods for subscribing to a streaming channel         and listening to event messages. All streaming channels are supported, including channels for platform events, PushTopic events, generic events, and Change Data Capture events. The lightning:empApicomponent uses a shared CometD connection.

To call the component’s methods, add the lightning:empApi component inside your custom component and assign an aura:id attribute to it.


This example subscribes to a channel when you click the Subscribe button. The channel is specified in an input component. The default value provided is an example platform event channel. Replace the value with the desired channel name. A callback function on the subscribe() call prints the payload of each received event to the console. To view the event messages, enable your browser console view. The Unsubscribe button lets you stop the subscription and stop receiving event notifications.Add the following client-side controller functions. They are called by the Subscribe and Unsubscribe buttons. Each controller function calls the corresponding subscribe or unsubscribe method on the empApi component.

Step 1: Create a Pust topic

create a simple push topic as shown below the workbench.

Step 2: Use Emp Api in your code

Here is the simple component

After saving the component you can enter the streaming channel name and click on subscribe.

After creating a case record you will see the notifications on the lightning page.

Google Maps with lightning:map component

with salesforce winter 19 release, Salesforce introduced the lightning:map component that will display the google maps on lightning experience. Prior to winter 19 release, we used to do a hack to show the google maps on the lightning experience by using visualforce page. The lightning:map component securely displays a map of one or more locations using Google Maps.

You can pass markers to the component to define the locations to map. A marker can be a coordinate pair of latitude and longitude, or a set of address elements: City, Country, PostalCode, State, and Street. You need to pass the locationmapMarkers property to display the map.

For example:

map-markers is an array of markers that indicate location. A marker contains

  • Location Information: This can be a coordinate pair of latitude and longitude or an address composed of address elements.
  • Descriptive Information: This is information like title, description and an icon which is information relevant to the marker but not specifically related to location.

The location information supports the following address elements: CityCountryPostalCodeState, and Street. Note that to support reliable geocoding of addresses, if Street is specified then at least one of CityCountryPostalCode or State must be specified.

Here’s an example of a marker that uses address elements.


Apex Class : 

the below apex class will get the billing  address information from the account will display on the maps


Here is the component

javascript controller

After creating the component you can able to the see the map with markers as shown below