Variable won't Export for UX

[Isaac_Strong]

Okay, I am not trying to overload the forum with these posts, I’m almost done with my app! I’m running into an error where I have copied the hikr tutorial "EditHikePage’ .ux and .js and slightly tweaked them to fit my needs. My new variables though won’t export for the .ux to see. Or alteast that’s what I am assuming is happening. I’ll post some pictures below.!

I am calling the correct javascript page for the ux

Here I call out the variables out of the main array ‘pinfo’, I have context called on for additional information (where pinfo is stored) and my export module looks correct

Here is my context page and again it is exactly how the hikr tutorial has it. Just names of variables changed.

Here is my backend page, again exactly how hikr had it and the ‘vehicles’ variables works perfectly throughout the app, only the pinfos does not

and these are the errors im getting, only when I try to Cancel or Save though. There are no errors when i enter the page but the text does not show up in the boxes as it should either.

I understand I dont need to run the For loop for the updatePinfo, but I was just going quickly, and I’m assuming it’ll be okay for the moment.

It will sometime give me the error that {cancelpinfo} and {savepinfo} are undefined, which makes me think the problem is on the EditPinfoPage.js and not the backend or context.

Any help would be greatly appreciated, thank you!!

[Uldis]

Hi Isaac,

you will need to post a complete repro that we can run and see what the problem is. It’s extremely hard to debug code on pictures. I suggest you put your project on github and share the link.

[Isaac_Strong]

So new to github as well but I think I figured it out. Here’s the link:

Hotschmoe/fusesasi

Also I was planning on changing README and License, didnt know github would grab the one in the folder so that’s a mess.

Again thanks for any help

[Uldis]

So the root cause of your problem is that you are not passing any variables to your editPinfo page when you go to it. But the page expects to receive something in this.Parameter. Hence all the undefined errors. Compare the goToVehicle() function with your goToPinfo() function and you’ll see my point.

Further, there frankly is no data that you could pass, because you have failed to add a data context in your UX around where the Clicked call is located. If you take a look at the list of vehicles, you will see that there’s an Each that iterates over a collection of items, so the Clicked handler in there receives an implicit data context of the iterated item.

Now, with the “personal information”, you should somehow expose the pinfos object that you added, but it’s a bit of a problem - see, you’ve made it an observable list, while all you need is a single object with a number of single-value observable properties. Not a big deal, since Observables have a lot of handy reactive operators, and we can use .first() in this case.

With a little trickery, it’s possible to make it work though.

First, here’s your new HomePage.js:

var Context = require("Modules/Context");

function goToVehicle(arg) {
	var vehicle = arg.data;
	router.push("editVehicle", vehicle);
}

function goToPinfo(args) {
	router.push("editPinfo", args.data);
}

module.exports = {
	vehicles: Context.vehicles,
	pinfos: Context.pinfos.first(),

	goToVehicle: goToVehicle,
	goToPinfo: goToPinfo
};

and here’s your new HomePage.ux:

<SASi.Page ux:Class="HomePage">
	<Router ux:Dependency="router" />

	<JavaScript File="HomePage.js" />

	<DockPanel>
		<Grid ColumnCount="1" RowCount="1" Dock="Bottom">
			<With Data="{pinfos}">
				<SASi.Button Text="Edit Personal Information" Clicked="{goToPinfo}" />
			</With>
		</Grid>

		<SASi.Text FontSize="30" TextAlignment="Center" Dock="Top" Margin="0,50">Your Vehicles</SASi.Text>

		<ScrollView>
			<StackPanel>
				<Rectangle ux:Class="Separator" Height="1" Fill="#fff4" />

				<Each Items="{vehicles}">
					<Separator />

					<Panel HitTestMode="LocalBoundsAndChildren" Clicked="{goToVehicle}">
						<SASi.Text Value="{vyear} {vmake} {vmodel}" Margin="20" />

						<WhilePressed>
							<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
						</WhilePressed>
					</Panel>
				</Each>

				<Separator />
			</StackPanel>
		</ScrollView>
	</DockPanel>
</SASi.Page>

[Isaac_Strong]

This worked thank you! And it makes sense! I didn’t think it needed to be called out in the .ux but now seeing it it makes sense to help move the variable through with the this.parameter again thank you!