Complete the MVC UI JavaScript message API.

docs/en/UI/AspNetCore/JavaScript-API/Index.md

@@ -1,6 +1,6 @@
 # JavaScript API
 
-ABP provides some JavaScript APIs for ASP.NET Core MVC / Razor Pages applications. They can be used to perform some common application requirements in the client side.
+ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applications. They can be used to perform common application requirements easily in the client side and integrate to the server side.
 
 ## APIs
 
@@ -12,6 +12,7 @@ ABP provides some JavaScript APIs for ASP.NET Core MVC / Razor Pages application
 * abp.features
 * abp.localization
 * abp.log
+* [abp.message](Message.md)
 * abp.ModalManager
 * abp.notify
 * abp.security

docs/en/UI/AspNetCore/JavaScript-API/Message.md

@@ -1,3 +1,126 @@
 # ASP.NET Core MVC / Razor Pages UI: JavaScript Message API
 
-TODO
+Message API is used to show nice looking messages to the user as a blocking dialog. Message API is an abstraction provided by the ABP Framework and implemented using the [SweetAlert2](https://sweetalert2.github.io/) library by default.
+
+## Quick Example
+
+Use `abp.message.success(...)` function to show a success message:
+
+````js
+abp.message.success('Your changes have been successfully saved!', 'Congratulations');
+````
+
+It will show a dialog on the UI:
+
+![js-message-success](../../../images/js-message-success.png)
+
+## Informative Messages
+
+There are four types of informative message functions:
+
+* `abp.message.info(...)`
+* `abp.message.success(...)`
+* `abp.message.warn(...)`
+* `abp.message.error(...)`
+
+All these methods get two parameters:
+
+* `message`: The message (`string`) to be shown.
+* `title`: An optional (`string`) title.
+
+**Example: Show an error message**
+
+````js
+abp.message.error('Your credit card number is not valid!');
+````
+
+![js-message-error](../../../images/js-message-error.png)
+
+## Confirmation Message
+
+`abp.message.confirm(...)` function can be used to get a confirmation from the user.
+
+**Example**
+
+Use the following code to get a confirmation result from the user:
+
+````js
+abp.message.confirm('Are you sure to delete the "admin" role?')
+.then(function(confirmed){
+  if(confirmed){
+    console.log('TODO: deleting the role...');
+  }
+});
+````
+
+The resulting UI will be like shown below:
+
+![js-message-confirm](../../../images/js-message-confirm.png)
+
+If user has clicked the `Yes` button, the `confirmed` argument in the `then` callback function will be `true`.
+
+> "*Are you sure?*" is the default title and you can override it.
+
+### The Return Value
+
+The return value of the `abp.message.confirm(...)` function is a promise, so you can chain a `then` callback as shown above.
+
+### Parameters
+
+`abp.message.confirm(...)` function has the following parameters:
+
+* `message`: A message (string) to show to the user.
+* `titleOrCallback` (optional): A title or a callback function. If you supply a string, it is shown as the title. If you supply a callback function (that gets a `bool` parameter) then it's called with the result.
+* `callback` (optional): If you've passes a title to the second parameter, you can pass your callback function as the 3rd parameter.
+
+Passing a callback function is an alternative to the `then` callback shown above.
+
+**Example: Providing all the parameters and getting result with the callback function**
+
+````js
+abp.message.confirm(
+  'Are you sure to delete the "admin" role?',
+  'Be careful!',
+  function(confirmed){
+    if(confirmed){
+      console.log('TODO: deleting the role...');
+    }
+  });
+````
+
+## SweetAlert Configuration
+
+The Message API is implemented using the [SweetAlert2](https://sweetalert2.github.io/) 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:
+
+````js
+{
+    'default': {
+    },
+    info: {
+        icon: 'info'
+    },
+    success: {
+        icon: 'success'
+    },
+    warn: {
+        icon: 'warning'
+    },
+    error: {
+        icon: 'error'
+    },
+    confirm: {
+        icon: 'warning',
+        title: 'Are you sure?',
+        buttons: ['Cancel', 'Yes']
+    }
+}
+````
+
+So, if you want to set the `warn` icon, you can set it like:
+
+````js
+abp.libs.sweetAlert.config.warn.icon = 'error';
+````
+
+See the [SweetAlert document](https://sweetalert2.github.io/) for all the configuration options.
+