Hey,
Is this limitation of bubble or is this something I don’t get.
How I can build dynamic UI elements?
Let’s example say I am using TAB -element.
There is 3 TABS which each one has own page.
Now if I have users who don’t have right privileges to access on of the tabs (let’s say it’s in middle).
This will be invisible for them. But how I can get these tabs to jump again in order while one of them is hidden from user?
In my application, I make elements that only should be visible to some users visible by using conditionals. For example “When current user’s email is "x@x.com” --> “this element is visible”. If it’s more than one user, you could create a list: “When current user’s email is in x”
Don’t know how secure it is though
To expand upon the group idea, in theory, you could create a thing called user groups, create your various groups (ie Sales, Service, Operations, Finance, etc) and add the user to the respective group and then make the element only visible to those in that group. Pretty standard Access Control. From a security standpoint, it would all depend on how your security in your app is designed.
Hi,
Thanks for fast reply.
I think you both @fellglenn & @jaos.pcl answered how I can make specific tab to be hidden or visible for users.
But my question is how I can get other UI Elements to change their places if element between them is hidden from user (In this example this element is called tab).
Right now other tabs which are visible to user are standing on their place.
See the screenshot I uploaded on my first topic. The middle tab is hidden so 3rd tab should change it’s place till middle tab place.
I am trying different example.
I have 3 list menus (1. Pizzas, 2. Pastas, 3. Drinks).
Let’s say my user has no privileges to see pastas menu. So this one will be hidden.
How I can get Drinks menu list jump into pastas -place or can I?
This list would see strange to user for now as Pastas are hidden. There is empty space between Pizzas and Drinks.
Just curious, but have you tried “collapse element when hidden setting”?
I know it works when the elements are stacked vertical, but I’m unsure about if it will collapse horizontally your your specific application
@fellglenn It’s just the height.
I suggest you to have groups with almost the same content. If group one has all the 3 tabs, you could restrict the access to user-group “x” our users with a certain email. Group two just have the 2 tabs, which will be visible to everyone else. In group two, you just move the second tab in the editor.
Create a repeating group with 1 row and 3 columns. Layout style: Fixed number of cells.
Type of content: text
For your user type, add a field i.e. “accessable tabs”, which is a list of texts.
Now, set the data source for the repeating group as current users accessable tabs.
In the repeating group, add a text field which uses the repeating groups currenct cells text as dynamic text.
Now, if you add texts to a users accessable tabs list, tabs will be dynamically added.
I would not go for the horizontal tabs. From a UI perspective there are a lot of issues with this, specifically in Bubble.
Hiding and showing these elements for different users is a challenge because you cannot collapse horizontally. Depending on your use case, you are better off creating multiple copies of a group and call them using conditional statements.
You can then build a vertical menu (for example a sidebar menu) where certain menu items are not visible to certain users. (of course this is not taking into consideration any privacy settings you might want to implement)
You could try making the tabs be represented in a horizontal repeating group. Where the data source is unique to the user.
Could be a bit wonky though. On my phone; coming in with a full finger horizontal swipe, blasts me into the previous website on my mobile browser sometimes (if your going mobile)
Consider vertical as well - like what has been said, vertical group size can indeed collapse.
The slide bar menu can be pretty great too
Ya horizontal I think - if you really want those tabs like that.
You could do a repeating group set to horizontal scroll.
Or have a fixed number of cells, for the number of tabs.
Then make arrow buttons (if you run out of screen space for all tabs)
Could be -
If user is (data-type)
Or
Do a search for “tabs” that = in current users (data-type)/probably list
Add “viewable tabs” as a list of text items to a user. Set the list when changes to their account is made. You can use a “settings” database with multiple entries that are lists of tabs depending on the user’s account. That way you can copy the list of tab titles to the user’s viewable tabs in the same workflow that modifies their account type.
Avoid using a search when loading the tabs as it could be slow the odd time. Set a list to the user and it will load instantly.
When the page with the tab loads, set tab 1 to item #1 from the list, etc. If necessary, set a condition on each tab to be visible if its position is less than or equal to the count of the list of tab titles. Now you can setup multplie tabs, or you might be able to use a horizontal repeating group.
