Click anywhere outside a div to hide it
Application Type
Mobile
Service Studio Version
11.11.9 (Build 46344)

Hi,

I was wondering how can i hide a div, based on clicking anywhere outside the div?

_________________________________

Context:
--I have a WB with a Graph.
--The Graph has the Clickable property set to True.
--I have an OnClick action with an event to send the IsShow and a list of text Values to the parent block.
--The parent block has a container with the Visible property set to IsShow and inside of it the Values are displayed.

What I want to accomplish:
I want to click outside the container and be able to set the IsShow to False so I can hide it.

Attempted:
Set an onblur on the container and trigger an action where I set the new values (IsShow=False and ListClear).

Results:
The onblur trigger didn't go off and because of that I couldn't change the values.

_________________________________

The other alternative that I can think of is with JS but I need help with that approach.

Thanks for your time and help :)

Kind Regards,
Luis

Solution

Hey Luis Martins, 

What i would do is create or put on the WB another container and I create an overlay with that container. That overlay/container is clickable and has an event that will trigger the action to close or hide the container.

If you have that div on a WB you just need to add another div. If not, you need to create a WB put the container with the data, and put another container that will be your overlay.

Do you want this?

https://marcio-carvalho4.outsystemscloud.com/overlay/

If so,

I did this,

First created the class overlay to put on the container that will receive the on click event

2-Than I created a WB and put a container as I said for the overlay and another for the content

3-And important not to forget the event on click for the overlay

Kind regards,

Márcio

overlay.oml

Hi Marcio,

Thanks for the reply.

I think I understood. I was trying to look outside the container, this solution basically defines that all the area is clickable (the 'overlay' class) and when clicked it calls the event that allows me to use a handler function.

I still can't believe on how simple this solution is :)

Much appreciated!

Got a side effect that since all the screen is clickable now and I can no longer interact with the other elements.

It can be the pointer-events or the z-index :D Sorry

Try to put the z-index like this, z-index: 0;

Kind regards,

Márcio


With z-index: 0;  is the same situation.
With a negative z-index i can click on things, but then the onclick from the event doesn't work :/


I will try to mess around a bit for now :)

Hello Luis, I thought about another solution

1- put an event onclick  on the layout you are using

2- Then, on the main container you are going to use the event onClick when you click on some part of the main

3- Then on your screen, in the layout you are going to create an action that is going to handle the onClick event

4- Then inside of the action you just make if false the visibility on the variable that you are using to make it visible or not :)

Kind Regards,

Márcio

HideOnClick.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.