UX Modules - When to use reusable elements?

Need help App Organization
1

This question is regarding how/when to best use reusable elements with Get Page URL conditions to change a module’s content based on where it is used.

Defining “module” these are sections on the website that provide a layout for different types of content - ie. single column text, two column text with image, two column repeating groups, etc. I believe that Bubble calls these UX components. I’m not using theirs, mine are custom.

For the front end of my site, I’ve created a number of different modules and made them responsive. There are about 12 different modules for different purposes that can be reused throughout the site. I have not made them into reusable elements yet and am wondering if i should.

Example 1: I have one How It Works page. There will be 4 “subpages” in the menu. Clicking the navigation on these submenus sends data to the URL “/howitworks/overview” and the content in the modules updates based on the data in the URL.

This is fairly straightforward since it’s all on one page. Modules are hidden/exposed based on what submenu has been selected and the content loads according to URL conditions.

Example 2: Now I’m doing the same for the Why Us pages. So far, I have created a brand new page then copied and pasted the modules I want for the layout. Conditions based on the URL change the content.

I realize this is not ideal. If I want to change the layout of a single module, now I will have to make those changes to modules on both pages. The site is going to be rather extensive, so it would be way easier to make these reusable elements.

The downsides of the reusable elements… if I populate all the content using URL conditions, that seems like it can also get unwieldy rather quickly. On a page-by-page basis, it’s not so bad. BUT - if i want to use the same module twice on the same page, I don’t see a way for this to work because as far as i know, you can’t use page-based states to dictate what happens with reusable elements. (Maybe I’m wrong?)

Can someone help me define a best practice here or point me to resources that explain how to do this?

2

essentially if I use something more than 2 times I create a reuseable element for it

I try and lean heavily into the reuseable elements since they make building new features in an app much faster and easier, as well as changing things in an existing app.

For example I might build a reuseable for a table of contacts. I might use it on the contact list page, then also the company page (contacts at company), contacts page (related contacts), event (contacts at event).

Within the reuseable element I might have several other reuseables - a card for the contact, a pager, a filter - these I might break out and use in other places separate to the table but I want them to function the same in all the places.

Another common reuseable is highlights/callouts - title and number in a box. Cards for all data types - these are used in searches. Custom dropdowns/selectors. Create/edit popups. Search for things popups.

With reuseables you don’t have to rely on urls - you can use states and also parameters on the reuseable itself to pass in information. And you can create reuseables for rows in a table to workaround the issue of “current rows thing changes”.

Quite often I’ll also create 1 time reuseables just to compartment off the logic to make dev easier and the page to load faster in the editor.

3

thanks for the explanation - it’s on par with my understanding of reusables.

i understand your example because you’re using RGs and presumably button workflows to change/feed data between/within the reusable elements.

in my use case, the content for the modules is not stored in the database. and there are no workflows to change states or parameters. it’s a single page with the same reusable on it 3 times.

if the reusable is on the page once, no problem because it can look at the URL and have a condition that updates the content.

but how would i get the three different modules to display different content using states? it would be great if i could put a wrapper around each reusable and give it a state for the reusable to read from:

wrapper 1 > about our projects
wrapper 2 > about our contractors
wrapper 3 > about our practices

but that’s not possible from what i can tell because there isn’t a way for me to create a relationship between the wrapper (page element) and the reusable.

any ideas?