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.
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
Hi Rahul,
Thank you for the solution. I tried this in my project, and it does close the popover on click. However, after that I can't open the popover unless I click on other part of the page first. I know it's been almost 3 years since you gave this solution, but do you have any idea on why this behavior occurs?
you can try do add this trick to solve the issue just run this javascript code "document.querySelector('body').click();"
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.
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
Eduardo Jauch wrote:
The choice for a popover menu has indeed been taken for design reasons.
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!
Benjith Sam
Benjith Sam 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??
Jahnavi Sagi wrote:
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
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?
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();
Thank you Sam, It helped us.
Hi john,
In Popover menu, Inside the bottom content placeholder. I think you are having Link widget for the list of actions. Use Container Onclick event instead of link widget. This will resolve the double click issue and popover menu will close automatically once you click on the container.
Best Regards,
RifazHussain M
Hi @Rahul Sahu ,
How to disable onclick after click popover menu?
After clicking menu retract it, a pop-up will appear. The issue is that when I click the button in the pop-up, it triggers the closure of the popover menu, causing the action associated with the button to activate only after a second click. Can you help me resolve this?