Skip to main content


Communicate with Events inLightning web components (LWC) - Salesforce Developers

There are mainly 3 approaches for communication between the Lightning components using events. Communication using Method in LWC ( Parent to Child ) Custom Event Communication in Lightning Web Component (Child to Parent ) Publish Subscriber model in Lightning Web Component ( Two components which doesn't have a direct relation ) 1. Communication using Method in LWC ( Parent to Child ) we can call the method of Child Component from the Parent Component with the help of JavaScript Methods. LWC have used @api decorator to make the children properties public available so parent can be able to call it directly using JavaScript API. For example create one public variable and method (which we need to access in parent component) in ChildComponent with @api decorator like below: ChildComponent: import  {  LightningElement ,  api  }  from   'lwc' ; export   default   class   HelloWorld   extends   LightningElement  {     @ api   name ;     @ api   message ;     @ api   upperCas

Configuration File Tags: targetConfigs

targetConfigs: Configure the component for different page types and define component properties. For example, a component could have different properties on a record home page than on the Salesforce Home page or on an app page. For Communities, only lightningCommunity__Default supports component properties. Supports the targetConfig subtag: Use a separate targetConfig for each different page type configuration. Specify one or more page types in the targets attribute, such as   <targetConfig targets="lightning__RecordPage"> or  <targetConfig targets="lightning__RecordPage,lightning__AppPage"> The targets attribute value that you specify must match one or more of the page types that you listed under <targets> for the component. Supports the property, objects, and supportedFormFactors subtags. property: Specifies a public property of a component that can be set in Lightning App Builder, App Manager, Lightning Flow Builder

LWC js-meta.xml Configuration File Tags

Each Lightning web component folder must include a configuration file named <componentName>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder. Some Standard Key metadata values: apiVersion : A double value that binds the component to a Salesforce API version. isExposed : If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder. To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page. Some Standard Optional metadata values: description : A short description of the component, usually a single sentence. masterLabel : The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder. targets : Specifies wher

Starting with LWC

To know How to Setup VS Code for Salesforce Please visit : VS Code Setup Lightning Web Component is having three main bundle Elements, nameSpace.hlml              = to show the UI View nameSpace.js                  = for logic implementations  nameSpace.js-meta.xml  = for metadata Access The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it. Create a web Component from VS Code: 1. First Create Project  Press ctrl+shift+p Select SFDX: Create Project Select Standard Project Template Give a Name to your project Select Project Location Where you want to save locally Open you new Folder 2. Create First LWC Component: Press ctrl+shift+p Select SFDX: Create Lightning Web Component Give a name to your lwc Component location will be default if you donot want to change the location of newly created lwc compon

Debug Lightning Web Components

You can enable debug mode for specific users. Debug mode gives you a few things, and particularly a few things that were not available previously for Aura components: Unminified JavaScript Custom formatting Developer mode console warnings Eneble Custom Formatter   from console then click on three dot ==> go to setting ==> in Console you will find enable Custom Formatter.

Send Events to an Enclosing Aura Component

To communicate from child to parent, dispatch an event. Lightning web components fire DOM events. An enclosing Aura component can listen for these events, just like an enclosing Lightning web component can. In Aura, you add components into facets. In Lightning web components, you add components into slots. Facet:          <aura:component implements="flexipage:availableForAllPageTypes">           <c:lwcCompo1 />             <c:lwccompo2 />          </aura:component> Slots:          <template>               <c-lwcComp></c-lwcComp>               .....         </template> Example/Syntax: const filterChangeEvent = new CustomEvent('filterchange', { detail: { filters }, }); // Fire the custom event this.dispatchEvent(filterChangeEvent); In Aura: Component: <lightning:layout> <lightning:layoutItem size="4">

Share JavaScript Code Between LWC and Aura

To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module. To share an ES6 module: Create an ES6 module using the Lightning Web Components programming model. To use the code in a Lightning web component, import and reference it in the component’s JavaScript file. To use the code in an Aura component, use the same syntax that you use to import an Aura component and call its methods. Create a .js file, example: extendableJS const calculateMonthlyPayment = (principal, years, rate) => { if (principal && years && rate && rate > 0) { const monthlyRate = rate / 100 / 12; const monthlyPayment = (principal * monthlyRate) / (1 - Math.pow(1 / (1 + monthlyRate), years * 12)); return monthlyPayment; } return 0; }; export { calculateMonthlyPayment }; • Create a lwc which can use your . js funct

Generic Class to get Dependency of Dependent Pick-list In Apex

Dependent Picklist values Dependency Dependent Picklist values do not have any dependency when retrieved via Apex Code. This Following Class will returned a map which has Key as Controlling Values and Values are the list of dependent values(In LowerCase). Map Key =  Controlling Values, Map Values = list of dependent values. Class:- /***********************-- START --****************************** **/ /** * @File Name          : DependencyForPicklistApex.cls * @Description        : CR-DR * @Author             : Devraj Tomar * @Group              : DR Groups * @Last Modified By   : Devraj Tomar * @Modification Log   :  **/ public class DependencyForPicklistApex {          public static Map<String, Set<String>> getFieldDependencies(String objectName, String controllingField, String dependentField){         Map<String, Set<String>> controllingInfo = new Map<String, Set<String>>();         Schema.SObjectType objType = Schema.getGlobalD

Salesforce Winter ’20 Release Notes(Critical Updates and Security Alerts) - Summary

Summary - Salesforce Winter ’20 Release Critical Updates and Security Alerts Enable ICU(  International Components for Unicode ) Locale Formats (Critical Update) Restrict Access to @AuraEnabled Apex Methods for Guest and Portal Users Based on User Profile Restrict Access to @AuraEnabled Apex Methods for Authenticated Users Based on User Profile Use with sharing for @AuraEnabled Apex Controllers with Implicit Sharing Enforce Access Modifiers on Apex Properties in Lightning Component Markup Enable Partial Save for Invocable Actions Restrict Access to @AuraEnabled Apex Methods for Guest and Portal Users Based on User Profile  A guest, portal, or community user can access an  @AuraEnabled  Apex method only when the user’s profile allows access to the Apex class. This critical update enforces user profile restrictions for Apex classes used by Aura and Lightning web components. Restrict Access to @AuraEnabled Apex Methods for Authenticated Users Based on User Prof

LWC View On Local Server

1. Open a new terminal window and run the following command to install the local development server. sfdx plugins:install @salesforce/lwc-dev-server 2. Check for updates to the local development server. sfdx plugins:update 3. Navigate to your SFDX project, or clone one that has Lightning web components. In this example, we are using lwc-recipes (you can download and deploy to your org). git clone 4. if you have Existing LWC Components then goto that directory. In this example If you're not in the lwc-recipes root directory already, cd into it. cd lwc-recipes 5. Use the following command to host Local Server : sfdx force:lightning:lwc:start 6. View the server at http://localhost:3333/.