Sliding Edit page from the right side.

0
Requirement: Open Slide-In Side Panel on Button Click in Mendix. When the user clicks a specific button (such as an eye icon or a "View Details" button) on a page, a side panel should slide in from the right side of the screen. This side panel should appear as a popup overlay and display detailed information or actions related to the selected item in the list. The main page must remain visible in the background while the panel is open. The side panel should use a popup layout styled to slide in smoothly from the right, maintaining visual consistency with the application’s overall design. The interaction should feel seamless and enhance the user experience without requiring full page navigation.
asked
2 answers
1

Hi V Vinayaka Rao Jonnada,

You can achieve this using CSS. On button click, you can toggle a boolean attribute. Based on its value, apply a dynamic class to the section of the page you want to show or hide.

 

Here’s an example:

.timeline-hidden{

right: -50%;

position: absolute;

transition: all 0.5s;

}

.timeline-show{

right: 0;

position: absolute;

transition: all 0.5s;

z-index: 9999;

}

 

 

image.png

 

 

When the button is clicked, toggle the  show  boolean, and bind the class dynamically based on its value (timeline-show or timeline-hidden).

 

image.png

 

Hope this helps.

Thanks

answered
0

The CSS route mentioned by Shreya will probably work, but it is not a low-code approach, and it requires CSS expertise since not many people seem to be sharing examples of what to do.

I even attended a CSS class, and while it was also mentioned there as a possible option, no one left us with a working example. Strike many, I guess, against the CSS gurus; we'll never learn or use your art if we don't see examples (or maybe they want it that way :-) ).

Anyway, look at this widget, maybe this can help ? https://marketplace.mendix.com/link/component/214968

 

answered