Salesforce Lightning components interview questions

Salesforce Lightning components interview questions

1

Lightning vs ui namespace for components ?

It is recommended that you use the lightning namespace component. Beyond being equipped with the Lightning Design System styling, they handle accessibility, real-time interaction, and enhanced error messages.

LDS Styling

Enhanced error messages

Accessibility

Real time interaction

2

How to share code between multiple Lightning Components that aren't necessarily related to
each other.

We can use a Static Resource and include it in any components that need to share the same
JavaScript via ltng:require.

Service component pattern can also be used for this use case.

3

What is the difference between Lightning controller and helper ? The helper is designed to have shared code in it. So, you could have code shared by your
renderer and your controller or by multiple controller functions. That should go in the helper
JS file. It is a good practice to let the controller respond to events, possibly perform some amount of
control flow, and delegate business logic to the helper as a separation of concerns. It also sets
you up to be able to reuse your business logic in other parts of the component in the future. Helper code can be shared among components when they are related through inheritance.
If one component extends another it inherits its super component's helper and can override it. Helper functions improve code reuse, and move the heavy lifting of JavaScript logic away from
the client-side controller where possible. Implement event handling code in controller and delegate business logic code to helper. Anytime you need to call one controller function from another controller function, move that
logic to Helper.
Helper helps keep code in controller and renderer lean.
4
Is Lightning client side framework or server side ? The Lightning Component framework uses a stateful client and stateless server architecture
that relies on JavaScript on the client side to manage UI component metadata and application
data.
The client calls the server only when necessary, and the server only sends data that is
needed by the user to maximize efficiency.
Using JSON to exchange data between the server and the client, the framework intelligently
utilizes your server, browser, devices, and network so you can focus on the logic and
interactions of your apps.

5

How to show toast message in lightning component ?

var toastEvent = $A.get("e.force:showToast");

toastEvent.setParams({
            "title": title,
            "message": message,
            "type": type,
            "mode": "sticky",
            "duration": "50000"
        });

toastEvent.fire();

Does e.force:showToast work in preview mode ?

No, because the event is being handled by one.app, while its supported only in Lightning Experience, Salesforce1, and Lightning communities.

6

How to Validate That a component's label attribute Attribute Value Is Defined

var isDefined = !$A.util.isUndefined(cmp.get("v.label"));

How to Validate if a component's label attribute is empty

var isEmpty = $A.util.isEmpty(cmp.get("v.label"));

These two methods isUndefined and isEmpty of $A.util class can be used to check if an attribute is defined or not and if it is empty or not.

$A.util.isUndefined

$A.util.isEmpty

7

How would you clear or empty the current value of a components body

cmp.set("v.body", []);

How To replace the current value of a component's body with another component:

// newCmp is a reference to another component

cmp.set("v.body", newCmp);

8

How to append a new component to a component's body:

var body = cmp.get("v.body");
// newCmp is a reference to another new component
body.push(newCmp);
cmp.set("v.body", body);

9

How To prepend a new component to a component's body:

var body = cmp.get("v.body");
// newCmp is a reference to another new component
body.unshift(newCmp);
cmp.set("v.body", body);

10

How to remove a component from a component's body:

var body = cmp.get("v.body");
// Index (1) is zero-based so remove the second component in the body
body.splice(1, 1);
cmp.set("v.body", body);

11

ui:button vs lightning:button ? which one should you prefer to use and why ?

One should prefer to use lightning:button since it comes with LDS styling and salesforce intends to deprecate ui:button(components with ui namespace).

ui:button has a press attribute while lightning:button has an onClick attribute. Both have aura:id

<ui:button aura:id="button1" label="Click me" press="{!c.nameThatButton}"/>

<lightning:button aura:id="button1" name="buttonname1" label="Click me" onclick="{!c.nameThatButton}"/>

12

How to find out which button was pressed ?

<aura:component>

    <aura:attribute name="whichButton" type="String" />
 
    <p>You clicked: {!v.whichButton}</p>

    <ui:button aura:id="button1" label="Click me" press="{!c.nameThatButton}"/>
    <ui:button aura:id="button2" label="Click me too" press="{!c.nameThatButton}"/>

</aura:component>


({
    nameThatButton : function(cmp, event, helper) {
        var whichOne = event.getSource().getLocalId();
        console.log(whichOne);
        cmp.set("v.whichButton", whichOne);
    }
})


13

event.getSource().getLocalId() returns the aura:id of the clicked button.
event.getSource().get("v.name") returns the name of the clicked button.

14

How can you add or remove a CSS style on a component or element during runtime.

To retrieve the class name on a component, use component.find('myCmp').get('v.class'), where myCmp is the aura:id attribute value.

component.find('myCmp').get('v.class');

To append and remove CSS classes from a component or element, use the $A.util.addClass(cmpTarget, 'class') and $A.util.removeClass(cmpTarget, 'class') methods.

$A.util.addClass(cmpTarget, 'class');
$A.util.removeClass(cmpTarget, 'class');

15

Adding and removing CSS class from component example

<aura:component>
    <div aura:id="changeIt">Change Me!</div><br />
    <lightning:button onclick="{!c.applyCSS}" label="Add Style" />
    <lightning:button onclick="{!c.removeCSS}" label="Remove Style" />
</aura:component>

CSS source

.THIS.changeMe {
    background-color:yellow;
    width:200px;
}

Client-side controller source

{
    applyCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.addClass(cmpTarget, 'changeMe');
    },
 
    removeCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.removeClass(cmpTarget, 'changeMe');
    }
}

cmp.find() locates the component using the local ID, denoted by aura:id="changeIt" in this demo.

16

How will you toggle a CSS class on a component ?

To toggle a class, use $A.util.toggleClass(cmp, 'class'), which adds or removes the class.

The cmp parameter can be component or a DOM element. Preferably it should be a component.

To conditionally set a class for an array of components, pass in the array to $A.util.toggleClass().

mapClasses: function(arr, cssClass) {
    for(var cmp in arr) {
        $A.util.toggleClass(arr[cmp], cssClass);
    }
}

17

How to Dynamically Show or Hide Markup

$A.util.toggleClass(cmp, 'class')

You can use CSS to toggle markup visibility. However, <aura:if> is the preferred approach because it defers the creation and rendering of the enclosed element tree until needed.

This example uses $A.util.toggleClass(cmp, 'class') to toggle visibility of markup.

<!--c:toggleCss-->

<aura:component>
    <lightning:button label="Toggle" onclick="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>


/*toggleCssController.js*/
({
    toggle : function(component, event, helper) {
        var toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    }
})


/*toggleCss.css*/
.THIS.toggle {
    display: none;
}

18

What is more preferred way for Conditional display of Markup, <aura:if isTrue="" /> vs $A.util.toggleClass(cmp, "");

Best Practices for Conditional Markup

Using the <aura:if> tag is the preferred approach to conditionally display markup but there are alternatives. Consider the performance cost and code maintainability when you design components. The best design choice depends on your use case.

Conditionally Create Elements with <aura:if>

Let's look at a simple example that shows an error message when an error occurs.

<aura:if isTrue="{!v.isError}">
    <div>{!v.errorMessage}</div>
</aura:if>

The <div> component and its contents are only created and rendered if the value of the isTrue expression evaluates to true. If the value of the isTrue expression changes and evaluates to false, all the components inside the <aura:if> tag are destroyed. The components are created again if the isTrue expression changes again and evaluates to true.

The general guideline is to use <aura:if> because it helps your components load faster initially by deferring the creation and rendering of the enclosed element tree until the condition is fulfilled.

Toggle Visibility Using CSS

You can use CSS to toggle visibility of markup by calling $A.util.toggleClass(cmp, 'class') in JavaScript code.

Elements in markup are created and rendered up front, but they're hidden.

The conditional markup is created and rendered even if it's not used, so <aura:if> is preferred.

Dynamically Create Components in JavaScript

You can dynamically create components in JavaScript code. However, writing code is usually harder to maintain and debug than using markup. Again, using <aura:if> is preferred but the best design choice depends on your use case.

19

What is main difference between Application and Component Events ?

Component events: to talk to a parent using the capture and bubbling mechanism, like with DOM events.

Application events: to broadcast to other components and not exclusively ancestors. Applications events can talk to many components that can be interested by the event.

20

Can Lightning Web Components contain Aura components ?

No, Lightning web components can't contain Aura components.

Aura components can contain Lightning web components.
Lightning web components can't contain Aura components.

21

Which Aura components are good candidate to be migrated to Lightning web component ?

An Aura component whose performance is critical (UI renders slowly) is a good candidate to migrate to a Lightning web component.

22.

What are some key features of Lightning Web Components ?

A.

Modern JavaScript

HTML Templates
ES6
Web components
Custom Elements

B.

Code Performance

Because more features are executed natively by the browser instead of by a JavaScript framework. Rendering time for your components will be quicker.

C.

Developer Productivity and Satisfaction

Working with standard JavaScript, HTML, and CSS and even accessing proprietary pieces (components and APIs that make it easier to work with Salesforce) in a standard way.