Hiding an element if value is empty.

How-to Discussions
1

Hi!

I’m new to FuseTools and currently trying to figure out how I can hide a element if a value is empty.

At the moment it looks something like this:

<StackPanel>
	<Each Items="{list}">
		<ImageBox  ImageUrl="{image}" Height="200"/>
	</Each>
</StackPanel>

And I would like the custom ImageBox not to be rendered if there isnt an image to be displayed.

{image} contains an URL, but it might also be empty.

I tried using

<WhileNotEmpty Items="{image}">
      <ImageBox  ImageUrl="{image}" Height="200"/>
</WhileNotEmpty>

without any luck.

Any suggestions?

2

Hi Pål!

Without knowing the exact use-case, I’m tempted to ask: “why include an empty image in a list of images at all?”

I believe you have a good reason to do that though, so here’s one way to attack it:

<WhileString Value="{image}" Equals="" Invert="true">
    <ImageBox  ImageUrl="{image}" Height="200"/>
</WhileString>

However, you might need a more complex validation on the {image} string - it might be empty, it might be a whitespace or it might be something that is not a URL. If that was the case, I would do the validation in JavaScript, store the result in showImage boolean for each list item, and finally use a <WhileTrue Value="{showImage}"> inside of the <Each>.

Hope this helps.

3

Thank you Uldis!

Great! :slight_smile:

Its actually a list of articles, I just want to skip showing the image if its missing an image url :slight_smile:

I might actually go for the latter approach. :slight_smile:

  • Pål
4

Good stuff!

If it’s a list of articles, I suggest you take a look at this example: https://www.fusetools.com/examples/news-feed

It shows both WhileString use, and a basic JavaScript fetch operation that ends up populating an Observable list with Article objects. You should find that part especially helpful for injecting that image-url-validation.

5

Spot on! Thank you! :slight_smile:

  • Pål