Hello,


I have these 3 buttons that I made to make a button dropdown in Reactive Web. If you click on the caret button, it will toggle a local boolean variable that will make save button visible and vice versa.

However, the toggling process is only limited to the area around the caret button. My question is, how do you extend the toggling process so that clicking anywhere (aside from the caret button area) in the screen would also toggle the local variable and thereby resulting in the button back to not being not visible. I've tried the same method as this popup "click-anywhere" method, but I believe that such method only works for popup.



Best Regards,


Yosua

Hi Yosua,

Why don't you use the OutSystems UI submenu widget, that would implement the behaviour that you want.

https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=69 

Regards,

Daniel

Hey Daniel,


Thank you for your reply. I once tried to use submenu and put them inside one of the button to have a submenu that fulfills the click anywhere requirement. The problem that I had with this approach is that I can't put the options in the submenu below properly since the menu block always looks oversized or too small for the menu text. Would you be able to demonstrate in a simple OML how to properly use Submenu widget inside a button?



Thank You,


Yosua

Hi again

I didn't mean to use it together with the buttons, but as a replacement.

The submenu items are links.

Regards,

Daniel

Hi again,

Another alternative would be this. but instead of text widgets, put buttons in the DropdownList.

Regards,

Daniel

Hi Yosua,

The implementation using submenu will look something like this --> Submenu sample screen 

Is this what you are looking for?


Regards,

Benjith Sam

Hi Daniel,


I attached an OML of mine, I tried to put submenu widget but it doesn't close when I click anywhere else on the screen. Am I missing something?



Thank You,


Yosua

Hey Benjith,


I looked at your sample submenu and for some reason my submenu behave differently. For starters, mine does not close when I click anywhere else on the screen (i.e. I had to move my cursor to the caret button in the submenu to close it) and I am having trouble understanding how mine behaves differently to yours.



Yosua

Solution

Yosua Witantra wrote:

Hey Benjith,


I looked at your sample submenu and for some reason my submenu behave differently. For starters, mine does not close when I click anywhere else on the screen (i.e. I had to move my cursor to the caret button in the submenu to close it) and I am having trouble understanding how mine behaves differently to yours.



Yosua

 Hi Yosua,

I have added JS statement to achieve the 'closing submenu item on click anywhere else on the screen' functionality.

Please see the attached .oml file


Hope this helps you!


Regards,

Benjith Sam

Solution

Hi Benjith,


Thank you for including the Javascript file. I still have a problem integrating the JS file that you gave since I tried to emulate what you did in your OML (with the same id and all), but I got this error:

It does seems like the line that is causing the problem starts when the script calls $(document).click(function(){ ... }. I am wondering if you had imported an extra script in your environment or might I have done something wrong in the process?



Thank You,


Yosua

Yosua Witantra wrote:

Hi Benjith,


Thank you for including the Javascript file. I still have a problem integrating the JS file that you gave since I tried to emulate what you did in your OML (with the same id and all), but I got this error:

It does seems like the line that is causing the problem starts when the script calls $(document).click(function(){ ... }. I am wondering if you had imported an extra script in your environment or might I have done something wrong in the process?



Thank You,


Yosua

 Hi Yosua,

Refer this forum post: https://www.outsystems.com/forums/discussion/63706/google-tag-manager-reactive-is-not-defined/ 


Hope this helps you!


Regards,

Benjith Sam 

Works like a charm for the submenu widget, thank you very much. I will be attempting to apply such methods to the other components.



Best Regards,


Yosua

Yosua Witantra wrote:

Works like a charm for the submenu widget, thank you very much. I will be attempting to apply such methods to the other components.



Best Regards,


Yosua

You're most welcome, Yosua :)

I'm glad it helped you!


Regards,

Benjith Sam