Code not working in Build but working in Preview

[Jithesh_Krishnan]

Hi,

I have written code to search dynamically a scroll view list. It is working perfectly in Preview on laptop (Windows 10, Fuse Version 1.6.1) and on mobile device using the preview app (Android 7.0) but once I created the build and installed on the same Android device, the screen is blank while searching. It does not display anything even if I input a matching string. Once I clear the string from search field the scroll view will reload with data

Please help to resolve.

UX code

<DockPanel> 
			<Panel DockPanel.Dock="Top" Height="60" Background="{themecolor}">
				<Text Value="DIGITAL Inspector" Alignment="Center" Color="White" Font="Material" FontSize="24"/>
			</Panel>

			
			<Grid  Dock="Top">
				<TextInput Value="{entryStr}" PlaceholderText="Search...." ValueChanged="{onSearch}" 
				FontSize="18" PlaceholderColor="#696969" ActionStyle="Search" Padding="15">
					<Rectangle Layer="Background">
						<Stroke Width="3" Color="{themecolor}" />	
					</Rectangle>
				</TextInput>
			</Grid>
			
			
			<Circle Width="40" Height="40" Color="{themecolor}	" Alignment="BottomRight" Margin = "0,0,20,80" > 
				<Text Color="White" FontSize = "32" TextAlignment="Center">+</Text>
			</Circle>
					
			<ScrollView>
				<StackPanel Margin="0,5,0,0" Background="{themecolor}">
					<Grid ColumnCount="2" Background="White">
					<Each Items="{filterData}">
			
					
	    				<DockPanel Height="180" Margin="5,5,5,5" Color="White">
						
						<WhileString Value="{Pro_Img}" Test="IsEmpty">
    						<Image File="../Assets/images/build_icon.png"/>
						</WhileString>

						<WhileString Value="{Pro_Img}" Test="IsNotEmpty">
    						<Image Url="{Pro_Img}" StretchMode="UniformToFill"/>
						</WhileString>


						<Panel DockPanel.Dock="Bottom" Margin="10" Height="30">
                            <Rectangle Layer="Background" CornerRadius="10" Color="#339EFF"/>
                            <Text Value="{Pro_Name}" TextAlignment="Center" Alignment="Center" Color="White" />
                        </Panel>
        				
						<Rectangle Layer="Background" CornerRadius="10">
							<Stroke Width="1" Color="#ccc"/>
							<SolidColor Color="White" />
						</Rectangle>
	    				
	    				
	    				
	    				
						</DockPanel>
					
					</Each>
					</Grid>
				</StackPanel>
			</ScrollView>
			
		</DockPanel>

JS

var Observable = require("FuseJS/Observable");

var data = Observable();
var entryStr = Observable("");
var filterData = Observable();
var themecolor = "#339EFF";
var arrobj = new Array();



function onSearch(args) {
  
  
  var srchStr =  entryStr.value;
  if( srchStr && srchStr.length > 0) {
    var lowSrchtr = srchStr.toLowerCase();  
    filterData.clear(); 
    arrlen = arrobj.length;
    
    for(var i=0; i<arrlen;i++){
      var item = arrobj[i];
      var lowPro_Name = item.Pro_Name.toString().toLowerCase();
              
      var j = lowPro_Name.indexOf(lowSrchtr);
      if (j > -1 ){
      	filterData.add(arrobj[i]);
      } 
    
    }

  }
  else{
    
    filterData.replaceAll(data);
  }
}

fetch('http://mywebsite.com/api/data.json').then(function(response){ 
  return response.json(); 
}).then(function(responseObject){ 
  data.replaceAll(responseObject.result); 
  filterData.replaceAll(responseObject.result);
  arrobj = responseObject.result;
});

module.exports = {
  data: data,
  onSearch: onSearch,
  entryStr: entryStr,
  themecolor:themecolor,
  filterData: filterData
};

[Uldis]

Hi,

we will need a complete, minimal reproduction that we can copy-paste and run. Think of it as a single-UX-file app. Otherwise it’s virtually impossible to help.

[Jithesh_Krishnan]

I did a sample in a a single-UX-file app and it’s working. But the original one is till not working both are sharing the same js code for search operation. The difference is one is a single UX file app and the other is a multi page app with different source files JS and UX.

I am sharing the code of single UX file app which is working. Please advise what could be the reason of the issue. The original app is working in preview on laptop as well as the preview app on mobile but not after building apk and installing it on mobile device

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

		var fArr = Observable();
		var entryStr = Observable("");

		var arrobj = new Array();

		var arr = [
			{Pro_Name: "Centernary Park"},
			{Pro_Name: "Marlbourough Road"},
			{Pro_Name: "Homebush West"},
			{Pro_Name: "Sydney"},
			{Pro_Name: "NSW"}
		];

		function onLoad() {
			console.log('onLoad : ', arr);
			fArr.replaceAll(arr);
		}

		function onSearch(args) {
			var srchStr =  entryStr.value;
			if( srchStr && srchStr.length > 0) {
				var lowSrchtr = srchStr.toLowerCase();
				fArr.clear();
				arrlen = arr.length;

				for(var i=0; i<arrlen; i++) {
					var item = arr[i];
					var lowPro_Name = item.Pro_Name.toString().toLowerCase();

					var j = lowPro_Name.indexOf(lowSrchtr);
					if (j > -1 ){
						fArr.add(arr[i]);
					}
				}
			}
			else{
				fArr.replaceAll(arr);
			}
		}

		onLoad();

		module.exports = {
			fArr: fArr,
			onSearch: onSearch,
			entryStr: entryStr
		}

	</JavaScript>

	<Panel Alignment="Top" Height="40" Background="#339EFF">
		<Text Value="Search String" Alignment="Center" Color="White"  FontSize="24"/>
	</Panel>

	<Panel>
		<Grid Dock="Top" Margin="0,50,0,0">
			<TextInput Value="{entryStr}" PlaceholderText="Search...." ValueChanged="{onSearch}"
				ActionStyle="Search" Padding="10" Alignment="Top">
				<Rectangle Layer="Background">
					<Stroke Width="0.25" Color="#339EFF" />
				</Rectangle>
			</TextInput>
		</Grid>
	</Panel>

	<Panel Margin="0,30,0,0">
		<ScrollView>
			<StackPanel Margin="0,60,0,0" ItemSpacing="0.25">
				<Each Items="{fArr}">
					<Grid>
						<Text Value="{Pro_Name}" Alignment="Center" Color="Black"  FontSize="24"/>

					</Grid>
				</Each>
			</StackPanel>
		</ScrollView>
	</Panel>
</App>

[Uldis]

If this minimal reproduction is working fine, then you will need to figure out what the code differences from the full app are. Perhaps it’s about data contexts and your variables not being available where you expect them to be.

[Jithesh_Krishnan]

Thanks Uldis. What confuses me is the code is working in preview on laptop/mobile but it doesn’t work once the build is generated. Shouldn’t the behaviour of preview and build be same? The code is same in both js

Will it behave differently when written in a single ux/js source file and when the same is written on different files and uses routing?

[Uldis]

Preview and Build should of course behave the same.

The difference between single-UX-file reproductions and full-scale apps that use routing is that you have to then deal with instances of pages being created (think: here’s the different data contexts), setting up your viewmodels correctly, and using models where it makes sense.

So, yeah. Perhaps that’s where the root cause of your problem lies. If you could share a more complete reproduction that reliably fails, we could try to figure out what causes it.

[Jithesh_Krishnan]

Hi Uldis,

Is there any way to submit code other publishing it here? Any drive where I can upload?

Thanks

[Arturs]

Hey Jithesh!

You can use this link to upload your project. Also, read this section about bug report.

[TomStar]

I have posted the same issue here:

https://www.fusetools.com/community/forums/bug_reports/scrollview_with_scrollviewpager_and_filtering_data

if i am not scrolling before searching/filtering i did not get the blank screen.

but for me it is also not working in preview mode.

Best Tom

[Jithesh_Krishnan]

Thanks Arturs.

The minimal reproduction of issue has been uploaded to the dropbox with file name Digital_Inspector.rar

I have uploaded it from my gmail id (jitheshkrishnan@gmail.com)

Please check and help to resolve

Arturs wrote:

Hey Jithesh!

You can use this link to upload your project. Also, read this section about bug report.

[TomStar]

Not sure if it helps, but it could be that the ScrollView tries to keep the ScrollPosition when you clear the underlying Observable, in your case “fArr”, so you can try to use PreserveVisual:

<ScrollView ux:Name="theScrollView" LayoutMode="PreserveVisual">

</ScrollView>

Next is that I realized sometimes the ScrollView is not updating it’s ScrollPosition after changing the item count in “Each” by searching or filtering.

So it can help to use “seekTo” of the ScrollView after you cleared the list ( fArr.clear() ).

your JS code with seekTo:

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

		var fArr = Observable();
		var entryStr = Observable("");

		var arrobj = new Array();

		var arr = [
			{Pro_Name: "Centernary Park"},
			{Pro_Name: "Marlbourough Road"},
			{Pro_Name: "Homebush West"},
			{Pro_Name: "Sydney"},
			{Pro_Name: "NSW"}
		];

		function onLoad() {
			console.log('onLoad : ', arr);
			fArr.replaceAll(arr);
		}

		function onSearch(args) {
			var srchStr =  entryStr.value;
			if( srchStr && srchStr.length > 0) {
				var lowSrchtr = srchStr.toLowerCase();
				fArr.clear();
                                //seekTo here
                                theScrollView.seekTo(0,0);
				arrlen = arr.length;

				for(var i=0; i<arrlen; i++) {
					var item = arr[i];
					var lowPro_Name = item.Pro_Name.toString().toLowerCase();

					var j = lowPro_Name.indexOf(lowSrchtr);
					if (j > -1 ){
						fArr.add(arr[i]);
					}
				}
			}
			else{
				fArr.replaceAll(arr);
			}
		}

		onLoad();

		module.exports = {
			fArr: fArr,
			onSearch: onSearch,
			entryStr: entryStr
		}

	</JavaScript>

its only an idea you can try.

Best Tom

[Jithesh_Krishnan]

Hi Tom,

Thanks for the idea. Will try it out.

Hi Uldis,

Any official update the this bug. Had submitted the code 3 weeks ago. Did you get a chance to have a look at this?

Thanks and regards,
Jithesh

[Arturs]

Hey.

In function onSearch() you have this line:

arrlen = arr.length;
// change to
var arrlen = arr.length;

This should work. Hope this helps.