How to Create Modal Dialogs in Retool

1// Button click event handler (Inspector → Interaction):
2// Event: Click
3// Action: Control component → editModal → open
4
5// Table row action button configuration:
6// In Table Inspector → Interaction → Row actions
7// Add button: label 'Edit', onClick → Control component → editModal → open
8
9// Open from a JS Query:
10modal1.open();
11// Or with additional context:
12await selectedRecord.setValue(table1.selectedRow.data);
13modal1.open();
14
15// Open a Drawer from the right side (same API):
16drawer1.open();

1// Default Value expressions for fields inside editModal:
2
3// nameInput Default Value:
4{{ table1.selectedRow.data.full_name }}
5
6// emailInput Default Value:
7{{ table1.selectedRow.data.email }}
8
9// statusSelect Default Value:
10{{ table1.selectedRow.data.status }}
11
12// createdAtText Value (read-only display):
13{{ new Date(table1.selectedRow.data.created_at).toLocaleDateString() }}
14
15// Hidden ID field (invisible, but accessible in form.data):
16// Add a Number Input named recordIdInput
17// Default Value: {{ table1.selectedRow.data.id }}
18// Hidden: true (in Layout section)

1// JS Query: updateRecord
2// Trigger: Save button click
3
4const isValid = editForm.validate();
5if (!isValid) {
6  utils.showNotification({
7    title: 'Please fix the errors',
8    notificationType: 'warning',
9  });
10  return;
11}
12
13const data = editForm.data;
14
15try {
16  await updateCustomer.trigger({
17    additionalScope: {
18      id: data.recordIdInput,
19      fullName: data.nameInput,
20      email: data.emailInput,
21      status: data.statusSelect,
22    }
23  });
24
25  utils.showNotification({
26    title: 'Saved',
27    description: `${data.nameInput} updated successfully.`,
28    notificationType: 'success',
29  });
30
31  editModal.close();
32  await getCustomers.trigger(); // Refresh the table
33
34} catch (err) {
35  utils.showNotification({
36    title: 'Save failed',
37    description: err.message,
38    notificationType: 'error',
39  });
40  throw err;
41}

1// deleteConfirmModal content:
2// Text component: 'Are you sure you want to delete {{ table1.selectedRow.data.full_name }}?\nThis action cannot be undone.'
3
4// Delete button event handler:
5// Click → Trigger query → deleteRecord
6
7// JS Query: deleteRecord
8try {
9  await deleteCustomer.trigger({
10    additionalScope: { id: table1.selectedRow.data.id }
11  });
12
13  utils.showNotification({
14    title: 'Deleted',
15    description: `${table1.selectedRow.data.full_name} has been removed.`,
16    notificationType: 'success',
17  });
18
19  deleteConfirmModal.close();
20  await getCustomers.trigger();
21
22} catch (err) {
23  utils.showNotification({
24    title: 'Delete failed',
25    description: err.message,
26    notificationType: 'error',
27  });
28  throw err;
29}
30
31// Cancel button event handler:
32// Click → Control component → deleteConfirmModal → close

1// JS Query: openCreateModal
2// Trigger: 'New Customer' button click
3
4// Reset the form before opening
5createForm.reset();
6
7// Clear any pre-filled values from defaults
8await createForm.setData({
9  nameInput: '',
10  emailInput: '',
11  statusSelect: 'active', // sensible default for new records
12  roleSelect: '',
13});
14
15// Open the modal
16createModal.open();
17
18// createModal save button JS Query:
19// JS Query: createRecord
20const data = createForm.data;
21const isValid = createForm.validate();
22
23if (!isValid) return;
24
25await insertCustomer.trigger({
26  additionalScope: {
27    fullName: data.nameInput,
28    email: data.emailInput,
29    status: data.statusSelect,
30    role: data.roleSelect,
31  }
32});
33
34utils.showNotification({ title: 'Customer created', notificationType: 'success' });
35createModal.close();
36await getCustomers.trigger();