Currency Converter App Using Lightning

Posted on Updated on

The Salesforce Lightning Component Framework is the next-generation component based development framework for Salesforce.It is based on the Aura open source library and uses a mixture of JavaScript on the client and Apex on the Server. In this post I am using lightning to create a simple Currency Converter App.In this post I will not cover basics of lightning.To learn lightning basics you can download lightning pdf from here.

To convert currency i am using a free currency converter  Xignite API.You can also register for your free API here.

You can find complete code on github.

When complete it will look like this :

cc

Changes :
1) Change “bklightning” namespace to “YourNamespace”.
2) Register on Xignite to get you free API KEY.

Let’s walk through code:

CurrencyConverterControllerClass.apxc
public with sharing class CurrencyConverterControllerClass{
    
    @AuraEnabled
    public static List<CurrencyInformation__c> allCountries() {
        return [SELECT Id,Name,Code__c, Country__c FROM CurrencyInformation__c];
    }
    
    @AuraEnabled
    public static String getCurrency(String sourceCode,String targetCode) {
        String url = 'https://globalcurrencies.xignite.com/xGlobalCurrencies.json/GetRealTimeRate?Symbol=';
        url += sourceCode+targetCode+'&_token=YOURTOKEN';
        
        // Instantiate a new http object
        Http http = new Http();
        
        // Instantiate a new HTTP request, specify the method (GET) as well as the endpoint
        HttpRequest req = new HttpRequest();
        req.setEndpoint(url);
        req.setMethod('GET');
        
        HttpResponse res = new HttpResponse();
        
        // Send the request, and return a response
        if((sourceCode != null && sourceCode.trim().length() > 0) && (targetCode != null && targetCode.trim().length() > 0))
            res = http.send(req);
        else
            return null;
        
        Map<String, Object> response = (Map<String, Object>)JSON.deserializeUntyped(res.getBody());
        String text = (String)response.get('Text');
                
        return text;
    }
}

First off all you will notice that each method has an @AuraEnabled keyword.Any method that you want to be visible to the Aura view components will need this keyword. getCurrency() method calls out to the Xignite REST API with a GET request containing Source Country ,Target Country Code and API KEY.It will return response in JSON and the response JSON.deserialized into a Map and then into Text message.

CurrencyConverterComponentController.js
({
    doInit : function(component, event, helper) {
        helper.getCountries(component);
    },
    calculateCurrency : function(component, event, helper) {
        var srs = jQuery('#source option:selected').val();
    	var trg = jQuery('#target option:selected').val();
        helper.getResult(component, srs, trg); 	
    },
})

The CurrencyConverterComponentController.js implements the calculateCurrency() function called onclick of “Calculate” button in CurrencyConverterComponent.cmp and it calls the getResult() helper function.

CurrencyConverterComponentHelper.js
({
    getCountries : function(component) {
        var action = component.get("c.allCountries");
        action.setCallback(this, function(a) {
            component.set("v.countries", a.getReturnValue());
        });
        $A.enqueueAction(action);
        
	},
    getResult: function(component, srs, trg) {
        var action = component.get("c.getCurrency");
        action.setParams({
          "sourceCode": srs,
          "targetCode": trg
        });
      	action.setCallback(this, function(a) {
           	component.set("v.message", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

That getResult() helper function is defined in CurrencyConverterComponentHelper.js, and it calls the Apex getCurrency() function that actually does the REST API callout.It then takes the return value from that function, and populates the “message” attribute in the CurrencyConverterComponent.cmp component.

So that’s it. Simple! Coming soon with a new post on lightning.

3 thoughts on “Currency Converter App Using Lightning

    Nitesh said:
    May 25, 2015 at 12:54 pm

    Great Amount Of work done there !! nice Work 🙂

    I would like to suggest you one thing, which would be great for all sf users.

    can you provide next to contacts which will take contact’s country as destination and Organization’s country as source country. That would be more useful for every sf developer !!

    Like

    Nitesh said:
    May 25, 2015 at 12:56 pm

    Great Amount Of work done there !! nice Work 🙂

    I would like to suggest you one thing, which would be great for all sf users.

    can you provide a button next to contacts which will take contact’s country as destination and Organization’s country as source country. So, It directly display the converted currency of contact. That would be more useful for every sf developer !!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s