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.
- I can’t figure out how to actually set the value of the text input so I’m using default value.
- I can’t set the selected row on the table so the table and form only sync in one direction.
- 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.