4

I am facing an issue with the normal pagescroll in the lightning component in Summer'16.

The scroll is not working in pages which are navigated to a lightning component in the Salesforce 1 app.

Pagescroll is working for a page developed using app builder. But as per Salesforce https://success.salesforce.com/issues_view?id=a1p3A0000017yktQAA it's said that it has been fixed. But still, i am facing the issue.

Here's the example code

First Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> 
  <!-- Optional coponent attributes here -->
  <!-- Optional HTML markup -->
  <div class="container">
    <button onclick="{!c.gotoCompTwo}" class="slds-button"> Go to Component 2 
    </button>
  </div>
</aura:component>

First component's Controller

gotoProductForecast : function(component, event) {

        var navigateEvent = $A.get("e.force:navigateToComponent");

        navigateEvent.setParams({
            componentDef: "c:Component2",
            componentAttributes: {
                //Set attributes if any
            }
        });
        navigateEvent.fire();
}

Second component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

  <!-- Optional coponent attributes here -->

  <!-- Optional HTML markup -->

  <div class="container">
  //Required contents (Say, the content exceeds more than the vertical screen size)
  <!-- Other components -->
  </div>
</aura:component>

The native pagescroll works in the 1st component.

But after clicking the button, when it navigates to the second component, the pagescroll doesn't work even if the content exceeds the screen size. (I am not even able to swipe the page down to refresh the page!)

It would be very helpful if someone could could provide any insights on this.

  • 1
    Are you trying it in the browser or using the latest Salesforce1 app? – Gaurav Kheterpal Jun 28 '16 at 12:41
  • 1
    I've tried in the Chrome web browser(Version 50.0.2661.102 (64-bit)) simulator and also in iPad and iPhone (Salesforce1 app).. The page does not scroll (the native scroll). – SE_User Jun 28 '16 at 12:43
  • Could you provide with more denials with your issue? – JF Paradis Jun 28 '16 at 15:14
  • 1
    Hi @JFParadis , I've a main component (developed using App Builder) and from there on button click I'm navigating to another component using force:navigateToComponent. The scroll is working fine on the page developed using App Builder. But scroll is not working on the page which is navigated to from the main component. Earlier, this was working just fine. Can you please suggest any workaround for this scenario? – SE_User Jun 29 '16 at 4:13
  • Can you give me repro steps (a small sytnetic app)? I can look into this right-away. – JF Paradis Jun 29 '16 at 15:55
7
+50

An equivalent to force:navigateToComponent will be released GA as a public API, it's under the category of "Global Components" that is scheduled for this coming release "Winter 17":

http://web-auth.salesforce.com/campaigns/lightning/index.jsp#Roadmap

We appear to be on track to release "Global Components" around 25 lightning components, interfaces, and events, and lightning:navigateToComponent will be one of them. All of these are SLDS enabled, which is the main goal.

Our roll-out of the Winter releases usually begins in August and goes in stages all the way thought September. We don't have the public blog post yet, but this is a link to last year's Winter 16:

https://www.salesforce.com/blog/2015/08/salesforce-winter-16-coming-soon.html

The dates will most likely be similar. Please understand that I am composing from various sources, and that you should wait for the formal announcements before making a final decision (Safe Harbor rules). I understand your issues, and I wished I had a better answer, but I hope that this can still help you strategize your development process.

  • Hi @JFParadis The pagescroll still doesn't work in pages which are navigated from the first component. I can see force:navigateToComponent is currently in Beta as per the doc. Is it because of that? Are there any updates regarding this? – SE_User Nov 3 '16 at 10:39
  • Hi @JFParadis, Any updates? Also can you please check this out? – SE_User Dec 9 '16 at 6:44
  • 2
    This is a huge issue!! Without being able to navigatetoComponent the pull to refresh resets to initial component state. Workaround involves creating components dynamically which does not suite complex applications. Imagine a user who has navigated X components deeps which does a pull to refresh only to be reset to initial state. – Benjamin Pirih May 31 '17 at 18:43
1

As of today the method $A.get("e.force:navigateToComponent") is not yet available in the docs. It could be leading to wrong rendering of pages or maybe it has some other unexpected behaviors...

A possible workaround, depending on your use-case is to dynamically create the component, instead of navigating to it.

  • 4
    Hi @FernandoGavinho Thanks for the suggestion. We would also like to have navigation option. By creating components dynamically, default back button for navigating back to the component (in SF1) would be lost, right? We're also having multiple level navigation which would make it very complex if we create components dynamically. – SE_User Jul 21 '16 at 14:21
-2

The force:navigateToComponent is replaced by lightning:navigation in Summer '18 release. Here is how you would implement it:

The first component must include lightning:navigation component with a unique aura:id in the markup. It doesn't have any UI attached to it, so it's safe to add it anywhere in the component.

First Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> 
  <!-- Optional coponent attributes here -->
  <!-- Optional HTML markup -->
  <lightning:navigation aura:id="navService"/>
  <div class="container">
    <button onclick="{!c.gotoCompTwo}" class="slds-button"> Go to Component 2 
    </button>
  </div>
</aura:component>

In the controller you need to build the pageReference JavaScript object which will construct the URL for the destination Lightning component. Here is how you build it.

First Component's Controller

gotoCompTwo : function(component, event) {

    var nav = component.find("navService");
    var pageReference = {
        "type": "standard__component",
        "attributes": {
            "componentName": "c__Component2"
        }, 
        "state": {
            //Other optional attributes
            //e.g. "recordId" :  sampleRecordId
        }
    };  
    nav.navigate(pageReference);
}

The second component which is where you want to navigate to must implement lightning:isUrlAddressable interface.

Second Component

<aura:component implements="lightning:isUrlAddressable" >

    <!-- Optional coponent attributes here -->
    <!-- Optional HTML markup -->

</aura:component>
  • Any suggestions for improving the answer? – Aryansh04 Oct 9 '18 at 19:41

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.