I am trying to update a Select option in a table widget within my Appsmith application. When a user creates a new option via a modal dialog during a Single Row edit, I want it to become the selected option in the table widget row under edit. I have tried using Javascript in the onClick event for the Submit button, but I am not achieving the desired effect. How can I ensure that the newly created Select item becomes the selectedOption in the row under edit?
The solution to the problem is to use the storeValue() method to store the new item to Appsmith store and use it in the Default Selected Value property of the Select widget. This can be done by calling storeValue() in the onClick event of the Submit button in the modal dialog.
For example:
{{
(async function(){
const txt = await inputName.text.trim(); // get the new item entered by the user
await storeValue("newAsiRole", txt); // store the new item in the Appsmith store
await asiRoleModalInsert.run(); // run the SQL INSERT statement to update the database
await asiRoleDropdown.run(); // run the SQL SELECT statement to update the Select widget's options
await closeModal('modalNewAsiRole'); // close the modal dialog
// set the Default Selected Value property of the Select widget to the new item
await Object.assign({}, tblStudy.updatedRows[0].updatedFields, {asi_role_id: txt});
})()
}}
Then, in the Computed Value of the Select column in the table widget, use the following code to set the Default Selected Value to the value stored in the Appsmith store:
{{asiRoleDropdown.data.find(x => x.value == currentRow.asi_role_id || x.value == $store.newAsiRole)?.value}}
This code looks for the value of the current row's asi_role_id or the new item stored in the Appsmith store ($store.newAsiRole) in the Select widget's options. If found, it sets that as the Default Selected Value.
This should ensure that the Select item added by the user via a modal dialog during a Single Row edit becomes the selectedOption in the table widget row under edit.