Dynamic swap of selectedOption for inline Select

Alternative topic label: Updating updatedFields values in custom Javascript.

Context:

  • A table widget within an Appsmith application has an Editable column whose “Column Type” is set to “Select”. The table’s “Update Mode” is “Single Row”.
  • The “Computed Value” of the Select column in the table widget is set to:
{{asiRoleDropdown.data.find(x => x.value == currentRow.asi_role_id).label}}
  • The Options of this inline Select widget result from a database SQL SELECT query and include an item that does not appear in the database: “”.
  • When a user clicks on the “” option, a modal dialog appears that allows the user to add to the list of Select options. Upon “Submit,” the associated onClick event calls a SQL INSERT statement to update the database then calls the SQL SELECT that updates the Select widget’s contents.

Problem:

  • The newly created option (the one saved successfully to the database and now appearing among inline Select options) should be the option selected in the row under edit, not “” (the user’s last physical selection).

What I tried:
Variations on the following Javascript in the onClick event for the Submit button in the modal dialog:

{{
(async function(){
	// Commented code isn't achieving the desired effect, so it's disabled.
	// const txt = await inputName.text.trim();
	// await Object.assign(inputName, { inputText: txt, text: txt});
	await asiRoleModalInsert.run();
	await asiRoleDropdown.run();
	// await Object.assign({}, tblStudy.updatedRows[0].updatedFields, {asi_role_id: inputName.text});
	// await showAlert(tblStudy.updatedRows[0].updatedFields["asi_role_id"]);
	await closeModal('modalNewAsiRole');
})()
}}

Request:

  • How can I 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?

Thanks for your kind attention. :slight_smile:

Hello! You can 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. Here is a sample app that demonstrates a similar use case. Let me know if this helps.