• Alice Zara
  • NEWBIE
  • -1 Points
  • Member since 2021

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
I'm new to aura components and I cannot figure out when I try to fire a component inside a callback function inside $A.getCallback() according to the documentation I get the error $A.getCallback() [Cannot read property 'setParam' of null]. I'm trying to fire the component inside a strophe.js hanlder function which is a callback function and only takes a single parameter.

LoginPanel.cmp
<aura:component description="Login panel for users to log into their CTI systems."  implements="c:panel">
    <ltng:require scripts="{!$Resource.Strophe}"/>
    <ltng:require scripts="{!$Resource.xml2json}"/>
    <!-- <ltng:require scripts="{!$Resource.jQuery}"/> -->



    <div class="slds-modal__container">
        <div class="logo">
            <img src="/staticresources/demoAdapterLogo.png" align="center"></img>
        </div>
        <div class="slds-form-element slds-p-bottom--medium">
            <label class="slds-form-element__label" for="text-input-01">Username</label>
            <div class="slds-form-element__control">
                <ui:inputText class="slds-input" aura:id="username"/>
            </div>
        </div>
        <div class="slds-form-element slds-p-bottom--medium">
            <label class="slds-form-element__label" for="text-input-01">Password</label>
            <div class="slds-form-element__control">
                <ui:inputSecret class="slds-input" aura:id="password"/>
            </div>
        </div>
        <div class="slds-form-element slds-p-bottom--medium">
            <label class="slds-form-element__label" for="text-input-01">Extension</label>
            <div class="slds-form-element__control">
                <ui:inputNumber class="slds-input" aura:id="extension"/>
            </div>
        </div>
        <button class="slds-button slds-button--brand" aura:id="submitButton" onclick="{!c.handleLogin}">Log In</button>
    </div>
</aura:component>
callInitiatedPanel.cmp
<aura:component description="panel that is shown on dialing, incoming or transferring calls before being connected that displays basic contact info for the call." implements="c:panel">
    <aura:attribute name="state" type="String" />
    <aura:attribute name="label" type="String" />
    <aura:attribute name="recordName" type="String" />
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="account" type="Object" />
    <aura:attribute name="title" type="String" />
    <aura:attribute name="phone" type="String" />
    <aura:attribute name="presence" type="String" description="Could be Available, Busy or Unavailable"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <div class="slds-panel">
        <!--  Top section: Information about the contact, including an avatar -->
        <div class="slds-panel__section">
            <div class="avatar slds-align--absolute-center">
                <div class="slds-avatar slds-avatar--circle slds-avatar--large">
                    <img src="/resource/slds/assets/images/avatar1.jpg" alt="Contact" />
                </div>
            </div>
            <div class="name slds-text-heading--large slds-text-color--weak slds-text-align--center">{!v.recordName}</div>
            <div class="slds-text-heading--x-small slds-text-color--weak slds-text-align--center companyDetails">{!v.account.Name}</div>
            <div class="slds-text-heading--x-small slds-text-color--weak slds-text-align--center companyDetails">{!v.title}</div>
            <div class="incoming slds-text-heading--x-small slds-text-color--weak slds-text-align--center">{!v.state}&nbsp;<ui:outputphone value="{!v.phone}" />...</div>
            <div class="slds-text-heading--x-small slds-text-color--weak slds-text-align--center"> <c:ticker /> </div>
        </div>
        
       <!--  Bottom section: End button on Dialing; Decline and Accept buttons on Incoming or Transferring -->
        <div class="bottom-panel slds-panel__section slds-align-bottom slds-grid">
            <aura:if isTrue="{! v.state == 'Dialing'}">
                <button class="slds-size--1-of-1 slds-button slds-button--destructive" onclick="{!c.end}">End</button>
                <aura:set attribute="else">
                    <button class="slds-size--1-of-2 slds-button slds-button--destructive" onclick="{!c.decline}">Decline</button>
                    <button class="slds-size--1-of-2 slds-button slds-button--brand" onclick="{!c.accept}">Accept</button>
                </aura:set>
            </aura:if>
        </div>
    </div>
</aura:component>

panel.intf
<aura:interface description="Demo Adapter Panel Interface, where every implementation is able to fire the events below.," >
    <aura:registerEvent name="renderPanel" type="c:renderPanel"/>
    <aura:registerEvent name="editPanel" type="c:editPanel"/>
    <aura:registerEvent name="getSettings" type="c:getSettings"/>
</aura:interface>


renderPanel.evt
 
<aura:event type="COMPONENT" description="Event fired to trigger panel rendering/transitioning.">
    <aura:attribute name="type" type="String" required="true" description="The type of panel component to create, e.g. c:ctiLoginPanel."/>
    <aura:attribute name="toast" type="Object" description="A toast to display on rendering. JS object consists of type (normal, success, warning, error) and a message"/>
    <aura:attribute name="attributes" type="Object" description="A map of attributes to send to the component."/>
</aura:event>

LoginPanelController.js
handleLogin: function(cmp, event, helper) {
    connection.connect('xyz.com', password, onConnect);

    var onConnect = setTimeout(() => {
    
    
        // works here 
        // cmp.getEvent('renderPanel').setParams({
        //     type : 'c:callInitiatedPanel',
        //     attributes : {
        //         'state' : 'Incoming',
        //         'recordName' : 'hammad',
        //         'phone' : 'phone',
        //         'title' : 'title',
        //         'account' : 'account',
        //         'recordId' : 'rid',
        //         'presence' : 'presence'
        //     }
        // }).fire()
    
    
    
        connection.send($pres({ to: PUBSUB_JID }).tree());
        connection.addHandler(function (msg) {
            var x2js = new X2JS();
    
            try {
    
                var text = msg['firstElementChild']['firstElementChild']['textContent'];
                var obj = x2js.xml_str2json(text);
                console.log("On Message : ", obj);
    
                window.setTimeout(
                    $A.getCallback(function () {
                        cmp.getEvent('renderPanel').setParams({
                            type: 'c:callInitiatedPanel',
                            attributes: {
                                'state': 'Incoming',
                                'recordName': 'abc',
                                'phone': 'phone',
                                'title': 'title',
                                'account': 'account',
                                'recordId': 'rid',
                                'presence': 'presence'
                            }
                        }).fire()
                    }), 1000
                );
    
    
            } catch (e) {
                console.log("Error: ", e)
            }
    
            return true;
    
        }, null, 'message', null, null, null);
    
    
    }, 1000)
    
}