Callback Methods in Lightning Web Components(lwc)

Callback methods are triggered at a specific phase of a component instance lifecycle.

Callback Methods in Lighting Web Components(lwc)

1. constructor()
2. connectedCallback()
3. disconnectedCallback()
4. render()
5. renderedCallback()
6. errorCallback(error, stack)

constructor()

• This callback method called when the component created.
• This method lifecycle flows from Parent to Child component.
• You can access the host element with this.template.
• we can’t access child elements in the component body because they don’t exist yet.

connectedCallback()

• This callback method called when the element is inserted into a document.
• This method lifecycle flows from Parent to Child Component.
• we can’t access child elements in the component body because they don’t exist yet.
• You can access the host element with this.template.

disconnectedCallback()

• This callback method called when the element is removed from a document.
• This method lifecycle flows from Parent to Child Component.

render()

• This callback method used to conditionally rendering a template or importing a custom one, use render() to override standard rendering functionality. 
• This function gets invoked after connectedCallback() and must return a valid HTML template.

renderedCallback()

• This Method called after every render of the component.
• This callback method is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.
• This method flows from child to parent.

 errorCallback(error, stack)

• This method called when a descendant component throws an error in one of its callback.
•  The error argument is a JavaScript native error object, and the stack argument is a string.
•  This callback method is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.

Resource
Callback methods in Lightning Web Components

System Mode and User Mode in Salesforce

System Mode:

1.  System mode running apex code by ignoring user’s permissions.

2.  In system mode, Apex code has access to all objects and fields permissions, field-level security,      sharing rules aren’t applied for the current user. 

User Mode:

1. User mode running apex code by respecting user’s permissions and sharing of records.

2. Profile level permissions, field-level security, and sharing rules are applied for the current user.

Modes Of Execution in Salesforce

Apex Class	System Mode
Triggers	1. If triggers call an apex class with sharing keyword, Then record level access permissions will be considered.
Anonymous Apex	User Mode
Apex Webservices (SOAP API and REST API)	System Mode
Validation Rule	System Mode
Workflow Rule	System Mode
Process Builder	System Mode
Formula Fields	System Mode
Custom Button	System Mode
Roll Up Summary Fileds	System Mode
Auto Response Rule	System Mode
Assignment Rule	System Mode
Escalation Rule	System Mode
Approval Process	System Mode
Flows	By Default runs in User Mode 1. if flow called from Process Builder it runs in System      Mode. 2. if flow called from Workflow it runs in System              Mode. 3. if flow called from Apex it runs depends on With or With Out Sharing of apex class
Test Class	1. Test Method with System.runAs() runs in User Mode. 2. Test Method without System.runAs() runs                  in System Mode.
All Type of Jobs	System Mode
Email Service	User Mode
Visualforce Page	Standard Controller --- User Mode Standard Controller With Extensions --- System Mode Custom Controller---- Based Sharing Keyword Used in Apex Class.
Visualforce Component	It depends on the Visualforce page where it is used.
Chatter in Apex	User Mode
Macros	System Mode
InvocableMethod	1. if it is called from Flow it will run in User Mode. 2. if it is called from Process Builder (does it depends on with or without sharing is specified on that Class), then runs in System Mode
Publisher Action	System Mode
Custom Button	System Mode

How to iterate map of list values in Lightning web components(lwc)

This post explains how to iterate map of list values in Lightning web components(lwc)

Demo:

Apex Class:

public inherited sharing class LWCExampleController {
    @AuraEnabled(cacheable=true)    
    public static map<String, list<String>> returnMapOfListValues() {
        map<String, list<String>> mapOfListValues = new map<String, list<String>>();
        
        mapOfListValues.put('India', new list<String>{'Hyderabad', 'Delhi', 'Mumbaie'});
        mapOfListValues.put('USA', new list<String>{'New York', 'Las Vegas', 'Miami'});
        mapOfListValues.put('China', new list<String>{'Shenzhen', 'Guangzhou', 'Shanghai'});
        return mapOfListValues;
    }
}

showMapOfListValuesDemo.html

<template>
    <lightning-card title="Iterate Map Values Demo">
        <template if:true={mapOfListValues}>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered">
                <thead>
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div title="Key">Country Name (Key)</div>
                        </th>
                        <th scope="col">
                            <div title="Value">Popular City Names (List Values)</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={mapOfListValues} for:item="keyValue">
                        <tr key={keyValue.key}>
                            <th scope="col">
                                <div>{keyValue.key}</div>
                            </th>
                            <template for:each={keyValue.value} for:item="value">
                                <div key={value}>
                                    <b>{value}</b><br/>
                                </div>
                            </template>
                        </tr>
                    </template>
                </tbody>
            </table>
        </template>
    </lightning-card>
</template>

showMapOfListValuesDemo.js

import { LightningElement, track, wire } from 'lwc';
import getMapOfData from '@salesforce/apex/LWCExampleController.returnMapOfListValues';

export default class ShowMapOfListValuesDemo extends LightningElement {
    @track mapOfListValues = [];

    @wire(getMapOfData)
    mapOfData({data, error}) {
        if(data) {
            for(let key in data) {
                // Preventing unexcepted data
                if (data.hasOwnProperty(key)) { // Filtering the data in the loop
                    this.mapOfListValues.push({key: key, value: data[key]});
                }
            }
        }
        else if(error) {
            window.console.log(error);
        }
    }
}

showMapOfListValuesDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showMapOfListValuesDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result: