Display 2 different views via a button that will switch between grid and list view and vice versa

Hello,

I’m new here…:grinning: I follow Bubble flexcamp, bootcamp classes from Builcamp, and I enjoyed it but now I would like to begin step by step my own project….

I have a question:

I’d like to display 2 different views via a button that will switch between grid and list view and vice versa ( grid/list icon).

My basic view will be an RG in grid view, when I click on the button (list icon), I’d like it to display my RG in list view. When I click on the button (grid icon), I’d like it to display my RG in grid view.

I understand that I’ll need to apply a custom state to my (icon button), but I’m not quite sure how to go about it, since the button changes state depending on its view.

Could someone help me, please? I think this kind of use case could help the beginner community. Thanks a lot :star_struck: Mel


3 Likes

States can be placed in other elements. Take your pick. Hint: placing it on the page may be straightforward to find afterwards.

Have the grid Block and rowGroup be visible depending on a pageState that “calls” for either one.

Later on … explore url parameters to do this. :smiley:

3 Likes

There are a LOT of ways to do this.

If you are using buttons, just have the button set a page-level custom state setting (let’s call it rg_to_display). So if the user clicks the “List” button, it will set the page’s rg_to_display to “list”.

Then set conditions for your repeating groups. Set a condition on your list-formatted rg for when your_page’s rg_to_display is “list” then set that rg to be visible. Then another condition for when your_page’s rg_to_display is not “list” then set that rg to NOT be visible.

Then do basically the same for your “Grid” button.

1 Like

Thank you for the answer. :slightly_smiling_face: I used the parameter URL for my side menu. But it is the right solution to call the parameter url via workflow for this usage? I’d like to avoid making too many workflow calls, if possible

Thanks for your help :slightly_smiling_face:, I think this solution is good because it avoids using workflows. However, when I say button, I mean a group containing an icon. I’d like the state of my icon group ( icon list and icon grid) to change according to the rg list or rg grid display. I only want one icon group (as shown in the attached files) and not two icon groups or two buttons. Do I have to layered two icons in a group and display conditions? Thank you. Mel

If states does the job without the advantages or url parameters…. You got a winner! :wink:

1 Like

Yeah, you can do this in Bubble with no problem.

Put both of your icons in a single group. You can make the group’s layout “row” and just set the width to like 5 but also make sure “set width to content” is checked. This way YOU will be able to see BOTH icons but your user will eventually only see one (if you do the stuff below).

When your user clicks the “list” icon, set your state’s value to “list”.

Set a condition for your “list” icon to NOT be visible if the custom state’s value is “list”. This way, when they click your “list” icon, it will disappear and show the grid icon.

Do the corresponding changes for your “grid” icon.

So basically, when they select a view, you will show the correct RG and you’ll hide/show the right icon you want to show.

Also, to make sure you display the right one when the user goes to that page, be sure to set a default value for your custom state.

On a side note: personally, I would still show your user BOTH icons, to let them always see and know that there are two display options available. If they click “grid”, make it look like a pressed button and make the “list” one look like a regular icon. Your user may not always know that one button is actually two, but it’s a bit clearer if they always see both available.

But that’s just me.

1 Like

I second this.

If you can stay away from using URL parameters, I’d do so.

1 Like

Thank you very much for your help :wink:. I will follow all you step…

On another side note, if you REALLY want to get fancy, you can set up your app so it will always show your user the view they last selected.

You can add a field to your User table to store the value of your custom state.

When they click on an icon, you are already setting the page’s custom state. You can also, at this time, update the current user’s row with the custom state’s value.

Just add some code when the page opens to set the page’s custom state to the User’s saved value if they have a value saved. Then your page will automatically show the repeating group in the same format they last looked at it in.

1 Like

thank you for all this information, but I’m a beginner and I’m already having trouble implementing the first tips. :upside_down_face:I’m struggling to find videos about it on YouTube. But thanks, I’ll get there eventually…

I’ve done it in this way (see attached file), trying to follow your recommendations:
As I’m a beginner, can you tell me if this is correct?
The next step will be the “press button, etc” conditions.
THANK YOU!!! :wink: :slightly_smiling_face:

From what your screen shots, that looks right!

1 Like

Ohhh Great, I’m happy. :grinning:
Still maybe very basic for you, but as a beginner, this is a good step for me.
I’m just start 2 days ago…

Now I try to show/hide ( press button between my outline and solide icons ) but don’t find how to do that. I try to follow what you ask me, but i block today.
So, maybe tommorow…

Thank you!!!