Salesforce

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  {   ...

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...

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 ...

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 ...

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.

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...

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...