Salesforce Lightning & LWC Interview Questions & Answers

1. What are the Web Components?

The web components are encapsulated HTML tags that can be used on web pages and in web applications to create new custom, reusable, encapsulated tags.

2. What are the lightning web components in salesforce?

Lightweight frameworks built on web standards are a new breed of frameworks that Lightning Web Components represents. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond.

3. Are there different programming models that can be used to develop lightning components? Describe them.

There are two programming models in lightning – Aura Framework and Lightning Web Components (LWC) Framework.

Aura Framework – With Aura, you can build dynamic mobile and desktop applications, as well as growth-oriented apps that feature long-term scalability. Clients and servers may be connected through partitioned multi-tier components. Since its introduction in 2013, Aura allows developers to design apps without relying on Salesforce data, minimizing disruptions for customers. Aura facilitates more efficient development because programs do not need to be optimized for each device.

Lightning Web Components (LWC) Framework – Lightning Web Components implement the Web Components defined by the W3C. As only what’s required to work with all Salesforce-supported browsers is added, Web Components are supported from a browser perspective. Based on the most current web standards, it consists of advanced lightweight frameworks. An object model element that uses reusable code. This framework allows developers to create sophisticated interfaces without having to write JS or use a library. The ease of use and speed of this functionality means developers save a lot of time and work on the web stack.

4. When were Lightning Components introduced in Salesforce?

Lightning Component Framework and Aura programming model were launched by Salesforce in 2014 to enable large-scale web application development for clients.

5. How to create a Lightning Web Component?

A lightning component cannot be created directly from your developer console. You need either SFDX or MS Visual Code to create it.

6. Are Lightning Web Components and Aura Components compatible with it?

Yes, the two are fully compatible. Both Lightning web components and aura components can be embedded in each other without any issues. However, Lightning web components cannot be embedded in aura components.

7. What is a @track decorator in a Salesforce JS file?

To track a private property’s value and rerender a component when it changes, the component renders and displays the new value. When you assign a field to an object or array, the framework observes some changes to the internals of the object or array, such as when you change the value. A field can be decorated with @track to instruct the framework to observe changes in its properties.

8. What is a @api decorator in a Salesforce JS file?

To expose a public property, decorate it with @api. An owner component that uses the component in its markup can access its public properties. Public properties define the API for a component. Components’ templates rewrite any content that references a reactive property if its value changes.

9. What is a @wire decorator in a Salesforce JS file?

To read Salesforce data, Lightning web components use a reactive wire service. Whenever a wire service provisions data, a component renders. Components use @wire in their JavaScript classes to specify a wire adapter or an Apex method.

10. What is Web Stack?

The Web stack is the collection of software that is needed for Web development. Typically, this stack includes an operating system (OS), a programming language, database software, and a Web server.

11. What is rendering in salesforce?

During rendering, an input/output field, block or output panel can be shown/hidden depending on the conditions. Lightning events can trigger one or more actions that update data, which can trigger further events. When events are fired, the rendering service logs them.

12. What are Standard Elements?

Elements provided in HTML library. We can also create custom elements based on our needs and requirements that are not part of the HTML library.

13. What are Component Lightning Events used in Salesforce?

Component Lightning Events are used in Salesforce to communicate between Lightning Components, or in other words, it is the intermediary stage between the components.

14. Describe types of Component Lightning Events in Salesforce?

Lightning has two types of Custom Events:

Component Event: Component events occur when another lightning component fires an event. It is possible to manage component events either by the component itself or by another component in the hierarchy that already receives that event. Child components can register component events and the parent component can handle them.

Application Event: Lightning application events are similar to broadcast messages. You would send a broadcast message if you were to send one, and then all the receivers that were configured to receive it would receive it. Alternatively, an application event is fired by the specified component and other types of components that have been defined to receive it are notified as soon as the event is fired. App events differ from component events in that they are not bound by a hierarchy or relationship.

15. What is Module?

A module consists of a javascript file.

Various variables and functions are defined in a module and can be accessed by others by using the “export” directive.
To use the functions and variables of another module, we need to import it. We do this by using the “import” directive.
Modules allow you to separate logic into smaller components. As an alternative to making all the functions available within one file, if they maintain the functions in multiple files, we can import the appropriate module based on the requirement.

16. What are LWC Directives? (Or) How to iterate over an array in the HTML file?

Directives are special attributes that add dynamic behaviour to HTML templates.

• for:each={array} – Use this directive to iterate over an array and render a list.
• for:item=”currentItem” – Use this directive to access the current item.for:index=”index” – Use this directive to access the current item’s zero-based index.
• if:true|false={expression} – Use this directive to conditionally render DOM elements in a template.
• iterator:iteratorName={array} – Use this directive to apply special behaviour to the first or last item in an array and render a list.

Access these properties on the iteratorName:

• value— The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
• index— The index of the item in the list.
• first— A boolean value indicating whether this item is the first item in the list.
• last— A boolean value indicating whether this item is the last item in the list.
• key={uniqueId} – The purpose of this directive is to improve rendering performance by assigning a unique identifier to each item in a list. The key must be a string or a number, not an object. The engine uses these keys to determine which items have changed.
• lwc:dom=”manual” – To call appendChild() on the element from a JavaScript class, add this directive to a native HTML element.
• lwc:preserve-comments – To preserve HTML comments in the DOM, use this boolean attribute on the root template tag.

17. What is Shadow DOM in Salesforce Lightning Components?

As a standard, Shadow DOM encapsulates the internal document object model (DOM) structure of a web component. By encapsulating the DOM, developers are able to share components and protect them from being manipulated by arbitrary HTML, CSS, or JavaScript code. This DOM structure is called the shadow tree. CSS, events, and the DOM are affected by the shadow tree.

LWC and Experience Cloud use polyfills in order to work in browsers that don’t implement Shadow DOM. Polyfills are programs that make features work in web browsers.

18. What are Custom Elements?

We can create custom elements to extend HTML and define our own tags.

19. What is Lightning Template?

Lightning pages are associated with a default template component, which specifies the page’s region and what components the page contains. Custom Lightning page templates let you create templates that meet your business requirements with the structure and components you define. When your custom template is implemented, it is available to your page creators in the Lightning App Builder’s new page wizard.

Lightning page templates can be customized for record pages, app pages, and home pages. Each page type has a different interface that a template component must adhere to.

• lightning:appHomeTemplate
• lightning:homeTemplate
• lightning:recordHomeTemplate

20. What is the slot in Lightning Web components?

An element that passes markup into a component’s body is called a slot (*slot>*/slot>). A component’s composition is essentially the same concept. A template structure is essentially used and reused in different components with different data. Slots are part of the Web Component specification, so they are W3C standards.

You can use them both:

Unnamed Slots

Example:

<!– slotDemo.html –>
<template>
<h1>Add content to slot</h1>
<div>
<slot></slot>
</div>
</template>

Parent Component for Named Slots

Example :

<!– slotWrapper.html –>
<template>
<c-slot-demo>
<p>content from parent</p>
</c-slot-demo>
</template>

Named Slots

Example:

<!– namedSlots.html –>
<template>
<p>First Name: <slot name=”firstName”>Default first name</slot></p>
<p>Last Name: <slot name=”lastName”>Default last name</slot></p>
<p>Description: <slot>Default description</slot></p>
</template>

Parent Component for Named Slots

Example:

<!– slotsWrapper.html –>
<template>
<c-named-slots>
<span slot=”firstName”>Matias</span>
<span slot=”lastName”>Kruk</span>
<span>Developer</span>
</c-named-slots>
</template>

21. What is Wrapper Class in LWC Lightning Web Component?

An abstract class or data structure that contains different objects or collections of objects as its members is called a wrapper class or container class.

22. What is Scratch Org in Salesforce?

Scratch orgs are source-driven deployments of Salesforce code and metadata, made specifically for developers. The scratch org is fully configurable, allowing developers to emulate different Salesforce editions and customize them to suit their needs.

First, you must enable the Developer Hub (Dev Hub) in your production or business org in order to work with scratch orgs. Create scratch orgs using Salesforce Extensions for VS Code or Salesforce CLI. Scratch orgs can be managed using CLI commands or through Salesforce’s graphical user interface.

• Enable Dev Hub Features in Your Org
  Scratch orgs are disposable Salesforce orgs for development and testing. By enabling Dev Hub features in your Salesforce org, you can create and manage scratch orgs, create and manage second-generation packages, and use Einstein features.
• Manage Scratch Orgs from Dev Hub
  Scratch orgs and their associated requests can be viewed and deleted from the Dev Hub.
• Link a Namespace to a Dev Hub Org
  In order to use a namespace with a scratch org, you must link the Developer Edition org where the namespace is registered to a Dev Hub org.
• Enable Org Shape for Scratch Orgs (Beta)
  If you wish to capture the shape of an org (source org), enable Org Shape for Scratch Orgs.

23. Explain the Lightning Web Component Bundle?

We need to first create a folder that contains all of our Lightning Web Component files in order to create a Lightning Web Component. There must be the same name for the folder and its files, including capitalization and underscores.

These naming rules must be followed by the folder and its files.

• It must begin with a lowercase letter
• It must contain only alphanumeric or underscore characters
• It must be unique within the namespace
• Whitespace is not allowed
• It cannot end with an underscore
• It cannot contain two consecutive underscores
• It cannot contain a hyphen (dash)

24. Explain CSS in Lightning Web Component Bundle?

Components can include CSS files. To style Lightning web components, create a style sheet with the same name as the component in the component bundle. The style sheet is applied automatically. If the component is called my_component, then the style sheet is called my_component.css.

25. How to render the HTML file conditionally?

You can conditionally render HTML content by adding the if:true|false directive to a nested <template> tag that encloses the conditional content. The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a truthy or falsy value.

26. What is the file structure of Lightning Web Components?

To create a component, first, create a folder that bundles your component’s files.

The folder and its files must have the same name, including capitalization and underscores.

myComponent
├──myComponent.html
├──myComponent.js
├──myComponent.js-meta.xml
├──myComponent.css
└──myComponent.svg

The folder and its files must follow these naming rules.

• It must begin with a lowercase letter
• It must contain only alphanumeric or underscore characters
• It must be unique within the namespace
• Whitespace is not allowed
• It cannot end with an underscore
• It cannot contain two consecutive underscores
• It cannot contain a hyphen (dash)

27. How we can Bind Data in LWC?

In the template, surround the property with curly braces, {property}. To compute a value for the property, use a JavaScript getter in the JavaScript class, get property(){}. In the template, the property can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). LWC doesn’t allow computed expressions like person[2].name[’John’]. Don’t add spaces around the property, for example,{ data } is not valid HTML.

28. How we can pass data from HTML to JS controller in LWC?

JavaScript’s onchange attribute can be used to listen for changes to its value. When a change occurs, the handIeChange function is executed.

29. How we can iterate the list in Lightning Web Component (LWC)?

To iterate over the list we can use two directives

• for:each
• Iterator

for:each

• Use for:item=”currentItem” to access the current item when using the for:each directive.
• Use the key=[uniqueId] directive to assign a key to the first element in a nested template.
• It is optional to use them for:index=”index” to access the current item index

iterator

• In order to make the first or last item in a list behave differently, use the iterator directive.
• Using the iterator directive on a template tag, use the iterator:iteratorName=[array].

Use iteratorName to access these properties:

• value—The value of the item in the Use this property to access the properties
  of the array. For example, iteratorName.value.propertyName.
• index—The index of the item in the list.
• first— A boolean value indicating whether this item is the first item in the list.
• last—A boolean value indicating whether this item is the last item in the list.

30. Can we display multiple templates in LWC?

We can import multiple HTML templates and write business logic to render them conditionally. This is similar to the code splitting used by some JavaScript frameworks.

31. What are the Public Properties in Lightning Web Component?

You can expose a public property by decorating a field with @api. A public property defines an API for a component. Templates can use public properties as reactive properties. The component redraws when the value of a public property used in a template changes.

32. How to set Property from Parent component to child component in LWC?

In JavaScript, an attribute is translated into a property assignment by an owner to communicate down the hierarchy. Similarly, an attribute in HTML becomes a property assignment in HTML.

33. Can we have Pagination in LWC?

Yes, by using Server-side controllers with Offset in SOQL Query.

The Lightning datatable supports pagination, which allows us to split a large amount of data into smaller parts. The pagination toolbar includes Previous and Next buttons along with page numbers.

34. Explain lookup in LWC?

The Lightning web component consists of two components.

• IwcLookup – This class contains code for fetching records and displaying them as a lookup.
• IookupContainer – This class demonstrates how to call IWCLookup and its properties.

35. What is ES Module in LWC?

Modules consist of JavaScript files following specific guidelines and with specific keywords.

Within a module, there are usually three parts.

• import statements: If the code you write depends on other libraries or modules, you will have to import them first.
• class, functions, variables, constants: These are the places where business logic takes place.
• export statement: Once we have the business logic in place, it needs to be exported.

36. How to call a controller method in javascript?

var action=component.get(“methodname”)

37. Is it possible to call third-party APIs through LWC JS?

• JavaScript cannot connect to WebSockets or call third-party APIs by default. To do so, add a remote site as a CSP Trusted Site.
• Lightning Component framework uses Content Security Policy (CSP), a W3C standard, to control the source of content that can be loaded on a page.
• As a result, the default CSP policy does not allow API calls from JavaScript code. The CSP header should be changed by adding CSP Trusted Sites to the policy.

38. Is it possible to access elements in a controller using LWC?

We have two methods available here:

• this.template.querySelector();
• this.template.querySelectorAll();

39. In what case is the Boolean property set to its default value?

False. If we want to update the value later, we should provide the default value.

40. In Lightning Web Components (LWC), how can we load third-party JavaScript (JS) libraries?

Using the following methods, we can load third-party libraries:

• Import the static resource.

import resourceName from ‘@salesforce/resourceUrl/resourceName’;

• Import methods from the platformResourceLoader module.

import { loadStyle, loadScript } from ‘lightning/platformResourceLoader’;

41. What is the best way to jump from one lightning page to another with a click?

By using the following syntax, we can redirect from one lightning page to another:

Syntax:

var urlEvent = $A.get(“e.force:navigateToURL”);

42. How to access the static resources?

Add static resources from the @salesforce/resourceUrl scoped module. Static resources can include archives (.zip, .jar, and image files), style sheets, and JavaScript, among others.

import myResource from ‘@salesforce/resourceUrl/resourceReference’;
import myResource from ‘@salesforce/resourceUrl/namespace__resourceReference’;

43. How Do I Navigate From One Lightning Component to Another Lightning Component?

“e.force:navigateToComponent”

44. How to get a current User ID?

Use the scoped module @salesforce/user to access information regarding the current user.
import property from ‘@salesforce/user/property’;

45. How does a controller pass parameters?

action.setParams

46. Is it possible to change the body of a component after it has been rendered?

Use renderedCallback() to implement logic after a component has completed the rendering phase.

It flows from parent to child. During the lifecycle of an application, components are usually rendered many times. You can use this hook to perform a one-time operation by tracking whether renderedCallback() has been executed with a boolean field like hasRendered. If hasRendered = true, do not execute the operation the first time renderedCallback() executes.

47. Can we Navigate from one component to another component in LWC?

• We cannot navigate from one Lightning Web component to another Lightning Web component.
• If you want to navigate the user from one LWC to another, you can embed the LWC in an Aura Component, and navigate the user from the LWC to the Aura Component.

48. How can we get the Current Experience Builder Site?

We can Import information about the current Experience Builder site from the @salesforce/community scoped module.

property—The supported properties are:

• Id—The ID of the current site.
• basePath—The base path is the section of the site’s URL that comes after the domain. So if your site domain name is newstechnologystuff.force.com and lwcdemo was the URL value added when you created the site, the community’s URL is newstechnologystuff.force.com/lwcdemo/s. In this case, lwcdemo/s is the base path.
• propertyName—A name that refers to the imported Experience Builder property.

49. Which interface should you use to retrieve the record id from the detail page of the record?

force:hasRecordId

50. What is the best way to navigate from one lightning component to another?

We can navigate between lightning components by using the “e.force:navigateToComponent” syntax.

51. What are the events in Salesforce Lightning?

• component event
• application event
• system events

52. Does reusability is possible in the controller?

No, Reusability is not possible in the lighting controller.

53. Share all the LWC targets that are supported?

Experience Builder

• To make your component usable in Experience Builder, set isExposed to true. Then, in targets, add one of these values as a target:
  • lightningCommunity__Page Create a drag-and-drop component that appears in the Components panel
  • lightningCommunity__Page_Layout to create a page layout component for LWR sites that appears in the Content Layout window
  • lightningCommunity__Theme_Layout This will create a theme layout component for LWR sites that appears in Settings in the Theme area
• To include properties that are editable when the component is selected in Experience Builder, define lightningCommunity__Default in targets and define the properties in targetConfigs. Only properties defined for the lightningCommunity__Page or lightningCommunity__Page_Layout targets are editable in Experience Builder.

54. What is the best time to use the unbounded expression?

If you are only dealing with reading operations, we should go with unbounded expressions.

55. What is the purpose of the do init method?

This class is loaded when a lightning application is loaded. It’s fairly similar to the constructor.

56. In the attribute v, what does it stand for?

The value provider is a value provider. If you want to access the value from an attribute, you will use [!v.attrname] or [#v.attributename].

57. What is the purpose of attributes?

A variable is like an attribute. If you want to store data then you should use an attribute.

58. When you don’t include exends=”force:slds” in your lightning application, what will happen?

The file will look like a normal HTML file.

59. How do you define a bounded expression?

We will be able to get the new value. Syntax: {!v.attribute name}

60. What does exends=”force:slds” mean?

Eventually, it will acquire the properties of the lightning design.

61. How does unbounded expression work?

Unbounded expressions are exactly the opposite of bounded expressions. We cannot get new values from unbounded expressions. Furthermore, unbounded expressions can be used for reading data (not for editing data).
Syntax: [#v.attributename]

62. What are various types of tags in lightning?

UI tags and lightning tags.

63. How to get the state in the controller?

Using the below syntax, we can get the state in the controller:
response.getState()

64. How to get the response from callback?

Using the below syntax, we can get a response from call back:
reponse.getReturnValue()

65. What is the use of global action in the controller?

$A.enqueueAction(action)It’s used to execute the server-side logic

66. What is the purpose of AuraEnabled annotations?

When we want to access data in the lightning application, we must write AuraEnabled annotations. Without auraEnabled, we will not be able to access data in lightning applications.

67. In the controller, what is the scope of global action?

Global action is used to execute the logic on the server-side (apex class).

68. Can we write void methods in Salesforce Lightning?

No, we cannot write void methods in Salesforce Lightning.

69. What are the advantages of Salesforce lightning’s helper method?

Salesforce lightning best practices require the use of a helper method to ensure reusability, which allows us to access values from one method to another.

Method1:function(component) {
var name=’lwcscenarios’;
this.method2(name);
},
method2.function(name){
// reusability
console.log(‘name from method 1 is’+name);
}

70. What is the lightning component bundle?

The lightning component bundle consists following:

• Component
• Controller
• Helper
• Design
• SVG
• Documentation
• Style
• Renderer

71. How would you define a renderer?

Overriding the standard Salesforce lightning rendering mechanism is done through renderers.

72. Which are the best practices for Salesforce lightning?

We must follow the following best practices for Salesforce lightning:

• Avoid using too many console logs.
• Design the UI consistently using SLDS.
• Use lightning data services to avoid calling servers for DML operations.
• If the data across components is not required to be synchronized, use unbounded expressions.
• We must re-evaluate whether a third-party library is really necessary before using it in the lightning component. DOM manipulation libraries such as jQuery and UI libraries such as bootstrap or jQuery UI, in particular, may no longer be needed when working with lightning component frameworks.
• When possible, use lightning design system icons (*Lightning:icon> and *lightning:buttonIcon>) instead of custom icons.
• If you are working in a production org, don’t enable debug mode because debug mode will slow Salesforce down.
• It is always better to pass data between components than to retrieve the same data from another component.
• Limit the number of columns and rows in the result set when making a call to the server. Select only the columns you need.
• Limit the query and provide paging if necessary. Never return the huge number of rows at once.
• Combine several requests (actions) into a single composite request whenever possible.
• Try caching data whenever you can.
• Reduce the number of event handlers in lightning components to reduce performance overload.
• Use component events instead of application events whenever possible.
• Utilize helper methods whenever possible.
• @AuraEnabled(casheable=true) improves the runtime performance of methods. However, methods cannot mutate data.

73. How do I integrate the lightning component with Salesforce mobile app?

Add a lightning component tab to the Salesforce1 mobile navigation.

74. In lightning, what is the main advantage of caching the data?

As well as reducing the number of server round trips, cashing the data at the client end can improve performance. Storable actions are server actions whose responses are stored in a client cache so that subsequent requests for the same server method with the same arguments will be able to be accessed from the cache.

75. Working with lightning components requires field-level security. How can you achieve this?

Lightning:recordForm or standard controller of the lightning component (force:recordData).

76. How can we make use of lightning components?

Lightning components can be used in the following places:

• Lightning app builder and community builder allow dragging and dropping of components.
• Complement lightning pages with lightning components.
• Lightning experience record pages should include the lightning component.
• As a quick action, launch a lightning component.
• Lightning components can override standard actions.
• Develop stand-alone applications.

77. For Salesforce Lightning, what type of attribute can we use to store fractional values?

We can use the Doubletype attribute.

78. If components need to be available on all pages, which interface should we use?

The following interface will be used:

Flexipage:availableForAllPageTypes

79. In lightning pages, what types of components are supported?

In Salesforce Lightning, there are mainly three types of components:

• Standard component: Included by default in Salesforce.
• Custom component: Developed by users according to client requirements.
• Third-party components on AppExchange: These are the components that have packages that are ready to be used in the lightning app builder.

79. What interface should you use if you want to override a standard action?

The following will be needed:

Lightning:actionOverrideInterface

80. How can we create different types of pages with the lightning component?

• App page
• Home page
• Record page

81. In order to make our component available only on the record home page, what interface should we use?

Flexipage:availableForRecordHome interface.

82. What are some ways to use components in community builders?

The following interface can be implemented in the component to be used in the community builder:

“forceCommunity:availableforAllPageTypes”

83. How should we implement our component so that it can be used as a tab?

The following will be needed:

Force:appHostable interface

84. Using Lightning, how can we access custom labels?

The following syntax can be used:

$A.get(“$Label.namespace/labelName”)

85. In order to use our component as a quick action, what interface should we use?

The following will be needed:

Force:lightningQuickAction interface

86. How can we deploy components to production?

Components can be deployed to production using managed packages, Force.com IDE, Force.com migration tools, or changesets.

87. When you say force:recordData, what do you mean?

Using this, we can perform various operations such as creating a record, editing a record, and deleting a record.
Moreover, it identifies and eliminates duplicate requests going to the server for the same record data, which improves the performance of the server.

88. Lightning has many advantages. What are they?

Lightning has many advantages in Salesforce. Here are some of them:

• You get an Out-of-the-Box component set to start building apps right away.
• Create business-ready components and make them available in Salesforce1, lightning experience, and communities.
  Enhanced performance
• For better decoupling between components, it contains an Event-driven architecture.
  Mobile and desktop development are faster with it.
  With its responsive design and cross-browser compatibility, it provides the latest browser technology.

89. In component event propagation, what are the different phases?

There is a bubble phase and a capture phase.

90. Do lightning components replace Visualforce?

Certainly not

91. What are the different phases of application event propagation?

There are three phases: bubble, capture, and default.

92. What is the maximum number of components we can have in one application?

Salesforce does not define a limit of this kind.

93. What is the propagation of the bubble phase and capture phase?

Phases of bubbles propagate from bottom to top, while phases of capture propagate from top to bottom.

94. How does Salesforce’s Lightning component use Aura:method?

From the parent component controller method, aura:method can be used to call the child component controller method. In this method, values are passed from the parent component controller to the child component controller.

95. How do lightning web components (LWC) work?

In addition to HTML and JavaScript files, the LWC bundle contains a metadata configuration file. This file is created automatically when the lightning web component is created. Furthermore, style-related .css files can be created, as well as .svg files for displaying icons.