Single record view with prev and next button to scroll

Hello folks,
I am seeking help on my simple use case. I want to fetch records from a table and show them one at a time in respective text and image component. Not sure how to move back and forth between the rows by clicking on previous and next button. Please advise!. Thanks in advance for your help!

Hi @Harry_K, welcome to the forum! :wave:
This is something we can totally do with Retool. :hammer_and_pick:\

First, here is our Quickstart doc. It touches on most of what we'll build.

Step 1: Use a Text and an Image components that will render data from the table. Add two buttons below for previous and next records.

Step 2: Create the Resource query that will get the data from the table.

Step 3: Transform the results of the query to an array.

Step 4:

Create a state variable:

With an initial value of 0:


Step 5:
Create a JS transformer to select the correct record from the response of the query:

Step 6:
Add and event handler to the previous and next buttons to make updates to this state variable:


Add some logic to the previous button to not decrease the state variable below 0:

Note: You could do the same for the Next button to not go past the number of rows in your table.

Step 7: Connect your text and images components to the data that comes from the Transformer we created.

Here is the example for text:


And for image:


We should have a functioning App at this point! :sunglasses:

The only trade off is that there is no current way to place the buttons side by side on Mobile apps. I hope that is not a deal breaker. We could set different colors to them if we would like.

Let us know if you have any questions.

Fantastic! Thanks Paulo for a detailed answer... highly appreciated!

You are welcome! :slightly_smiling_face: