• support@hikmadh.in
  • +91 97885 33992
GET FREE QUOTE

Building Custom UI Components in Salesforce with Lightning Web Components (LWC)

Building Custom UI Components in Salesforce with Lightning Web Components (LWC)

Salesforce development has moved a long way from old-school Visualforce pages. Today, Lightning Web Components (LWC) is the modern, standards-based framework Salesforce recommends for building fast, reusable UI components — and it’s built directly on native HTML, CSS, and JavaScript.

If you’re a Salesforce developer or admin exploring how to build custom UI on the platform, this week’s post walks through a simple, practical example: a Contact Card component that displays contact details in a clean layout.

Why LWC?

  • Performance: LWC uses native browser APIs instead of a proprietary framework, making it lighter and faster than Aura components.
  • Standard web technologies: If you know HTML/CSS/JS, you’re already halfway there.
  • Reusability: Components can be dropped into Lightning App Builder, Experience Cloud pages, or even used standalone.
  • Better testing tools: Jest-based unit testing is built in.

Example: A Simple Contact Card Component

Every LWC component has three core files — an HTML template, a JavaScript controller, and an XML metadata file. Below is the HTML template for a basic contact card:

				
					<template>
  <div class="contact-card slds-box slds-theme_default">
    <div class="slds-media">
      <div class="slds-media__figure">
        <span class="slds-avatar slds-avatar_large">
          <img src={contact.PhotoUrl} alt="Contact Photo" />
        </span>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-text-heading_medium">{contact.Name}</h2>
        <p class="slds-text-body_small">{contact.Title}</p>
        <p>
          <lightning-icon icon-name="utility:email" size="x-small"></lightning-icon>
          {contact.Email}
        </p>
        <p>
          <lightning-icon icon-name="utility:phone_portrait" size="x-small"></lightning-icon>
          {contact.Phone}
        </p>
      </div>
    </div>
    <div class="slds-m-top_small">
      <lightning-button
        label="View Full Record"
        variant="brand"
        onclick={handleViewRecord}>
      </lightning-button>
    </div>
  </div>
</template>
 
And the accompanying JavaScript controller (contactCard.js) that wires up the data and click handler:
				
					import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class ContactCard extends NavigationMixin(LightningElement) {
  @api contact;

  handleViewRecord() {
    this[NavigationMixin.Navigate]({
      type: 'standard__recordPage',
      attributes: {
        recordId: this.contact.Id,
        objectApiName: 'Contact',
        actionName: 'view'
      }
    });
  }
}

How This Fits Into a Real Org

Once built, this component can be:

  1. Added to any Lightning record page via App Builder — no code deployment needed for placement.
  2. Embedded in an Experience Cloud community page for partner or customer portals.
  3. Reused across multiple objects by simply passing a different contact record as a property.

Key Takeaway

LWC lowers the barrier between traditional web development and Salesforce customization. If your team already has front-end developers comfortable with HTML/CSS/JS, they can start building Salesforce UI components almost immediately — no need to learn a completely proprietary syntax from scratch.

Quick Tips for This Week

 

  • Use slds (Salesforce Lightning Design System) classes to keep your UI consistent with native Salesforce styling.
  • Always test components using Jest before deploying to a sandbox.
  • Use @api decorators to expose properties that parent components or Lightning App Builder can configure.