0

Following the Component Libary https://hdone-packaging-dev-ed.lightning.force.com/docs/component-library/bundle/lightning:navigation/documentation to use lightning:navigation. When using the OnClick keep getting an uncaught error.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="url" type="String"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:navigation aura:id="navService"/>
<lightning:button label="Navigate" onclick="{!c.handleClick}"/></aura:component>

    ({
    init : function(cmp, event, helper) {
        var navService = cmp.find("navService");
        // Sets the route to /lightning/o/Account/home
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        };
        cmp.set("v.pageReference", pageReference);
        // Set the URL on the link or use the default if there's an error
        var defaultUrl = "#";
        navService.generateUrl(pageReference)
            .then($A.getCallback(function(url) {
                cmp.set("v.url", url ? url : defaultUrl);
            }), $A.getCallback(function(error) {
                cmp.set("v.url", defaultUrl);
            }));
    }

})

    ({
        handleClick: function(cmp, event, helper) {
            var navService = cmp.find("navService");
            // Uses the pageReference definition in the init handler
            var pageReference = cmp.get("v.pageReference");
            event.preventDefault();
            navService.navigate(pageReference);
        }
    })

Error Uncaught Unknown controller action 'handleClick'

1 Answer 1

2

I would have expected the JS controller to throw an error, surprised it did not( i validated in my org). You have 2 outer parentheses ({ }) for your action handlers at the start and end.

Your lightning stucutre should be

({
method1(params){
},
method2(params){
}
})

in your case

({
    init : function(cmp, event, helper) {

    },
    handleClick: function(cmp, event, helper) {

    }
})
2
  • Kind of thing that trips up less experienced people. I tried semicolons ';' to separate as thought might be structure but never comma.
    – ddeve
    Aug 29, 2018 at 20:07
  • Trailhead is a great resource for things like these, lately i search for blah blah trailhead resource before searching anywhere. For this specific topic check out: trailhead.salesforce.com/en/modules/lex_dev_lc_vf_tips/units/…
    – Rao
    Aug 29, 2018 at 20:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .