How to Use the Spinner Component in Oracle Visual Builder Cloud Service (VBCS)

The Spinner component in Oracle Visual Builder Cloud Service (VBCS) provides a clear visual indication that an operation is in progress. It improves the user experience by showing that data is being loaded or processed in the background. This guide explains how to use the Spinner component effectively in VBCS.

Adding the Spinner to Your Page

Open your application in VBCS and navigate to the required page in the UI Editor. From the Component Palette, drag and drop the Spinner component onto the page. A spinner is typically added while waiting for data to load or an action to complete.

Configuring the Spinner

Select the Spinner on the page and customize it in the Properties panel. You can adjust properties such as size, color, and visibility. You can also configure accompanying text to explain the ongoing task to users.

Making the Spinner Visible

A spinner is often hidden initially and displayed only when needed. Use a VBCS action to control its visibility dynamically. Show it when a data load or form submission begins, then hide it when the operation completes. This is done by setting its visibility to true during processing and false afterward.

JavaScript Example

// Show Spinner
$page.FindComponent('spinnerId').show();

// Hide Spinner
$page.FindComponent('spinnerId').hide();

Using the Spinner with Background Processes

Spinner visibility should be connected to longer-running processes such as data fetching, service calls, or form submissions. Using Event Handlers in VBCS, trigger the spinner when a process starts and hide it when the process finishes so the user always understands the current application state.

Conclusion

Using the Spinner component in Oracle VBCS creates a smooth and professional interface by keeping users informed during background operations. Combined with event handling, it supports an intuitive and responsive application experience.