collapse / expand sidebar to show table

Question

In my web app builder app I had the attribute table widget turned on, and I had it collapsed by default.

Trying to do this in experience builder is arbitrarily complicated and I can't figure out what I need to do to get it to work.

I want the table to be collapsed by default and expand to overlap the map when you click the arrow.

This is my app: the bottom sidebar that holds the table stays expanded, it does not collapse.

ZhenZhang22 · Answer

Hi L77,

Thanks for asking! Here’s how to get that layout:

* Drag a Map layer widget into the left side of your Grid.

* Drag a Sidebar widget into the right side and choose the up/down dock layout.

* Click the “unlock this widget to reorganize its internal widget” icon in the middle of the Sidebar (key step).

* Place the Map into the first panel of the Sidebar and the Table into the second panel of the Sidebar.

* In the Sidebar’s settings panel, turn on “Overlay” and set its default state to “Collapsed.”

* Save and preview.

Now your table will start out collapsed, and clicking the arrow will expand it over the map.

Hope that helps!

Zhen

JeffreyThompson2 · Answer

It looks like if you add a Widget directly inside a Grid space it becomes locked to the size of that space. So here's what you can do.

Instead of shrinking your map, find and click the Move To Pending List Button on your Map Widget.

You'll probably need to make a new Grid square that you will put all your Widgets in. Then add the Sidebar to it. Now go to the Pending Tab of the Insert Widgets Panel and drag your Map Widget back inside your Sidebar. You will probably also need to move your Table Widget in and out of the Pending List.

L77 · Answer

Thank you for helping me.

It is a grid, the grid column has the map and the table.

I tried making the map widget smaller, but it is just moving around on the screen when I try to drag it.