Clicked argument

How-to Discussions
1

I am trying to set a status based on which rectangle (button) is clicked. I am trying to do this by using arguments in function, but how do I know which button is clicked when data etc. is empty?

Result from JSON.stringify is
LOG: {“node”:{“external_object”:{}},“data”:{},“x”:80.80000305175781,“y”:217.60000610351562,“index”:0,“localX”:64.80000305175781,“localY”:18.400009155273438}

      <JavaScript>
            module.exports = {
                statusChange : function (sender) {
                    console.log(JSON.stringify(sender));
                } 
            }
        </JavaScript>

 <Grid Columns="1*,1*,1*" Width="100%"  CellSpacing="1" Padding="1">
            <Rectangle ux:Name="price" Color="color1" CornerRadius="7,0, 0, 7" Height="100%"  Alignment="VerticalCenter" Clicked="{statusChange}">
                <Text TextAlignment="Center"  Color="White" Alignment="VerticalCenter">
                    Price
                </Text>
            </Rectangle>
            <Rectangle ux:Name="popularity"  Color="White" Alignment="VerticalCenter" Height="100%">
                <Text TextAlignment="Center"  Color="Black" Alignment="VerticalCenter" >
                    Popularity
                </Text>
            </Rectangle>
            <Rectangle  ux:Name="distance"  Color="White" CornerRadius="0,5, 5, 0" Height="100%" Alignment="VerticalCenter">
                <Text TextAlignment="Center"  Color="Black" Alignment="VerticalCenter" >
                    Distance
                </Text>
            </Rectangle>

           <Rectangle Layer="Background" CornerRadius="7" Color="color1">
               <Stroke Width="2" Color="color1"/>
           </Rectangle>
        </Grid>
2

Did a quick test. If you’re using Clicked="" property, the sender, indeed, does not get sent to JS.

If you instead do this:

<Rectangle>
	<Clicked>
		<Callback Handler="{statusChange}" />
	</Clicked>
</Rectangle>

then the JS console.log outputs the following: LOG: {"node":{"external_object":{}},"data":{},"sender":"price"} and you can access the .sender in the JS function.