Is there any restriction to view lightning component in Visualforce email template?

We have a requirement to build a custom visualforce component for VF email template and in that we are trying to display a lightning component. The lightning component is visible when we preview the vf page , however when we try send sample email the email template wont display the component section alone.
Not sure if that is a limit in salesforce.
Please advise.

VF Email template:

<messaging:emailTemplate subject="Panasonic approval notification" recipientType="User" relatedToType="Opportunity">
<messaging:htmlEmailBody > <c:CustomEmailapprovernameVFC relatedToId="{!relatedTo.id}"/> ,

You have approval request for new SPA number {!relatedTo.PLSI_CRM_ID__c} Project Name :- {!relatedTo.Name} of Rs.Total amount :- {!relatedTo.Amount} of Panasonic Project Value.

CRM Number: {!relatedTo.PLSI_CRM_ID__c}
CRM Date : {!relatedTo.CreatedDate}
Project Name : {!relatedTo.Name}
Site Delivery Address : {!relatedTo.PLSI_Site_Address__c}

<c:CustomEmailtemplateVF relatedToId="{!relatedTo.id}"/>
Item Brand Panasonic Discount % Panasonic Discounted Amount DC Offer Competitor Name Competitor Range Competitor Discount % Competitor Discounted Amount {!oppline.Product2.ProductCode} {!oppline.Product2.PLSI_Brand__c} {!oppline.Discount} {!oppline.TotalPrice} {!oppline.Dealer_Coverage__c} {!oppline.Competitor_Name__c} {!oppline.Competitor_range__c} {!oppline.Discount_Offered__c} {!oppline.Competitor_Total_after_discount__c}

CustomEmailtemplateVF:

<apex:component access="global" controller="Approvalnotificationdetails">
<apex:attribute name="relatedToId" assignTo="{!targetObjectId}" type="String" description="ID of the opportunitydetils to retrieve"/>

<apex:includeLightning />
<div style="width:100%;height:100px;" id="LightningContainer" /> 
<script> 
   alert('{!targetObjectId}')
    $Lightning.use("c:ConsignmentChartapp", function() {
        
        $Lightning.createComponent("c:ConsignmentChart", 
        {
              
            foremailtemplate:true,
            opportunityid :'{!targetObjectId}'
          
        },
        "LightningContainer",
        function(cmp) {
            alert('Component created');
            //cmp.set("v.opId" , "0061e0000033NTb");
            //cmp.set("v.foremailtemplate",true); 
        }); 
    });
</script>
</apex:component>

CustomEmailapprovernameVFC:

<apex:component access="global" controller="Approvalnotificationdetails">
<apex:attribute name="relatedToId" assignTo="{!targetObjectId}" type="String" description="ID of the opportunitydetils to retrieve"/>
Hi,<apex:outputText value="{!approvername}"/>
</apex:component>

ApprovalNotificationDetail class:

public class Approvalnotificationdetails {
public ID targetObjectId { get; set; }
public String approvername {
    get {
        if (approvername == null) {
            ProcessInstance lastStep = getLastApprovalStep();
            System.debug('StepsAndWorkitems'+ lastStep);
            String approverid = ( lastStep != null ) ? lastStep.StepsAndWorkitems[0].ActorId : '';
            if(approverid !=null){ 
                List<User> approveruser  = [Select Name from User where id = :approverid and IsActive = true]; 
                if(approveruser.size()>0){
                    for(User approver:approveruser ){
                        approvername = approver.Name;
                    }
                }
            }
        }
        System.debug('approvername-->'+approvername);
        return approvername;
    }
    private set;
}
private ProcessInstance getLastApprovalStep() {
    List<ProcessInstance> steps = new List<ProcessInstance>([
        SELECT
        Id,(select id, ActorId from StepsAndWorkitems where StepStatus = 'Pending' LIMIT 1)
        FROM
        ProcessInstance
        WHERE
        TargetObjectId = :targetObjectId 
        ORDER BY
        SystemModStamp DESC
        LIMIT
        1
    ]);
    System.debug('steps-->'+steps);
    
    return ( steps.size() > 0 ) ? steps[0] : null;
}
}

ConsignmentChart.App:

<aura:application access="global" extends="ltng:outApp" >
<aura:dependency resource="c:ConsignmentChart"/>
</aura:application>

ConsignmentChart.cmp:

<aura:component controller="ConsignmentChart" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="opportunityid" type="String"/>
<aura:attribute name ="foremailtemplate" type="Boolean"/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="odata" type="List"/>
  <aura:attribute name="columns" type="List"/>    
 <aura:attribute name="Others" type="Decimal"/>  
<aura:attribute name="OtherE" type="Decimal"/>
<aura:attribute name="OthersComp" type="Decimal"/>
<aura:attribute name="totalEP" type="Decimal"/>
 <aura:attribute name="totalCP" type="Decimal"/>
<aura:attribute name="var1" type="Double"/>
 <aura:attribute name="var2" type="Double"/>
 <aura:attribute name="totalP" type="Decimal"/>

<aura:attribute name="opId" type="String"/> <aura:handler name="init" value="{! this }" action="{!c.init }" />

<table class="slds-table slds-table--bordered slds-table--striped">
    <thead>
        <tr>
            <th scope="col"><span class="slds-truncate">BusinessUnit</span></th>
             <th scope="col"><span class="slds-truncate">Delear Coverage</span></th>
            <th scope="col"><span class="slds-truncate">Panasonic Expected Value</span></th>
            <th scope="col"><span class="slds-truncate">Panasonic Project Value</span></th>
            <th scope="col"><span class="slds-truncate">Competitor Project Value</span></th>
        </tr>
    </thead>
   <tbody>
        <aura:iteration items="{!v.data}" var="Opportunity">
            <tr>
                <td>WD</td>
                <td>{!Opportunity.WCDelear__c}</td>
                <td>{!Opportunity.PLSI_Expected_value_WD__c}</td>
                <td>{!Opportunity.WD__c}</td>
                 <td>{!Opportunity.WDCompetetoPrice__c}</td>
            </tr>
            <tr>
                <td>WCT</td>
                <td>{!Opportunity.WCTDealerCoverage__c}</td>
                <td>{!Opportunity.PLSI_Expected_value_WCT__c}</td>
                <td>{!Opportunity.WCT__c}</td>
                 <td>{!Opportunity.WCTCompetitorPrice__c}</td>
            </tr>
            <tr>
                <td>SWG</td>
                <td>{!Opportunity.SWGDealerCoveage__c}</td>
                <td>{!Opportunity.PLSI_Expected_value_SWG__c}</td>
                <td>{!Opportunity.SWG__c}</td>
                 <td>{!Opportunity.SWGCP__c}</td>
            </tr>
           <tr>
                <td>CMS</td>
               <td>{!Opportunity.CMSDealerCoverage__c}</td>
                <td>{!Opportunity.PLSI_Expected_value_CMS__c}</td>
                <td>{!Opportunity.CMS__c}</td>
                 <td>{!Opportunity.CMSCP__c}</td>
            </tr>
            <tr>
                <td>IAQ</td>
                <td>{!OpportunityIAQDC__c}</td>                    
                <td>{!Opportunity.PLSI_Expected_value_IAQ__c}</td>
                <td>{!Opportunity.IAQ__c}</td>
                 <td>{!Opportunity.IAQCp__c}</td>
            </tr>
            <tr>
                <td>LIGHTNING</td>
                <td>{!Opportunity.LIGHTNINGDC__c}</td>                    
                <td>{!Opportunity.PLSI_Expected_value_Lighting__c}</td>
                <td>{!Opportunity.LIGHTNING__c}</td>
                 <td>{!Opportunity.LIGHTNINGCP__c}</td>
            </tr>
             <tr>
                <td>Others</td>
                 <td>0</td>
                <td>{!v.OtherE}</td>
                <td>{!Opportunity.OTHERS__c}</td>
                 <td>{!Opportunity.OTHERSCP__c}</td>
            </tr>
             <tr>
                <td>Total</td>
                  <td> </td>
                <td>{!v.totalEP}</td>
                <td>{!Opportunity.Total__c}</td>
                 <td>{!Opportunity.TotalCP__c}</td>
            </tr>
        </aura:iteration>
    </tbody>
</table>
  

</aura:component>

Controller:

({

init: function (component, event, helper) {
   
    
   helper.doFetchContact(component);
   alert(component.get("v.foremailtemplate"));
   if(component.get("v.foremailtemplate")){
        alert(component.get("v.opportunityid")); 
        helper.doFetchContact1(component);
    }
        
        
}

});

Helper:

({
doFetchContact : function(component) {
    var action = component.get('c.showDetails');
    
    component.set("v.opId",component.get("v.recordId"));
    console.log('opID',component.get("v.recordId"));
    action.setParams({
        'opId':component.get("v.recordId"),
        'buNameV':component.get("v.buName")
    })
    action.setCallback(this, function(response){
        var state = response.getState();
        if(state === 'SUCCESS' && component.isValid()){
            
            component.set('v.data', response.getReturnValue());
            //alert('sucess'+response.getReturnValue())
             var records = response.getReturnValue();
             var records1 = response.getReturnValue();
             var records2 = response.getReturnValue();
            records.forEach(function(record) {
              component.set('v.OtherE' ,record.PLSI_Expected_value_BMS__c+record.PLSI_Expected_value_EVC__c+record.PLSI_Expected_value_FAS__c+record.PLSI_Expected_value_IOT__c+record.PLSI_Expected_value_KNX__c+record.PLSI_Expected_value_SyncoNext__c+record.PLSI_Expected_value_Thea__c+record.PLSI_Expected_value_WH__c);
             
            });
            
            records1.forEach(function(record) {        
 component.set('v.totalEP' ,(record.PLSI_Expected_value_WD__c+record.PLSI_Expected_value_WCT__c+record.PLSI_Expected_value_SWG__c+record.PLSI_Expected_value_CMS__c+record.PLSI_Expected_value_IAQ__c+record.PLSI_Expected_value_Lighting__c+record.PLSI_Expected_value_BMS__c+record.PLSI_Expected_value_EVC__c+record.PLSI_Expected_value_FAS__c+record.PLSI_Expected_value_IOT__c+record.PLSI_Expected_value_KNX__c+record.PLSI_Expected_value_SyncoNext__c+record.PLSI_Expected_value_Thea__c+record.PLSI_Expected_value_WH__c+record.PLSI_Expected_value_BMS__c+record.PLSI_Expected_value_EVC__c+record.PLSI_Expected_value_FAS__c+record.PLSI_Expected_value_IOT__c+record.PLSI_Expected_value_KNX__c+record.PLSI_Expected_value_SyncoNext__c+record.PLSI_Expected_value_Thea__c+record.PLSI_Expected_value_WH__c+record.PLSI_SCI_Expected_value__c));
       });
                      
   
             
        }else{
            alert('ERROR'+response.getReturnValue());
            //alert('ERROR');
        }
    });
    $A.enqueueAction(action);
},
doFetchContact1: function(component) {
    var action = component.get('c.showDetails');
    alert(component.get("v.opportunityid"));
    action.setParams({
        'opId':component.get("v.opportunityid"),
        'buNameV':component.get("v.buName")
    })
    action.setCallback(this, function(response){
        var state = response.getState();
        if(state === 'SUCCESS' && component.isValid()){
            
            component.set('v.data', response.getReturnValue());
            //alert('sucess'+response.getReturnValue())
             var records = response.getReturnValue();
             var records1 = response.getReturnValue();
             var records2 = response.getReturnValue();
            records.forEach(function(record) {
              component.set('v.OtherE' ,record.PLSI_Expected_value_BMS__c+record.PLSI_Expected_value_EVC__c+record.PLSI_Expected_value_FAS__c+record.PLSI_Expected_value_IOT__c+record.PLSI_Expected_value_KNX__c+record.PLSI_Expected_value_SyncoNext__c+record.PLSI_Expected_value_Thea__c+record.PLSI_Expected_value_WH__c);
             
            });
            
            records1.forEach(function(record) {        
 component.set('v.totalEP' ,(record.PLSI_Expected_value_WD__c+record.PLSI_Expected_value_WCT__c+record.PLSI_Expected_value_SWG__c+record.PLSI_Expected_value_CMS__c+record.PLSI_Expected_value_IAQ__c+record.PLSI_Expected_value_Lighting__c+record.PLSI_Expected_value_BMS__c+record.PLSI_Expected_value_EVC__c+record.PLSI_Expected_value_FAS__c+record.PLSI_Expected_value_IOT__c+record.PLSI_Expected_value_KNX__c+record.PLSI_Expected_value_SyncoNext__c+record.PLSI_Expected_value_Thea__c+record.PLSI_Expected_value_WH__c+record.PLSI_Expected_value_BMS__c+record.PLSI_Expected_value_EVC__c+record.PLSI_Expected_value_FAS__c+record.PLSI_Expected_value_IOT__c+record.PLSI_Expected_value_KNX__c+record.PLSI_Expected_value_SyncoNext__c+record.PLSI_Expected_value_Thea__c+record.PLSI_Expected_value_WH__c+record.PLSI_SCI_Expected_value__c));
       });
                      
   
             
        }else{
            alert('ERROR'+response.getReturnValue());
            //alert('ERROR');
        }
    });
    $A.enqueueAction(action);
}

});

April 13, 2021
·
Answer
·
Like
0
·
Follow
0

Swetha (Salesforce Developers)
HI Samuel ,
Does it give any errors when the lightning component goes missing? Thanks

April 19, 2021
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Is there any restriction to view lightning component in Visualforce email template?

You need to sign in to do that.