Being DRY with custom states


I’m working on a sidebar which buttons change colour from grey to black when clicked and scroll to a title in the same page.

I’d like to DRY up the process because for now I have 4 workflows leading to the same thing:

  • Set a state “selected” of the button to a boolean “yes”
  • Set all other state of buttons to “no”
  • Scroll to the title.

Any ideas ?

Hi Max… I’m a little confused about why would you want to hide the buttons? A screenshot of the actual design will be helpful.

I don’t want to hide the buttons, just change their colour so they look selected
Capture d’écran du 2022-03-14 21-34-29

Oh okay. I see it now. If you use a custom state on the page (instead of 4 custom states on each of the button), that will simplify the things and make the a little process faster.

  1. Create a custom state on the page element, of type Text. Name it whatever you like, I’ll call it “Section”.
  2. When each button is clicked, set the value of page’s Section (custom state) to the text in the button. For example, when Intro is pressed, set the value of custom state to “Intro”.
  3. In the button’s coditionals, add a new condition:
    When page’s Section is “Intro”
    ------> font color = color of your choice
    ------> This button is disabled = checked (optional)

This will reduce the workflow step by 3 setps for each button. Once you have it setup for one button, it’s easy to copy paste and change the “Intro” value to the text of the next button.

You can use the name Selected for the custom state, as you have in your original workflows. It’s just it will be one custom state, and preferably on the page element. Having it on the page element makes it easier to access it quickly.
Also, you do not need to explicitly use the button text as the value in workflow or conditional, it can be any value as long as it matches in the workflow and the conditional for that button.

And, apart from this one action, you can also add any other actions like you normally would. For example, scrolling to a section on the page, etc.

Thank you I’ll try that but it comes close to what I was thinking of doing: putting states in variable in a hidden group to pass it along.

Do you think we could DRY it up even more ^^ ?
I have this side bar on 5 different pages. Do you think backend workflow could help in this situations ?

1 Like

I don’t think backend workflows work with custom states.

Also, when building with Bubble you also have to strike a balance between performance + DRY or repeat, and complexity of the app.

If the gain is minimal and complexity increases multifold, then I’d definitely avoid such an approach. What I build, in future I must maintain and improve it as well. I personally don’t like to spend hours figuring out how I did something that didn’t actually make a phenomenal gain in performance (this has actually happened to me in my early days) :slight_smile:

If you have the exact same side bar (same text, same sections, etc) on each of the pages, then you can save it as a re-usable element and insert on each page.

If the text, or section names, etc are different then right click on the whole sidebar (the container group), select “Copy with workflows” from the dropdown menu, and on the target page right click where you want to paste it and select “Paste with Workflows”. This is actually preferred way because this way you can edit each of the sidebars without breaking the other ones.

Alright I get it thanks.
If you care to follow up on the subject of DRY things up, I’ll post a new subject now on the forum that I can’t figure out and adds tons of repetitive workflows.

Thank you anyway :slight_smile:

1 Like

If you use a custom workflow you can create your workflow steps there and then you just trigger that custom workflow from a button click

So for tab style selections I will have a group, the group type is set to text and then I either hard type the text or I will use a RG and an option set.

Then within the group I place a text element and set the value to ‘parent group’s text’, then the custom workflow’s type of thing will be text and the step is usually ‘set state of page’ (add any other relevant steps that get repeated here too) and the value will be ‘current workflow’s text’ - you can then trigger the custom workflow when the group is clicked and feed in value ‘parent group’s text’ etc.

1 Like