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

label Labels

Comments 0