Toast message in Lightning component

How to show toast in lightning record page by using force:showToast. Toast are the message box or you can say notification which developer can show according to action of the user.

ATTRIBUTES

  1.  type :  The toast can be of 4 types
    •  info
    • success
    • warning
    • error
  2.  key :  It specify the icon on the toast when type is not defined.
  3. title : it specify the title of the toast
  4. message :  It specifies the message to show the user
  5. messageTemplate :  If we want to override the message which is specified in message attribute we can use this attribute along with messageTemplateData. 
  6. messageTemplateData : To show the overridden message you must use this attribute.
  7. duration : It specify the duration of toast to be show to user. After specified duration toast will automatically disappear.
  8.  mode : It specify how the toast will disappear. In salesforce there are 3 types of mode.
    • dismissible :  Toast will disappear either by user action or on complete of specified duration.
    • pester :  Toast will disappear on complete of specified duration. Close button will not appear.
    • sticky :  Toast will disappear  by user action

Permanent link to this article: https://salesforcebuddy.com/2020/04/toast-message-in-lightning-component/

Salesforce Lightning Confirm Dialog Box

If you want to show a modal window, you can use the code below

Lightning Component:

<!--Attributes-->
<aura:attribute name="showConfirmDialogBox" type="boolean" default="false"/>

<!--Component Start-->
<div class="slds-m-around_xx-large">
    <lightning:button name="delete" variant="brand" label="Delete" onclick="{!c.handleConfirmDialog}"/>

    <aura:if isTrue="{!v.showConfirmDialogBox}">
        <!--Modal Box Start-->
        <div role="dialog" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <!--Modal Box Header Start-->
                <header class="slds-modal__header">
                    <h1 class="slds-text-heading--medium">Redirection Confirmation</h1>
                </header>
                <!--Modal Box Header End-->

                <!--Modal Box Content Start-->
                <div class="slds-modal__content slds-p-around--medium">
                    <center><b>You will be redirected to another page, Click Ok to move or Cancel to stay on this page.</b></center>
                </div>
                <!--Modal Box Content End-->

                <!--Modal Box Button Start-->
                <footer class="slds-modal__footer">
                    <lightning:button name='Cancel' label='Cancel' onclick='{!c.handleConfirmDialogCancel}'/>
                    <lightning:button variant="brand" name='Ok' label='Ok' onclick='{!c.handleConfirmDialogOk}'/>
                </footer>
                <!--Modal Box Button End-->
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>            
    </aura:if>
</div>
<!--Component End-->

Lightning JS Controller:

({

handleConfirmDialog : function(component, event, helper) {
    component.set('v.showConfirmDialogBox', true);
},

handleConfirmDialogOk : function(component, event, helper) {
    console.log('Ok');
    component.set('v.showConfirmDialogBox', false);
},

handleConfirmDialogCancel : function(component, event, helper) {
    console.log('Cancel');
    component.set('v.showConfirmDialogBox', false);
},

})

Permanent link to this article: https://salesforcebuddy.com/2020/04/salesforce-lightning-confirm-dialog-box/

How to display Custom Labels in Lighting (Aura) Components

Syntax

$Label.namespace.LabelName
if your org not having any names space use default namespace ‘c’

Let us create a custom label with name Label1

Lightning Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="strLabelvalue" type="String" />
    <!-- System handler -->
    <aura:handler name="init" value="{!this}" action="{!c.getLabelValue}" />

<center>
    <div class="slds-theme_default">
        <!-- Custom Label value from component -->
        <h2  class="slds-text-heading_medium slds-m-bottom_medium">Custom Label value from Lightning Component</h2>
        <p><b>{!$Label.c.Label1}</b></p><br/><br/>

        <!--Custom Label value from Controller -->
        <h2  class="slds-text-heading_medium slds-m-bottom_medium">Custom Label value from Controller</h2>
        <p><b>{!v.strLabelvalue}</b></p>
    </div>
</center>
</aura:component>

Controller

({

getLabelValue : function(component, event, helper) {

var labelValue = $A.get(“$Label.c.Label1”);

component.set(‘v.strLabelvalue’, labelValue); },

})

Permanent link to this article: https://salesforcebuddy.com/2020/01/how-to-display-custom-labels-in-lighting-aura-components/