Service Component In Lightning Web Component

In Lightning Web component, we can create component with and without HTML template. Component without HTML template is called Service Component or Service Libraries. Service Component can be created for reusable functions, which can be used in other LWC component.

This post will explain how we can create Service Component which will be used in other component. This component has below functions.

1. LOGO_URL – Which wll provide Logo Url for application
2. showMessage – This function will show toast message.
3. isValidForm – This function will check validity of each field on page
4. validateEmail – This function will validate Email
5. validateDOB – This function will validate that Date of Birth is not a future date

We can add more functions based on our requirement.

export 
{
    showMessage,
    isValidForm,
    LOGO_URL,
    validateEmail,
    validateDOB
}

This service component is ready to be used in another LWC component. Let us create one LWC component to insert new employee in Salesforce Employee object. I have only consumed service component function and not written code for actual record insertion for this blog.

For using above service component we have to import that component.

import { showMessage, isValidForm,validateEmail,validateDOB} from 'c/commonLib';

and we can call service component function like normal function.

  showMessage(this,'Notification',message,'error');

Complete Code For using Service Component

Benefit of Service Component

1. Easy and Less Maintainable Code
2. Code Re-usability
3. Better Code Practice
4. Separation of common and single requirement code

Demo Page:

Here is screenshot for showMessage function when required fields are not provided.

Reference:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_html_file

Dhanik Lal Sahni

Dhanik Lal Sahni is a Salesforce Solution Architect, Independent Consultant, and the founder of SalesforceCodex.com. With nearly two decades of IT experience and extensive expertise in Salesforce architecture, he helps startups and enterprises design scalable, secure, and high-performance CRM solutions using Sales Cloud, Service Cloud, Experience Cloud, Data Cloud, Apex, Lightning Web Components (LWC), and enterprise integration patterns.
Through SalesforceCodex, he shares practical tutorials, real-world implementation guides, enterprise architecture best practices, and interview preparation resources for Salesforce Developers, Architects, and Administrators.
Learn more about his Salesforce consulting and freelance services at dhaniksahni.com.

dhaniksahni.com/