Screen Order for Single App

Need help Plugins
1

Hey guys,

  • Situation: I have a single-app that runs as dual-screen. The setup is simple: one page split into two - Screen 1 and Screen 2. They can go solo or share the space 50/50.
  • The problem: because of Bubble’s top-down editor, Screen 1 always sticks to the left and Screen 2 to the right when both are visible.
  • My question: Wish there was a way for the first clicked screen to take the left spot. Any ideas on how to achieve this?

Thanks in advance!

1 Like
2

I would change the alignment of the group they are both in based on a conditional rule for when the first screen isn’t visible, if I’m understanding the question right?

1 Like
3

Hmm, I think it doesn’t work. The editor still puts Screen 1 first and Screen 2 second when both screens are visible.

Here a very simple loom video to showcase the problem. In this example I would like to display Screen 2 first if that was clicked first (the first clicked screen to take the left spot).

4

Oh! right, I misunderstood your question.

And I assume the objects within each screen will be quite different so you dont want to just notionally call each one screen 1 or two based on a custom state?

A messy way to do it would be to create the internal content for each screen as a reusable element, and have the both screens reusable elements in each screen group, then have a custom state which is triggered when you are clicking screen one or two which sets the order, then the conditional rule would show the contents based on that… but its not elegant sorry… I’ll think it over and come back to you if I have a nicer one

1 Like
5

hi @joaquintorroba

what exactly do you want to build here?

If you make your content dynamic and use repeating groups this would be pretty easy to achieve.

1 Like
6

Here 10 seconds video.
I’m trying to build a webapp where you can use generative AI in chats and documents (see screenshot).
Similar to ChatGPT but with more capabilities.

CleanShot 2024-02-07 at 10.47.36@2x
CleanShot 2024-02-07 at 10.47.36@2x2880×1800 191 KB

7

I think you can create a copy of the first one and conditionally hide and show others depending on which one is open.

Simply, you will have 3 groups next to eachother:
[Chats A][Documents][Chats B], where Chat A and B is exact copies of eachother.

All hidden at first. Then, whenever chat is clicked, if documents is not visible, you show Chat B (hiding chat A). If documents is visible, you show Chat A (hiding B).

If document is clicked, and if A is visible, you hide A and show documents and B. If B is visible, you just show documents.

I hope it is clear :slight_smile:

1 Like
8

Yes, I thought about doing this, the downsize is that I’ll have to do the setup of all the workflows again (in this example of Chat B). Am I right or is there a way of copying all with the workflows and automations?

9

You can move chats into a reusable maybe.

2 Likes