Hi All,

My component is very simple and trying to call the Lightning component from VF page - have done this before many times, but one of the instance am facing error called - Light message service enabled true
Note: Still same code working in my developer environment but not in sandbox 

VF Page:

<apex:page standardController="Lead" sidebar="true">
    <apex:includeLightning />
   

    <div id="console">
        <div id="lightningComponent" />
    </div>
    
    <script>        
    	
        $Lightning.use("c:DownloadCalendar", function() {

            $Lightning.createComponent("c:TestingComponent", {
            
            }, "lightningComponent", function(cmp){
                //some stuff if need be
            });
            
        });
    </script>
    
</apex:page>

App :

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:TestingComponent"/>
</aura:application>

Component:

<aura:component implements="flexipage:availableForRecordHome,flexipage:availableForAllPageTypes,force:appHostable,force:hasRecordId,lightning:availableForChatterExtensionComposer,lightning:isUrlAddressable,lightning:actionOverride" access="global">
	this is Test Component
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>

console error

 

Basically this.caseWithComments is my track variable and it holds the list of case and using <template displaying data.
am trying to change the collection with in the JS file on button click and this.caseWithComments is read only so trying to change with new declaration and able to change the value and binding value back to the list but DOM is not rendering.

showCaseComments(event) {
        let caseWithCommentsNew = this.caseWithComments;
        //console.log('Final==='+JSON.stringify(this.caseWithComments));
        for(var i=0;i < this.caseWithComments.length; i++ ){
            console.log('first variable==='+JSON.stringify(this.caseWithComments[i]));
            let ccNew = JSON.parse(JSON.stringify(this.caseWithComments[i]));
            ccNew.showCComments = true;
            //console.log('after show comment'+ccNew.showCComments ); 
            caseWithCommentsNew.push(ccNew);
            //this.caseWithComments[i] = ccNew;
            
        }
        
        //console.log('final===='+JSON.stringify(caseWithCommentsNew));
        this.caseWithComments = casewithCommentsNew;
        console.log('length===='+this.caseWithComments.length);
        //this.caseWithComments.splice(1,1);
        console.log('Final==='+JSON.stringify(this.caseWithComments));
    }

<template if:true={caseWithComments}>
                <template for:each={caseWithComments} for:item="cs" for:index="indexVar">
                    <tr key={cs.showCComments} class="slds-hint-parent">
                        <td><lightning-button variant="base" icon-name="utility:edit"  title="Primary action" onclick={showCaseComments} > </lightning-button></td>
                        <td > {cs.caseRecord.CaseNumber}</td>
                        <td>{cs.caseRecord.Owner.Name}</td>
                        <td>{cs.caseRecord.Status}</td>
                        <td>{cs.caseRecord.CreatedDate}</td>
                        <td>{cs.caseRecord.ClosedDate}</td>
                        <td>{cs.caseRecord.Origin}</td>
                        <td>{cs.caseRecord.Reason}</td>
                        <td>{cs.caseRecord.SourceId}</td>
                        <td>{cs.caseRecord.Description}</td>
                        <td> <template if:true={cs.ccCount}><lightning-button variant="brand" label="Show" title="Primary action" onclick={showCaseComments} class="slds-m-left_x-small"> </lightning-button> </template></td>
                    </tr>
</template>
</template>

 

Hi All,

My component is very simple and trying to call the Lightning component from VF page - have done this before many times, but one of the instance am facing error called - Light message service enabled true
Note: Still same code working in my developer environment but not in sandbox 

VF Page:

<apex:page standardController="Lead" sidebar="true">
    <apex:includeLightning />
   

    <div id="console">
        <div id="lightningComponent" />
    </div>
    
    <script>        
    	
        $Lightning.use("c:DownloadCalendar", function() {

            $Lightning.createComponent("c:TestingComponent", {
            
            }, "lightningComponent", function(cmp){
                //some stuff if need be
            });
            
        });
    </script>
    
</apex:page>

App :

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:TestingComponent"/>
</aura:application>

Component:

<aura:component implements="flexipage:availableForRecordHome,flexipage:availableForAllPageTypes,force:appHostable,force:hasRecordId,lightning:availableForChatterExtensionComposer,lightning:isUrlAddressable,lightning:actionOverride" access="global">
	this is Test Component
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>

console error

 

Basically this.caseWithComments is my track variable and it holds the list of case and using <template displaying data.
am trying to change the collection with in the JS file on button click and this.caseWithComments is read only so trying to change with new declaration and able to change the value and binding value back to the list but DOM is not rendering.

showCaseComments(event) {
        let caseWithCommentsNew = this.caseWithComments;
        //console.log('Final==='+JSON.stringify(this.caseWithComments));
        for(var i=0;i < this.caseWithComments.length; i++ ){
            console.log('first variable==='+JSON.stringify(this.caseWithComments[i]));
            let ccNew = JSON.parse(JSON.stringify(this.caseWithComments[i]));
            ccNew.showCComments = true;
            //console.log('after show comment'+ccNew.showCComments ); 
            caseWithCommentsNew.push(ccNew);
            //this.caseWithComments[i] = ccNew;
            
        }
        
        //console.log('final===='+JSON.stringify(caseWithCommentsNew));
        this.caseWithComments = casewithCommentsNew;
        console.log('length===='+this.caseWithComments.length);
        //this.caseWithComments.splice(1,1);
        console.log('Final==='+JSON.stringify(this.caseWithComments));
    }

<template if:true={caseWithComments}>
                <template for:each={caseWithComments} for:item="cs" for:index="indexVar">
                    <tr key={cs.showCComments} class="slds-hint-parent">
                        <td><lightning-button variant="base" icon-name="utility:edit"  title="Primary action" onclick={showCaseComments} > </lightning-button></td>
                        <td > {cs.caseRecord.CaseNumber}</td>
                        <td>{cs.caseRecord.Owner.Name}</td>
                        <td>{cs.caseRecord.Status}</td>
                        <td>{cs.caseRecord.CreatedDate}</td>
                        <td>{cs.caseRecord.ClosedDate}</td>
                        <td>{cs.caseRecord.Origin}</td>
                        <td>{cs.caseRecord.Reason}</td>
                        <td>{cs.caseRecord.SourceId}</td>
                        <td>{cs.caseRecord.Description}</td>
                        <td> <template if:true={cs.ccCount}><lightning-button variant="brand" label="Show" title="Primary action" onclick={showCaseComments} class="slds-m-left_x-small"> </lightning-button> </template></td>
                    </tr>
</template>
</template>

 

Can anyone help me to find the Row index of the table row on onclick event?