Happy to announce Mobiscroll 3.2 with all new controls and big changes for Forms. Providing feedback to users is key to a great user experience. With the two new controls for showing alerts and notifications we are providing the tools for you to do just that.

Showing messages or quickly getting user input was possible with Mobiscroll before, but it was kind of hard and required a lot of plumbing. You had to instantiate a Widget control with custom markup for the message, add custom buttons with custom actions and even add a form. We have solved all this with three utility functions that you can use for showing alerts, confirmation dialogs and prompts.

Alerts

For a message with a title, body and an OK button you can call an alert. You can optionally pass a callback function.

1
2
3
4
5
6
7
8
9

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

Confirmation dialog

Use the confirm dialog in case you need an OK and Cancel button.

1
2
3
4
5
6
7
8
9
10
11

mobiscroll.confirm({
    title: 'Use location service?',
    message: 'Help apps determine location. This means sending anonymous location data, even when no apps are running.',
    okText: 'Agree',
    cancelText: 'Disagree',
    callback: function (res) {
        mobiscroll.toast({
            message: res ? 'Agreed.' : 'Disagreed.'
        });
    }
});

Prompt

Use the prompt for quickly getting text input from the user in a non-disrupting way. Useful for password confirmation.

1
2
3
4
5
6
7
8
9
10
11

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) {
        mobiscroll.toast({
            message: 'The password: ' + value
        });
    }
});

Notifications

We have added Snackbar and Toast for lightweight notification. Both controls provide brief feedback about an operation through a message at the bottom of the screen.

Use Toast for simple notifications like message sent, while the Snackbar is better suited for longer messages with or without actions, like a confirmation that an item has been removed with the option of undoing it.

1
2
3
4
5
6
7
8
9
10
11
12
13

mobiscroll.toast({
    message: 'Message sent'
});
 
mobiscroll.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            //do something
        }
    }
});

Mobiscroll Forms

Probably one of the biggest updates of this release is that we open sourced Mobiscroll Forms, including both new controls – alerts & notifications. Starting with 3.2 you can use Mobiscroll Forms for free in your app or on your website, licensed under Apache 2.0. It received it’s own updated product page that you can check out here.

Everything else that has been shipped with 3.2 is included in the release notes. Updates are available to customers with an active maintenance. Get ready to download the latest version and check out Mobiscroll Forms.