Tag Archives: Javascript

LWC Navigate Record Detail Page To New Browser Tab

import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class TestComponent extends NavigationMixin(LightningElement) {

    @track accountId = '0018G00000KsFcJQAV';

    handlenavigateToAccountViewPage(event) {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.accountId,
                objectApiName: 'Account',
                actionName: 'view'
            }
        }).then(generatedUrl => {
            window.open(generatedUrl);
        });
    }
}

JavaScript Confirm Dialog In Lightning Component

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Attributes-->
    <aura:attribute name="showConfirmDialog" type="boolean" default="false"/>
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:button name="delete" variant="brand" label="Delete" onclick="{!c.handleConfirmDialog}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleConfirmDialog : function(component, event, helper) {
        var selectedEventId = event.target.id;
        var msg ='Are you sure you want to delete this item?';
        if (!confirm(msg)) {
            console.log('No');
            return false;
        } else {
            console.log('Yes');
            //Write your confirmed logic
        }
    },
})

Output:

Difference Between JavaScript var and let

var : A variable defined using a var statement is known throughout the function it is defined in, from the start of the function.

Example:

{
    var i = 5;
}
//i can be used here

let : A variable defined using a let statement is only known in the block it is defined in, from the moment it is defined onward.

Example:

{
    let i = 5;
}
//i can be used here

Salesforce Live Agent Error : Prechat API is not enabled by the specified deployment

In Live Agent, sometimes we need to pass some values from the page, where Start Chat button is located, to Pre-chat form.

To achieve this, we use liveagent.addCustomDetail() function to set the values. On Pre-chat form page, we use prechat.js and liveagent.details.preChatInit() function to access those details.

But if the “Allow Access to Pre-Chat API” in deployment is not enable, then we will face “Prechat API is not enabled by the specified deployment” JavaScript error.

Follow below steps to enable it.

Go to Setup || Customize || Live Agent || Deployments || Edit or Create your Deployment || Enable “Allow Access to Pre-Chat API” || Save

Navigate From One Lightning Component to Another Lightning Component

Component1:

<!--Component1-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <div>
        Component 1   
    </div>     
    <lightning:button variant="brand" label="Navigate to Component 2" onclick="{!c.navigate}" /> 
</aura:component>

Component1 Controller:

({
    navigate : function(component, event, helper) {
        var navigateEvent = $A.get("e.force:navigateToComponent");
        navigateEvent.setParams({
            componentDef: "c:Component2"
            //You can pass attribute value from Component1 to Component2
            //componentAttributes :{ }
        });
        navigateEvent.fire();
    }
})

Component2:

<!--Component2-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <div>   
        Component 2
    </div>    
    <lightning:button variant="brand" label="Navigate to Component 1" onclick="{!c.navigate}" />
</aura:component>

Component2 Controller:

({
    navigate : function(component, event, helper) {
        var navigateEvent = $A.get("e.force:navigateToComponent");
        navigateEvent.setParams({
            componentDef: "c:Component1"
            //You can pass attribute value from Component2 to Component1
            //componentAttributes :{ }
        });
        navigateEvent.fire();
    }
})