Notify Unsaved Changes to User in Lightning Component

This post explains how to use the lightning:unsavedChanges component in lightning.

This component provides a way to notify the UI containment hierarchy of unsaved changes and to participate in saving or discarding those changes based on the user's decision.

Example:

UnsavedChangesComponentDemo

<aura:component implements="flexipage:availableForRecordHome" access="global">
    <lightning:unsavedChanges aura:id="unsaved"
                              onsave="{!c.handleSave}"
                              ondiscard="{!c.handleDiscard}" />
    
    <!-- Notification library to show notifications-->
    <lightning:notificationsLibrary aura:id="notifLib"/>

    <div class="slds-theme_default">
        <center>
            <p style="font-size:medium;font-family:sans-serif;padding:10px;margin:5px">Create New Account</p>
        </center>
        <lightning:recordEditForm aura:id="form"
                                onsuccess="{!c.handleSuccess}"
                                onsubmit="{!c.handleSubmit}"
                                objectApiName="Account">
            <!-- the messages component is for error messages -->
            <lightning:messages />
                    
            <lightning:inputField fieldName="Name" onchange="{!c.handleDataChange}"/>
            <lightning:inputField fieldName="Industry" onchange="{!c.handleDataChange}" />
            <lightning:inputField fieldName="Type" onchange="{!c.handleDataChange}" />
            <lightning:inputField fieldName="Phone" onchange="{!c.handleDataChange}" />
            <lightning:inputField fieldName="Emil" onchange="{!c.handleDataChange}"/>
            <center>
                <div class="slds-m-top_medium">
                    <lightning:button variant="brand" type="submit" name="save" label="Save New Account" />
                </div>
            </center>
        </lightning:recordEditForm>
    </div>
</aura:component> 

UnsavedChangesComponentDemoController

({
    handleDataChange : function(component, event, helper) {
        helper.dataChange(component, event, helper); 
    },

    handleSubmit : function(component, event, helper) {
        helper.submitData(component, event, helper); 
    },

    handleSave : function(component, event, helper) {
        helper.submitData(component, event, helper); 
    },

    handleDiscard : function(component, event, helper) {
        // similar to the handleSave method, but for discarding changes
    },

    handleSuccess : function(component, event, helper) {
        helper.handleSuccess(component, event, helper);
    }
})

UnsavedChangesComponentDemohelper

({
    dataChange : function(component, event, helper) {
        var unSavedChange = component.find('unsaved');
        unSavedChange.setUnsavedChanges(true, { label: 'You have unsaved changes. Do you want to Continue?' });
    },

    submitData : function(component, event, helper) {
        var unSavedChange = component.find('unsaved');
        unSavedChange.setUnsavedChanges(false);
    },

    handleSuccess : function(component, event, helper) {
        var record = event.getParams().response;

        component.find('notifLib').showToast({
            "variant": "success",
            "title": record.fields.Name.value,
            "message": "The record has created successfully."
        });
    }
})

Demo

Happy Learning!!!

Show Toast messages in Visualforce pages

This post explains how to fire toast messages from visualforce page.
In spring 19 release salesforce introduces the sforce.one.showToast({toastParams}) function in sforce.one object.
by using the function you can show different severity like success, error, info, warning.
Note: The change applies to Lightning Experience, Lightning communities, and all versions of the mobile app.
Example:
VF page

<apex:page lightningStylesheets="true">
    <script>
        function showToast() {
            sforce.one.showToast({
                "title": "Success!",
                "message": "Welcome to salesforce code crack.",
                "type": "success"
            });
        }
    </script>
    <apex:form >
        <apex:page >
            <apex:commandButton value="Show Toast" onclick="showToast();" />
        </apex:page>
    </apex:form>
</apex:page>

Enable the Available for Lightning Experience, Lightning Communities, and the mobile app permission.
Check below screenshot

once you enable the checkbox, add the visualforce page in salesforce mobile navigation

Demo

Happy Learning!!!

How to create Popup/Modal box in Salesforce Lightning Web Components

This post explains how to create Popup/Modal Box in Lightning Web components
What is Modal Box?
A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application.

Example

LWCModalBoxDemo.html

<template>
    <div class="slds-theme_default">
        <center>
        <p><b>Show Modal Box using Lightning Web Componentes</b></p><br/><br/>
        <lightning-button label="Show Modal" variant="brand" onclick={openmodal}></lightning-button>
        </center>

        <template if:true={openmodel}>
        <div class="demo-only" style="height: 640px;">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                            <lightning-icon icon-name="utility:close" size="medium">
                            </lightning-icon>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Box Example</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <center><h2><b>Welcome to Salesforce Code Crack</b></h2><br/>
                            <p>Happy Learning!!!</p>
                        </center>
                    </div>
                    <footer class="slds-modal__footer">
                        <lightning-button label="Cancel" variant="neutral" onclick={closeModal}></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <lightning-button label="Save" variant="brand" onclick={saveMethod}></lightning-button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
        </template>
    </div>
</template>

LWCModalBoxDemo.js

import { LightningElement, track } from 'lwc';

export default class LWCModalBoxDemo extends LightningElement {
    @track openmodel = false;
    openmodal() {
        this.openmodel = true
    }
    closeModal() {
        this.openmodel = false
    } 
    saveMethod() {
        alert('save method invoked');
        this.closeModal();
    }
}

LWCModalBoxDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWCModalBoxDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result

Happy Learning!!!