diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Block-Busy.md b/docs/en/UI/AspNetCore/JavaScript-API/Block-Busy.md new file mode 100644 index 0000000000..943a651432 --- /dev/null +++ b/docs/en/UI/AspNetCore/JavaScript-API/Block-Busy.md @@ -0,0 +1,56 @@ +# ASP.NET Core MVC / Razor Pages UI: JavaScript UI Block/Busy API + +UI Block API disables (blocks) the page or a part of the page. + +## Basic Usage + +**Example: Block (disable) the complete page** + +````js +abp.ui.block(); +```` + +**Example: Block (disable) an HTML element** + +````js +abp.ui.block('#MyContainer'); +```` + +**Example: Enables the previously blocked element or page:** + +````js +abp.ui.unblock(); +```` + +## Options + +`abp.ui.block()` method can get an options object which may contain the following fields: + +* `elm`: An optional selector to find the element to be blocked (e.g. `#MyContainerId`). If not provided, the entire page is blocked. The selector can also be directly passed to the `block()` method as shown above. +* `busy`: Set to `true` to show a progress indicator on the blocked area. +* `promise`: A promise object with `always` or `finally` callbacks. This can be helpful if you want to automatically unblock the blocked area when a deferred operation completes. + +**Example: Block an element with busy indicator** + +````js +abp.ui.block({ + elm: '#MySection', + busy: true +}); +```` + +The resulting UI will look like below: + +![ui-busy](../../../images/ui-busy.png) + +## setBusy + +`abp.ui.setBusy(...)` and `abp.ui.clearBusy()` are shortcut functions if you want to use the block with `busy` option. + +**Example: Block with busy** + +````js +abp.ui.setBusy('#MySection'); +```` + +Then you can use `abp.ui.clearBusy();` to re-enable the busy area/page. \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Index.md b/docs/en/UI/AspNetCore/JavaScript-API/Index.md index 2ce185c6e3..3473140392 100644 --- a/docs/en/UI/AspNetCore/JavaScript-API/Index.md +++ b/docs/en/UI/AspNetCore/JavaScript-API/Index.md @@ -4,18 +4,16 @@ ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applica ## APIs -* [abp.ajax](Ajax.md) -* [abp.auth](Auth.md) -* [abp.currentUser](CurrentUser.md) -* [abp.dom](DOM.md) -* [abp.event](Events.md) -* [abp.features](Features.md) -* [abp.localization](Localization.md) -* abp.log -* [abp.message](Message.md) -* [abp.notify](Notify.md) -* abp.security -* [abp.setting](Settings.md) -* abp.ui -* abp.utils -* abp.ResourceLoader \ No newline at end of file +* [AJAX](Ajax.md) +* [Auth](Auth.md) +* [CurrentUser](CurrentUser.md) +* [DOM](DOM.md) +* [Events](Events.md) +* [Features](Features.md) +* [Localization](Localization.md) +* [Logging](Logging.md) +* [ResourceLoader](ResourceLoader.md) +* [Settings](Settings.md) +* [UI Block/Busy](Block-Busy.md) +* [UI Message](Message.md) +* [UI Notification](Notify.md) \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Logging.md b/docs/en/UI/AspNetCore/JavaScript-API/Logging.md index 9fe48f22da..a46203b019 100644 --- a/docs/en/UI/AspNetCore/JavaScript-API/Logging.md +++ b/docs/en/UI/AspNetCore/JavaScript-API/Logging.md @@ -1,3 +1,50 @@ # ASP.NET Core MVC / Razor Pages UI: JavaScript Logging API -TODO \ No newline at end of file +`abp.log` API is used to write simple logs in the client side. + +> The logs are written to console, using the `console.log`, by default. + +> This document is for simple client side logging. See the [Logging](../../../Logging.md) document for server side logging system. + +## Basic Usage + +Use one of the `abp.log.xxx(...)` methods based on the severity of your log message. + +````js +abp.log.debug("Some debug log here..."); //Logging a simple debug message +abp.log.info({ name: "john", age: 42 }); //Logging an object as an information log +abp.log.warn("A warning message"); //Logging a warning message +abp.log.error('An error happens...'); //Error message +abp.log.fatal('Network connection has gone away!'); //Fatal error +```` + +## Log Levels + +There are 5 levels for a log message: + +* DEBUG = 1 +* INFO = 2 +* WARN = 3 +* ERROR = 4 +* FATAL = 5 + +These are defined in the `abp.log.levels` object (like `abp.log.levels.WARN`). + +### Changing the Current Log Level + +You can control the log level as shown below: + +````js +abp.log.level = abp.log.levels.WARN; +```` + +Default log level is `DEBUG`. + +### Logging with Specifying the Level + +Instead of calling `abp.log.info(...)` function, you can use the `abp.log.log` by specifying the log level as a parameter: + +````js +abp.log.log("log message...", abp.log.levels.INFO); +```` + diff --git a/docs/en/UI/AspNetCore/JavaScript-API/ResourceLoader.md b/docs/en/UI/AspNetCore/JavaScript-API/ResourceLoader.md new file mode 100644 index 0000000000..1e1c2f9d6d --- /dev/null +++ b/docs/en/UI/AspNetCore/JavaScript-API/ResourceLoader.md @@ -0,0 +1,40 @@ +# ASP.NET Core MVC / Razor Pages UI: JavaScript Resource Loader API + +`abp.ResourceLoader` is a service that can load a JavaScript or CSS file on demand. It guarantees to load the file only once even if you request multiple times. + +## Loading Script Files + +`abp.ResourceLoader.loadScript(...)` function **loads** a JavaScript file from the server and **executes** it. + +**Example: Load a JavaScript file** + +````js +abp.ResourceLoader.loadScript('/Pages/my-script.js'); +```` + +### Parameters + +`loadScript` function can get three parameters; + +* `url` (required, `string`): The URL of the script file to be loaded. +* `loadCallback` (optional, `function`): A callback function that is called once the script is loaded & executed. In this callback you can safely use the code in the script file. This callback is called even if the file was loaded before. +* `failCallback` (optional, `function`): A callback function that is called if loading the script fails. + +**Example: Provide the `loadCallback` argument** + +```` +abp.ResourceLoader.loadScript('/Pages/my-script.js', function() { + console.log('successfully loaded :)'); +}); +```` + +## Loading Style Files + +`abp.ResourceLoader.loadStyle(...)` function adds a `link` element to the `head` of the document for the given URL, so the CSS file is automatically loaded by the browser. + +**Example: Load a CSS file** + +````js +abp.ResourceLoader.loadStyle('/Pages/my-styles.css'); +```` + diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 69d79d061a..2409bbc4fc 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -491,6 +491,10 @@ "text": "Notify", "path": "UI/AspNetCore/JavaScript-API/Notify.md" }, + { + "text": "Block/Busy", + "path": "UI/AspNetCore/JavaScript-API/Block-Busy.md" + }, { "text": "Events", "path": "UI/AspNetCore/JavaScript-API/Events.md" @@ -498,6 +502,14 @@ { "text": "DOM", "path": "UI/AspNetCore/JavaScript-API/DOM.md" + }, + { + "text": "Logging", + "path": "UI/AspNetCore/JavaScript-API/Logging.md" + }, + { + "text": "Resource Loader", + "path": "UI/AspNetCore/JavaScript-API/ResourceLoader.md" } ] }, diff --git a/docs/en/images/ui-busy.png b/docs/en/images/ui-busy.png new file mode 100644 index 0000000000..63a1d7d74a Binary files /dev/null and b/docs/en/images/ui-busy.png differ