Skip to main content
Participating Frequently
September 9, 2020
Question

Toggle appearance of button javascript

  • September 9, 2020
  • 5 replies
  • 2110 views

Hi, 

 

First time poster! I've got a lot of experience in VBA but naff all in javascript.

 

Is it possible to toggle the visibility of a button on the click? I've tried event.target.display = display.hidden which works fine to hide it but I can't unhide it.

 

I've tried:

 

if(event.target.display = display.hidden){event.target.display = display.visible
} else {event.target.display = display.hidden}

 

but it doesn't work. 

 

I'm assuming this is possibly because the user can't actually click the button when it's hidden?

 

Is there any work around for this? For example, instead of the button being hidden, it could go to a transparent background when the file is open and then when it is clicked it reverts back to it's original state? When it is clicked again it goes back to being transparent?

 

Any help greatfully received!

 

This topic has been closed for replies.

5 replies

Karl Heinz  Kremer
Community Expert
Community Expert
September 9, 2020

Can we take a step back? Let's discuss why you are trying to hide the button. This will very likley result in a number of different appraoches you can take to accomplish the same. 

ls_rbls
Community Expert
Community Expert
September 9, 2020

I forgot to add to your question:

 

  • Is there any work around for this? For example, instead of the button being hidden, it could go to a transparent background when the file is open and then when it is clicked it reverts back to it's original state? When it is clicked again it goes back to being transparent?

 

In the field properties--->> "General" tab I set my button field as "Visible but doesn't print" (this is optional depending on your needs).   

 

Then I  used mouse-up events for both the "Open a file" action and to change the color field property of the button to transparent. 

 

Putting these two actions under the same mouse event type executes as if it was  a single task.

 

  • NOTE: For the color transparent mouse-up action  the following script:

 

 

event.target.fillColor = color.transparent;

 

 

To bring back the color field property of the button I use a mouse-enter event script:

 

event.target.fillColor = color.ltGray;

 

 

This is very simple and convenient since all you have to do is hover with the mouse pionter over the button field and it will turn to color light gray again.

try67
Community Expert
Community Expert
September 9, 2020

The first thing to learn about JS is that unlike VBA it has different operators for comparing and assigning values.

You assign values using "=" and compare values using "==" (or "===").

So in this line:

if(event.target.display = display.hidden)

You're actually setting the field as hidden, not checking if it is hidden...

Change it to:

if(event.target.display == display.hidden)

ls_rbls
Community Expert
Community Expert
September 9, 2020

Hi, 

 

This was answered to another user yesterday by try67 in the following thread :

 

 

You can test with the file that the user shared (if it is still shared, of course). But from what you're asking :

 

  • I'm assuming this is possibly because the user can't actually click the button when it's hidden?

 

That's correct. So, if you refer to the sample file in the link above you'll notice that the user implemented the concept of dedicating a button to handle that behavior in another field, not on itself.

 

However, your idea of making it transparent and solid color seems doable if you're considering to apply the condition on the field itself.

 

 

Karl Heinz  Kremer
Community Expert
Community Expert
September 9, 2020

As you correctly said, a button that is hidden cannot be clicked on, so any script that you associate with this button. You would need another button or another form element that would restore the visibility of that button. 

 

In general, this is the script you would use:

 

this.getField("TheHiddenButton").display = display.visible;

 

But again, this has to come from outside of the button. 

Participating Frequently
September 9, 2020

Thanks for the feedback Karl. I've had a chat with a friend and she's suggest using layers, so on click of the button the layer appears and on second click it disappears. Hopefully that'll solve the problem.