Hi guys, i am using Bottom Sheet widgets but idk how to close the Bottom Sheet when click outside(gray zone). Is there any solution for this?
Hi @Doan Ba Duong ,
To be able to close the BottomSheet when clicking outside, you can resort to a little Javascript trick.
These are the steps you should follow:
1. Provide your widget with a specific class in the extendedClasses property:
2. In the action where you have your logic to Open the BottomSheet, if the Open was a success, place a javascript node where you pass that same class as input:
3. The javascript node should look as follows:
Basically what I'm doing here is adding an onClick event listener to document body (whole page).
When the user clicks anywhere, the checkIfClickOutside function is called.
This function is basically getting your bottomSheet by the class you placed there (I tested and getting the element by Id doesn't work in this case, if you want me to explain further feel free to pm me).Then, we are checking if the place where you clicked, is outside of the BottomSheet. If it is, then you basically call your action to close the Bottom Sheet.
Let me know if this helps!
Regards,
Paulo
Hi @Paulo Ritto,
Thank you so much for your help. But i am not be able to achieve click outside closing BottomSheet although i've followed all steps. I am working on Mobile OS not Web so is that a problem?
I just test your instructions in Web app and it worked correctly so the problem is Mobile app. Can i have your support in mobile version? Many Thanks,
Duong
Hi, @Doan Ba Duong
No problem at all!
So, i just did the same in a mobile app and opened it on my phone (Android), it still works the same way... What is the device you are using?
Anyway, that might be because your device system is somehow incompatible with the onclick Javascript event, i suggest you going to the javascript code node, and replacing the 'click' with 'touchend' event, which is a similar event but more indicated for mobile apps. So the javascript would stay like this:
Let me know if this worked for you!
Cheers,
Hi Paulo! Thank you for providing this solution. However, I seem to be having problems on what adjustments to make in my application for this solution to work. May I know what may be the cause of this? Also, close on click does not exist in my app, so I used this instead:
Hi Paulo, Can you share "oml" file that will help quickly.Thanks in advance.
Solution of Paulo is the correct, maybe you need some adjustments but it's the correct way!
Hello,
Bringing up this topic again.
I have cases where i have errors like this:
Invalid call of the 'BottomSheet_Close' client action of the 'UI_MainFlow.HomePage' since the latter is not currently active. This is likely due to a platform's client action being used as an event handler or in a setTimeout function. Consider removing this call by using the 'On Destroy' event of the screen/block or moving your logic to a global client action.
What's the better way to remove the listeners at the OnDestroy event?