Block UI

Overview

Block UI demo

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 API allows you to help prevent user interactions during long-running tasks by displaying an overlay with a customizable message and/or spinner animation.

To be able to use svyBlockUI, the Block UI package must be added from Services section of Servoy Package Manager. It can be accessed by code using plugins.svyBlockUI.

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

Note Several Block UI 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.

Scripting Block UI

You can find a list of Block UI API methods here.

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.

// 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 Method: Displays the UI blocker with the message "Starting file processing...".
• Dynamic Updates:

  • The 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 Method: Hides the UI blocker after all files are processed, signaling that the operation is complete.