Tag Archives: Javascript

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();
    }
})

Copy Billing Address to Shipping Address in Salesforce Visualforce Page

<apex:page standardController="Contact" extensions="ContactExtn" id="pgContact">

    <script type="text/javascript">
        function copyAddress() {
            // Variables for Billing Address
            var copy_BillingPostalCode = document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBPostalCode').value;
            var copy_BillingAddress1 =document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBAdd1').value;
            var copy_BillingAddress2 = document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBAdd2').value;
            var copy_BillingAddress3 = document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBAdd3').value;
            var copy_BillingCity = document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBCity').value;
            var copy_BillingState = document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBState').value;
            var copy_BillingCountry = document.getElementById('pgContact:fmContact:pbContact:pbsBillingAdd:ifBCountry').value;
           
            // Copying the Billing Address to the Shipping Address
            if(copy_BillingPostalCode != null)
            {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSPostalCode').value = copy_BillingPostalCode;
             }
            if(copy_BillingAddress1 != null) {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSAdd1').value = copy_BillingAddress1;
            }
            if(copy_BillingAddress2 != null) {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSAdd2').value = copy_BillingAddress2;
            }
            if(copy_BillingAddress3 != null) {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSAdd3').value = copy_BillingAddress3;
            }
            if(copy_BillingCity != null) {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSCity').value = copy_BillingCity;
            }
            if(copy_BillingState != null) {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSState').value = copy_BillingState;
            }
            if(copy_BillingCountry != null) {
                document.getElementById('pgContact:fmContact:pbContact:pbsShippingAdd:ifSCountry').value = copy_BillingCountry;
            }
        }
    </script>
        
    <apex:form id="fmContact">
        <apex:sectionHeader title="Contact Information" subtitle="{!Contact.Name}"/>
        <apex:pageBlock mode="Edit" id="pbContact">
            <apex:pageBlockSection showHeader="true" collapsible="false" columns="2" title="Billing Address Information" id="pbsBillingAdd">
                <apex:inputField value="{!Contact.Billing_Postal_Code__c}" id="ifBPostalCode"/>
                <apex:inputField value="{!Contact.Billing_City__c}" id="ifBCity"/>
                <apex:inputField value="{!Contact.Billing_Address_Line_1__c}" id="ifBAdd1"/>
                <apex:inputField value="{!Contact.Billing_State__c}" id="ifBState"/>
                <apex:inputField value="{!Contact.Billing_Address_Line_2__c}" id="ifBAdd2"/>
                <apex:inputField value="{!Contact.Billing_Country__c}" id="ifBCountry"/>
                <apex:inputField value="{!Contact.Billing_Address_Line_3__c}" id="ifBAdd3"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection showHeader="true" collapsible="false" columns="2" title="Shipping Address Information" id="pbsShippingAdd">
                <apex:inputField value="{!Contact.Shipping_Postal_Code__c}" id="ifSPostalCode"/>
                <a HREF="#" onClick="return copyAddress();">Copy Billing Address to Shipping Address</a>
                <apex:inputField value="{!Contact.Shipping_Address_Line_1__c}" id="ifSAdd1"/>
                <apex:inputField value="{!Contact.Shipping_City__c}" id="ifSCity"/>
                <apex:inputField value="{!Contact.Shipping_Address_Line_2__c}" id="ifSAdd2"/>
                <apex:inputField value="{!Contact.Shipping_State__c}" id="ifSState"/>
                <apex:inputField value="{!Contact.Shipping_Address_Line_3__c}" id="ifSAdd3"/>
                <apex:inputField value="{!Contact.Shipping_Country__c}" id="ifSCountry"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>