diff --git a/docs/en/framework/ui/mvc-razor-pages/javascript-api/message.md b/docs/en/framework/ui/mvc-razor-pages/javascript-api/message.md index ab9bf084df..72cd13f631 100644 --- a/docs/en/framework/ui/mvc-razor-pages/javascript-api/message.md +++ b/docs/en/framework/ui/mvc-razor-pages/javascript-api/message.md @@ -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: @@ -125,4 +177,3 @@ abp.libs.sweetAlert.config.warn.icon = 'error'; ```` See the [SweetAlert document](https://sweetalert.js.org/) for all the configuration options. - diff --git a/docs/en/images/js-message-prompt.png b/docs/en/images/js-message-prompt.png new file mode 100644 index 0000000000..631e9791af Binary files /dev/null and b/docs/en/images/js-message-prompt.png differ diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js index 63f514b4c4..19759d3fa0 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js +++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js @@ -29,6 +29,12 @@ var abp = abp || {}; title: 'Are you sure?', showCancelButton: true, reverseButtons: true + }, + prompt: { + icon: 'question', + input: 'text', + showCancelButton: true, + reverseButtons: true } } }; @@ -92,13 +98,43 @@ var abp = abp || {}; ); return $.Deferred(function ($dfd) { - Swal.fire(opts).then(result => { + Swal.fire(opts).then(result => { callback && callback(result.value); $dfd.resolve(result.value); }) }); }; + abp.message.prompt = function (message, titleOrOptionsOrCallback, callback) { + + var userOpts = { + html: abp.utils.htmlEscape(message).replace(/\n/g, '
') + }; + + 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'); diff --git a/npm/packs/core/src/abp.js b/npm/packs/core/src/abp.js index 9da0acbafe..5ad66cabd6 100644 --- a/npm/packs/core/src/abp.js +++ b/npm/packs/core/src/abp.js @@ -340,6 +340,17 @@ var abp = abp || {}; callback && callback(result); }; + abp.message.prompt = function (message, titleOrOptionsOrCallback, callback) { + abp.log.warn('abp.message.prompt is not properly implemented!'); + + if (titleOrOptionsOrCallback && !(typeof titleOrOptionsOrCallback == 'string')) { + callback = titleOrOptionsOrCallback; + } + + var result = prompt(message); + callback && callback(result); + }; + /* UI *******************************************************/ abp.ui = abp.ui || {};