Best Way to Reload a ScrollView with New Information

How-to Discussions
1

Following the train of thought of this previous thread, I have two screens in my App: Index.ux and Search.ux. Index.ux provides the parameters I’ll use to perform my search, and Search.ux will display the result in a ScrollView.

Everything is working. The problem starts when I go back to the Index.ux screen and change the parameters. The Search.ux screen still shows the values from the previous search, so I need to “clear” this ScrollView when I go back to Index.ux screen and reload the results (that are provided by a REST API Service).

How is the best way to do this?

2

Updating your Observables will automatically update the UI. For example, if you are displaying each search result in a <Each Items="{mySearchResultsArray"> block, and mySearchResultsArray is an Observable, the block will update automatically as soon as the array changes by adding, removing, sorting items, etc.

3

Alternatively, you could use clear() or replaceAll() in your JS to force updating and bind that as a function in your Page’s <ActivatingAnimation> or <EnteringAnimation>, I think. But it shouldn’t be necessary.

4

Fernando Lins wrote:

Updating your Observables will automatically update the UI. For example, if you are displaying each search result in a <Each Items="{mySearchResultsArray"> block, and mySearchResultsArray is an Observable, the block will update automatically as soon as the array changes by adding, removing, sorting items, etc.

This makes sense, but when I enter the screen the second time, the second fetch doesn’t happen.

A sample of the code:

 <JavaScript>
     var Observable = require("FuseJS/Observable");
     var IndexJs = require('IndexJs');
     var data = Observable();

     console.log(IndexJs.selectedFrom.value.option); // option is a text, like 'Basel'.

     / var data = Observable(
         {name: "Translations", description: "German and Italian"},
         {name: "Manicure", description: "Foot and Hand"},
         {name: "Professional Advise", description: "Some advice"}
     ); /

     console.log("Working on it...")

     fetch('http://www.mysite.com/json_app/train_line_to/&#39; + IndexJs.selectedFrom.value.option)
             .then(function(response) { return response.json(); })
             .then(function(responseObject) { data.value = responseObject; });

     module.exports = {
         data: data
     };
 </JavaScript>
 ...
5

I believe that’s because that code is ran only once when Search.ux is loaded. You have to make it into a function that you can call when you load the Search page.

Then you can do

<Page ux:Name="Search">
    <ActivatingAnimation>
        <Callback Handler="{performMySearch}" />
    </ActivatingAnimation>
    ...
</Page>

Or, preferably, if you have a proper “Search” button on the Index.ux page you should call the function from there and then move to the Search screen.

6

Fernando Lins wrote:

I believe that’s because that code is ran only once when Search.ux is loaded. You have to make it into a function that you can call when you load the Search page.

Then you can do

<Page ux:Name="Search">
    <ActivatingAnimation>
        <Callback Handler="{performMySearch}" />
    </ActivatingAnimation>
    ...
</Page>

Or, preferably, if you have a proper “Search” button on the Index.ux page you should call the function from there and then move to the Search screen.

<ActivatingAnimation> didn’t work. I used the button instead.

First Step: The callback function

<JavaScript>
    var performSearch = function (args) {
        console.log("Working on it...")

        fetch('http://www.mysite.com/json_app/train_line_to/&#39; + selectedFrom.value.option)
                .then(function(response) { return response.json(); })
                .then(function(responseObject) { data.value = responseObject; });
    }

    ... 

    module.exports = {
        data: data,
        selectedFrom: selectedFrom, // Parameter
        selectedTo: selectedTo, // Parameter
        selectMeFrom: selectMeFrom, // callback function from DropDown
        selectMeTo: selectMeTo, // callback function from DropDown
        performSearch: performSearch
    };
</JavaScript>

Second Step: Button at Index.ux

<Button Text="Search">
    <Clicked>
        <Callback Handler="{performSearch}" />
        <NavigateTo Target="search" />
    </Clicked>
</Button>

Third Step: require and exports at Search.ux

<JavaScript>
    var Observable = require("FuseJS/Observable");
    var IndexJs = require('IndexJs');

    module.exports = {
        data: IndexJs.data
    };
</JavaScript>

Thanks a lot!