It is often useful to display a notification banner (also known as a "toast" or "alert") within your form to provide feedback to the user. These banners can be used to display information, show warnings, or even request confirmation before a user performs a specific action.
The most common scenario for this is when using a Button component configured to run custom JavaScript code. You may want to trigger a banner to let the user know a script has finished running, or if an error occurred during execution.
The tf.notify method
You can trigger a banner to display using the global tf.notify method within your JavaScript code. Team Forms uses the Sonner library under the hood. The tf.notify function is a direct wrapper for this library, meaning you have access to all the styling and functionality available in Sonner.
Examples
Here are several examples of how to use the notify function in your scripts.
1. Basic Information
The simplest way to use the notifier is to pass a string message. This renders a standard notification.
// Display a simple message
tf.notify('Calculation complete');
2. Success and Error States
To visually distinguish between successful actions and failures, you can use the .success and .error methods. These add appropriate icons and coloring to the banner.
// Display a success message
tf.notify.success('Record saved successfully');
// Display an error message with a description
tf.notify.error('Submission Failed', { description: 'Please check your internet connection and try again.' });
3. Action Buttons
You can include an action button within the notification. This is useful for "Undo" actions or asking the user to retry a failed process.
JavaScript
// Example of a banner which requires user action
tf.notify(
"Example user confirm action!",
{
action: {
label: "Confirm",
onClick: () => tf.notify.success("Action Running")
}
}
)
4. Handling Long Running Tasks (Promises)
If you are running an asynchronous operation (like fetching data from an API), tf.notify can handle the loading state automatically using the .promise method.
JavaScript
// A simulated long-running task const myPromise = () => new Promise((resolve) => setTimeout(resolve, 2000)); tf.notify.promise(myPromise, { loading: 'Generating report...', success: (data) => { return `Report has been generated!`; }, error: 'Error generating report', });
Note: Because tf.notify is a wrapper for Sonner, you can refer to the Sonner Documentation for a full list of configuration options, styling, and advanced usage.