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

<aura:component >
    <!-- Define method to be called by other components -->
    <aura:method name="callAjax" action="{!c.callAjax}">
        <!-- Method can be, for example, GET or POST -->
        <aura:attribute name="method" type="String" default="GET" />
        <!-- URL to call -->
        <aura:attribute name="url" type="String" />
        <!-- Whether the call should be sync or async -->
        <aura:attribute name="async" type="Boolean" default="true" />
        <!-- Callback method on call complete -->
        <aura:attribute name="callbackMethod" type="Object" />
    </aura:method>
</aura:component>

UtilsController.js

({
    callAjax : function(component, event, helper) {
        //Creaet new request
        var xmlhttp = new XMLHttpRequest();
        //Handle response when complete
        xmlhttp.onreadystatechange = function(component) {
            if (xmlhttp.readyState == 4 ) {
                console.log('xmlhttp: ' + xmlhttp);
                params.callbackMethod.call(this, xmlhttp);
            }
        };

        var params = event.getParam('arguments');
        if (params) {
            console.log('params:', params);
            //Set parameters for the request
            xmlhttp.open(params.method, params.url, params.async);
            //Send the request
            xmlhttp.send();
        }
    }
})

XMLHttpRequest.cmp

<aura:component >
    <!-- Address to send Google to get more information -->
    <aura:attribute name="address" type="String" access="global" default="1 Market St, San Francisco, CA 94105, USA" />

    <!-- Google API key to send if needed; OPTIONAL -->
    <aura:attribute name="apikey" type="String" access="global" />


    <!-- Message information for ui:message component -->
    <aura:attribute name="msg" type="String" default=""/>
    <aura:attribute name="msgSeverity" type="String" />
    <aura:attribute name="msgTitle" type="String" />

    <!-- Add utils component to use aura:method -->
    <c:Utils aura:id="utils" />

    <div class="slds">
        <!-- User input to ask for address and API key if needed -->
        <lightning:input type="text" label="Address" name="{!v.address}" value="{!v.address}" />
        <lightning:input type="text" label="API Key" name="{!v.apikey}" value="{!v.apikey}"/>

        <!-- Send request to Google on button click -->
        <lightning:button label="Call Ajax" onclick="{!c.buttonPress}" />

        <!-- Display errors or return text on success -->
        <aura:if isTrue="{! v.msg != '' }">
            <ui:message severity="{!msgSeverity}" title="{!v.msgTitle}">
                {!v.msg}
            </ui:message>
        </aura:if>
    </div>
</aura:component>

XMLHttpRequestController.js

({
    buttonPress : function(component, event, helper) {
        //Generate URL for request to Google APIs
        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + component.get('v.address');

        //Add API key if provided
        if(!$A.util.isUndefined(component.get('v.apikey'))){
            url += '&key=' + component.get('v.apikey');
        }

        //Make Ajax request
        helper.makeAjaxRequest(component, url);
    }
})

XMLHttpRequestHelper.js

({
    makeAjaxRequest : function(component, url) {
        var utils = component.find('utils');
        
        //Make Ajax request by calling method from utils component
        utils.callAjax("POST", url, true,
                        function(xmlhttp){
                            console.log('xmlhttp:', xmlhttp);

                            //Show response text if successful
                            //Display error message otherwise
                            if (xmlhttp.status == 200) {
                                component.set('v.msg', xmlhttp.responseText);
                                component.set('v.msgSeverity', 'information');
                                component.set('v.msgTitle', 'Success');
                            }
                            else if (xmlhttp.status == 400) {
                                component.set('v.msg', 'There was an error 400');
                                component.set('v.msgSeverity', 'error');
                                component.set('v.msgTitle', 'Error');
                            }else {
                                component.set('v.msg', 'Something else other than 200 was returned');
                                component.set('v.msgSeverity', 'error');
                                component.set('v.msgTitle', 'Error');
                            }
                        }
                      );
    }
})

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

[youtube https://www.youtube.com/watch?v=1w_5B2yxrXo?ecver=2&w=480&h=360]

 

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, 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!!!