How to show/hide if database field empty

Wappler General How To
#1

This took me a little while to figure out so hopefully I can save people some time.

I wanted to show a button only when the value of a database field is empty. The use case is to show a Font Awesome icon if the user has not uploaded an avatar image yet and to show the uploaded avatar image if they have.

Setup your server action and add your server connect to the page per usual.

Next, go to the button and Dynamic Attributes > Show > navigate to the server connect and database field and add == “”

Your expression should look similar to this:

userinfo.data.query1[0].image == “”

image

Now, go to your avatar image and you can easily show it only when it has a value by: Dynamic Attributes > show > navigate to that same server connect and database field. You use the expression itself. It should look like this:

userinfo.data.query1[0].image

image

That’s it! Now, when the database field that you selected is empty, the button will show and when it is not empty the uploaded avatar image will show.

1 Like
#2

Thank you, we always love when our users give tutorials like this.

I would like to help you simplify this a little though. The show command you have used basically says show my button when database field is blank
There are 3 ways you could do the same thing

  1. Like you have done it
  2. Using hide instead of show you could say hide userinfo.data.query1[0].image
    This would evaluate to true if there is an image and hide the button or false when there is no image and show the button, and it does not need the == "" section added to it.
  3. Using the show you could say show !userinfo.data.query1[0].image
    The ! in front of the statement basically means NOT, so when there IS an image it would be false and it will say do not show, and when there is no image it will be true and then show.

Test it out, it does not make a big difference, but maybe later on for scalability option 2 or 3 may be better solutions.

3 Likes
#3

This is the simplest and the way I do it. Very simple, no need to manually add anything.

2 Likes
#4

Thanks for providing alternative options guys!

The key is to have a way to denote “not true (!)”, which I didn’t know about, since I need to combine logic to not show the button when the user is logged out whether there is or isn’t an avatar uploaded.

Hide works with:

userinfo.data.query1[0].image || !userinfo.data.query1

“Hide when there is an image or the user is not logged in”

Show works with:

!userinfo.data.query1[0].image && userinfo.data.query1

“Show when there is no image and the user is logged in”

I am betting that using the show condition is better since it defaults to hidden and won’t flash for a split second while it turns off. What do you think?

1 Like
#5

It depends what you are trying to achieve in the end of the day, but because you are chatting about a login button then I will assume it’s a secure area.

For a fully secure page I have a login page and on all secure pages I have a security provider enforcer that sends the unlogged in user back to the login page, therefore the unlogged in user can not even look at the source code of my secure page to just unhide elements I have hidden away from them.

If your page is not a fully secure one, and all users can view it but a logged in user has more functionality then I would use the Conditional regions component, the difference between this and show/hide is that the code inside the condition is never run unless the condition is met, which again means a person can not just go to your page, inspect it, unhide your button and click the button to start uploading a second image.
In a condition the code will not be there for them to edit and there is no flash like you noticed.

Anyway just some things to consider if any of them fit your particular needs.

1 Like