Skip to main content

Lightning : Share common code across multiple components

With more and more complex components being built into lightning, it becomes quite important to understand how we can improve our codebase and ensure that we use best practices.

When it comes to building lightning components, they are expected to be pretty much self-contained. It works well when creating standalone components serving specific business function. But, often in enterprise arena we build components having some of common functionality. For e.g. need to validate email or address or a specific business rule validation.

A direct approach is to copy and paste the method within helper files of lightning component. But, it is definitely not an advisable approach. So, we have a problem to solve.

Lightning provides capability to load external javascript files (static resources) and use it's code. In this article i'll give a quick and simple glimpse of this capability

Step 1 - Create a javascript helper file

Create a javascript file to contain required shared code for e.g.

[CODE 1]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
window.CommonHelper = (function(){
 
    var helper =  {
        roundCurrencyValue : function(value){
            return ( Math.round(value * 100) / 100);
        },
    };
 
    return helper;
}());

Step 2 - Upload javascript helper file as static resource

Upload the file as a static resource, to be used in subsequent steps. For this post, let's name the static resource as CommonHelper.

Step 3 - Embed javascript helper file within lightning component

Embed this common reusable javascript within your lightning components by using ltng:require component.
[CODE 2]
1
<ltng:require scripts="{!$Resource.CommonHelper}"/>

Step 4 - Use helper file methods

That's it. Now you can use your code/ methods within your lightning component's javascript code. for example
[CODE 3]
1
CommonHelper.roundCurrencyValue(234.23453);

Comments

Popular posts from this blog

Quick Tips: Salesforce default Images

Well, I'm sure a lot of you still rely on using out of the box salesforce images for displaying quick icons within formula fields or even using them within your Visualforce pages. Lately, I realized that a lot of earlier resources are no longer accessible, so I tried to quickly extract all images from Salesforce CSS files and provide a quick reference here. Please note, I've referenced all images from SF servers directly, so if anything changes, the image should stop rendering here. As these images are completely controlled by Salesforce, and in case they change anything, it might lead to image not being accessible. Image path Image /img/samples/flag_green.gif /img/samples/flag_green.gif /img/samples/flag_red.gif /img/samples/color_red.gif /img/samples/color_yellow.gif /img/samples/color_green.gif /img/samples/light_green.gif /img/samples/light_yellow.gif /img/samples/light_red.gif /img/samples/stars_100.gif /img/samples/stars_200.gif /img/samples/stars_300.

Lightning: Generate PDF from Lightning components with in-memory data

I'm sure as everyone is diving into lightning components development, they are getting acquainted with the nuances of the Lightning components framework. As well as, its current limitations. Being a new framework, this is bound to happen. Although we have our users still using salesforce classic, we have started using lightning components framework our primary development platform and Visualforce is considered primarily for rendering lightning components within Classic Service console. Recently, while re-architecting a critical module, we encountered a problem wherein we needed to generate PDF from lightning components. Now, being Javascript intensive framework, it has limited room for such features (may be included in future roadmap). As of now, there is no native feature within the lightning framework to do so (at least I didn't find anything). Common Scenario - Create Visualforce page to retrieve data and generate PDF For scenarios where the data exist within Sa

Quick Tips: Setup SFDX Manually without Admin access

We all have faced challenges while working in different enterprise environments, where there may be lot of controls/ checks/ red-tape to get by. In such situations, getting access to simple tools (even git) can take lot of time. Note: This tutorial is to be followed at your own risk, as it may not be complaint to your organization's IT policies. What is SFDX? SFDX is a command line utility for managing salesforce builds/ deployments. Being command line, it can be easily embedded to automation chains, to help build fully automated build and deployment processes. To get started, refer  https://trailhead.salesforce.com/en/content/learn/trails/sfdx_get_started Setup SFDX on Windows machine without admin access As you may have already realized, SFDX installation needs admin access to one's machine. Which may be a luxury a lot of developers may not have. So, i tried to provide a step-by-step guide to setup SFDX on your computer without any admin access Steps: Note: