We use a popover menu: when the icon is clicked the menu opens and shows a list of possible actions. We would like to have the menu closed once an action has been clicked. But the menu only closes once you click somewhere in the screen. Is it somehow possible to close the menu from within the action?


Regards,


John.

Hello John,

What type of application? Reactive, traditional web (I'm assuming it is not mobile)?
Also, what type of "popover" menu are you talking about? Is something from OutSystems UI, is a Forge compoenent, is just CSS?

Cheers!

Hi Eduardo,


It's a reactive app, and it's the standard popover menu widget.

Solution

Hi John,

Use simple javascript inside your call action.


var x = document.getElementsByClassName("popover-bottom");
  x[0].style.display = "none";


Link for Demo Click Here


Hope this will help you.

Regards

Rahul Sahu

Solution

HI.

I think in this case the small JavaScript solution given by Rahul is the (only?) solution.

But I think this happens because this widget was not thought to enable "actions" to be executed. Just to show some extra information.

Wouldn't be better to use a Popup, for example? Or is the visual aspect that lead you decide to use the popover?

Cheers 

Hi John,

I want to share one more solution for the above stated requirement.

Solution 2: 

see this sample: PopoverMenuDemo 


On the Screen Action flow introduce an JS node with below script.

$('.popover-background-window').click();


Hope this helps you!


Regards,

Benjith Sam

Eduardo Jauch wrote:

HI.

I think in this case the small JavaScript solution given by Rahul is the (only?) solution.

But I think this happens because this widget was not thought to enable "actions" to be executed. Just to show some extra information.

Wouldn't be better to use a Popup, for example? Or is the visual aspect that lead you decide to use the popover?

Cheers 

Hi Eduardo,


The choice for a popover menu has indeed been taken for design reasons.

Benjith Sam wrote:

Hi John,

I want to share one more solution for the above stated requirement.

Solution 2: 

see this sample: PopoverMenuDemo 


On the Screen Action flow introduce an JS node with below script.

$('.popover-background-window').click();


Hope this helps you!


Regards,

Benjith Sam

 Hai Sam,

When I'am trying to use the script which you suggested , it is throwing an error.I have attached the oml can you please help me with the error that occurs on button click of pop-over menu??

 

Jahnavi Sagi wrote:

Hai Sam,

When I'am trying to use the script which you suggested , it is throwing an error.I have attached the oml can you please help me with the error that occurs on button click of pop-over menu??

Hi Jahnavi,

I didn't found any mistake in your implementation, could you please share the JS error message which you are facing. see this PopoverMenuDemo Sample

Please find the attached .oml file


Hope this helps you!


Regards,

Benjith Sam

Hi Sam,

I'am getting the above error when Iam trying to use the close script function which you shared,Could you help me with this?

Jahnavi Sagi wrote:

Hi Sam,

I'am getting the above error when Iam trying to use the close script function which you shared,Could you help me with this?

Hi Jahnavi,

The error occurred because your application is not having/referring the jQuery script/definitions file. Please follow any one of the below mentioned solution (solution 2 is the preferred one)

Solutions:

1) Add the jQuery Script file to the Screen or to the Application Module in the Required Script section as per your requirement (referenced from OutSystemsUI Module)

2) Use pure JavaScript as mentioned below

document.getElementsByClassName('popover-background-window')[0].click();


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Jahnavi Sagi wrote:

Hi Sam,

I'am getting the above error when Iam trying to use the close script function which you shared,Could you help me with this?

Hi Jahnavi,

The error occurred because your application is not having/referring the jQuery script/definitions file. Please follow any one of the below mentioned solution (solution 2 is the preferred one)

Solutions:

1) Add the jQuery Script file to the Screen or to the Application Module in the Required Script section as per your requirement (referenced from OutSystemsUI Module)

2) Use pure JavaScript as mentioned below

document.getElementsByClassName('popover-background-window')[0].click();


Hope this helps you!


Regards,

Benjith Sam



 

 Thank you Sam, It helped us.