Using a form rather than a table for view data and navigation

New to Retool, climbing the learning curve now.

Many times I prefer to use a form to navigate records rather than a table. Each form has a single record with next/prev/first/last buttons. The form is read only with a switch to make it editable.

I can’t find any examples of how to do this - anyone have advice for me?

Thanks - Brad

I’ve got this part way figure out. Here is what I have so far:

First off I need a record pointer so I created a temp state var called sourceRowID (my table name is Source) and initialize it to 1. Then I create a create a query that gets the row count of the table. I create a JS query that increments sourceRowID but checks to make sure it is not past the end of the data set using that row count query:

if (sourceRowID.value < qrySourceCount.data.count['0']) {
   sourceRowID.setValue(parseInt(sourceRowID.value) + 1);
 }

I make another JS query to decrement sourceRowID:

if (sourceRowID.value > 1) {
   sourceRowID.setValue(parseInt(sourceRowID.value) - 1);
 }

I create two buttons labeled “Prev” and “Next” and assign them to the queries.

I then add my form elements and set the values using the Default Value property like this:

{{qrySources.data.sourcename[sourceRowID.value - 1]}}

Adding first and last buttons should be self explanatory at this point.

To up the complexity a bit, I also added a table from the same query so the user could browse however they wished. I added this JS Query to the Row Selected trigger of the table which moves the form to the selected row:

sourceRowID.setValue(table.selectedRow.data.row_number);

I should also point out that I added a sequential number field to the query like so which allows me to set the correct data pointer no matter the current sort order of the table:

select *, ROW_NUMBER () OVER (ORDER BY state, sourcename ) from "source"

Three major flaws, in order of importance, I see in this strategy so far.

  1. I can’t figure out how to actually set the value of the text input so I’m using default value.
  2. I can’t set the selected row on the table so the table and form only sync in one direction.
  3. I would like to set the form to read only with a button to enable editing.

This type of form navigation was very popular in databases like Access, FoxPro, Alpha 5 which were used by internal devs and power users to do exactly what Retool is trying to do, just in the browser rather then the desktop.

  • Brad
1 Like

Hi Brad! Welcome to the community! :sunglasses:

Thanks for sharing! Sounds like you’re off to a good start. Hopefully these answers can get you a little further:

  1. You can programmatically set the value of a text input field by using the .setValue() function, as seen here:

  2. Similarly, there is a function to set the selected row of a table (uses the index value):

  3. Most fields used inside of a form will have a Disable when True field which can be programmatically set to enable/disable inputs. The value of a toggle component can then be used to control this input. Here’s an example of a text field who’s input is enabled/disabled based on the value of a toggle component:

Hopefully this helps move things forward!

1 Like

Ben, thanks for the welcome.

For a very long time I have been looking for something that allows me to easily build powerful web based database front ends, but still allow me to have my data stored where I want, like I used to do with Access on the desktop. I have been disappointed time and time again by complexity, time and feature weakness. Retool comes closer than I have yet seen, so expectations are high! I will probably overload your Feature Requests forum.

Thanks for the tips. The problem with setValue() though is that property is for the Text component, not the Text Input component. And I don’t see a clean way to get to the rendered input from the Dom so I can change it there.

  • Brad

The setValue() function should be available for both text and text input components. Although there isn’t a GUI input to update the value of the input component, you can call this function inside of a JS Code Query in order to change the text value!

That function was not available when I tried to use it in JS. I just tried again because you insisted it exists and well, it does. Don’t know what I was doing before. Using the Default Value GUI input is actually working quite well, but now I’ll consider refactoring where I fill the values.

BTW, I now have linked subforms and subtables (and sub sub tables) working in my app and I needed only a little extra wiring to get it working. :smiley: One downside is that the component UIs are all very heavy, so trying to fit First, Prev, Next, Last and record counters takes up a lot of screen real estate and there is no room for any button text to show up. I have attached a screenshot. Any suggestions?

1 Like