Next Item, iterate through a Field and display its text

luminrabbit · 2021-12-21T17:53:57.873Z

I have a text element on the page. I also have a button on the page.
Each time the button is clicked I would like to have the text element display the next fields item (whatever that text item is).

For example the field has these items:
Run
Walk
Jump

If I click on the button once, the text element would display Walk, If instead I clicked the button Twice the text element would display Jump and keep cycling through. with each button click.

Also, I created a custom state on the page called feildIndex (which is a number) then on the button workflow I set state to value index’s fieldIndex +1. Then another text elements with a dynamic index’s fieldIndex and this seems to increment each time I click the button but Im lost on how to connect these to cycle/iterate through a field in the database).

Can anyone assist?

rpetribu · 2021-12-21T18:48:52.511Z

Hi.
It is very simple…

Create a “Custom State” in your page (text type) called “step”;
Link the value of your text field with the custom state, doing this, everytime you update the custom state your text field will display a different text.
Create a Workflow to run when you press the button.

Step 1: Change the custom state “Step” value to “Walk” ONLY WHEN “Step” is Run;
Step 2: Change the custom state “Step” value to “Jump” ONLY WHEN “Step” is Walk;
Step 3: Change the custom state “Step” value to “Run” ONLY WHEN “Step” is Jump;

Create a “On Page Load” workflow

Step 1: Change the custom state “Step” value to “Run”;

Hope it helps!

williamtisdale · 2021-12-21T18:57:21.004Z

I see you have an answer already but I will share my example since I already put it together. I do not believe you can actually cycle through fields completely dynamically, as in you have to hard code into your elements what the fields are and when to specifically display each field.

Here is the example:

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Here is the editor:

Bubble

Bubble Editor - Examples4forum

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

luminrabbit · 2021-12-21T19:02:40.625Z

Hi @rpetribu

I appreciate the reply, do you know of another way to do this dynamically?

I should have mentioned the list could be long. It seems as though I would have to manually enter or change the current step value but what if there were a 1,000 field items or I didn’t know the name of the item?

Maybe I could use your solution in another use case and I do appreciate the response!

luminrabbit · 2021-12-21T19:04:44.262Z

Hi @williamtisdale,

I didn’t see your response, I can’t wait to see your example and thank you!

williamtisdale · 2021-12-21T19:10:47.341Z

If it is a necessity for what you are building then it may be worth it for you to use the plugin route. You can pass an app type (User for example), and a specific User (data source) then write the plugin to list the fields of the App type with Bubbles listProperties function. Once you have all the fields you can then pass an index and set an Exposed State of the field of the data type based on the index. You can write in conditionals to filter out things like unique id, creation date, modified date or anything else you may not need to display. This would be 100% dynamic based on what you passed the plugin and could handle any number of fields.

luminrabbit · 2021-12-21T19:41:07.005Z

Im looking into Plugins right now

I’m surprised there is no simple default way to do this but it is what it is lol

luminrabbit · 2021-12-21T20:17:19.486Z

Woohoooo! I figured it out.

So I have the custom state increasing by 1 each time the button is clicked.

Then I put the text item inside of a group:
Type of content: your data type
Data source: Search for (data type) :item # index’s fieldIndex

The text inside of the group is set to a dynamic field:
Group text holder’s dataType (then which ever column your trying to get)

To limit the custom states number to the field count:
In the workflow for the for the set state, Only When: Search for (dataType) :count > index’s fieldIndex. Thanks @williamtisdale got this from looking at your example (you the man!)

To cycle/iterate the other way duplicate the button and on the workflow Set state:
Element: index (page name)
Custom state: fieldIndex
Value: index’s fieldIndex -1
Only When: index’s fieldIndex > 1

And I cant believe it works yay!