Help navigating from one lightning page to another in communities

Question

I have custom component in communities that contains clickable icons/buttons that are intended to navigate to various knowledge topics. I saw some sample code to use in the developer guide (it actually navigates to Opportunities and I want to navigate to topics):

gotoURL : function (component, event, helper) {
var urlEvent = $A.get("e.force:navigateToURL");
urlEvent.setParams({
  "url": "/006/o"
});
urlEvent.fire();

}

However, since my component has several individual buttons within it, I am not sure where to insert the above code. My initial thoughts were that I would simply need some sort of link inside the button configuration, but does that mean I would need the above code inserted inside of every button? Or would this just be an Event added to the component? Any help you guys can give would be greatly appreciated. My sample code is below:

`

       </p>

            <img src="{!$Resource.popular_articles_icon}" alt="popular articles" width="50" height="50" /></button>
        <br/><p>{!$Label.c.popular_article_icon_label}</p>

        <!--popover that should show up when hover over button icon-->
        <div aura:id="popularTooltip" class="slds-popover slds-nubbin_top slds-popover_small slds-m-top_small slds-fall-into-ground" 
             style="border-top-color:#00aeef; border-top-width:thick; background-color:#00aeef; position:relative; right:60px;" 
             role="dialog" aria-label="Dialog Title" aria-describedby="dialog-body-popular-tip"   >
            <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon" title="Close dialog" onclick="{!c.hidePopularTip}">
                <span class="slds-icon_container slds-icon-utility-close" title="close tooltip">
                    <lightning:icon iconName="utility:close" class="slds-input_icon slds-icon-text-default" size="x-small" />
                </span>
            <span class="slds-assistive-text">Close dialog</span>
            </button>
        <div class="slds-popover__body" id="dialog-body-popular-tip" style="background-color:#ffffff;">
            <p class="slds-text-body_regular slds-text-color_weak slds-m-left_x-small">{!$Label.c.popular_article_tooltip}</p>
        </div>
        </div>
    </div>

       <div class="slds-col slds-small_size-1-of-1 slds-large-size_4-of-12">
          <button class="slds-button slds-button_icon slds-m-left_xx-large slds-m-bottom_small" onmouseover="{!c.displayDataBasicTip}">
            <img src="{!$Resource.data_basics_icon}" alt="nielsen data basics" width="60" height="60" /></button>
                <br />
           <div class="slds-m-left_small">
            <p>{!$Label.c.data_basic_icon_label}</p></div>

score 0 · Accepted Answer · answered Dec 09 '18 at 10:05

This is simply going to be a method which will get invoked on button change event. If you are having that code in your component's controller class then

For example -

gotoURL : function (component, event, helper) {
   var urlEvent = $A.get("e.force:navigateToURL");
   urlEvent.setParams({
      "url": "/006/o"
   });
   urlEvent.fire();
}

Component code

<button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon" title="Close dialog" onclick="{!c.gotoURL}">
   <span class="slds-icon_container slds-icon-utility-close" title="close tooltip">
      <lightning:icon iconName="utility:close" class="slds-input_icon slds-icon-text-default" size="x-small" />
   </span>
   <span class="slds-assistive-text">Close dialog</span>
</button>

When you click the button it will redirect you to Opportunity object records view list. This URL can be changed as per your requirement. You just need to pass your url in the url parameter.

Thank you for the response. I really appreciate it. Given there are multiple buttons, would I need to also have multiple controllers (one for each button) as well? — ramtwins25, Dec 10 '18 at 16:06
Updated and added code as recommended. However, nothing seems to fire. Still seems like I am missing something? — ramtwins25, Dec 10 '18 at 17:37
Finally got it working. Thanks for your tips, that made the difference. — ramtwins25, Dec 14 '18 at 05:34

Help navigating from one lightning page to another in communities

1 Answers1

Linked