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 281fa4726c..a41b57c80e 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](Logging.md) -* [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 +* [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/docs-nav.json b/docs/en/docs-nav.json index 459c6947fd..14eedc65e7 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -483,6 +483,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" 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