LWC: Implementing Service Components

A service component is a component that provides an API for a set of functionalities. Ideally, the service should be specialized, generic and reusable. Also, it does not have a markup, i.e. it is not visible by default.

Creating a custom service simplifies component’s code and help reduce code duplication. This in turns makes the code more robust and facilitates maintenance.

To develop a custom service component for my Account object, I have created an accountService component and exposed the below services:

• searchAccount: it accepts a search key and returns the list of accounts matching the key
• getAccounts: this returns a list of 5 accounts

You will notice that I have followed the singleton pattern to define this component, i.e. there can be only one instance of this component. Now to get a reference to these custom services, I have created an accountComponent which is consuming the services like below:

Please see the below repo for the code:
https://github.com/iamsonal/lwc-service

References:
https://developer.salesforce.com/blogs/2018/08/implement-and-use-lightning-service-components.html

LWC: Modularizing Code using Singleton pattern

Imagine that we have a custom LWC component, which we drag-and-drop onto a Lightning page in Lightning App Builder. This component has 2 design attributes for First Name and Last Name. We need a way to access these values from any component without communicating down the containment hierarchy. Setting the public properties of child components becomes a tedious job if there are nested components.

To solve this issue, we can use the Singleton Pattern, which states that the number of instances of an object must be restricted to one only, hence the "single" in Singleton. The intent of the Singleton is ensuring a class has only one instance, and providing a global point of access to it.

For the sake of simplicity, I have created 2 components component1 and component2 where component2 is the child of component1. I need to access the design attribute values of the parent component from the child component. In this example, we are storing the design attribute values in a single central place, sharedData component, written in the Singleton pattern.

which can be accessed by any component in the application like below:

Similarly, to get one point of access to custom labels, I have created a component customLabels using Javascript classes to access the custom labels

To know more about Object.freeze(), refer one of my post titled Javascript: Preventing Object Modification. Now any component in the application can access these values like below:

Please see the below repo for the code:
https://github.com/iamsonal/lwc-singleton

LWC: Modal implementation

Check the code in the below repo for the modal implementation in LWC:
https://github.com/iamsonal/lwc-modal

Notes:

• If you want to hide the close icon, then set the hide-close property to true like below:



<!-- modalContainer.html -->
<template>
    <c-modal name="Modal Name" title="Modal Title" hide-close>
    </c-modal>
</template>

• Similarly, if you want to display a large modal, then set the is-large property to true like below:



<!-- modalContainer.html -->
<template>
    <c-modal name="Modal Name" title="Modal Title" hide-close is-large>
    </c-modal>
</template>




• Using slots (unnamed and named), we are passing the modal body and footer content from parent into the child component like below. In this way, we can control the markup that can be displayed in the modal. For more information about how to use slots, check the LWC documentation.



<c-modal name="Modal Name" title="Modal Title" >

    <!-- Unnamed Slot -->
    <p>This is some content</p>

    <!-- Named Slot -->
    <div slot="footer" style="display: inline;">
        <lightning-button label="Close" variant="neutral" onclick={handleCancelModal}></lightning-button>
    </div>
    
</c-modal>




• Set the style-class property to apply a custom CSS in the modal.

LWC: Override CSS of standard Lightning Web Components

Recently, I got a requirement where I had to override the CSS of lightning-card component, specifically to change the background colour of the header of the card component.

Shadow Dom have their own little kingdom and cannot be styled from outside, except if they would provide some options to do so. Currently, it's not possible to style standard Lightning Web Components;

I am providing a hacky workaround to get the desired results. I added the below code in my helloExpressions component:

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = `c-hello-expressions .slds-card__header {
    background-color: #54C2B2;
    }`;
    this.template.querySelector('lightning-card').appendChild(style);
}

and this is how it looks:

UPDATE:
It seems there is a cleaner approach as suggested by pdebaty: loading CSS using loadStyle...lol. You can go through the StackExchange article to understand more in details.

LWC: Retrieving custom labels dynamically

To access labels in a Lightning web component, import them from the @salesforce/label scoped module.

import greeting from '@salesforce/label/c.greeting';
import salesforceLogoDescription from '@salesforce/label/c.salesforceLogoDescription';

As far as the official documentation goes, it is clear that one needs to know the name of a custom label at design time; it is impossible to evaluate the value at runtime by knowing their name.

Arteezy and Sfdcfox commented in this StackExchange post that you can use Salesforce inspector and tooling API to retrieve the custom labels using this query:

SELECT Id, Name, Value FROM CustomLabel

Based on this, I have created an LWC service component customLabelService, which will retrieve all the custom labels and store it as an object on client-side. You can use this component as below:

NOTES:
1. As per this StackExchange post, there is no way of getting a valid API-capable sessionId from a Lightning component because sessions obtained from Apex used by a Lightning component are not API enabled. That's why as a workaround, I have created a VF page, and getSessionIdFromVFPage method in CustomLabelController class to retrieve the sessionId. You can also refer to this post to know more in details.

2. If there is a requirement where you need to retrieve all the labels with a known prefix, then change the resourcePath (URI) to below:

/services/data/v46.0/tooling/query/?q=Select+id,Name,Value+from+CustomLabel+WHERE+Name+LIKE+'OAuthModal%25'

where the prefix is OAuthModal. I checked in Workbench, and this works fine, but you will need to tweak the code to pass the prefix.

3. As per this StackExchange post, there are two objects that represent labels, CustomLabel and ExternalString. So you can also use tooling API to fetch the labels from ExternalString using the below query:

SELECT Id, Name, Value, Language FROM ExternalString

UPDATE: 
Please refer the code of this project from the link below:
https://github.com/iamsonal/Custom-Labels