Hi team,
I got a simple form with a select input. The select is for states. I added the different states as options manually.
The form key is set to the field name in the resource database , also called simply "state".
The value is not populated for this field though the other fields are populated and there is no difference. Is there something special we need to do to automatically set the correct value on the select field ? I am not sure if this is a bug or by design
I can't think of anything special that needs to be done differently for populating selects. I'm sure you've refreshed the app? I have run into situations where selects behave inconsistently when the form data source changes...
The Data Source of the form must contain a property and value that matches the Form data key of the select component ,and a select component option value; both are case-sensitive.
What is the data source for the form? In the screenshot below I'm using table1.selectedSourceRow.
Open debug and review the state of form.initialData. Confirm there is a property and the value of that property matches a value of an option.
a database table - it is the source for the form.
I have a query which sets the entire data of the form once the query is completed, that is , on success.. it simply uses myform.setData()
This works fine and all the fields are populated.. the select input is no different. the value for the state exists on the record and is identical to one of the options in the list, so it is case-sensitive.
example
In my table state field has the value 'VIC', and I have an option in select input with both value and label 'VIC'.. and the form data key is 'state' ..
I dont have a table with the states as you have where a selection on the table will need to change the form data..
also using Debug, the form data already shows the correct value coming from the database table - but the value is not set !!
unless myform.setData() is not the best way to do it, but why would it set all other fields properly and not the select elements .. hmm
Kinda hard to say... but this might be because by default a SQL query returns an object where the properties are a list of the each row's value for each property.
{
"id": [
1
],
"state": [
"tx"
]
}
If you use the builtin query transformer and formatDataAsArray(data) you'll get an array of objects which represent each row.
[
{
"id": 1,
"state": "tx"
}
]
You will have to use the index somewhere to provide just 1 object to the form. You could do this in the success handler, as shown below, or the transformer return formatDataAsArray(data)[0]
All in all I'm not sure this is the best way to accomplish this. Is your query guaranteed to return 1 result? Also, if the query returns 0 rows onSuccess is still going to trigger.
[EDIT] I forgot... you could use a failure conditions to trigger onFailure and show an error message.
1 Like
@matth thanks for your inputs - I did confirm that the issue is related to the query output.. I had a workaround which was using element select setValue() but I had to do it for every select. I'll try your method too .. this makes sense.