Skip to main content

Posts

The Top 5 Most Treasured Winter ‘20 Features

1.        The RECYCLE BIN is now in Lightning, and it’s even better 2.        The new Salesforce Mobile App is a game changer 3.        Printable View for Lists comes to Lightning 4.        Bye-bye Power of One fields. Hello Count Unique Values (Beta) 5.        Start a Flow on a Schedule The RECYCLE BIN is now in Lightning, and it’s even better Now we’ve View, Restore, Delete and The Tab for Recycle Bin. Why people love it: Accidental deletions happen more often than most of us would like to admit, and having the ability to easily find and “undo the oops” without switching back to Classic is on the shortlist of the most highly anticipated “better in Lightning” features. Printable View for Lists comes to Lightning Why people love it: Even if we live mostly in a digital world, there are s...

Salesforce CLI Command Reference

In real time we develop some business requirements in salesforce using configuration, then we need to push these change to Version control such as GitLab/Bit bucket. So we will come to know in how many way we can retrieve these changes from salesforce: source:retrieve Command Syntax:  sfdx force:source:retrieve Parameters: [-x MANIFEST] [-p SOURCEPATH] [-m METADATA] [-n PACKAGENAMES] 1. [-x MANIFEST] To retrieve all metadata components listed in a manifest: $ sfdx force:source:retrieve -x path/to/package.xml 2. [-p SOURCEPATH] To retrieve the source files in a directory: $ sfdx force:source:retrieve -p path/to/source To retrieve a specific Apex class and the objects whose source is in a directory: $ sfdx force:source:retrieve -p path/to/apex/classes/MyClass.cls,path/to/source/objects To retrieve source files in a comma-separated list that contains spaces: $ sfdx force:source:retrieve -p "path/to/objects/MyCustomObject/fields/MyField.field...

Test Lightning Web ComponentsCall APIs from Apex

Test Lightning Web Components with Jest Framework Prerequisites: 1. Before installing sfdx-lwc-jest install Node.js and npm. 2. Node.js : This page lists two releases of Node.js. We recommend using the “LTS” (Long Term Support) version, rather than the “Current” version. Install Jest and Its Dependencies into Your Project npm install @salesforce/sfdx-lwc-jest --save-dev To Run test: npm run test:unit Component Folder Structure Create a folder named __tests__ at the top level of your component’s bundle directory. Update .forceignore with **/__tests__/** Test File Naming Conventions: Test files must have names that end in “.js”, and Salesforce recommend that tests end in “.test.js.” Jest runs JavaScript files in the __tests__ directory Example of package.json: {   ...   "scripts": {     ...     "test:unit": "sfdx-lwc-jest",     "test:unit:watch": "sfdx-lwc-jest --watch",     "test:unit:debug": "sfdx-lwc-jest --debu...

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

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

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

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

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

Translate