Hiding an element if value is empty.


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:

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

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"/>

without any luck.

Any suggestions?

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"/>

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.

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

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.

Spot on! Thank you! :slight_smile:

  • Pål