Sliding Panel - 'open' on page load

Hey Griffin, I appreciate the suggestion.

Sliding panels usually end up hiding some content of the page since they either push some of the content off so that it is not visible, or cover it up by overlaying it. Is what you’re looking for a way to still keep all the content of your page visible, but still having a toggle-able section to the side that is open by default? I see the need, but I want to make sure I understand it fully.

Whoops, forgot to introduce myself and give that previous reply a little more context. I’m one of the software engineers at Skuid that worked on the Sliding Panels. I’m pretty committed to making Skuid as awesome as possible, so I love feedback.

Hey Andrew! I’m always bragging about the Skuid team, so you must be pretty smart to have gotten the job.

So, how about I restate my needs more clearly while separating my suggested solutions.


Use case:

• My end user needs to check their chatter feed regularly
• My end user historically won’t check chatter feed regularly unless it is on their main working page
• When I display their feed on their main working page, they check it regularly but it takes up a lot of space

• Display the chatter feed everytime the page loads so that the end user will check Chatter
• Give them some ability to hide the feed once they’ve checked it

Got it. Ok, so this I would propose doing this via conditional rendering. The steps to getting this working can be a little complex, but this is a completely legitimate way to do things and something our Solutions Engineers and internal teams use all the time. It involves a couple things to make it work.

1. A UI-only model to drive the conditional rendering.
2. A conditionally rendered section of the page.
3. Two buttons. One to hide the conditionally rendered section, and one to show it.

You may be familiar with this process, but just in case you aren’t or someone else who stumbles upon this isn’t, I’m going to go ahead and explain it.

You set up a UI-Only model with a checkbox field that is used explicitly to show/hide a single section of your page, with a default value of true. Then, you set up a conditionally rendered section of that page to be only shown when the value of that field is true. Lastly, you set up two buttons, one to set the value of your ui field to true, one to set it to false. You also conditionally render these buttons so that you only are ever showing the one that is relevant. With all of this, you have set up a section of your page that is always shown by default, but can be toggled with the click of a button. 

Here is a link to a page that does just that.

Brilliant!

I use this approach in Brooklyn as well, works great!

Thank you so much for this!! Works perfectly.