Components, Tools and Services Useful for the Lightning Developers

3,835

This is a roadmap on various components, tools, and services for Lightning developers. We will throw some light on the following items:

Visualforce
Using Lightning Components with Visualforce pages
Lightning Data Services

This post will provide you with insights on all the above three topics. Moreover, we will tell you about Lightning Data Services. Let us first understand “ Visualforce and the issues faced by developers ?” and “What are the tools to be used with Visualforce ?”.

Visualforce and the Issues faced by Developers

Visualforce is very well adopted by the developers. Visualforce is a server-centric technology in comparison to Lightning experience which is basically client-centric. So, it was needed that Visualforce must be evolved to a certain extent, for the developers to utilize its full potential.

Let us delve into some of the issues that the developers face, while using Visualforce in Lightning Experience.

Issue # 1 :

There was a problem that is faced here that the markup of VF was not matching that of the design, so SLDS came into the picture but this was still a persistent problem. A parallel implementation of SLDS and this was mapped with the markup for VF. Moreover, the VF components were made to have the look and feel of the components in the Lightning Experience. ‘

Issue # 2: Where to Start?

The developers need to know where to start. We have the Visualforce Usage API and the Analyzer to help us in this type of issue.

Visualforce Usage API

It acts as any other API and when used against the Salesforce org returns the number of page views of your Visualforce page for a duration of say last 30 days. This was for resolving the issue on migrating to Lightning Experience.

Moreover, it helped people to understand which all pages were viewed by the end-users. All these were well documented in the trailhead modules but for people who did not have sufficient time to read, the Visualforce Analyzer would be an useful tool.

Let us now understand what is this tool all about?

Visualforce Analyzer

For this, there is a parameter called Lightning Readiness Check, accessible from the setup. When we click, this runs a report by the running the metadata against the org. This gives information on the org and how it fares in the Lightning Experience. This lets you choose those pages with action items for whatever you are supposed to do, with these pages.

There are many instances when Visualforce pages are used inside the Lightning experience.

How to use Visualforce Pages with Lightning Components?

The Visualforce standard component can be used through the App Builder and a Visualforce page is added to your page. Here the Visualforce page standard component acts as a Lightning component wrapper around a Visualforce page.

Before you decide to use a Visualforce page in a Lightning experience, there are certain things that are important for you to understand. These terms are :

Different Origins

We have always stated the fact that Visualforce page and Lightning components have different domains. However, as per the same origin policy of the browser, any code or content from a page cannot be accessed from another page that has a different origin(protocol+host+port).

These enforcements have solid reasons but there is an option of an API, otherWindow.postmessage(). This offers a secure way to exchange messages between window objects with different origins.

Different DOMS

The Visualforce page is loaded with its own iframe. The Lightning components are loaded from the main Window objects but differ from the windows objects from which the Visualforce pages are loaded.

Next, we will find out “How to share the data between Visualforce page and Lightning component?”.

How to Share the Data between the Visualforce page and the Lightning component ?

There is an issue that may arise due to sharing the data between the Visualforce page and the Lightning component. This is due to the fact that

the Lightning component and the Visualforce page are hosted in different domains. As an example, the Lightning component exists in the domain for org but the Visualforce page exists on an altogether different domain ?

Lightning Component would be hosted on https://myorg.lightning.force.com/
Visualforce Page would be hosted on https://myorg–c.ap5.visual.force.com/

This is resolved by simply using the postMessage() method on the Window object. This allows to share the data between two window objects, even though these are hosted in different domains. However, there are two ways the data need to be shared – sending and receiving the message to/by the different window objects. This is shown in the below screen.

Sending messages to different Window Objects

The post message function is what is used for sending the data to another object that resides in a different domain. The two parameters used for these are:

message : This consists of the actually message to be send to the different window object. In case of a JSON object, you need to stringify the JSON object first and then it is send.

targetWindowUrl: This consists of the URL of the target window object. This also contains the port number and protocol of the URL.

Receiving Messages by different Window Objects

In this case, when an window object receives a message from another window object – you need to use a message listener. Here is an example :

Code Snippet

Here is a code snippet :

****************************************************

<aura:component >

<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>

<aura:attribute name =”msg” type=”string”/>

<div><b>Communication Between Lightning component and Vf page</b></div>

Message from Received From Vf Page – <b> {!v.msg} </b>

<lightning:input name=”input1″ label=”Send Msg to Vf page” aura:id=”textField” />

<lightning:button variant=”brand” label=”Send Message to Vf page” title=”Brand action” onclick=”{! c.submitSomething }” />

— IFRAME —

</div>

</aura:component>

/////////////////////////////////// js controller ///////////////

({

submitSomething : function(component, event, helper) {

//alert(‘submit button’);

var message = component.find(‘textField’).get(“v.value”);

//alert(‘message->’+message);

var pageOrigin = “https://ca-prashants17-dev-ed–c.ap5.visual.force.com”; //your domain.

var pageWindow = component.find(“vfFrame”).getElement().contentWindow;

pageWindow.postMessage({ action: message }, pageOrigin); // pass the event to the vf page.

doInit : function(component, event, helper){

var vfOrigin = “https://ca-prashants17-dev-ed–c.ap5.visual.force.com”;

window.addEventListener(“message”, function(event) { // add the message event to the component.

// alert(event.origin);

if (event.origin !== vfOrigin) {

// Not the expected origin: Reject the message!

return;

}

//alert(‘message from vf page–>’+event.data.action);

component.set(‘v.msg’,event.data.action);

}, false);

}

})

/////////////////////////////////// js controller ///////////////

//////////////////////// vf page code ////////////

<apex:page showHeader=”false” sidebar=”false” id=”page1″ standardStylesheets=”false” lightningStylesheets=”true”>

<apex:slds />

<apex:form id=”form1″ style=”border: 1px solid;”>

<apex:outputPanel id=”TopPanel”>

Message from Lightning Component: – <b> <apex:outputText id=”msgInBox” /> </b><br/>

send message to Lightning Component: – <apex:inputText id=”msgoutBox” styleClass=”slds-input” />

<apex:commandButton value=”Send Message to Lightning Cmp” onclick=”sendMessage();” styleClass=”slds-button slds-button_brand” reRender=”none”/>

</apex:outputPanel>

window.addEventListener(“message”, function(event) {

alert(event.origin);

document.getElementById(‘{!$Component.page1:form1:msgInBox}’).innerHTML = event.data.action;

var lexOrigin = ‘https://ca-prashants17-dev-ed.lightning.force.com’;

if(event.origin !== lexOrigin){

alert(‘origin not same’);

return;

}

else{

}

}, false);

function sendMessage(){

console.log(‘&&’);

var lexOrigin = ‘https://ca-prashants17-dev-ed.lightning.force.com’;

console.log(document.getElementById(‘{!$Component.page1:form1:msgoutBox}’).value);

var msg = document.getElementById(‘{!$Component.page1:form1:msgoutBox}’).value;

parent.postMessage({ action: msg }, lexOrigin);

}

</script>

</apex:form>

</apex:page>

Lightning Data Services

Lightning Data Services (LDS) is used to load, create, edit or delete a record in the component – without any need for any Apex code. It helps to streamline the process of obtaining the data. It offers a simpler way than using the server-side component of Apex Controller. There is no need to use Apex code to get the data. LDS can be termed as the Lightning Controller component of standard controller in Visualforce – providing access to data in a single page.

If there are three components to be used in a single page, accessing the same record and the same cache. When Apex is used, then each one of these components pull back the data by calling the server. So, there are duplicate calls for the same data. But, when LDS is used, then these three components get the same data from highly efficient local storage, shared across all components.

But it fetches the information, only once. In fact, the records in Lightning Data Services are cached and shared across components. Since the record is loaded once, there are considerable performance improvements – as the same record is accessed by components.

Lightning Data Services make use of tags like force Record Data that enables to access different types data or metadata within Salesforce. It identifies and eliminates the request for the same record data by sending a single data request – updating all the relevant components. Let us now, highlight on the advantages and the disadvantages of the Lightning Data Services. First, comes the advantages.

Advantages of Lightning Data Services

The advantages are:

There is no need to write SOQL code or Apex Code.
Shared cache is used for standard and custom components.
All components are auto notified.
Supports offline in Salesforce1.
It offers the most efficient way to handle CRUD operations.
It has inbuilt field-level and record-level security.
It improves performance and user interface consistencies.

Next, we dwell with Lightning Data Services.

Disadvantages of Lightning Data Services

The disadvantages are:

Bulk record operations are not supported by it – similar to the StandardSetController functionality in Visualforce.
It is unable to refresh a record, if that is updated by using a Data Loader or another user. So, it is supportive of client side caching only and not server side caching.

Summary

First, the Lightning developers will know about the issues faced by the developers, while using Visualforce with Lightning experience. Here we have given details on Visualforce Usage API and Analyzer.

Second. The developer will get to know how to use Visualforce pages with Lightning components – which act in different domains. There is an API that offers a secure way to exchange messages between window objects with different origins.

The postMessage() method is used to resolve the issue of sharing the data between Visualforce page and Lightning component. So, the developer will know about sending and receiving messages – for different data objects.

Finally, you will gather information on Lightning Data Services(LDS) – used to load, create, edit or delete a record in the component – without any need for any Apex code. You will understand LDS and what are the tags used with it. You will also get to know the advantages and disadvantages too.

Ajay Dubedi

CEO | Founder

Ajay Dubedi, the founder and CEO of Cloud Analogy, is a prominent Salesforce Sales, Service, and Marketing cloud Consultant with a rich expertise in handling challenging business models. Ajay has assisted and implemented solutions in industries comprising Banking, Health Care, Networking, Education, Telecommunication and Manufacturing. Ajay is globally acclaimed for his extensive experience in APEX Programming, VisualForce pages, Triggers, Workflows, Page Layouts, Roles, Profiles, Reports & Dashboards.

Hire the best Salesforce Implementation Partner. Choose Cloud Analogy, the world's most preferred Salesforce Implementation Company that provides custom CRM Implementation services.