I am building an app where data from a SQL database is used to populate a table. There are various input fields (text, dates, numbers) that the user will input and then write to the database. I also want the user to be able to click a row in the table and use that row's data to populate the input fields so that entries can be edited. I would like to be able to clear the selected row in the table and be left with empty input fields for the user to add a new row.
I tried to set the default value of the fields to something like {{table1.selectedRow.data.reference_number}} but when there is no row selected in the table, the input gives the error: Cannot read properties of undefined. I also tried {{table1.selectedRow.data.reference_number == null ? null : table1.selectedRow.data.reference_number}} but I get the same error. How can I fill the value in the selected row if one is selected, and null if no row is selected?
There are two parts to this answer. To auto populate a form component, you will need to pass in an object to the initial data of the form component with the object keys matching the name of the component you would like to populate:
For instance, the name of the input component in the form is called textInput1, and the key with the same name in the object that I passed into the inital data will populate the form by default.
The second part of the answer is regarding to SQL. You will have to add a transformer to your SQL query to format rows into array of objects.
In this case, the first item returning from the query (at index 0) will be returned as an object form the query, in which you will pass in to your form as the initial data.
To clarify, I am not using a form component. The user inputs are all just stored in containers. This is because there are about 50 input fields across multiple pages and we want a single button to write all of the data to the database. So for the input fields, they have a default value parameter. I want the default value to be the value of that field in the selected row of the table if a row is selected, and null if no row is selected.
I looked into that but there are about 50 fields across several pages so its not a good UI for adding, or even reading lots of data fields. The indented user interaction is to use the table on to search for the row they want to work on, then click it to populate all of the fields so they can make changes. The issue is figuring out how to clear the fields without throwing an error.
You might be able to set all of the fields to null in the container initially, and then when the table row is clicked, you can use an event handler to setValue equal to that row's cell
In my instance, when I click on a row I populate the textInput1 with email and textInput2 with name - both from table5
Interesting, this might be the start to a solution. The issue is that when you clear the row, the last selected row's data is still in the input field. And I don't see a clear selection trigger to reset the value to null. Any ideas?
Great. I had that originally for on select change but then you need to set select row by default to None in the table inspect panel. Glad it’s working for you
