LWC as a Service
Tags: salesforce, lwc, aura
Published: 2021-12-21 04:45:17

---
title: LWC as a Service
published: true
date: 2021-08-12 23:53:21 UTC
tags: [salesforce,lwc,aura]
---

## [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#introduction "Anchor for: Introduction.") Introduction

In this case, we have two lightning components of which one is an Aura and the other is a LWC. The latter one serves as an Account Eligibility Checking service that will be invoked by the Aura.

## [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#the-aura-component "Anchor for: The Aura component.") The Aura component

force-app/main/default/aura/ParentAuraCmp

![image-20210814200808888](https://blog.lcycug.live/posts/lwc-as-a-service/image-20210814200808888.png)

force-app/main/default/aura/ParentAuraCmp/ParentAuraCmp.cmp

```html
<!--
 - @author Sean Lee
 - @date 2021-08-13
 - @description This component is used to call the lwc service.
 -->
<aura:component description="ParentAuraCmp" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="boolEligible" type="Boolean" default="false" />
    <aura:handler name="init" value="{!this}" action="{!c.checkAccountEligibility}" />
    <c:accountEligibilityService aura:id="service" />
    <h3>Account Eligibility Status</h3>
    <div><strong>{!v.boolEligible}</strong></div>
</aura:component>

```

force-app/main/default/aura/ParentAuraCmp/ParentAuraCmp.cmp-meta.xml

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <description>ParentAuraCmp</description>
</AuraDefinitionBundle>

```

force-app/main/default/aura/ParentAuraCmp/ParentAuraCmpController.js

```javascript
/**
 * @author Sean Lee
 * @date 2021-08-13
 * @description This component is used to
 */
({
    checkAccountEligibility: function (component) {
        let idAccount = component.get("v.recordId"),
            service = component.find("service"),
            { checkEligibilityStatus } = service;
        if (checkEligibilityStatus) {
            checkEligibilityStatus(idAccount).then((response) => {
                component.set("v.boolEligible", response === true);
            });
        }
    }
});

```

## [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#the-lwc-service "Anchor for: The LWC service.") The LWC service

force-app/main/default/lwc/accountEligibilityService

![image-20210814200936869](https://blog.lcycug.live/posts/lwc-as-a-service/image-20210814200936869.png)

force-app/main/default/lwc/accountEligibilityService/accountEligibilityService.html

```html
<!--
 - @author Sean Lee
 - @date 2021-08-13
 - @description This component is used to service as an Account Eligibility Service.
 -->
<!-- Account Eligibility Service -->
<template> </template>

```

force-app/main/default/lwc/accountEligibilityService/accountEligibilityService.js

```javascript
/**
 * @author Sean Lee
 * @date 2021-08-03
 * @description This component is used to service as an Account Eligibility Service.
 */
import checkEligibility from "@salesforce/apex/AccountService.checkEligibility";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

const checkEligibilityStatus = function (idAccount) {
    return checkEligibility({ idAccount })
        .then((response) => response === true)
        .catch((error) => {
            dispatchEvent(
                new ShowToastEvent({
                    title: "Error happened during checking Account Eligibility",
                    message: error.body.message,
                    variant: "warning"
                })
            );
        });
};
export { checkEligibilityStatus };

```

force-app/main/default/lwc/accountEligibilityService/accountEligibilityService.js-meta.xml

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <description>Account Eligibility Service</description>
    <isExposed>false</isExposed>
    <masterLabel>Account Eligibility Service</masterLabel>
</LightningComponentBundle>

```

## [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#the-backend-supports "Anchor for: The backend supports.") The backend supports

### [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#accountservicecls "Anchor for: AccountService.cls.") AccountService.cls

force-app/main/default/classes/AccountService.cls

```java
/**
 * @author Sean Lee
 * @date 2021-08-13
 * @description This class is used to service as an AccountService.
 */
public with sharing class AccountService {
    private static final List<String> ELIGIBLE_ACCOUNT_NUMBER_LIST = Label.Eligible_Account_Number_List.split(Constants.SEMI_COLON_REGEXP_SPACE_IGNORED);
    @AuraEnabled
    public static Boolean checkEligibility(Id idAccount) {
        return String.isNotBlank(idAccount) && [SELECT COUNT() FROM Account WHERE Id = :idAccount AND AccountNumber IN :ELIGIBLE_ACCOUNT_NUMBER_LIST] > 0;
    }
}

```

force-app/main/default/classes/AccountService.cls-meta.xml

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <status>Active</status>
</ApexClass>

```

### [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#constantscls "Anchor for: Constants.cls.") Constants.cls

force-app/main/default/classes/Constants.cls

```java
/**
 * @author Sean Lee
 * @date 2021-08-13
 * @description This class is used to serve as a pool of Constant variables.
 */
public with sharing class Constants {
    private Constants() {
    }
    public final static String SEMI_COLON_REGEXP_SPACE_IGNORED = '\\s*;\\s*';
}

```

force-app/main/default/classes/Constants.cls-meta.xml

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <status>Active</status>
</ApexClass>

```

### [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#customlabels "Anchor for: CustomLabels.") CustomLabels

force-app/main/default/labels/CustomLabels.labels-meta.xml

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<CustomLabels xmlns="http://soap.sforce.com/2006/04/metadata">
    <labels>
        <fullName>Eligible_Account_Number_List</fullName>
        <language>en_US</language>
        <protected>true</protected>
        <shortDescription>Eligible Account Number List</shortDescription>
        <value>test</value>
    </labels>
</CustomLabels>

```

## [<svg aria-hidden="true"><use xlink:href="#hashtag"></use></svg>](#conclusion "Anchor for: Conclusion.") Conclusion

In the demo above, we called the LWC from an Aura, and a Promise was returned. We had to handle it in the Aura to get the response deep from the backend.