How to pass variable from UX to JS function?

How-to Discussions
1

Hello!
I have two buttons which will act as switches. As one is pressed and disabled the other one is enabled and a PageControl switches between two pages. My main page JS file has a function to deal with this, but I don’t know how the function in JS would know which button is pressed. It might be worth mentioning that the buttons consist of Panels with children such as Text. I’ve tried Clicked="{SetPage(‘private’)}" out of old habits but doesn’t seem to be the right way to do it. What is the proper way to pass data from UX elements to JS functions?

Thanks in advance.

EDIT: I know I can have two separate functions for each button but I prefer only having one function for it. And I think I’ll need to know this for later as well.

2

Hi! You can’t know directly which button was pressed unless these buttons were created using an Each over some data. In any case, i would suggest a different approach more in line with Fuse best practices:

Either using the Selection API: https://www.fusetools.com/docs/fuse/selection/selection

or using PageControl + PageIndicator. Here is an example showing you how this works:

<App>
 	<ClientPanel Color="#AAA">
 		<Panel Dock="Top">
 			<!-- PageIndicator is a StackPanel, so we can set those properties -->
 			<PageIndicator Navigation="mainNav" Orientation="Horizontal" ItemSpacing="10"
 						   Alignment="Center" Margin="5">
 				
 				<!-- The "Dot" template is instantiated for each Page in the Navigation -->
 				<DockPanel ux:Template="Dot" Color="#CCC" Padding="10,5">
 					<Rectangle Layer="Background">
 						<Stroke Alignment="Outside" Width="2" Color="#0000" ux:Name="theStroke"/>
 					</Rectangle>
 					
 					<!-- Get the highlight color of the page, stored as a Resource on the page -->
 					<Circle Dock="Left" Margin="0,0,10,0" BoxSizing="FillAspect" Color="{Page Highlight}"
 							Opacity="0.2" ux:Name="theDot"/>
 					<!-- The Page.Title is implicitly a Resource of the page -->
 					<Text Color="#000" Value="{Page Title}"/>
 					
 					<!-- Using activating animation to show partial transitions as the user is swiping -->
 					<ActivatingAnimation>
 						<Change theStroke.Color="#008F"/>
 					</ActivatingAnimation>
 					<!-- The threshold on this WhileActive ensures the trigger will only be active on one tab at a time -->
 					<WhileActive Threshold="0.5">
 						<Change theDot.Opacity="1" Duration="0.3"/>
 					</WhileActive>
 					
 					<Clicked>
 						<!-- {Page Visual} is a special binding which refers to the page itself -->
 						<NavigateTo Target="{Page Visual}"/>
 					</Clicked>
 				</DockPanel>
 			</PageIndicator>
 		</Panel>
 		
 		<Page ux:Class="MyPage" Color="#AAA">
 			<float4 ux:Property="Highlight"/>
 			<!-- This lets us bind our property to a Resource, so the Dot can reference it as {Page Highlight} -->
 			<ResourceFloat4 Key="Highlight" Value="{ReadProperty this.Highlight}"/>
 			
 			<Rectangle Margin="25" CornerRadius="50" Color="{ReadProperty this.Highlight}">
 				<Text Color="#000" Value="{ReadProperty this.Title}" Alignment="Center"/>
 			</Rectangle>
 		</Page>
 		
 		<PageControl ux:Name="mainNav">
 			<MyPage Title="One" Highlight="#AFA"/>
 			<MyPage Title="Two" Highlight="#AFF"/>
 			<MyPage Title="Three" Highlight="#FFA"/>
 		</PageControl>
 	</ClientPanel>
</App>