# Block UI

## Overview

<div align="center"><figure><img src="/files/0NYzZQPkAjAyqBr45mfc" alt=""><figcaption><p>Block UI demo</p></figcaption></figure></div>

The svyBlockUI service in Servoy allows developers to block the user interface (UI) temporarily to indicate that an operation is in progress. The [plugins.svyBlockUI](/reference/servoyextensions/browser-plugins/block-ui.md#block-ui-ref) API allows you to help prevent user interactions during long-running tasks by displaying an overlay with a customizable message and/or spinner animation.

{% hint style="info" %}
To be able to use svyBlockUI, the **Block UI** package must be added from Services section of [Servoy Package Manager](/reference/servoy-developer/package-manager.md#package-manager). It can be accessed by code using `plugins.svyBlockUI`.
{% endhint %}

**Key features**:

* **Customizable Appearance**: Choose from 11 different spinner styles, set overlay colors, and customize messages.
* **Progress Updates**: Update the displayed message dynamically during the process.
* **User Interaction Prevention**: The overlay blocks user input to prevent accidental interactions with the background UI.
* **Timeouts**: Specify a duration to automatically hide the UI blocker after a set time.

## Use Cases

Blocking the UI is especially useful in scenarios where user interaction needs to be paused while waiting for a background process or a long running process to complete. Common use cases include:

* **Running Reports**:
  * When generating detailed reports, which may take a few seconds or minutes.
  * Use a spinner and a message like `"Generating report, please wait..."` to keep users informed.
* **Batch Updates**:
  * During bulk record updates or database operations, to avoid conflicts or errors caused by user input.
  * Example message: `"Updating records, please do not close the application."`

## Properties

{% hint style="info" %}
**Note**\
Several Block UI [properties](/reference/servoyextensions/browser-plugins/block-ui.md#properties) that were previously available are **deprecated in Servoy Titanium**. These properties may no longer have any visual effect.\
If you have a specific need to control these UI aspects in Titanium, we recommend creating a support ticket with Servoy to discuss your use case and possible solutions.
{% endhint %}

## Scripting Block UI

You can find a list of Block UI **API methods** [here](/reference/servoyextensions/browser-plugins/block-ui.md#api).

## Examples

### Processing Multiple Files with Dynamic Updates

This example shows how to use svyBlockUI while processing a list of files, providing updates at each step of the process.

```javascript
// List of files to process
var files = ["file1.txt", "file2.txt", "file3.txt", "file4.txt", "file5.txt"];

// Show the UI blocker with an initial message
plugins.svyBlockUI.show("Starting file processing...");

// Processing each file
for (var i = 0; i < files.length; i++) {
    // Update the message to reflect the current file being processed
    plugins.svyBlockUI.setMessage("Processing " + files[i] + " (" + (i + 1) + " of " + files.length + ")");
    
    // Perform file processing here!

    application.output("Processed: " + files[i]);
}

// Stop the UI blocker after all files are processed
plugins.svyBlockUI.stop();
application.output("All files processed successfully.");
```

Explanation:

* `files`: A list of files representing the items to process in the operation.
* [show](/reference/servoyextensions/browser-plugins/block-ui.md#show) Method: Displays the UI blocker with the message `"Starting file processing...".`
* Dynamic Updates:
  * The [setMessage](/reference/servoyextensions/browser-plugins/block-ui.md#setmessage) method updates the message dynamically to show which file is being processed and its position in the list.
  * Example message during execution: `"Processing file2.txt (2 of 5)"`.
* `Perform file processing here!`: here goes the code for file operations
* Output Logging: Each processed file name is logged using `application.output`.
* [stop](/reference/servoyextensions/browser-plugins/block-ui.md#stop) Method: Hides the UI blocker after all files are processed, signaling that the operation is complete.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/guides/develop/programming-guide/browser-utilities/notifications/block-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.