Migrate Expressions (Aura to LWC)

Hi,

Here we are going to learn how we can migrate expressions from markup in the Aura component to JavaScript in a Lightning web component.

In the Lightning web component, we can't use expressions in markup (template) but we can use expressions in the Aura component's markup. 

If we have to use expressions in Lightning web components then we have to write this expression in LWC JavaScript File and return the result with the help of getter methods as shown below.

Aura:

Syntax:

<aura:if isTrue="{! (!v.isShow? true : false) }">
    <div>Conditional Code</div>
</aura:if>

LWC:

Syntax:

<template>
    <div if:true={showValues}>Conditional Code</div>
</template>

import { LightningElement } from 'lwc';
export default class MyComponentName {
    get showValues() {
        return isShow? true : false;
    }
}

Reference:

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_expressions

https://www.youtube.com/watch?v=MHJASW7DN9w&list=PL-JzyFWuCbkKk0c6WqDdFrjev-wD0SndG

https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC

Migrate Conditionals (Aura to LWC)

Hi,
We are going to learn how we can migrate conditionals from Aura to LWC.

In Aura we use <aura:if>  for conditional rendering.

In LWC we use "if:true" and "if:false".

Let's look into the following snippets.


Aura:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
 <aura:attribute name="isShow" type="boolean"/>
 <aura:if isTrue="{!v.isShow}">
  <div>Conditional Code</div>
  <aura:set attribute="else">
   <div>Conditional Code</div>
  </aura:set>
 </aura:if>
</aura:component>

Here "isShow" is an attribute name in an Aura component.


LWC(Lightning web component):

<template>
    <div if:true={isShow}>Conditional Code</div>
    <div if:false={isShow}>Conditional Code</div>
</template>

import { LightningElement } from 'lwc';
export default class MyComponentName extends LightningElement {
    isShow = true;
}

Here "isShow" is JavaScript property in the LWC JavaScript file.


Reference:
Salesforce Techbook 
https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC (Lightning Web Components)
https://www.youtube.com/watch?v=MHJASW7DN9w&list=PL-JzyFWuCbkKk0c6WqDdFrjev-wD0SndG(Aura Components)
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_conditionals

How to capture input from the child Component (Aura) without events

Hi,

Here let's talk about how we can capture the data from Child component without events.

Scenario:

Capture the input from the child component when the user clicks on the "Submit" button which is part of the parent component.

Solution:

Let's take two components 

• ContainerComponent (Parent)
• DataCaptureComponent(Child)

Let's Create a component "DataCaptureComponent" where we have input fields only to capture.

DataCaptureComponent.cmp: (child)

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

      <aura:attribute name="accountObj" type="Account" default="{'sobjectType': 'Account',

                                                                        'Name':'',

                                                                        'Type':'',

                                                                        'Industry':''}"/> 

    <lightning:input type="text" value="{!v.accountObj.Name}" label="Account Name"/>

    <lightning:input type="text" value="{!v.accountObj.Type}"  label="Type"/>

    <lightning:input type="text" value="{!v.accountObj.Industry}" label="Industry"/>

</aura:component>

in the above component, we have 3 inputs with the attribute "accountObj" and we are not firing any event.

ContainerComponent.cmp:(parent)

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="AccountSaveController">

    <aura:attribute name="accountId" type="String"/> 

    <lightning:card>

    <aura:set attribute="title">

            <lightning:icon iconName="standard:account" size="small"/>

            Account Input

        </aura:set>  

         <p class="slds-p-horizontal_small">

            <!--Include DataCaptureComponent with "aura:id" as shown below-->            

             <c:DataCaptureComponent aura:id="recordInfo"/>

             <div class="slds-p-top_small">

                  <lightning:button variant="brand" label="Submit" title="Brand action" 

                          onclick="{!c.saveRecord}"/>

                  &nbsp;<aura:if isTrue="{!v.accountId}">

              <b>Account record is created Id:{!v.accountId}</b>

              </aura:if>     

             </div>              

         </p>         

    </lightning:card>

</aura:component>

ContainerComponentController.js:

({

    saveRecord : function(component, event, helper) {

       /*To capture input from child component "DataCaptureComponent" we have to use "find()" 

        with the help of  aura:id="recordInfo" */

        var actRecComp = component.find('recordInfo');

       /* Once you get the comonent you can capture all the properties from the component here 

        we are capturing the property "accountObj" from child component*/

        if(actRecComp.get('v.accountObj')){

            var action = component.get("c.saveAccount");

            action.setParams({

               /*passing values from the child by capturing the property*/

                "actObj": actRecComp.get('v.accountObj')

            });

            action.setCallback(this, function(response) {

                var state = response.getState();

                if (state === "SUCCESS") {

                    var accountId = response.getReturnValue();                    

                    component.set("v.accountId",accountId);

                }

            });

            $A.enqueueAction(action);

        }

    }

})

In the above "ContainerComponent" we have included a component called "DataCaptureComonent" and gave the "aura: id". With the help of "find" and "get" methods, we are capturing Component and its properties.

Here "<lightning:button>" is part of "ContainerComponent".

Output:

Capture Account info from the child without events

Reference:

https://www.youtube.com/watch?v=MHJASW7DN9w&list=PL-JzyFWuCbkKk0c6WqDdFrjev-wD0SndG (Salesforce Techbook)

https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example#lightningcomponentdemo:exampleCardCustom

Migrate Attributes ( Aura to LWC)

Hi,

Here we are going to learn how can we migrate attributes in Aura (<aura:attribute>) to JavaScript properties in a Lightning web component.

Let's take an attribute called "greeting" and see how we can define the same in the "Aura component" and "Lightning web component".


Aura Component:

In Aura Component we "<aura:attribute>" tag for defining properties to pass data between "Controller.js" and "Component.cmp(mark up)" .

"<aura:attribute>" supports two way data binding.

<aura:component>
    <aura:attribute name="greeting" default="Hello" />
</aura:component>

Lightning web component:

In the Lightning web component, we have to use JavaScript properties. It doesn't support two-way data binding so we have to capture data and assign the data to property in JavaScript if the property is getting input from the user instead of default values. Here we are just talking about JavaScript property with a default value.

JavaScript File:

import { LightningElement,api} from 'lwc';
export default class MyComponentName extends LightningElement {
   @api greeting= 'Hello';
}

Here we defined a public property called "greeting" in JavaScript. We can pass data from other LWC components or Aura components as well.

Here "api" is decorator which makes your JavaScript property as public property.

You can have private property as well.  You can have look about decorator in the following link:
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/reference_decorators

HTML File:

<template>
    {greeting}
</template>

Reference:

https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC (Salesforce Techbook (lightning web component sessions)
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_attributes

Migrate Interfaces (Aura to LWC)

Hi,

We use different Aura interfaces to enable the component to receive context data or to surface components in a different context, such as in the Lightning App Builder or Experience Builder.

When we have to get the same features in Lightning web component we have to do the following things:

• To enable the Lightning web component (LWC) to receive context data we have to import the corresponding module.
• To surface a component in different contexts, use the "targets" metadata in "*.js-meta.xml" configuration file.

Aura interfaces that are not listed below don't have an equivalent in Lightning Web Components for now.

Aura:

lightning:hasPageReference

LWC:

 

We have to import "CurrentPageReference" from module "lightning/navigation" 

Eg:

import { CurrentPageReference } from
'lightning/navigation';
@wire(CurrentPageReference) pageRef;

Description:

Indicates that the component accepts a PageReference.

Aura:

flexipage:availableForAllPageTypes

LWC:

We have to configure targets In the "*.js-meta.xml" file.

Eg:

<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
    <target>lightning__UtilityBar</target>
</targets>

Description:

This indicates that the component is available for record pages, the utility bar, and any other type of page. 

We have to specify each page type explicitly as a target as shown above in the LWC meta file "*.js-meta.xml"(AppPage, RecordPage, HomePage, UtilityBar).

Aura:

flexipage:availableForRecordHome

LWC:

We have to configure the "target" in the "*.js-meta.xml" file.

Eg:

<targets>
    <target>lightning__RecordPage</target>
</targets>

Description:

Indicates that the component is available for record pages only.

Aura:

force:hasRecordId

LWC:

We have to configure the "target" in the "*.js-meta.xml" file and declare a public variable in the JavaScript file called "recordId"

Eg:

Javascript File: 

import { LightningElement, api } from 'lwc';
@api recordId;

Meta File (*.js-meta.xml):

<targets>
    <target>lightning__RecordPage</target>
</targets>

Description:

Indicates that the component takes a record Id as an attribute.

In LWC public variable (a variable which is decorated with "api" decorator) called "recordId" receives the current record id on Lightning Record Page where we included our LWC.

Aura:

force:hasSObjectName

LWC:

We have to configure the "target" in the "*.js-meta.xml" file and declare a public variable in the JavaScript file called "objectApiName"

Eg:

JavaScript File:

import { LightningElement, api } from 'lwc';
@api objectApiName;

Meta File(*.js-meta.xml):

<targets>
    <target>lightning__RecordPage</target>
</targets>

Description:

Indicates that the component takes the API name of the current record’s object type.

In LWC public variable (a variable which is decorated with "api" decorator) called "objectApiName" receives the API name of the current record’s object type. on Lightning Record Page where we included our LWC.

Aura:

forceCommunity:availableForAllPageTypes

LWC:

We have to configure the "target" in the "*.js-meta.xml" file.

Eg:

<targets>
    <target>lightningCommunity__Page</target>
</targets>

Description:

Indicates that the component can be used in Experience Builder.

Aura:

clients:availableForMailAppPage

LWC:

We have to configure the "target" in the "*.js-meta.xml" file.

Eg:

<targets>
    <target>lightning__Inbox</target>
</targets>

Description:

Indicates that the component can be used in Lightning App Builder to add to email application panes for the Outlook and Gmail integrations.

Aura:

clients:availableForMailAppPage

LWC:

We have to configure the "target" in the "*.js-meta.xml" file.

Eg:

<targets>
    <target>lightning__Inbox</target>
</targets>

Description:

Indicates that the component can be used in Lightning App Builder to add to email

application panes for the Outlook and Gmail integrations.

Reference:

https://www.youtube.com/channel/UCipDch4PvPqm0uY4SK7mi1A

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_config_for_community_builder

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_config_for_utility_bar

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_config_for_app_builder

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate