Hello! I am trying to figure out a way to close Sidebars in Reactive when the User clicks on a part of the screen that is not part of the sidebar - is there anything in extended properties that I can utilize to do this?


In the screenshot attached, the current & undesirable flow is as follows:

1. The user wants to create a new Financial Schedule by selected the "+"

2. The user begins filling out information for the new schedule

3. The user decides they need to go back before saving and naturally click below the "Invoice Documents & Transactions" card thinking that will close the sidebar.

4. The sidebar remains open & the end user has to select "Cancel" or the "X" at the top of the sidebar

Hi Nick,

The Sidebar does not have any property that allows for what you want.
But you could implement a transparent layer (container) between the page and the sidebar, expanding it before opening the sidebar, and set the OnClick event to close the sidebar.

If I remember, that was what the Modal in Traditional Web used to have, for example...

Hope this helps.
Cheers.

Thanks for the quick response Eduardo, while that makes sense conceptually I'm not sure how I would execute that - how would I go about "Expanding" the container once the sidebar was open?

Solution

Hi, 

I would say that the best thing is to add css to it, basically, position fixed and top, bottom, left and right set to zero. You can put the container inside an IF and tiogle a Boolean variable. Or you can set the CSS with a class and add and remove the class dynamically with a condition. 

I'll see if I can make an example for you. 

Cheers! 

Solution

Totally makes sense now, thanks Eduardo! Which message should I mark as a solution?

Hi, Cool. :)

I think the first, as it gives a possible solution.The second is just a way of implementing it. (Not in a computer with Service Studio, so I couldn't create an example yet).

Cheers.

P.S: (I remembered that you probably may need to deal with z-index, to avoid the layer going over the Sidebar, but maybe not)