Salesforce Lightning Web Component (LWC) Basics

Hello All ,

Today  we will disscus about mandatory files for creating Lightning Web Component. There are following Files that we can create but 1st three files are necessary to create Lightning Web Component.

The folder and its files must follow these naming rules:

• Must begin with a lowercase letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Should not contain whitespace
• Should not end with an underscore
• Should not contain two consecutive underscores
• Should not contain a hypen (dash)

Use camel case (each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation) to name a component. e.g. helloWorld 
Camel case component folder names map to kebab-case in markup. e.g. <c-hello-world>  where c is the default namespace.   
               
Kebab Case in LWC :
In standard Salesforce Lightning Component, whenever we are using a naming convention like camel case standard like firstwordSecondword where the first letter is small and whenever second-word starts, we write its first letter it as capital which is basically used to give proper names to your component.

In LWC, we used kebab-case in markup where a namespace is separated by a hyphen like search-component

Example 1 :
<template>
    <c-search-component> </c-search-component>
</template>

we can also use the underscores to separate the words. like search_component

Example 2 :

<template>
    <c-search_component> </c-search_component>
</template>

1- Component HTML File (helloWorld.html)

•  Create the HTML for a Lightning web component declaratively, within the template tag
•  <template> is the root tag of HTML file
•  The HTML template element contains your component’s HTML.

  2. Component JavaScript File (helloWorld.js)

• The JavaScript file follows the naming convention <component>.js, such as helloWorld.js.
• The class name should be in Pascal Case, where the first letter of each word is capitalized. For helloWorld.js, the class name should be HelloWorld.
• JavaScript files in Lightning web components are ES6 modules.

Import Statement :

• To import a class, function, or variable declared in a module.
• The core module in Lightning Web Components is lwc.
• The import statement imports LightningElement from the lwc module.

Export Statement :
Allows other code to use a class, function, or variable declared in a module

3. Component Configuration File (helloWorld.js-meta.xml)

• The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder.
• Each Lightning web component folder must include a configuration file named <component>.js-meta.xml.

Track property in LWC :
- Track property is called private reactive property.
- You can use a track property directly in a template. Also, you can use a track property indirectly in a getter of a property that’s used in a template.

- Both @track and @api mark a property as reactive. If the property’s value changes, the component re-renders.
- Track properties are private,

Import @track from the lwc module
import { LightningElement, track } from 'lwc';


Public api property in LWC :
- Passing value from one component to another in salesforce lightning web component this is quite easy in Lightning web component using @api.
- Properties decorated with @api are public and can be set by another component.
- To expose a public property, decorate it with @api.
- Public properties defined as API for a component. An owner component that uses the component in its markup can access the component’s public properties.
- Public properties are reactive. If the value of reactive property changes, the component re-renders. When a component re-renders, all the expressions used in the template are re-evaluated.
- To mark a property as public, annotate it with the @api decorator.

When you use the @api decorator, you must import it explicitly from LWC.

For example :

import { LightningElement, api } from 'lwc';


Lightning data table in LWC :

A lightning-datatable component displays tabular data where each column can be displayed based on the data type. For example, an email address is displayed as a hyperlink with the mail to :
URL scheme by specifying the email type. The default type is text.

This component inherits styling from data tables in the Lightning Design System.

lightning-datatable is not supported on mobile devices.

Supported features include :

• Displaying and formatting of columns with appropriate data types
• Infinite scrolling of rows
• Inline editing for some data types
• Header-level actions
• Row-level actions
• Resizing of columns
• Selecting of rows
• Sorting of columns by ascending and descending order
• Text wrapping and clipping
• Row numbering column
• Cell content alignment

Tables can be populated during initialization using the data, columns, and key-field attributes. The key-field attribute is required for correct table behaviour. It associates each row with a unique identifier.

------------------------------------------------------------------------------------
<template>
     <lightning-datatable data={searchData}
                                 columns={columns}
                                 key-field="id">
     </lightning-datatable>
</template>


Retrieving Data Using an Apex Controller : 
Just like lightning component, we will create an apex class :
-
public with sharing class SearchController {
    @AuraEnabled(Cacheable = true)
    public static List<Product2> retriveProducts(String strProdName) {
        strProdName = '%' + strProdName + '%';
        List<Product2> lstProd = [SELECT  Id, Name, ProductCode FROM Product2 WHERE Name LIKE :strProdName];
        return lstProd;
    }
}