Contents

Alerts

Alerts are urgent interruptions that inform the user about a situation. May also collect information from the user. It appears on top of the app's content, and must be manually dismissed before resuming interaction with the app.

Alert

mobiscroll.alert(config)

Description

An alert dialog notifies or warns the user about something. It contains a single button which closes the alert.

Example
mobiscroll.alert({
    title: 'Cellular Data is Turned Off for "Safari"',
    message: 'You can turn on cellular data for this app in Settings.'
});

Parameters

Name Type Default Description
config Object {} Configuration object for the alert dialog with the following possible properties:
  • message:String - The message to present.
  • title:String (Optional) - Title for the dialog.
  • okText:String (Optional) - Text for the button which closes the dialog. If not specified, uses the okText of the language specified in the global settings.
  • callback:Function (Optional) - A function which executes when the dialog is dismissed.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Confirm

mobiscroll.confirm(config)

Description

A confirm dialog is used when it is required to confirm an action. It has two buttons, one of which confirms the action, and the other rejects it.

Example
// Using callback function
mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determinde location. This means sending anonymous location data, even when no apps are running.',
    okText: 'Agree',
    cancelText: 'Disagree',
    callback: function (result) {
        console.log(result ? 'Agreed.' : 'Disagreed.');
    }
});

// Using promise
mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determinde location. This means sending anonymous location data, even when no apps are running.',
    okText: 'Agree',
    cancelText: 'Disagree'
}).then(function (result) {
    console.log(result ? 'Agreed.' : 'Disagreed.');
});

Parameters

Name Type Default Description
config Object {} Configuration object for the confirm dialog with the following possible properties:
  • message:String - The message to present.
  • title:String (Optional) - Title for the dialog.
  • okText:String (Optional) - Text for the button which confirms the dialog. If not specified, uses the okText of the language specified in the global settings.
  • cancelText:String (Optional) - Text for the button which cancels the dialog. If not specified, uses the cancelText of the language specified in the global settings.
  • callback:Function (Optional) - A function which executes when the dialog closes. It receives a boolean parameter which is true, if the alert was confirmed, otherwise false.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Prompt

mobiscroll.prompt(config)

Description

A prompt dialog is used when it is required to get some data from the user, e.g. a password confirmation. It has two buttons, one of which submits the entered data, the other one cancels the dialog.

Example
// Using callback function
mobiscroll.prompt({
    title: 'Sign in to iTunes Store',
    message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
    placeholder: 'Password',
    inputType: 'password',
    callback: function (value) {
        console.log('The password is: ' + value);
    }
});

// Using promise
mobiscroll.prompt({
    title: 'Sign in to iTunes Store',
    message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
    placeholder: 'Password',
    inputType: 'password'
}).then(function (value) {
    console.log('The password is: ' + value);
});

Parameters

Name Type Default Description
config Object {} Configuration object for the prompt dialog with the following possible properties:
  • message:String - The message to present.
  • title:String (Optional) - Title for the dialog.
  • okText:String (Optional) - Text for the button which submits the entered value. If not specified, uses the okText of the language specified in the global settings.
  • cancelText:String (Optional) - Text for the button which cancels the dialog. If not specified, uses the cancelText of the language specified in the global settings.
  • placeholder:String (Optional) - Placeholder text for the displayed input.
  • label:String (Optional) - Label for the displayed input.
  • inputType:String (Optional) - Type of the displayed input.
  • value:String (Optional) - Initial value of the displayed input.
  • callback:Function (Optional) - A function which executes when the dialog closes. It receives a string parameter containing the entered value.

Returns: Promise

A promise which is resolved when the popup is closed.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Notifications

Toast

mobiscroll.toast(config)

Description

Toasts are simple text only notifications informing the user. They should be primarly used to display messages not necessarily related to a user action, such as background synchronization or similar. Toasts don't lock the app's main interface and are automatically dismissed after a while.

Example
mobiscroll.toast({
    message: '39 files synchronized successfully.'
});

Parameters

Name Type Default Description
config Object {} Configuration object for the toast with the following possible properties:
  • message:String - The message to present.
  • duration:Number (Optional) - Display time of the message in milliseconds. The default value is 3000.
  • callback:Function (Optional) - A function which executes when the message hides.

Returns: Promise

A promise which is resolved when the toast hides.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.

Snackbar

mobiscroll.snackbar(config)

Description

Snackbars provide brief feedback after an action through a message at the bottom of the screen. A snackbar may contain an action, such as "Undo" or "Retry". Snackbars don't lock the app's main interface and are automatically dismissed after a while.

Example
mobiscroll.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            console.log('Retrying...');
        }
    }
});

Parameters

Name Type Default Description
config Object {} Configuration object for the snackbar with the following possible properties:
  • message:String - The message to present.
  • duration:Number (Optional) - Display time of the message in milliseconds. The default value is 3000.
  • button:Object (Optional) - Displays an action button on the snackbar. Properties:
    • text:String - Text of the button.
    • action:Function - A function which executes when the button is tapped.
  • callback:Function (Optional) - A function which executes when the message hides.

Returns: Promise

A promise which is resolved when the snackbar hides.

Promises can be used only in browsers supporting it. In browsers without Promise support the return value will be undefined. If you'd like to use the Promise syntax and also support older browsers (IE10, IE11, Android 4.1, 4.2, 4.3 stock browser), please use a polyfill, otherwise use the callback function from the config object.
Preorder available for Ember JS
What you'll get:
- Exclusive Early Beta Access
- Show your interest in the product. Based on the preorders we'll set the development and shipping priorities
- Get access to the full Framework until we ship
- Support and Maintenance is on us until we release the Mobiscroll for Ember
- We believe in delivering great products so if for any reason you are not satisfied, you'll get a full refund