As of now, we have built a lightning component using the "Aura Components model". we can also build a lightning component using the "Lightning Web Components model". Lightning Web Components are custom HTML elements build using the HTML Elements and modern Javascript. We can build components using any of the models and can place these components on the same lightning page.
For developing LWC we require "Salesforce Extensions for Visual Studio Code" and for deploying LWC from an org we require "Salesforce CLI".
Aura Components make use of own custom component model, custom templates, custom components, etc while LWC is built on web standards and it makes use of web components, templates, custom elements which we have in web standards. Both the Aura component, LWC make use of Security, LDS and Base lightning components.
Important points to note:
1) Aura component and LWC can exist on the same lightning page.
2) Aura component can include LWC
Scratch org is a disposable Salesforce org used for development and testing.
Scratch org can be created for a maximum of 30 days after which scratch org gets deactivated. The default duration for Scratch org is 7 days.
LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file
and these files are created once we create a Lightning web component.
We can also create a .css file for styling purpose and We can also create SVG file for the purpose of displaying icon.
4) How to render the HTML file conditionally?
If we want to render HTML conditionally we can make use of if:true={propertyName},if:false={propertyName} in nested template tag.
5) How to iterate over an array in HTML file?
We can make use of for:each directive and iterator directive.
for:each directive:
for:each directive is used to render an array. To render an array add the for:each directive to a nested template tag, for:item is used to access the current item, for:index is used to access the current index.
Iterator directive:
If you have the requirement to access the first and the last element in the list use the iterator directive.
A sample HTML file is as shown below.
.html file
<template>
<!--for:each-->
<b>for:each directive</b>
<template for:each={students} for:item="item"
for:index="index">
<p key={item.id}>
{item.Name}
{item.Branch}
</p>
</template>
<!--Iterator
directive-->
<b>Iterator directive</b>
<template iterator:it={students}>
<li
key={it.value.id}>
{it.value.id}
{it.value.Name}
{it.value.Branch}
</li>
<!--To access the
first and the last element use {it.first} and {it.last}-->
</template>
</template>
1) @api
2) @track
3) @wire
#lwc interview questions in salesforce#lwc interview questions salesforce#lwc interview questions and answers
- The HTML file is enclosed within the <template> tags.
- It contains the component HTML.
<template>
<h1> Some Text </h1>
</template>
- The JavaScript file defines the behavior of HTML element present in HTML file.
- JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.
- If we want to import a class, function, or variable declared in a module we use the import statement.
- If we want to allow other code to use a class, function, or variable declared in a module we use the export statement.
- The core module in Lightning Web Components is lwc. The import statement imports LightningElement from the lwc module.
export default class MyComponent extends LightningElement {
// Code
}
#lwc interview questions in salesforce#lwc interview questions salesforce#lwc interview questions and answers
constructor()
connectedCallback()
disconnectedCallback()
render()
renderedCallback()
errorCallback(error, stack)
childcompdemo.html
childcompdemo.js
parentcompdemo.html
parentcompdemo.js
lightningapp.app
import { LightningElement, api } from 'lwc';
Parent component can make use of the Public Property.
childcompdemo.html
childcompdemo.js
parentcompdemo.html
parentcompdemo.js
lightningapp.app
childDemoComp.js
parentDemoComp.html
parentDemoComp.js
testApp.app
#lwc interview questions in salesforce#lwc interview questions salesforce#lwc interview questions and answers
To call method of child LWC from parent Aura component we will need to decorate the
child LWC method with @api decorator, In AURA component we need to first assign aura id to child
LWC as highlighted in yellow color. Using component.find() we can get the child LWC and
finally call its method as highlighted in AURA component JS file.
parentAuraComp.cmp
<aura:component>
<div>
I am parent Aura Component.
</div>
<c:childLwcComp aura:id="childLwcCompId"></c:childLwcComp>
<lightning:button label="Call Child LWC Comp" variant="brand" onclick="{!c.callChildMethod}" ></lightning:button>
</aura:component>
parentAuraCompController.js
({
callChildMethod : function(component, event, helper) {
var findChildComp=component.find('childLwcCompId');
findChildComp.lwcCompMethodDescription('Hi I am Aura Component Message');
}
})
childLwcComp.html
<template>
<div>
I am child LWC component.
</div>
</template>
childLwcComp.js
import { LightningElement,api } from 'lwc';
export default class ChildLwcComp extends LightningElement {
@api
lwcCompMethodDescription(messageFromAura){
alert('messageFromAura :'+ messageFromAura);
}
}
auraAppForTesting.app
<aura:application>
<c:parentAuraComp></c:parentAuraComp>
</aura:application>
Output:
By using force:hasRecordId interface in Aura component we can get the id of the current record however in LWC it is very easy to get the id of the current record.
In the component’s JavaScript class, we use @api decorator to create a public recordId property.
If we want to control when the method invocation should occurs (for example, in response to clicking a button) than we call the method imperatively.
When we call a method imperatively, we receive only a single response.
However with @wire, it delegates control to the framework and results in a stream of values being provisioned.
Let us understand with a simple example,
getAccountDataImperatively.html
<template>
<div >
<lightning-input type="text" label="Enter Account Name" value={accName} onchange={handleChange}> </lightning-input>
<lightning-button variant="base" label="Search Account" title="Search Account" onclick={handleChangeMethod} class="slds-m-left_x-small"></lightning-button>
<p>Displaying Account Information</p>
<template if:true={accountRecord}>
<template for:each={accountRecord} for:item="item" for:index="index">
<p key={item.Id}>
Name: {item.Name}
</p>
</template>
</template>
<template if:true={error}>
Some error occured.
</template>
</div>
</template>
import { LightningElement,track } from 'lwc';
import getAccountRecordMethod from '@salesforce/apex/customAccountController.getAccountRecordMethod';
export default class GetAccountDataImperatively extends LightningElement {
@track accountRecord;
@track error;
@track accName;
handleChange(event){
const userInput = event.target.value;
this.accName= userInput;
}
handleChangeMethod() {
getAccountRecordMethod({
accNameParamInApex : this.accName
})
.then(result => {
this.accountRecord = result;
})
.catch(error => {
this.error = error;
});
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
public with sharing class customAccountController {
public customAccountController() {
}
@AuraEnabled(cacheable=true)
public static List<Account> getAccountRecordMethod(String accNameParamInApex) {
String accNameKey = '%'+accNameParamInApex+'%';
List<Account> accList=[SELECT Id, Name, Industry
FROM Account
Where name Like: accNameKey];
return accList;
}
}
<aura:application>
<c:getAccountDataImperatively></c:getAccountDataImperatively>
</aura:application>
Using lightning/uiRecordApi we can perform operations as mentioned below without using Apex.
1) Create a record
2) Get record data
3) Delete a record
4) Get a field value from record
5) Update a record and etc.
37) How to get information related to an object in LWC?
we can make use of getObjectInfo to get information related to an object
such as fields, apiName etc.
38) Is it possible to use design attribute in LWC?
Yes.
For more details visit How to use design attribute in LWC?
#lwc interview questions#lightning web components interview questions#salesforce lwc interview questions#salesforce lightning web components interview questions#lwc salesforce interview questions#interview questions on lwc#interview questions on lwc salesforce#lightning web components interview questions and answers#interview questions on lightning web components
#lwc interview questions in salesforce#lwc interview questions salesforce#lwc interview questions and answers
41) Is it possible to use custom label in LWC?
We use the lightning-record-form to create forms to add, view, or update a record.
It is easier to build forms using lightning-record-form as compared to lightning-record-view-form and lightning-record-edit-form however lightning-record-form is less customizable. To customize the form layout or to provide custom rendering of data use lightning-record-view-form(view a record) and lightning-record-edit-form(add or update).
No comments:
Post a Comment