How to Create Notifications in Retool

1// Basic notification types:
2
3// Success (green):
4utils.showNotification({
5  title: 'Record saved',
6  description: 'User profile updated successfully.',
7  notificationType: 'success',
8  duration: 3
9});
10
11// Error (red):
12utils.showNotification({
13  title: 'Save failed',
14  description: 'Please check your input and try again.',
15  notificationType: 'error',
16  duration: 5
17});
18
19// Warning (yellow):
20utils.showNotification({
21  title: 'Low inventory',
22  description: 'Stock level below minimum threshold.',
23  notificationType: 'warning',
24  duration: 4
25});
26
27// Info (blue):
28utils.showNotification({
29  title: 'Processing',
30  description: 'Your export is being prepared.',
31  notificationType: 'info',
32  duration: 2
33});

1// Query event handlers in the query editor:
2// Success → Show notification:
3//   Title: 'Saved successfully'
4//   Description: {{ updateUser.data.rowCount + ' record(s) updated' }}
5//   Type: success
6//   Duration: 3
7
8// Failure → Show notification:
9//   Title: 'Error saving'
10//   Description: {{ updateUser.error.message || 'An unexpected error occurred' }}
11//   Type: error
12//   Duration: 5
13
14// OR equivalently in a JS Query wrapper:
15try {
16  await updateUser.trigger();
17  utils.showNotification({
18    title: 'Saved',
19    description: updateUser.data.rowCount + ' record(s) updated.',
20    notificationType: 'success',
21    duration: 3
22  });
23} catch (err) {
24  utils.showNotification({
25    title: 'Save failed',
26    description: err.message || 'Unknown error',
27    notificationType: 'error',
28    duration: 5
29  });
30}

1// After inserting a record, show what was created:
2await createOrderQuery.trigger();
3
4const newOrder = createOrderQuery.data?.[0];
5utils.showNotification({
6  title: 'Order created',
7  description: newOrder
8    ? `Order #${newOrder.order_number} for $${Number(newOrder.total).toFixed(2)} is confirmed.`
9    : 'Order created successfully.',
10  notificationType: 'success',
11  duration: 4
12});
13
14// Show affected row count from UPDATE:
15await updateStatusQuery.trigger();
16const rowsAffected = updateStatusQuery.data?.rowCount || 0;
17utils.showNotification({
18  title: rowsAffected > 0 ? 'Status updated' : 'Nothing to update',
19  description: rowsAffected + ' record(s) updated.',
20  notificationType: rowsAffected > 0 ? 'success' : 'warning',
21  duration: 3
22});

1// JS Query: bulkExportWithNotifications
2
3// Show 'in progress' notification first:
4utils.showNotification({
5  title: 'Export started',
6  description: 'Fetching all records... this may take a moment.',
7  notificationType: 'info',
8  duration: 30  // Long enough to cover the operation
9});
10
11try {
12  // Run the long operation:
13  const result = await getAllRecordsForExport.trigger();
14  const rowCount = result.data?.length || 0;
15
16  // Show completion:
17  utils.showNotification({
18    title: 'Export ready',
19    description: rowCount + ' rows exported successfully.',
20    notificationType: 'success',
21    duration: 4
22  });
23
24  // Trigger the download...
25} catch (err) {
26  utils.showNotification({
27    title: 'Export failed',
28    description: err.message,
29    notificationType: 'error',
30    duration: 5
31  });
32}

1// After a data import, show contextual notification:
2await importCSVData.trigger();
3
4const result = importCSVData.data;
5const inserted = result?.inserted || 0;
6const skipped = result?.skipped || 0;
7const errors = result?.errors || [];
8
9if (errors.length > 0) {
10  utils.showNotification({
11    title: 'Import completed with errors',
12    description: `${inserted} rows imported, ${errors.length} rows failed. Check logs.`,
13    notificationType: 'warning',
14    duration: 6
15  });
16} else if (skipped > 0) {
17  utils.showNotification({
18    title: 'Import complete',
19    description: `${inserted} new rows added. ${skipped} duplicates skipped.`,
20    notificationType: 'info',
21    duration: 4
22  });
23} else {
24  utils.showNotification({
25    title: 'Import successful',
26    description: `All ${inserted} rows imported successfully.`,
27    notificationType: 'success',
28    duration: 3
29  });
30}