1

I am trying to call mobiles component from button click on this component , I am unable to call. please help me with this task.

I am not getting any error, the button is getting highlighted but nothing else is happening on the page , I am a novice don't know how to debug this.

({
    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__mobiles'
            }
        };
        component.set("v.pageReference", pageReference);
     },
     handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");
        event.preventDefault();
        navService.navigate(pageReference);
    }
})

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction lightning:isUrlAddressable" 
                access="global" >

    <aura:attribute name = "AmazeKart" type = "string" default = "AmazeKart"/>
    <aura:attribute name = "Computers" type = "string" default = "Computers"/>
    <aura:attribute name = "Mobiles"   type = "string" default = "Mobiles"/>
    <aura:attribute name = "Watches"   type = "string" default = "Watches"/>
    <aura:attribute name = "Cart"      type = "string" default = "Cart"/>
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="mobiles" onclick="{!c.handleClick}"/>


    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="amazeKart"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">{!v.AmazeKart}</h1>

            </div>
        </lightning:layoutItem>
    </lightning:layout>

    <div class="slds-box slds-theme_shade slds-theme_alert-texture">
        <div class="slds-grid slds_align-center">

            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p> <lightning:button label="Computers" class ="slds-m-top-medium" variant="brand"
                                              onclick="{!c.handleClick}"/></p>
                    </div>
                </span>
            </div>

            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p><lightning:button label="Watches" class ="slds-m-top-medium" variant="brand"
                                             onclick="{!c.handleClick}"/></p>

                    </div>
                </span>
            </div>

            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p>


                        </p>
                    </div>
                </span>
            </div>

            <div class="slds-col slds-size_1-of-6">
                <span>
                    <div class="slds-box slds-box">
                        <p><lightning:button label="Cart" class ="slds-m-top-medium" variant="brand"
                                             onclick="{!c.handleClick}"/></p>

                    </div>
                </span>
            </div>
        </div>
    </div>

</aura:component>
3
  • 1
    Please edit your post to include the complete, verbatim text of the error, or a specific and detailed description of the problem behavior.
    – David Reed
    Jan 12 '20 at 18:27
  • You have an extra comma at the end of componentName: 'c__mobiles',. Not sure if that would causet he issue, but on the sample documentation here on PageReference type for Lightning Components, they don't have a comma afterwards Jan 13 '20 at 9:13
  • Thanks for pointing it out I have corrected but that didn't help.
    – user56430
    Jan 13 '20 at 9:18
1

I was finally able to figure out navigation component doesn't work in developer console , but I was able to use on standard page.

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.