Naming components when using multiple pages

🤝 Discussion
1

What is the recommended naming convention for components (and queries) when using multiple pages?

Let’s say I have a database table called A. One page does work on a subset of A, while the other does work on another subset of A.

These pages shares some functionality, which works fine, but I have an issue with naming components since I can’t have two selectData' s, even if they are on different pages.

Would somebody recommend a way forward? The only solution I’m seeing is adding the page name to each component, but I’d only do that as a last resort, for obvious reasons.

Thanks!

3

Hi @dakes,

Good question. Personally, I wouldn’t include the page name in most component names unless there’s a real collision or ambiguity.

I’ve found it scales better to name things by the business concept/purpose instead:

selectCustomer
tableInvoices
getProjects
modalEditContact

rather than:

page1SelectCustomer
page2SelectCustomer

If multiple pages are dealing with the same concept, I actually see that as a benefit because the naming stays mentally consistent across the app.

Where I do add more specificity is when two components represent different states or workflows of the same concept:

tableActiveProjects
tableArchivedProjects
selectBillingStatus
selectShippingStatus

For me the main goal is:

  • business meaning first
  • avoid generic names like table1 , query2 , selectData
  • only add extra prefixes when they genuinely improve clarity

Especially in larger Retool apps, naming by the actual business/domain concept tends to make maintenance and onboarding much easier over time.

1 Like
4

Thanks @Shawn_Optipath .

Let’s take selectCustomer as an example: I need to use a select that lets my users select customers on multiple pages, but retool doesn’t let me reuse the name on different pages. How would you solve that?

1 Like
5

+1 for the answer @Shawn_Optipath gave.

@dakes I think in this case would be good to add the page name in each variable, if you don't have anything that specifies more each variable. Can't you define it in the global scope?

1 Like
6

I’m probably not using components and pages right, but when I make a local component (let’s take a drawerFrame) global the drawerFrame can’t access data/queries in the local scope. One option would be to throw everything into the global scope, but then why have a local scope?

I have one subset of data on one page, shown in a table component for example. I can’t use a global drawerFrame because the components on the drawerFrame won’t be able to access the data in my (local) table component.

1 Like
7

Usually I add code/variables inside the local scope if they only needs to be used there, but if I will need some information in different pages, I used it in the global scope.

can't you set an aux variable or something to help saving the state of the component and use it where you need?

8

Hmmm, I could, but I think that kinda defeats the purpose. I’m trying to cut down on components and queries I need to keep an eye on. Global variables that might get set by an unknown number of local queries seems like it’d lead to more issues down the line.

1 Like
9

Then, I would create different variables inside each page, because we can't create the variable with the same name, as you said in another message.

10

I think i’ll prepend the page name. Having more moving pieces to keep my eye on is exactly what I’m trying to avoid.

Thank you for your help! :slight_smile:

2 Likes