0

We've created a base component in Lightning and I want to add a custom "Notification" component, which is just a simple Toast wrapper. The notification component listens for a "Notification" app event and fires a Toast when received.

We now want to add this to our base component, which is extended by other components. The base component has a handleError helper method that fires the app event:

handleError : function(errorStringOrObject) {
    var errorMessage = 'My custom error message';
    $A.get("e.c:NotificationEvent").setParams({"errorMessage" : errorMessage }).fire();
},

This is called by the inheriting component like helper.handleError(myError). The problem is, when it tries to setParams, it throws this error:

Uncaught (in promise) TypeError: Cannot read property 'setParams' of undefined
    at Object.handleError (CommunityBase.js:54)
    at helper.promise1.then.then.then.catch (ChainedPromiseExample.js:36)

If I call the base handleError function from another function within the base component, all works fine and the Toast message pops.

It seems that the inheriting components do not inherit the event registration and possibly the c:Notification component.

So, I tried adding the event registration and c:Notification component to inheriting component, and I still get the same error: Cannot read property 'setParams' of undefined.

Why does the base errorHandler component not have access to the event registration and possibly the c:Notification component when the handleError function is called from an inheriting component?

ComponentBase.cmp:

<aura:component description="Community Base" extensible="true">
    <aura:registerEvent name="notificationEvent" type="c:NotificationEvent"/>
    {!v.body}
    <c:Notification />
</aura:component>

ComponentBaseHelper.js (relevant bits):

handleError : function(errorMessage) {
    $A.get("e.c:NotificationEvent").setParams({"errorMessage" : errorMessage }).fire();
},

Inheriting Component .js (relevant bits):

initialize : function (component, helper) {
    //debugger;
    helper.promise1(component, helper)
        .then(
            () => {
                return helper.promise2(component, helper);
            }
        )
        .then(
            () => {
                return helper.promise3(component, helper);
            }
        )
        .then(
            () => {
                return helper.promise4(component, helper);
            }
        )
        .catch(
            (errorMessage) => {
                console.log("An error has occurred in the promise chain: " + errorMessage);
                helper.handleError(errorMessage);
           }
        );
},
  • 1
    It might be easier to assist you with a more complete code example. – Adrian Larson Jan 2 at 16:59
  • Are you saying that you want your concrete child components to inherit the event registration? Are the children firing the event by calling the inherited helper method? – David Reed Jan 2 at 17:03
2

As it turns out, the problem become apparent when I viewed the page in the Community Builder:

enter image description here

So I took a look at the event and noticed I didn't have an access modifier, so I added the access="global" attribute and value:

<aura:event type="APPLICATION" description="NotificationEvent" access="global">
    <aura:attribute name="successMessage" type="String"/>
    <aura:attribute name="errorMessage" type="String"/>
</aura:event>

Once I did that, the error went away and all started working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.