How To Create Animate Email Notification Using LWC?

How To Create Animate Email Notification Using LWC?
In this blog, you will learn how you can create Animated Email Notification using lightning web component.

This component is useful whenever you miss to read a new email received specific to a record the component gets visible and once the email is read then component gets hidden.

This component fetch the latest email from the email message object associate to the record and when user clicks on the email envelope, it redirects to the specific email message record.

Pre-requisite

a) Create a Custom Field in Email Message Object
b) Field Label - Email Read
c) Field API Name - Email_Read__c
d) Datatype - checkbox

This field is used for conditional rendering of the Lightning web component.

Note: Once the lightning component is created place it component on the record page.


Source Code

Apex Controller

public with sharing class EmailMessageController {

    @AuraEnabled
    public static string getRecords(string recordId){
        string finalResult;

        List<EmailMessage> listofEmails = new List<EmailMessage>();
        listofEmails = [SELECT Id,Email_Read__c FROM EmailMessage where RelatedToId!=null and RelatedToId =:recordId and Email_Read__c!=true 
        ];

        if(listofEmails.size()>0){
            finalResult = listofEmails[0].Id;
        }

        return finalResult;
    }

    @AuraEnabled
    public static void setRecords(string recordId){
        if(recordId!=null){
            EmailMessage listofEmails = new EmailMessage();
            listofEmails = [SELECT Id,Email_Read__c FROM EmailMessage where RelatedToId!=null and id =:recordId and Email_Read__c!=true LIMIT 1];
           listofEmails.Email_Read__c =true;
           update listofEmails; 
        }
    }
}


LWC.html

<template>
  <template if:false={emailRead}>
        <div class="letter-image" style="margin-top: 100px;">
            <div class="animated-mail">
              <div class="back-fold"></div>
              <div class="letter" onclick={updateEmailReadStatus}>
                <div class="letter-border"></div>
                <div class="letter-title"></div>
                <div class="letter-context"></div>
                <div class="letter-stamp">
                  <div class="letter-stamp-inner"></div>
                </div>
              </div>
              <div class="top-fold"></div>
              <div class="body"></div>
              <div class="left-fold"></div>
            </div>
            <div class="shadow"></div>
          </div>
        </template>
</template>


LWC.js

import { LightningElement,api } from 'lwc';
import getRecords from '@salesforce/apex/EmailMessageController.getRecords';
import setRecords from '@salesforce/apex/EmailMessageController.setRecords';
import { NavigationMixin } from "lightning/navigation";

export default class EmailNotification extends NavigationMixin(LightningElement) {

@api recordId;
@api emailRead=false;
@api emailMessageId;

connectedCallback(){
    this.GetRecordsFromEmailMessageObject();
}

GetRecordsFromEmailMessageObject(){
    getRecords({recordId:this.recordId})
    .then(result=>{
        if(result !=null){
            this.emailRead =false;
            this.emailMessageId = result;
        }
       else{
        this.emailRead =true;
        this.emailMessageId =null;
       }
    });
}

updateEmailReadStatus(){
    setRecords({recordId:this.emailMessageId})
    .then(()=>{
        this.navigate();
    });
}

navigate(){
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.emailMessageId,
            objectApiName: 'EmailMessage',
            actionName: 'view'
        }
    });
}
}


LWC.xml

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


LWC.css

body {
    background: #323641;
  }
  
  .letter-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    cursor: pointer;
  }
  
  .animated-mail {
    position: absolute;
    height: 150px;
    width: 200px;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
  }
    .body {
      position: absolute;
      bottom: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0 100px 200px;
      border-color: transparent transparent #e95f55 transparent;
      z-index: 2;
    }
    
    .top-fold {
      position: absolute;
      top: 50px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 50px 100px 0 100px;
      -webkit-transform-origin: 50% 0%;
      -webkit-transition: transform .4s .4s, z-index .2s .4s;
      -moz-transform-origin: 50% 0%;
      -moz-transition: transform .4s .4s, z-index .2s .4s;
      transform-origin: 50% 0%;
      transition: transform .4s .4s, z-index .2s .4s;
      border-color: #cf4a43 transparent transparent transparent;
      z-index: 2;
    }
    
    .back-fold {
      position: absolute;
      bottom: 0;
      width: 200px;
      height: 100px;
      background: #cf4a43;
      z-index: 0;
    }
    
    .left-fold {
      position: absolute;
      bottom: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 50px 0 50px 100px;
      border-color: transparent transparent transparent #e15349;
      z-index: 2;
    }
    
    .letter {
      left: 20px;
      bottom: 0px;
      position: absolute;
      width: 160px;
      height: 60px;
      background: white;
      z-index: 1;
      overflow: hidden;
      -webkit-transition: .4s .2s;
      -moz-transition: .4s .2s;
      transition: .4s .2s;
    }
      .letter-border {
        height: 10px;
        width: 100%;
        background: repeating-linear-gradient(
          -45deg,
          #cb5a5e,
          #cb5a5e 8px,
          transparent 8px,
          transparent 18px
        );
      }
      
      .letter-title {
        margin-top: 10px;
        margin-left: 5px;
        height: 10px;
        width: 40%;
        background: #cb5a5e;
      }
      .letter-context {
        margin-top: 10px;
        margin-left: 5px;
        height: 10px;
        width: 20%;
        background: #cb5a5e;
      }
      
      .letter-stamp {
        margin-top: 30px;
        margin-left: 120px;
        border-radius: 100%;
        height: 30px;
        width: 30px;
        background: #cb5a5e;
        opacity: 0.3;
      }
  
  .shadow {
    position: absolute;
    top: 200px;
    left: 50%;
    width: 400px;
    height: 30px;
    transition: .4s;
    transform: translateX(-50%);
    -webkit-transition: .4s;
    -webkit-transform: translateX(-50%);
    -moz-transition: .4s;
    -moz-transform: translateX(-50%);
    
    border-radius: 100%;
    background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
  }
  

    .letter-image:hover .animated-mail {
        transform: translateY(50px);
        -webkit-transform: translateY(50px);
        -moz-transform: translateY(50px);
      }
      
      .letter-image:hover .animated-mail .top-fold {
        transition: transform .4s, z-index .2s;
        transform: rotateX(180deg);
        -webkit-transition: transform .4s, z-index .2s;
        -webkit-transform: rotateX(180deg);
        -moz-transition: transform .4s, z-index .2s;
        -moz-transform: rotateX(180deg);
        z-index: 0;
      }
      
      .letter-image:hover .animated-mail .letter {
        height: 180px;
      }
      
      .letter-image:hover .shadow {
        width: 250px;
      }


Demo


Follow Us

Posted By : Sudeer Kamat Date :

view_module Related

  • How To Integrate Github Using Fetch API In LWC?How To Integrate Github Using Fetch API In LWC?
  • How to Create Apple Music Card Animation Effect In LWC?How to Create Apple Music Card Animation Effect In LWC?
  • How to Create Owl Animated Login Screen In LWC?How to Create Owl Animated Login Screen In LWC?
  • How to Send WhatsApp Message Using WhatsApp Business Platform API In LWCHow to Send WhatsApp Message Using WhatsApp Business Platform API In LWC
  • How To Create Bank Balance Lightning Card UI Design Using LWC?How To Create Bank Balance Lightning Card UI Design Using LWC?

Comments 0