- Welcome to our page.
- With us, you can book an individual Software Developer, or set-up a remote Scrum-Team, at Heidelsoft India.
- We are a premium-branded company, with high-end Indian resources.
- We deliver all technologies, to meet your software development needs.
Infopark, Kochi, India
Lightning Web Component development using Salesforce DX
DennisLightning web components are custom HTML elements built using standard JavaScript and HTML making them lightweight and able to deliver exceptional performance. In this blog, we will discuss on using Salesforce DX to create a Lightning Web Component that can be placed on the Salesforce home page. The widget will use OpenWeatherMap API to provide weather information of the City selected by the user.
Setting up Salesforce DX
To start building Lightning web components, we need to setup Salesforce DX first. This step includes installing Salesforce CLI, Visual Studio Code and Salesforce Extension Pack for VS Code.
Salesforce CLI
Download & Install Salesforce CLI from https://developer.salesforce.com/tools/sfdxcli . CLI is available for Windows, Mac & Linux operating systems.
Verify the installation by opening a Terminal/command window and type ‘sfdx’ which should display the Salesforce CLI version as shown below.
Visual Studio Code & Salesforce Extension Pack
Install Visual Studio Code for your operating system from the following URL
https://code.visualstudio.com/
After installing and opening VSCode, go to Extensions on the left side-bar and search for Salesforce Extension Pack and install the extension.
You can also install it from this url: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode
Enable & Authorize Dev Hub
To create and manage scratch orgs, we need to enable Dev hub in our org. We can use Developer, Enterprise, Performance, and Unlimited Edition orgs as the Dev hub.
Enable Dev Hub:
- Login as System Administrator
- Go to Setup, enter Dev Hub in the Quick Find box
- Select Dev Hub.
- Click Enable.
After you enable Dev Hub, you can’t disable it.
Authorize Dev Hub
We can authorize a Dev Hub by logging in to it from the CLI. In VS Code terminal, use the following command to login to the dev hub using your credentials:-
sfdx force:auth:web:login -d -a DevHub
This command will also set this org as the default dev hub and assign the alias ‘DevHub’ to it.
You can open the dev hub using the following command
sfdx force:org:open -u DevHub
Create Salesforce DX Project
So we have successfully set up Salesforce DX. And now we can start developing the Lightning web component for weather widget.
Create new SFDX Project
- In VS Code, go to View -> Command Palette…
- Enter sfdx: create project
- Select SFDX: Create Project
- Enter a project name (Eg: sf-weatherApp)
- Select a folder to save the project files
You can also run the following command in the VS Code Terminal to create a project
sfdx force:project:create –projectname <project-name>
I have made the sf-weatherapp project available in my bitbucket repository:-
https://bitbucket.org/dennisjs/sf-weatherapp/src/master/
You can clone this and open in VS code to access the source code.
Create a Default Scratch Org
We use scratch orgs for developing our Lightning web component. A Scratch org is a disposable deployment of Salesforce code and metadata. They are fully configurable, allowing developers to emulate different Salesforce editions with different features and preferences. You can read more about scratch orgs here.
- To create a default scratch org:
- In VS Code, open Command Palette…
- Enter sfdx: create
- Select SFDX: Create a Default Scratch Org
Alternatively you can run the following terminal commands for creating and opening scratch orgs:-
Create a scratch org
sfdx force:org:create -f config/enterprise-scratch-def.json -a MyScratchOrg
Open the scratch org
sfdx force:org:open
Create project components:-
Create Custom Setting
We use custom setting ‘Weather_Widget_Configuration__c’ to store the weather widget data as in the following table.
Field | Type | Description |
API_Key__c | Text | Store the API key for consuming OpenWeatherMap API |
City__c | Text | Store City name |
Icon_Name__c | Text | Name of the weather icon to display on the widget |
Last_Synced_on__c | DateTime | Stores the date & time of last sync with API |
Temperature__c | Number | Temperature value from the API |
Weather__c | Text | Weather description from the API |
Configure this custom setting in the scratch org and pull it to the source by running the following command in the Terminal.
sfdx force:source:pull
Create Apex Class
We use the Apex Class ‘WeatherWidgetController’ containing two @AuraEnabled methods to manage widget data.
Create Apex class:-
- In VS Code, open Command Palette…
- Select SFDX: Create Apex Class…
- Enter ‘WeatherWidgetController’ as name
Add the following code to the class
The refreshWeather() method calls the OpenWeatherMap API and store the weather data in the Custom setting.
The getLastSyncDetails() method serves the last synced weather data from the custom setting on loading the Lightning web component.
Push the changes to the scratch org by running the following command in the Terminal.
sfdx force:source:push
You can also use the following command to list the changes made to project source and scratch org so that you can push/pull accordingly
sfdx force:source:status
Create Lightning Web Component
Now we can create the Lightning web component to display weather information of the city specified by the user.
Create Lightning web component
- In VS Code, open Command Palette…
- Select SFDX: Create Lighting Web Component
- Enter ‘weatherWidget’ as name
A new component folder named weatherWidget including the following files will be created automatically under the lwc folder
- html – Component HTML File
- js – Component JavaScript File
- js-meta.xml – Component Configuration File
Open the weatherWidget.html file and replace its contents with the following:-
The component javascript contains methods to display the weather information and also passes the user provided city name and api key to the apex controller to call the API.
Finally we need to edit the weatherWidget.js-meta.xml file to define the metadata values for the component. Add the following to the file and save.
Here we’ve configured to make this component available in the App Builder to add as a HomePage component.
Now we have completed development of our weather widget. Now push the changes to the scratch org using sfdx force:source:push command.
Configure Remote Site Setting
We need to add https://api.openweathermap.org to the Remote Site Settings in the scratch org in order to successfully make the API call from our widget. After adding, we can pull it to the project source using sfdx force:source:pull command.
Finally, test the Lightning web component
Get OpenWeatherMap API key
As mentioned previously, we will be using the OpenWeatherMap to get the weather data. To use the API, we need an API Key.
Sign up for a free account in https://openweathermap.org/api
Generate an API Key from the API keys section
Keep the API key handy as we will need it for testing the widget.
Add the component to the Homepage
We can add our widget to the home page using the Lightning App Builder.
Run the Widget!
Once the component is added using App Builder, we can go to the homepage and see the widget loaded.
On initial run the widget will ask for City name and API key. Enter a city and provide the API key generated in the earlier step and the widget will display the current weather information.
User can edit the city name later without providing the API key again as it is already saved in the custom setting.