Currency Converter App in LWC

-



 



The Currency Converter Project is a robust application built using cutting-edge technologies such as Lightning Web Components (LWC), Service Components, Styling Hooks, API integration with exchange rate APIs, and the seamless utilization of static resources. This project not only showcases the power of LWC for dynamic and modular user interfaces but also highlights the importance of service components, styling hooks for enhanced presentation, and API integration for real-time exchange rate data. With the added sophistication of static resources, this Currency Converter project delivers a comprehensive and responsive solution. This blog post unveils the synergy of these technologies, offering a glimpse into the seamless convergence of design, functionality, and real-time data. 

1. Service Component: A service component in LWC is basically a lightning component without an HTML template. Service Components or Service Libraries can be used for reusable functions, that can be used in other LWC components. 

In this project, I used a service component to display the drop-down list of currency values. Now, let's take a look at how we can import a service component into our LWC component - 

In our JS file we need to import the service component as per the below code:


import { countryCodeList } from 'c/countryCodeList';


In the above line, countryCodeList is the service component that contains the dropdown list values of the currency types.


2. Styling Hooks: Styling hooks is a concept used in LWC to customize the components using custom CSS properties. In this project, I used styling hooks to customize the convert icon used in the app. Using Styling hooks I changed the background color to yellow color refer to the code below:

.custom-icon{
    --slds-c-icon-color-foreground-default: #f9ba49;
    --slds-c-icon-color-background: #f9ba49;
    --slds-c-icon-color-foreground: #0c2451;
    transform: rotate(45deg);
}

In the above code - --slds-c-icon-color classes are used to change the background color of the standard icon.



3. Static Resources: In our app, we are using a custom background image with the help of static resources. You can either use JS to import your static resource into your lightning web component or you can use it in HTML directly. 

In CSS:


background: url(/sfsites/c/resource/currencyConverterAssets/currencyConverterAssets/cur
rencyAppBackground.png);


In JS:


import currencyConverterAssetsfrom '@salesforce/resourceUrl/currencyConverterAssets'


Utilizing static resources minimizes page load times and ensures smoother interactions, contributing to a seamless experience.


4. LWC Directives: A directive serves as a distinctive attribute imparting dynamic functionality to an HTML page. It can be applied to a root <template> tag, a nested <template> tag, or an HTML element like a <p> tag. 

In this project, we used <template if:true> and <template if:false> directives to conditionally render the currency conversion result. Please refer to the code below:

<template if:true={result}>
    <div class="slds-text-align_center">
        <div class="result">
          {amount} {countryFrom} = <span class="result-to">{result} {countryTo}</span>
        </div>  
    </div>
</template>


5. API Integration:  In this project, I am using exchange rate api which provides the ability to get accurate and up-to-date currency conversion data. 
This facet of the project underscored the importance of asynchronous programming, managing errors, and manipulating data when interacting with external APIs. I followed these steps in this integration:

a. Initially, adding the exchange rate api in a trusted URL and add a remote site setting for this URL.

b. Create a async method in JS that will be fired when the Convert button is pressed.

c. This async method constructs the URL by attaching the required parameters for the conversion endpoint and then makes the API call.

d. Convert the response into JSON and do the required calculation to store the result.


6. Exposing our LWC using Experience Sites: I am using the Salesforce LWR to extend the applicability of Lightning Web Components (LWC) beyond internal applications. In this project, I learned the steps involved in exposing LWC to Experience Site, enabling external users to engage with these components. 



Demo video 👇





Please share your thoughts and suggestions in the comments.






Comments

Post a Comment

Popular posts from this blog

Display Maps in LWC

-
Image
  In this blog, we will look at how to display Google Maps in your Lightning Web Components. Salesforce provides a lightning-map component to display a map of one or more locations, using geocoding data and mapping imagery from Google Maps.  Now, let's look at how to use this component in your Lightning Web component. HTML : Pass the location(s) that you want to display in the map-marker property. A marker contains: Location Information:   A coordinate pair of latitude and longitude, or an address composed of address elements to be geocoded. Descriptive Information:  Optional title, description, and an icon. These items are relevant to the marker but not specifically related to location. Map markers have a few more properties that can be used to customize the map display, please refer to this documentation on Maps. Display a Single Marker Let's understand how we can pass single location info in the map-marker and display it on the map. In this example, we will creat...
Read more

Calling Apex method from LWC

-
Image
  In this blog post, we will take a look at the steps to call an Apex method from our Lightning Web Component with source code and demonstration videos. There are the following ways to call an Apex method into LWC: 1. Calling an Apex method using  wire services . 2. Calling an Apex method imperatively . 3. Calling and Apex method with async and await . Now let's take a look at the steps involved in the above-mentioned ways. Calling Apex method using Wire services The wire service in LWC helps in the retrieval of data or performing any action without the need for Apex code. You can use the wire service, to wire a property or a function that will receive data when the source is updated. 1. Expose the Apex method which you want to call from LWC The Apex method should be: a. Global or Public . b. decorated with @AuraEnabled , if the method has ( cacheable=true ) after this annotation, the results are cached at the client site to improve performance. 2. Import the Apex method whic...
Read more

Navigation Service in LWC (Lightning Web Components)

-
Image
Introduction Navigation Service in LWC simplifies navigating between the pages within the applications. Utilizing the navigation service in LWC you can create a smooth and seamless navigation experience for users within your Salesforce application. In this blog post, we will deep dive into the steps on how to use the Navigation Service. What is a Navigation Service? Navigation Service is a built-in module in LWC that enables developers to navigate different pages and components within the Salesforce ecosystem. This service provides you with a set of methods that helps you navigate different web pages, record pages, or other Lightning Components.  Using the Navigation Service 1. Import the Navigation Service from the lightning/navigation module. 2. Apply the NavigationMixin function to the base class. 3. Create a JS PageReference object that defines the page. 4. Call the navigation service's [NavigationMixin.Navigate](pageReference) to dispatch the navigation request. 5. In ...
Read more