# Creating a toggle button

**URL:** <https://forums.fusetools.com/t/creating-a-toggle-button/6347>\
**Category:** How-to Discussions\
**Created:** [October 5, 2017, 12:05pm UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347 "2017-10-05T12:05:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Iain](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@Iain](https://forums.fusetools.com/u/Iain)\
**Post date:** [October 5, 2017, 12:05pm UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/1 "2017-10-05T12:05:57Z")

</div>

Hi again,

I’m trying to create a toggle button based on some of the example code as below. This works in terms of user interaction, but I want to extend this to manage a property representing the On/Off state.

```auto
<Panel ux:Class="Switch" Width="60" Height="30">
	<bool ux:Property="On" />
	<SwipeGesture ux:Name="swipe" Length="30" Direction="Right" Type="Active" />
	<WhileTrue Value="{Property On}">
		<SetSwipeActive Target="swipe" Value="True" />
	</WhileTrue>
	<SwipingAnimation Source="swipe">
		<Move Target="handle" X="30" />
	</SwipingAnimation>
	<Clicked>
		<Toggle Target="{Property On}" />
		<DebugAction Message="On: {ReadProperty On}" />
	</Clicked>
	<Rectangle ux:Name="handle" Width="24" Margin="3" Alignment="Left"
		Color="#ffffffff" CornerRadius="12" />
	<Rectangle ux:Name="background" Layer="Background" Color="#000000ff"
		CornerRadius="15" />
</Panel>

```

So firstly, I want to use a property as the on/off value and I’d like to toggle this with a click. So I tried:

```auto
<Clicked>
	<Toggle Target="{Property On}" />
	<DebugAction Message="On: {ReadProperty On}" />
</Clicked>

```

…but the debug shows that the property is not toggled. Is it possible to do this?

I’m then trying to set the SwipeGesture to active using:

```auto
<WhileTrue Value="{Property On}">
	<SetSwipeActive Target="swipe" Value="True" />
</WhileTrue>

```

…but although this works in side Clicked eg.

```auto
<Clicked>
	<SetSwipeActive Target="swipe" Value="True" />
</Clicked>

```

…it doesn’t seem to work inside WhileTrue.

Finally, I’d like to be able to detect the end of the swipe (or toggle) by the user and update the On property accordingly. But I can’t figure out how to detect this event and bind it to the On property.

Would you be able to point me in the right direction?

Many thanks (again!)

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 5, 2017, 12:10pm UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/2 "2017-10-05T12:10:46Z")

</div>

Could you please post a _complete, minimal_ app to show how you’re using the component?

---

<div class="post-metadata">

**Author:** ![Iain](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@Iain](https://forums.fusetools.com/u/Iain)\
**Post date:** [October 5, 2017, 12:25pm UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/3 "2017-10-05T12:25:02Z")

</div>

Sorry, yes of course. Please see below.

I want to create a `Switch` component that I can parameterise with an Observable on/off object (called “on”).

I also want the “on” object to update when the Switch is switched.

Below I have commented out the bits that I added to try to bind to “on”. The user interaction works fine (swipe, click etc) but I’m struggling with binding to “on”.

```auto
<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable")
		var on = Observable(false)
	</JavaScript>
	<Panel ux:Class="Switch" Width="60" Height="30">
		<bool ux:Property="On" />
		<SwipeGesture ux:Name="swipe" Length="30" Direction="Right" Type="Active" />
		<!--WhileTrue Value="{Property On}">
			<SetSwipeActive Target="swipe" Value="True" />
		</WhileTrue-->
		<SwipingAnimation Source="swipe">
			<Move Target="handle" X="30" />
		</SwipingAnimation>
		<Clicked>
			<ToggleSwipeActive Target="swipe" />
			<!--Toggle Target="{Property On}" />
			<DebugAction Message="On: {ReadProperty On}" /-->
		</Clicked>
		<Rectangle ux:Name="handle" Width="24" Margin="3" Alignment="Left"
			Color="#ffffffff" CornerRadius="12" />
		<Rectangle ux:Name="background" Layer="Background" Color="#000000ff"
			CornerRadius="15" />
	</Panel>
	<Switch On="{on}"/>
</App>

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 5, 2017, 1:04pm UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/4 "2017-10-05T13:04:33Z")

</div>

Not to go into details on `ux:Property` and two-way data-binding, we actually have [an example](https://www.fusetools.com/examples/custom-switch) and [another example](https://www.fusetools.com/examples/day-night-switch) for custom switches.

The idea is to use the `ToggleControl` base class, which allows you to data-bind to its `Value` property directly. The rest is handled nicely with swipe gestures, clicks etc. - everything you’d expect.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Iain](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@Iain](https://forums.fusetools.com/u/Iain)\
**Post date:** [October 6, 2017, 7:53pm UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/5 "2017-10-06T19:53:35Z")

</div>

Hi, the examples were great. Got it all to work based on one of those.  
Thanks.

---

<div class="post-metadata">

**Author:** ![sed](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sed/32/814_2.png) [@sed](https://forums.fusetools.com/u/sed)\
**Post date:** [January 11, 2019, 10:43am UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/6 "2019-01-11T10:43:31Z")

</div>

The link isn’t working !

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [January 11, 2019, 11:22am UTC](https://forums.fusetools.com/t/creating-a-toggle-button/6347/7 "2019-01-11T11:22:39Z")

</div>

All the links to the examples in this forum are not working because are pointing to the old web site [www.fusetools.com](http://www.fusetools.com). The new FuseTools web site is [www.fuseopen.com](http://www.fuseopen.com).