How do I pass data when navigating back using the "< Back" button?


#1

Hi,

I’m having a hard time figuring out how do I pass data back to the previous page, by navigating back using the “< Back” button in the ActionBar?

Someone had the same question a while ago here: How to navigate between pages with data depending on each other?

The answer that was given is pointing to the docs. The problem there is that the docs explain navigation using the “navigate” method, where I create a context and pass that to the “navigate” function as the navigation context.

However, when you navigate TO a page, that page will already have a “< Back” button showing on the ActionBar automatically, and when I tap on that, it goes back to the previous page without me specifically calling the “navigate” function. That is what I’m interested in to find out. How do I prepare and pass the data back if I want to use the “< Back” button in the ActionBar, as opposed to using the “navigate” function?

Here’s a quick outline:

PAGE 1:

  • contains a label
  • tap the label to go to the next page

PAGE 2:

  • you came here after you tapped the label on PAGE 1
  • there’s a textfield on the page
  • type something into the textfield
  • tap the “< Back” button in the ActionBar to go back to PAGE 1
  • the label on PAGE 1 will update using the string you entered into the textfield on PAGE 2

How do I pass the string in the textfield on PAGE 2 back to PAGE 1? I’m using JS only.

Thanks.

PS: I’ve read the PDF “The NativeScript Book” up until Chapter 8 which does have an example of this. Unfortunately the code doesn’t work and it’s crashing. But they also use the “navigate” function to go back to the previous page, as opposed to the “< Back” button in the ActionBar so that doesn’t help either.


#2

@pentool
You can easily accomplish this with application-settings module

In the loaded event of the page1,
you would want to write something like
yourLabel.text = applicationSettings.getString("usertypedVal", "") // second param is default val

Then in the navigatingFrom event on the page2,
you would want to write something like
applicationSettings.setString("usertypedVal", yourTextField.text);

now, when the navigatingFrom of page2 completes and the loaded event of page1 fires, you’ll have what you need.

Let me know if that works for you :slight_smile:
Cheers!


#3

Hey thanks for the insight multishiv19! While your suggestion do seem to work, I was hoping for a solution similar to those where you setup a context of some sort that you pass back to the page you want to navigate back to.

No doubt your solution would work for a 2 page learning/experimentation project, but I don’t think it would be practical to use on a larger scale to store every data in the application settings that you want to transfer in back navigation.

However, in the meantime I did realize that I went about this navigation the wrong way. Generally when a user uses the “< Back” button to navigate back to the previous page, any data that may have been changed, will not be committed, and henceforth, won’t be transferred back to the previous page. You usually have to press “Done” or “Save” or “Update” etc, in order to commit the changed data and then go back to the previous page. Using the “< Back” button does not commit data, but simply navigates back in the stack.

Anyhow, thank you again for at least making me aware of that solution.