Salesforce: Make Ajax calls with Lightning Components

LockerService has been a source of frustration for many Lightning component developers. But the fact remains that LockerService is here to stay. It’s an important part of security in when using Lightning components from different sources.

LockerService is not just bad news. Now that it’s mandatory, developers can use many long-awaited features. One of those is making Ajax calls directly from Lightning components. This blog will walk you through a demo of making an AJAX call to Google APIs to get information about a location.

Let’s start by going to SetupCSP Trusted Sites and adding https://maps.googleapis.com as a trusted site. This will allow a Lightning component to make a call to this domain and get information back.

First I decided to build a utility component that can be called from any component to make an Ajax call and process result. Feel free to use this component for demo or actual use as needed.

Utils.cmp

UtilsController.js

XMLHttpRequest.cmp

XMLHttpRequestController.js

XMLHttpRequestHelper.js

On success, you should see return response from maps.googleapis.com for provided address.

This is a very welcome change and will solve many issues now that we can make calls directly from Lightning components. I came across it this week and wanted to test and share it here.

Note: Source code used in this blog is available at https://github.com/jrattanpal/Blog-LC-Ajax

Salesforce: Implement Google Maps in Lightning Components

I don’t think I need to introduce Salesforce and Google Maps. If I do then maybe this blog is not for you. Visualforce has been in salesforce for a while and works amazingly well with Google Maps. But now we have lightning components. Do Google Maps work in lightning components?

The short answer is, no. This is because of locker service. Google Maps add multiple <script> tags when loaded. With locker service enabled, this is not possible due to security restrictions.  Currently you can disable locker service but eventually it will be mandatory. So, is there any other way Google Maps can work in lightning components?

YES, Google Maps work in Lightning components. To get Google Maps to work in lightning components we will need to implement maps in visualforce page and embed in lightning components as iFrame. One library that locker service team opened in locker service is window.postMessage. This allows lightning components to send/receive messages to/from visualforce pages. We could use this library and implement Google maps.

I am sure by now you’re all wanting to get into the code. Well, let’s get to it.

Use Case

We will go through Account list and show all the accounts on Google map based on BillingAddress.

Pre-requisites

Following are some of the pre-requisites to get this demo to work:

  • You need to get a free Google API key for using Google Maps
  • Google Maps work with longitudes and latitudes and not addresses. If we want to display accounts on maps then we will need to get long/lat for these accounts. For this, we need to enable “Data Integration Rules” for account.
    • This can update existing records (if you choose to) or automatically setup Long/Lat for new accounts.

Demo

 

Implementation

Now that we have setup the use case and have the data ready for this, let’s dive into code. More information about architecture and access to source code is available in github:

  • GoogleMap.cls:
    • This class returns list of all accounts which have BillingLatitude and BillingLongitude
    • Do note that using “!=” in a SOQL query can impact performance; we used it just for demo purposes
  • GoogleMap.page:
    • This page can send/receive messages to/from Lightning components
    • It receives a parameter “lcHost” which will be Lighting component URL to send messages to components on Lightning component URLs; required when using window.postMessage
    • Once page loads, visualforce will send a message to Lightning component that page was successfully loaded
      • Lightning component has no way to know when iFrame is loaded and when to send data for map
      • If we try to do it before iFrame is ready then we will get an error as we try to send data to non-existent page
    • Upon receiving Google map data, Google map library will be loaded and data will be used for drawing map
    • Note: We could have used <apex:map> but I wanted to display multiple accounts and also be able to control different settings for Google maps
  • GoogleMap.cmp:
    • This component will receive Google map options and data provided by calling component
      • This allows the component to be used from any component and not just Account because component just expects data in pre-defined format
    • Once visualforce page has been loaded (LC is notified by visualforce via an event), Lightning component will send data to visualforce page
  • DemoApp.app: Application:
    • DemoApp loads account information on init
    • That information is sent to GoogleMap component for Google Map on visualforce page

Architecture

This was tested in Spring’17 org and works fine even with Locker Service. On the outside, it all looks very complicated but once it has all been setup it looks very promising. window.postMessage library is very promising and offers opportunities for many use cases.

What are you waiting for? Go ahead and get it to work!!

Salesforce: Hey, Do You Know?: Is it possible to use Encrypted Fields with Formula Fields?

The short answer is, YES.

But, it’s always nice to have more details. So, let’s get to it.

Salesforce Shield protects your enterprise with point-and-click tools that enhance trust, transparency, compliance, and governance across all of your business-critical apps. Salesforce Shield consists of 3 products:

Shield Platform Encryption gives your data a whole new layer of security while preserving critical platform functionality. It enables you to encrypt sensitive data at rest, and not just when transmitted over a network, so your company can confidently comply with privacy policies, regulatory requirements, and contractual obligations for handling private data.

Platform Encryption is evolving over time to include many use cases. One of the use cases is, to be able to use Encrypted Field with Formula Fields.

As of now, this feature is not available. Lack of this feature results in many workarounds of reduced functionality. For example: if we decide to encrypt a field then we can’t use that field in formulas, or if want to use it in formulas then…..well, you get it.

Spring’17 brings with it a new beta feature. This will allow users to use encrypted fields with formula fields. More information this feature is at https://releasenotes.docs.salesforce.com/en-us/spring17/release-notes/rn_security_pe_formulas.htm.

“You can use several operations and functions, including concatenate (& and +), isBlank, isNull, if, hyperlink, and image. You can reference Quick Actions, and render encrypted data in text, date, and date/time formats. What’s more, your formulas can reference an unlimited number of encrypted fields, giving you even more of the data you’re looking for.”

Keep in mind that this is a “Beta” feature. It means that there might be some known limitations. For example, at the time of this blog, this feature doesn’t work if you want to use LEN in your formula.

To enable this feature, you can log a case with salesforce. It seems likely that this might be a GA feature in Summer’17. But as always, Salesforce’s “safe harbour” rule applies here.

Well, what are you waiting for? if you need it then go ahead and log a case.

And remember,………have fun!!

Salesforce: Hey, Did You Know?: Can you use Third-Party Libraries in Lightning Components?

One highly sought after feature (among others) in Lightning Components was, being able to use third-party frameworks/libraries in lightning components. When lightning components were released, it was hinted that we will eventually be able to use those libraries. Everyone (or at least I was) was holding their breath to see how it will unfold. Main problem was security. Some frameworks like Angular/React take over entire DOM and rebuild it. But that couldn’t be allowed in lightning components due to data sensitivity.

But the wait is over! Yes, we finally have a way to use these libraries in lightning components. It strikes a nice balance between security and usability.

If you haven’t already guessed then I am talking about “Lightning Container”. You can create an app in HTML, zip it up, store it as a static resource and embed it in your components. The embedded HTML page is loaded in a different DOM (with limited access to the parent DOM) and runs in its own context. But without being able to talk to your component it will be quite useless, won’t it?

Fear not, the Lightning Container Component (lightning:container) is a convenience component that wraps an iframe and provides a simple API to communicate between the iframe container and its content. Following are some of the resources that can get you started:

Let’s start this amazing journey together!!!

Salesforce: Hey, Did You Know?: What is Financial Services Cloud?

Financial Service Cloud is built on top of sales cloud as a managed package. All partner applications built on Financial Services Cloud are technically extension packages of Financial Services Cloud managed package.

Financial Services Cloud still does 3 releases a year which match with Salesforce releases. New features are continually being added to this cloud. For latest features, you can check spring’17 release notes.

Salesforce: Hey, Did You Know?: What is the difference between Lightning Application events vs Component events?

Application Events:

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

 

Component Events:

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event.