Message Box - Transient

Description

Display a temporary message that can be dismissed using a button or automatically after a period of time.

Discussion

A transient message is a message that is displayed for a short time and then automatically is hidden (unless the user dismisses the message early, by clicking a close button).

Transient messages are used extensively by Google in their applications (for example in the GMail web and mobile applications). In the two images below, the transient messages in the Gmail web and mobile application are shown.

Transient Message in the Gmail Web Application
Transient Message in the Gmail iOS Application

To create a Transient Message in the UX or Grid, define a new Action using Action Javascript and select the Message box - Transient action

The builder is then shown:

Properties that can be set in the builder include:

Property
Description
Message text

The HTML text to display in the transient message

Position

The position of the message. A transient message can have the following positions:

  • top - top, center of the screen
  • top-fill - top of screen (expands to full width of screen - typically used in mobile application)
  • top-left - top left of screen
  • top-right - top right of screen
  • center - center (horizontal and vertical) of screen
  • bottom-left
  • bottom
  • bottom-fill
  • bottom-right
  • dropdown - below another element
  • dropdown-left - below left edge of another element
  • dropdown-right - below right edge of another element
  • inside-existing-transient-message - used when you want to display a transient message in the same window as another transient message. For example, an initial transient message might have the text Working.. and then you might want to replace that message with another message saying Operation complete.
Height

The message window height (in pixels). Leave blank or set to <Default> to use the default height. The default height is just enough to accommodate the message text and any buttons (if any).

Vertical offset

Distance in pixels from the top or bottom of the screen.

Horizontal offset

Distance in pixels from the left or right edge of the screen.

Duration

Time (in milliseconds) before the transient message is automatically closed. Set to -1 to never automatically close the message (user will have to press the close button)

Appearance

Options are Google, Default, Custom. If you select Google, the transient message styling is similar to styling used by Google in their applications. Default styles the transient message based on the currently selected component style (e.g. Alpha, MobBlue, etc.). Custom allows you to specify a CSS class and in-line style for the message window.

Message buttons

Allows you to define one or more buttons to appear in the message body. For each button you can define the Javascript to execute when the button is clicked. You can also specify if the button appears before, or after the message text.

Show animation

Specify if the transient message is animated when it is shown

Hide animation

Specify if the transient message is animated when it is hidden

Variable name

(Optional). Specify that name of a variable that will be set when the transient message is shown. This variable will contain the name of the window in which the transient message is shown. This option is only used if a subsequent transient message is shown with a position of inside-existing-transient-message.

The images below show a transient messages in the UX component using the Google and Default appearance:

Transient message using the Default Appearance (the component style is Alpha)
Same as above message, but using the Google Appearance

The minimum amount of Javascript to display a transient message (using the Default Appearance) is shown below:

{dialog.object}.transientMessage('center','Record was deleted.',
    {
        buttons: [{html: 'Undo', onClick: function(){alert('undo')}}]
    }
)

See Also