Introduction
In the world of Salesforce development, user interface (UI) plays a vital role in creating a seamless and intuitive experience for users. While the Salesforce platform provides a rich set of pre-built UI components, there are times when you may need to create custom UI elements to meet specific business requirements. That’s where Salesforce Lightning Components come into play. In this blog post, we will explore the power of Salesforce Lightning Components and learn how to build custom UI elements with examples.
Salesforce Lightning Components is a framework for developing reusable, client-side code that runs on the Salesforce platform. They are built on modern web standards like JavaScript, CSS, and HTML, and provide a modular and efficient way to create custom UI elements that integrate seamlessly with the Salesforce ecosystem.
Component-Based Architecture
An application page can contain one or more functional components. This component can be called as experienced component which is made of one or more base components. LWC provides these base components which are the basic building blocks accessible to program developers through code.
For Example, icons, buttons, badges, our task, and more. you can use these base components to build the experience components such as the newsfeed jet, report chart, related list, and whatnot. These components can be made accessible to other programmers to reuse. declarative developers can
use these experience components to build and customize the pages dynamically. They can also use this experience component in flows, utility bars, etc
Lightning App Builder
Salesforce also provides a powerful tool on the platform with which you can build your own page.
This tool is called Lightning App Builder. In the left pen, you can see some of the experience components that you can drag and drop to build your pages. you can customize the properties of this page and the components used on this page. You can also customize this page for a desktop and mobile user interface and preview it. All of this from a single tool
1. Define the Component Structure:
Let’s consider a simple example of building a custom contact form component. In the component structure, we define the required fields and actions. For instance, our contact form may include fields for name, email, and phone number, along with a save button.
2. Create the Component Markup:
Using LWC syntax, we can create the component markup. In this example, we’ll create an HTML file for the contact form component. Here’s a snippet of how it could look:
<template>
<lightning-card title="Contact Form">
<div class="slds-p-around_medium">
<lightning-input label="Name" value={contactName}></lightning-input>
<lightning-input label="Email" value={contactEmail}></lightning-input>
<lightning-input label="Phone" value={contactPhone}></lightning-input>
<lightning-button variant="brand" label="Save" onclick={handleSave}></lightning-button>
</div>
</lightning-card>
</template>
3. Implement the Component Controller:
The controller handles user interactions and component behavior. In LWC, the controller is written in JavaScript. Let’s see an example of handling the save button click and capturing the input values:
import { LightningElement, track } from 'lwc';
export default class ContactForm extends LightningElement {
@track contactName;
@track contactEmail;
@track contactPhone;
handleSave() {
// Perform save logic here, such as sending data to Salesforce or making API calls
console.log('Name:', this.contactName);
console.log('Email:', this.contactEmail);
console.log('Phone:', this.contactPhone);
}
}
4. Style the Component with CSS:
To apply custom styles, we can create a CSS file for the component. Here’s an example of adding some styling to our contact form component:
.slds-p-around_medium {
padding: 16px;
}
.lightning-card {
margin-bottom: 16px;
}
5. Utilize the Lightning Component Framework:
LWC leverages the Lightning Component Framework to provide enhanced functionality and integration capabilities. Let’s consider an example of using the Lightning Data Service to retrieve additional data for our contact form:
<template>
<!-- ... Contact form markup ... -->
<lightning-record-edit-form object-api-name="Account">
<lightning-input-field field-name="Industry"></lightning-input-field>
</lightning-record-edit-form>
</template>
Reference:
https://developer.salesforce.com/code-samples-and-sdks
https://lwc.dev/guide/install#lwc-open-source
https://trailhead.salesforce.com/users/sakthivel/trailmixes/lightning-web-component-lwc
Conclusion:
By following these steps and examples, you can build powerful and customized UI elements using Salesforce Lightning Web Components (LWC). These components offer a modern approach to development and enable seamless integration within the Salesforce ecosystem.
