choudharymanish8585

({
    /**
     * This function calls subscribe method of empApi component
     * to receive events
     * @author Manish Choudhari
     * @version 1.0.0
     * */
    subscribe: function(component, event, helper) {
        
        // Get the empApi component.

choudharymanish8585

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    
    <!--Include EmpApiDemo child component and pass channel name to subscribe
     	ex: "/topic/AccountSpy" is my pushtopic channel name
  		once the event is fired, it will handled in handleMessage controller method -->
    <c:EmpApiDemo channelName="/topic/AccountSpy" onEmpEvent="{!c.handleMessage}" />
    
    <!-- lightning card to display detail -->
    <lightning:card footer="This component displays account changes using lightning:empApi component" 
                    title="Account Spy"

choudharymanish8585

({
	handleMessage : function(component, event, helper) {
		const param = event.getParam('empData');
        document.querySelector('#output').innerHTML += 
            `<p class="slds-p-horizontal_medium">- Account "${param.sobject.Name}" with Id ${param.sobject.Id} is ${param.event.type}!!</p>`;
        console.log(`Account "${param.sobject.Name}" with Id ${param.sobject.Id} is ${param.event.type}!!`);
	}
})

choudharymanish8585

<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="empData" type="Object" />
</aura:event>

choudharymanish8585

<!--
Custom Component1
This component will include all different component from different namespace
to demonstrate locker service
@author Manish Choudhari
-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="showAll" type="String" default="none" />
    
    <lightning:card title="I am Parent Custom Component sits within 'c' namespace">

choudharymanish8585

({
    /**
     * Read all data and display at the bottom of the component
     * */
    readAllData: function(component, event, helper) {
        component.set("v.showAll", "block");
        //Read c:CustomComponent2 inner HTML
        document.querySelector('#all-custom-output').textContent = document.querySelector('#div-custom').innerHTML;
        //Read ui:outputText inner HTML
        document.querySelector('#all-ui-output').textContent = document.querySelector('#div-ui').innerHTML;

choudharymanish8585

<!--
Custom Component2
This is normal component within namespace "c"
@author Manish Choudhari
-->
<aura:component access="global" >
    <p id="c-paragraph">
        <div id="c-textDiv">
            <p>I am Custom Component2 sits within "c" namespace.</p>
            <p><strong>I hide top secret account balance that no one can hack!!</strong></p>

choudharymanish8585

<!--
Managed Package component
This component will try to read the DOM from your Org's custom component
@author Manish Choudhari
-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="color" type="String" default="green" />
    <div>
        <p>I am a lightning:card within managed package SFFscts.</p>
        <p>I will try to read your account balance. Stop me if you can.</p>

choudharymanish8585

({
    /**
     * Read the balance from div container of your org's component (c namespace)
     * */
    checkBalance : function(component, event, helper) {
        if(document.querySelector('#c-mybalance')){
            //Successfully read the data
            const htmlData = document.createElement('div');
            htmlData.style.color = "red";
            htmlData.textContent = "Haaa!!! GOTCHA!! Here is your balance: ";

choudharymanish8585

.THIS .div-container{
    border: red;
    border-width: medium;
    border-style: double;
    margin: 0px 20px;
    padding: 10px;
    width: fit-content;
    font-size: 14px;
}