collapse / expand sidebar to show table

[L77]

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.

[JeffreyThompson2]

It looks like you are using a Grid Template and you have done something a bit wrong with how you've built your layout. When you place two or more Widgets into the same space on a Grid, they automatically arrange themselves into a tabbed style. You have a Sidebar in one Tab and the Table in another which isn't really a useful arrangement. You will need to move some stuff around to get them in the right places. 

1. Grab your Map Widget and make it really small.
2. Move the Sidebar Widget into the Grid space that the Map is in.
3. Put the Map inside the always open side of the Sidebar and the Table in the Collapsible side of the Sidebar.
4. The Grid space where the Table was should now be empty. Delete it.
5. Fix the size of all the Widgets you just moved around.

https://community.esri.com/t5/experience-builder-tips-and-tricks/the-sidebar-problem-or-why-can-t-i-...

[L77]

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.

[JeffreyThompson2]

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.

[ZhenZhang22]

Hi L77,

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

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

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

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

   

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

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

   

6. Save and preview.

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

Hope that helps!

Zhen