You need to sign in to do that
Don't have an account?
Muhammad Hammad 8
$A.getCallback() [Cannot read property 'setParam' of null]
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
panel.intf
renderPanel.evt
LoginPanelController.js
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} <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) }
Try like below:
Thanks,
Maharajan.C
Can you please share you component Event code,
Regards
I tried your solution but it give the error:
Event.setParams(): cannot modify all params in an event that has already been fired
I didn't understand your requirement please can you elaborate more.
Thanks.
Greetings!
To fix this error,
Please set your event access to global.
Application events with global access can access anywhere you want.
If you find your Solution then mark this as the best answer.
Thank you!
Regards,
Suraj Tripathi
I tried your suggestion but it still giving the same [Cannot read property 'setParam' of null] error:
Thanks
Event.setParams(): cannot modify all params in an event that has already been fired. https://www.peryourhealth.live/
Let me know how its going
https://hushsms.xyz/