Low code App – How can I collapse or expand a “sidebar” on the left

Solved1.07K viewslowcodeapps
0
0 Comments

Hi community,

For a low code app with a map integration, I want to have a list with filtering capabilty on the left side of my application and I want to have the possibility to collapse or expand this left part.

I tried to test with a panel opened on the left but the content on my page is not resized. The panel when it opens is displayed above my map.

Do you have recommandation/solution to do this?
Thanks

Ward Haeck [SLC] [DevOps Enabler] Answered question 15th September 2023

1 Answer

3
3.48K 2 Comments

Hi Yvan,

Currently the panel can only be displayed on top of the page and can't resize the page it is displayed on. It would require a new software feature to support this.

Still I found, somewhat of a hacky, solution to support your use case with the current software features:

You could add your maps component to a panel (Maps panel) and the filters to another panel (Filter panel).

  • On page load you create an action which opens the maps panel (on the right, width of 100% and no overlay)
  • In the maps panel you add an 'Open filters' button which would on click:
    1. Open the Filter panel (from the left side, width of 30% and no overlay)
    2. Close the Maps panel followed by an action to open the maps panel (from the right side, width 70% and no overlay)
  • In the filter panel you add an 'Close' button which would on click:
    • Close the Filter panel
    • Close the Maps panel followed by an action to open the maps panel (from the right side, width 100% and no overlay)

In the end it would look something like this.

Note that this is more of a workaround. The downside of this is that it refetches the data which is displayed on the map when opening and closing the filter panel.

Best regards,

Ward

Ward Haeck [SLC] [DevOps Enabler] Posted new comment 25th September 2023
Yvan Barbotin commented

Hi Ward,
Thanks for this workarround.
I implement this but if I click on “show filter” when the left panel is opened I have a wrong behaviour.
Is it possible to hide a button in the header bar when the left panel is opened for example?
How did you put the close button on the right side of the header bar?
Ward Haeck [SLC] [DevOps Enabler] commented

Hi Yvan, sorry for the late response.
– It is not possible to hide a button. So indeed, that ‘Show filter’-button won’t be doing correct things when the filter panel is already opened. I think you can work around this if you create another panel with a map, but without any buttons in the header. (So then you have 3 panels in total)
– If you add a headerbar you also have a plus-icon on the right, if you click that one, you will add a button on the right.