Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 52 additions & 1 deletion docs/en/framework/ui/mvc-razor-pages/javascript-api/message.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,58 @@ abp.message.confirm(
});
````

## Prompt Message

`abp.message.prompt(...)` can be used to get a text (or other input) from the user.

Simple usage:
```js
abp.message.prompt('Please enter a name:', (value)=> console.log('Entered name:', value));
```

**Example (then):**

````js
let options = { title: "Name Change" ,icon: "info", inputValue: "John Doe"};
abp.message.prompt('Enter a new name to change your name', options)
.then(function(value){
if (value) {
console.log('Entered name:', value);
}
});
````

**Example (await):**

````js
(async function(){
let options = { title: "Email Registration" ,icon: "info", input: "email"};
const email = await abp.message.prompt('Enter your email:', options);
if (email) {
console.log('Entered email:', email);
}
})();
````

![js-message-prompt](../../../../images/js-message-prompt.png)

### The Return Value

The return value of the `abp.message.prompt(...)` function is a promise that resolves to the entered value (`string`) or `null` if the dialog is canceled/dismissed.

### Parameters

`abp.message.prompt(...)` function has the following parameters:

* `message`: A message (`string`) to show to the user.
* `titleOrOptionsOrCallback` (optional):
* a `string` title, or
* an `object` containing SweetAlert options (e.g., `input`, `inputAttributes`, `inputPlaceholder`), or
* a `function` callback that receives the resulting value (or `null`).
* `callback` (optional): If you've passed a title as the second parameter, you can pass your callback function as the 3rd parameter.

Passing a callback function is an alternative to using the returned promise.

## SweetAlert Configuration

The Message API is implemented using the [SweetAlert](https://sweetalert.js.org/) library by default. If you want to change its configuration, you can set the options in the `abp.libs.sweetAlert.config` object. The default configuration object is shown below:
Expand Down Expand Up @@ -125,4 +177,3 @@ abp.libs.sweetAlert.config.warn.icon = 'error';
````

See the [SweetAlert document](https://sweetalert.js.org/) for all the configuration options.

Binary file added docs/en/images/js-message-prompt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ var abp = abp || {};
title: 'Are you sure?',
showCancelButton: true,
reverseButtons: true
},
prompt: {
icon: 'question',
input: 'text',
showCancelButton: true,
reverseButtons: true
}
}
};
Expand Down Expand Up @@ -99,6 +105,36 @@ var abp = abp || {};
});
};

abp.message.prompt = function (message, titleOrOptionsOrCallback, callback) {

var userOpts = {
html: abp.utils.htmlEscape(message).replace(/\n/g, '<br>')
};

if ($.isFunction(titleOrOptionsOrCallback)) {
callback = titleOrOptionsOrCallback;
} else if (typeof titleOrOptionsOrCallback === 'string') {
userOpts.title = titleOrOptionsOrCallback;
} else if ($.isPlainObject(titleOrOptionsOrCallback)) {
userOpts = $.extend(userOpts, titleOrOptionsOrCallback);
}

var opts = $.extend(
{},
abp.libs.sweetAlert.config['default'],
abp.libs.sweetAlert.config.prompt,
userOpts
);

return $.Deferred(function ($dfd) {
Swal.fire(opts).then(function (result) {
var value = result && result.isConfirmed ? result.value : null;
callback && callback(value);
$dfd.resolve(value);
});
});
};

abp.event.on('abp.configurationInitialized', function () {
var l = abp.localization.getResource('AbpUi');

Expand Down