I want to have a Profile Edit screen where users can choose from a list of tags to add to their profile.
I know how to set this up to a point, but how would I make the tags rearrange/order dynamically?
If you look at the attached image (which is static currently) you will see that, say if the user did not use Sketch and Photoshop there would be empty spaces. How would I get it so the Tags would align correctly (without blank spaces) if they decide to add/remove tags?
The easiest solution is to place the tags within a repeating group and then making each box the same width. You could then, for example, display as many tags as you want dynamically this way.
Iām sure there are other solutions too, but they almost certainly are more complicated.
Thanks buddy. Could I use this in conjunction with the Multi Dropdown plugin? And switch between them with States when a, for example, āUpdate your Profileā button has been pressed?
Yeah, I donāt see any reason why that wouldnāt work.
Also FYI - If you want them stored permanently, then youāll want to save that data in the database too. If you just want it on the UI to customize a screen (for example, when filtering through search results) then custom-states work well for that.
Another question in regards to Repeating Groups. I have Inputs where a user can add their Dribbble URL, Twitter URL etcā¦ and when they click Save the relevant icon is shown which links through to the website.
I cannot for the life of me get this to work with a repeating group. I have got it to a point where the first cell is empty, and then 2 Dribble icons are shown in cell 2 and 3, it looks a mess and Iām having trouble getting it to work correctly!
I typically only using repeating groups if there might be a lot of data loaded because theyāre the last thing to load on the page and often a materially slower than everything else.
In the instance of URLās to multiple sites, I usually like to store each on the userās table instead of in a separate table. This helps with performance in other areas of our app, but also makes this type of data harder to load into a repeating group (since thereās no way to āsearch forā a list of records and load themā¦ itās all 1 user and different fields).
So, this might be a scenario where itās easier to create a few fields that behave the same way rather than using a repeating group. Additionally, you could use a re-usable element for this which is probably a bit easier to maintain.
Of course, it sounds entirely do-able within a repeating group too but perhaps another approach is better here.
If you want users to be able to add, say, links to Dribble and Linkedin then:
Include two input fields, one for Dribble and one for LinkedIn
When the user clicks save, store this data in your database. Likely, on the userās table youād have a field for Dribble URL and Linkedin URL.
Include 2 groups on the page - one for Dribble and one for LinkedIn. Set them each to not visible by default. And, add a condition to each: when current userās Dribble URL isnāt empty make this group visible (and same for LinkedIn)
Then, within that group put an icon for in the Middle and maybe a background color for the group.
Now, once you store the URLs for that user in the database, the groups will automatically appear and display the icons and colored background.
I hope this helps. Additionally, I strongly encourage you to go through Bubbleās training modules if you havenāt already and perhaps another video course or something afterwards. Thereās a lot to Bubble and itās so much easier to learn from someone showing you the ropes than having to figure it all out on your own. At least, thatās been my experience.
Thanks Scott. When you say 2 groups, do you mean side by side? 1 Group for Dribbble, and to the right of that the other Group for LinkedIn? What would happen if the Dribbble Input wasnāt filled in there would be a gap to the left of the LinkedIn icon, or am I not understanding you correctly?
Marc, you could put the groups side by side or one above the other. There are lots of ways to manage these types of challenges, but the appropriate approach really depends on a lot of details about your app and implementation.
Iād encourage you to take some video classes in Bubble - any good training course would show you a variety of solutions for this type of thing so that you can put together solutions that best fit your goals for your UI/UX.
Thanks Scott. Will try out one of those methods. And yes, Iāve watched/paid for over 5 premium tuts, joined the VIP on Coaching Bubble. This has taught me so much about Bubble, and enabled me to build around 50% of my App in such a short time.
The groups show/hide based on whether thereās a URL in your database. But, since the group is empty by default, youād want to add an icon or something else thatās visible to the user and set that up as a link that the user could click on to open the URL.
emphasized text
