# Conditional opacity/items

**URL:** <https://forums.fusetools.com/t/conditional-opacity-items/4295>\
**Category:** How-to Discussions\
**Created:** [January 19, 2017, 4:34pm UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295 "2017-01-19T16:34:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![charliepage88](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/charliepage88/32/398_2.png) [@charliepage88](https://forums.fusetools.com/u/charliepage88)\
**Post date:** [January 19, 2017, 4:34pm UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295/1 "2017-01-19T16:34:28Z")

</div>

Hey All,

So I just started using Fuse Tools last week and am loving it so far. Docs are way better than NativeScript and I can actually build stuff with it. There is a “but”. I’m a little lost on how to do a few things with it.

Right now I’m doing an app for a local large farmers market and one of the features are recipes. You enter in the name and then a list of foods is displayed. I want the user to be able to click on the food item and for the opacity to go from 0.5 to about 1 and then the checkmark (haven’t figured that one out yet, probably an image) to switch to a red delete button.

Problem is my conditionals for a WhileTrue are not working, it doesn’t like - foods.indexOf(name) != -1:

“No type with value binding alias ‘foods.indexOf(name.value)’ found”

So I’m not sure how to switch between the two buttons. Also not sure how one would flip the opacity also on a not simple conditional. Any help is greatly appreciated! Thanks.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [January 20, 2017, 2:03pm UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295/2 "2017-01-20T14:03:08Z")

</div>

Hi! We are working on expanding ux-expressions to be used for cases like this as well, but what you’re asking for is still best achieved using some JavaScript. I’ve made a complete example for you:

```auto
<App>
	<DockPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");

			var input = Observable("");
			
			function Name(name){
				var self = this;
				this.name = name;
				this.hide = Observable(function(){
					return self.name.toLowerCase().indexOf(input.value.toLowerCase()) !== -1 && input.value.length > 0;
				});
			}
			
			var names = Observable(
				new Name("Abbott"),
				new Name("Abel"),
				new Name("Abner"),
				new Name("Abraham"),
				new Name("Adar"),
				new Name("Addison"),
				new Name("Adler"),
				new Name("Adley"),
				new Name("Adrian"),
				new Name("Aedan"),
				new Name("Aiken"),
				new Name("Alan"),
				new Name("Alastair"),
				new Name("Albern"),
				new Name("Albert"),
				new Name("Albion"),
				new Name("Alden"),
				new Name("Aldis"),
				new Name("Aldrich"),
				new Name("Alexander"),
				new Name("Alfie"),
				new Name("Alfred"),
				new Name("Algernon"),
				new Name("Alston")
			);
			
			module.exports = {
				input: input,
				names: names
			};
		</JavaScript>
		<TextInput Dock="Top" Value="{input}" PlaceholderText="Input name" Height="80"/>
		<StackPanel>
			<Each Items="{names}">
				<Panel ux:Name="item" Height="60" Color="#ddd" Margin="5" Opacity="0.4">
					<Text Value="{name}" />
					<WhileTrue Value="{hide}"> 
						<Change item.Opacity="1" />
					</WhileTrue>
				</Panel>
			</Each>
		</StackPanel>
	</DockPanel>
</App>

```

I hope this was what you were looking for 🙂

---

<div class="post-metadata">

**Author:** ![charliepage88](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/charliepage88/32/398_2.png) [@charliepage88](https://forums.fusetools.com/u/charliepage88)\
**Post date:** [January 20, 2017, 4:52pm UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295/3 "2017-01-20T16:52:50Z")

</div>

Thanks man. I’ll definitely take a look at this later on today or tomorrow and let you know if that’s what I’m looking for, but it looks good 🙂 Wasn’t aware about returning a function inside of an observable - tying it to a WhileTrue, that’s great.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [January 20, 2017, 5:32pm UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295/4 "2017-01-20T17:32:19Z")

</div>

Great! Let me know how it goes!

---

<div class="post-metadata">

**Author:** ![charliepage88](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/charliepage88/32/398_2.png) [@charliepage88](https://forums.fusetools.com/u/charliepage88)\
**Post date:** [January 23, 2017, 11:21pm UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295/5 "2017-01-23T23:21:29Z")

</div>

Awesome, it works! Thanks a lot.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [January 24, 2017, 9:32am UTC](https://forums.fusetools.com/t/conditional-opacity-items/4295/6 "2017-01-24T09:32:30Z")

</div>

Great to hear 🙂