Set value of multiple controls on load or navigatedto


#1

I have a setting page and have stored the selected values from 2 Nativescript-Drop-Downs. I also need to store the values of a switch state and then restore these values for the user when the return to the settings page. I have done this in jquery but struggling with Nativescript and Javascript.

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" xmlns:dd="nativescript-drop-down">
	<ActionBar title="Settings" class="action-bar"></ActionBar>
		<StackLayout class="home-panel" verticalAlignment="top">
			<GridLayout columns="*, 60" rows="80,40,40,40,40, 100" width="100%" borderWidth="0px">
				<Label text="Show future games only" row="0" col="0" colSpan="1" />
				<Switch id="futureSwitch" checked="{{ isEnabled }}" row="0" col="3" propertyChange="futureMatches" tap="switchTap" />
				<dd:DropDown hint="Choose your division" id="mydiv" color="black" width="100%" horizontalAlignment="center" borderWidth="1px" backgroundColor="white" items="{{ divisionList }}" 
				selectedIndex="{{ selectedDivIndex }}" selectedIndexChanged="dropDownSelectedIndexChanged" row="2" colSpan="2" />
				<dd:DropDown hint="Choose your team" id="teampicker" color="black" width="100%" horizontalAlignment="center" borderWidth="1px" backgroundColor="white" items="{{ teamList }}" 
				selectedIndex="{{ selectedTeamIndex }}" selectedIndexChanged="TeamdropDownSelectedIndexChanged" row="4" colSpan="2" />
				<Button id="ContBtn" text="Continue" tap="onButtonTap" row="5" col="0" colSpan="2" height="200px" width="60%" borderWidth="1px" marginTop="100px"/>
			</GridLayout>
		</StackLayout>
</Page>
var appSettings = require("application-settings");
var frame = require("ui/frame");
var http = require("http");
const fromObject = require("data/observable").fromObject;
var observable_1 = require("data/observable");
var viewModel;

function onNavigatingTo(divargs) {
  var divsource = fromObject({
    divisionList: ['', 'Monday Div 1', 'Monday Div 2', 'Wednesday Div 1', 'Wednesday Div 2'],
    teamList: []
  });
  const divpage = divargs.object;
  var myDiv = divargs.object;
  myDiv.bindingContext = divsource;
  var divKey = appSettings.hasKey("myDiv");
  if (div) {
    alert("My selections are " + appSettings.getString("myDiv")+" "+appSettings.getString("myTeam"));
    //set dropdowns for division and team and switch state
  }
  else {
    alert("not defined");
  }
}

exports.onNavigatingTo = onNavigatingTo;

function futureMatches() { 
  alert("did it change");
  //Capture switch state.
}
exports.futureMatches = futureMatches;

function dropDownSelectedIndexChanged(teamargs) {
  var myDivision = teamargs.object.items[teamargs.newIndex];
  var shortDiv;
  appSettings.setString("myDiv", myDivision);
  if (myDivision == "Monday Div 1") {
    shortDiv = "mon_1";
  }
  else if (myDivision == "Monday Div 2") {
    shortDiv = "mon_2";
  }
  else if (myDivision == "Wednesday Div 1") {
    shortDiv = "wed_1";
  }
  else if (myDivision == "Wednesday Div 2") {
    shortDiv = "wed_2";
  }
  appSettings.setString("myDiv", myDivision);
  if (shortDiv != "") {
    var sqlstr = "http://URL?div=" + shortDiv;
    http.getJSON(sqlstr).then(function (r) {
      var teamList = [];
      for (i = 0; i < r.length; i++) {
        teamList.push(r[i].team);
      }
      frame.topmost().currentPage.bindingContext.set("teamList", teamList);
    }, function (e) {
      alert(e);
    });
  }
}
exports.dropDownSelectedIndexChanged = dropDownSelectedIndexChanged;

function TeamdropDownSelectedIndexChanged(args) { 
  var myTeam = args.object.items[args.newIndex];
  appSettings.setString("myTeam", myTeam);
}
exports.TeamdropDownSelectedIndexChanged = TeamdropDownSelectedIndexChanged;

function onButtonTap(args) { 
  alert("Saved "+appSettings.getString("myTeam"));
}
exports.onButtonTap = onButtonTap;

#2

No one can do code reviews / write code for you. Try to explain the issue / where exactly you face problem.


#3

Hi

I have comments in my code where I need some assistance. I cannot find any examples of capturing a switch status and how to set that switch status on app load. I can capture a tap response but not the status of the switch. Equally I would like to have the settings page also show the users currently selected division and team when the app loads. I’m using appSettings to store these values. As I mention I have this app running with jQuery and was originally written in Intel XDK but since it is a product that is no longer support wish to port the app to another solution and though I would give Nativescript a go but have run into a few problems.

I changed my code to bind on myDiv and add a viewModel for the switch but adding the binding context breaks the dropdown binding.

myDiv.bindingContext = divsource;
  var futureSwitch = divargs.object;
  viewModel = new observable_1.Observable();
  viewModel.set("isEnabled", true);
  futureSwitch.bindingContext = viewModel;

Although this does enable the switch in code as I want, as mentioned it breaks the binding to the drop-downs.


#4

You can capture changes in switch using checkedChange event.

Logic should be simple and straight forward, when values are changed store them to application settings using respective change events. On page load retrieve settings and load them in view model or directly on component.


#5

I tried that but checkedChange is not firing any function. Isn’t that a Typescript function not Javascript.

<Switch id="futureSwitch" checked="{{ isEnabled }}" row="0" col="3" checkedChange="futureMatches" tap="switchTap" />
function futureMatches() { 
  alert("did it change");
  //Capture switch state.
}
exports.futureMatches = futureMatches;

#6

Unfortunately any of the property change events will not work when attached through XML, its a limitation for now. Use loaded event of the component, attach checkedChange event there.


#7

Hi

Thanks for your support and your patience.


#8

I was working with a similar problem with the switch ui control. This thread may help you:

https://discourse.nativescript.org/t/checkedchange-event-not-working-for-switch-component-in-vanilla-nativescript/3408/14