UI APIs

showToast / hideToast

Display and dismiss a toast notification with optional icon.

Overview

my.showToast displays a toast notification that automatically disappears after a specified duration. Toasts are non-blocking notifications used for brief feedback messages. my.hideToast manually dismisses the toast before its duration expires.

Toast notifications are lightweight and non-intrusive, making them ideal for success messages, status updates, and brief feedback that doesn't require user interaction.

my.showToast

Show the toast dialog, which disappears with the specified duration.

Sample Code

my.showToast({
  type: 'success',
  content: 'Success',
  duration: 3000,
  success: () => {
    my.alert({
      title: 'toast is missing',
    });
  },
});

Parameters

Property	Type	Required	Description
`content`	`String`	No	Text content.
`type`	`String`	No	Toast type, showing the related icon, none by default. Supporting `success`/`fail`/`exception`/`none`. If it is `exception`, `content` is mandatory.
`duration`	`Number`	No	Displaying duration, in ms, 2000 by default.
`success`	`Function`	No	Callback function upon call success.
`fail`	`Function`	No	Callback function upon call failure.
`complete`	`Function`	No	Callback function upon call completion (to be executed upon either call success or failure).

my.hideToast

Hide the toast dialog.

Sample Code

my.hideToast()

Parameters

Property	Type	Required	Description
`success`	`Function`	No	The callback function for a successful API call.
`fail`	`Function`	No	The callback function for a failed API call.
`complete`	`Function`	No	The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

Toast Types

The type parameter controls the icon displayed with the toast:

success - Shows a success checkmark icon
fail - Shows a failure/error icon
exception - Shows an exception icon (requires content to be specified)
none - No icon, text only

Usage Notes

Auto-dismiss: Toasts automatically disappear after the duration (default: 2000ms)
Manual dismiss: Call my.hideToast() to dismiss a toast before its duration expires
Non-blocking: Unlike loading dialogs, toasts don't block user interaction
Type requirement: When using type: 'exception', the content parameter is mandatory
Best practices: Keep toast messages brief and use appropriate icons for the message type

Complete Examples

Success Message

my.showToast({
  type: 'success',
  content: 'Saved successfully',
  duration: 2000,
});

Error Message

my.showToast({
  type: 'fail',
  content: 'Failed to save',
  duration: 3000,
});

Exception with Manual Dismiss

my.showToast({
  type: 'exception',
  content: 'Network error occurred',
  duration: 5000,
});

// Manually hide after 2 seconds
setTimeout(() => {
  my.hideToast();
}, 2000);

Text-Only Toast

my.showToast({
  type: 'none',
  content: 'Processing your request',
  duration: 2000,
});

With Success Callback

my.showToast({
  type: 'success',
  content: 'Operation completed',
  duration: 2000,
  success: () => {
    console.log('Toast displayed');
    // Navigate or perform next action
  },
});

Form Submission Example

function submitForm() {
  my.showLoading({
    content: 'Submitting...',
  });

  // Submit form
  fetch('/api/submit', {
    method: 'POST',
    body: JSON.stringify(formData),
  })
    .then(response => {
      my.hideLoading();

      if (response.ok) {
        my.showToast({
          type: 'success',
          content: 'Form submitted successfully',
          duration: 2000,
        });
      } else {
        my.showToast({
          type: 'fail',
          content: 'Submission failed',
          duration: 3000,
        });
      }
    })
    .catch(error => {
      my.hideLoading();
      my.showToast({
        type: 'exception',
        content: 'Network error',
        duration: 3000,
      });
    });
}

my.showLoading / my.hideLoading - Loading indicator
my.alert - Alert dialog

showLoading / hideLoading

Display and dismiss a loading indicator dialog.

choosePhoneContact

Select a phone number from the device's contact directory.