Basic differences between Aura Component and Lightning Web Components in HTML

Lightning Web Components is an implementation of the W3C’s Web Components standards.The Aura Component framework is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.

Aura components can contain Lightning web components but Lightning web components can’t contain Aura components.

When you create an Aura component , it has the following files:
example.cmp, exampleController.js, exampleHelper.js, exampleRenderer.js, example.css and a configuration file.
When you create a Lightning web component, it has the following files:
example.html, example.js, example.css and a configuration file

Here are the basic differences in HTMl between Aura and LWC:

  • An Aura component contains markup in a .cmp file. The file starts with an <aura:component> tag and can contain HTML and Aura-specific tags.A Lightning web component contains markup in a .html file.
  • The file starts with a <template> tag and can contain HTML and directives for dynamic content.
  • In Aura component the attributes are defined in <aura:attribute> tag. While in Lightning web component it is defined as JS properties.
  • Syntax for Dynamic component in Aura is {!v.count}, while in Lightning web component it is {count}. You don’t need the ‘!’ and the ‘v.’ .
  • Conditional markup changes from :
    <aura:if isTrue=”{!v.showsection}”>
    <template if:true={showsection}></template>
    ( Please notice that there is no quotes around the dynamic content. This is true through out the LWC. )
  • In Aura you can do additional conditions in your expression language. In LWC, you will have to move this condition to JS. For example in Aura to check for a condition if the count is 1 , you can add it in the <aura:if> for example:
              <aura:if isTrue=”{!v.count > 1}”>
                          //show content

    While in lwc we have to move this logic to JS and use the variable in the expression language:
    HTML will look like this in LWC :

                 <template if:true={hasMoreThanOne}>
                           //show content

    JS will look like this:
                import { LightningElement, api } from ‘lwc’;
                export default class Paginator extends LightningElement {
                        @api count;
                         get hasMoreThanOne() {
                               return this.count === 1;

  • In Aura for Iterations we use <aura:iteration>, then use the ‘items’ attribute to pass the collection and ‘var’ attribute to pick the individual item from the collections. In LWC we can use ‘for:each’ and ‘for:item’ for passing collections and individual variable accordingly.
             <aura:iteration items=”{!}” var=”property”>
                    // show the data associated with each property
            <template for:each={}  for:item=”property”>
                   //show content
  • We use the init handler in Aura to run code that we need to run before rendering an Aura component. In LWC we replace this with connectedCallback() lifecycle hook. There are multiple lifecycle hooks that you can use to run code at different stages of the component’s lifecycle.
  •  Self closing tags are not allowed in LWC, while they are allowed in Aura.
  • Aura CSS can be converted LWC CSS by removing ‘.THIS’
    To convert the Base Lightning components from Aura to LWC syntax, we can follow these points:
              * Change the colon that separates the namespace (lightning) and  component name (formattedNumber) to a dash.
              * Change the camel-case component name (formattedNumber) to a dash-separated name (formatted-number).
              * Change the camel-case attribute name (currencyCode) to a dash-separated name (currency-code).
    This will convert a lightning base component in Aura

Adding Merge Duplicate Accounts tool in Lightning Experience like in classic.

Salesforce added Duplicate Rules and Lightning Experience is missing Merge Accounts and Contacts in tools. If you would like to the merge tool just like in classic. You can add custom button to list views. Here is how you can do it:

  1. Create a custom button. Display Type – List Button, Content Source: URL and use this URLs :


2. Add button to the List View Search Layout.

To add button navigate to Object Manager => Account => Search Layouts for Salesforce Classic.

Edit List View layout and add Merge Accounts button.

Now if you you go to any Account List view you will see Merge Accounts button.

Adding users to permission set through Apex

Here is how we can add/remove a user to/from a permission set through Apex. My requirement was to add or remove a user from a permission set when the value of a checkbox changes in user object.So I have this code in User Update After trigger.

Here is the code to add to a PermissionSet:

Here is the code to remove from a PermissionSet:


Lightning Web Component in Utility Bar example

Here I will show how to make lightning web component available to be used as Utility Bar Item.

First create new Lightning Web Component.

sfdx force:lightning:component:create --type lwc --componentname UtilityBarExample --outputdir force-app\main\default\lwc

Open meta configuration XML file utilityBarExample.js-meta.xml and change it – add targets lightning__UtilityBar and lightning__AppPage and change
isExposed to true, so the file looks like this:

Create Scratch org if you don’t have one (quick command that uses default config and 30 duration day for Scratch org):

sfdx force:org:create -f config\project-scratch-def.json --setalias LightningWebComponents --durationdays 30 --setdefaultusername --json --loglevel fatal

Push code to your scratch org:

sfdx force:source:push --json --loglevel fatal

Go to Setup –> Apps –> App Manager.

Select the app that you want to add Utility Item to and select Edit. Then go to Utility Items and add Utility Item.

You should be able to see your custom component in the list of available components.Now you can add this Lightning Web Component in Utility Bar.

How to clear selected rows in Lightning DataTable?

I have a lightning datatable where I am displaying leads.

Once I selected the rows that I wanted and completed the action, I noticed that the checkboxes are not getting unchecked.

Here is what I added to the action method to make sure that the checkboxes will be unchecked after the action is completed.

Hope it helps 🙂

Lightning component table using Lightning Datatable with sorting and pagination.

I recently worked on the project where I needed to create table with pagination, sorting and be able to select page size.

I tried to find a good working example online and could find example where it will work with unlimited number of pages. I saw examples that used LIMIT in the query, which mean not all the records will be shown in the table.

I decided to write a component that will work with any number of records and will use StandardSetController and it’s methods like next(), previous() etc.





 public class LightningTableController {
    private static ApexPages.StandardSetController ssc;
    private static String query = 'SELECT Id, Name, FirstName, LastName, Email, MobilePhone FROM Contact';
    public static ResultWrapper getData( Integer pageSize, Integer pageNumber, String sortBy, String sortOrder ){
        if( sortby != NULL &amp;&amp; sortOrder != NULL  ){
            query += ' ORDER BY '+ sortby+' '+ sortOrder+' NULLS LAST';
        ssc = new ApexPages.StandardSetController( Database.getQueryLocator( query ) );
        //set page size
        //set page number 
        ssc.setPageNumber( pageNumber );
        return new ResultWrapper( (List)ssc.getRecords(), ssc.getResultSize());
    public class ResultWrapper {
        public List result {get;set;}
        public Integer totalNumberOfRecords {get;set;}
        public ResultWrapper( List result, Integer totalNumberOfRecords) {
            this.result = result;
            this.totalNumberOfRecords = totalNumberOfRecords;



How to fix error “Java runtime could not be located. Set one using the VS Code setting” in Visual Studio code.

Today I was trying to set up Visual Studio Code on my personal computer and when I tried to create project I received this error: “Java runtime could not be located. Set one using the VS Code setting”.

The message is self-explanatory, however it took me few minutes to figure out how to fix it.

What is causing issue?

Current version of Salesforce Extension Pack for Visual Studio Code requires Java Platform, Standard Edition Development Kit 8 (JDK8). If you don’t have it – install it first, you can find it and download it here.

I received this error even though I had JDK8 installed and configured in PATH environment variable to point to the right folder.

How to fix this error?

In Visual Studio Code go to File –> Preferences –> Settings or (Ctrl + comma)

Scroll down and find Salesforce Apex Configuration and on the right side add:

“”: “path_to_JDK8”