Importing External JavaScript Libraries in Oracle Visual Builder with Redwood Template

Did you know that modern web applications often rely on third-party libraries to deliver sleek, user-friendly interfaces? Oracle Visual Builder (Oracle VB) is a powerful platform for building enterprise-grade applications, but its out-of-the-box UI components can sometimes feel limiting. By integrating external JavaScript libraries like SweetAlert2, developers can elevate the user experience with vibrant, customizable alert dialogs that outshine default browser prompts. In this post, we’ll walk you through a step-by-step case study on integrating SweetAlert2 into Oracle VB with the Redwood template, complete with practical examples, code snippets, and solutions to common challenges.

Problem Statement: Enhancing Oracle VB with SweetAlert2

Oracle Visual Builder provides a robust environment for rapid UI development, but it lacks advanced features like modern, animated pop-up alerts. Default browser alerts are clunky and fail to meet the expectations of today’s users, who crave visually appealing, interactive dialogs. SweetAlert2, a lightweight and highly customizable JavaScript library, fills this gap by offering modern alert dialogs with animations, icons, and confirmation prompts. This case study demonstrates how to seamlessly integrate SweetAlert2 into Oracle VB using the Redwood template to create a more engaging user experience.

Why Use External Libraries in Oracle VB?

Oracle VB’s standard UI components are functional but often lack the flair needed for modern web applications. Integrating third-party libraries like SweetAlert2 unlocks a range of benefits:

• Enhanced Customization: SweetAlert2 allows developers to create tailored alert dialogs with custom icons, animations, and layouts, aligning with branding and user expectations.
• Improved User Engagement: Animated pop-ups with intuitive designs (e.g., success, error, or confirmation dialogs) make interactions more dynamic and enjoyable.
• Flexibility for Developers: Libraries like SweetAlert2 extend Oracle VB’s capabilities, enabling developers to implement features not natively supported.

For example, imagine a user submitting a form in your Oracle VB application. A default browser alert saying “Form submitted” feels outdated. With SweetAlert2, you can display a vibrant success dialog with a checkmark icon and a smooth fade-in animation, instantly elevating the experience.

How to Integrate SweetAlert2 in Oracle VB with Redwood Template

Let’s dive into the step-by-step process of integrating SweetAlert2 into an Oracle VB application using the Redwood template. Follow these steps to ensure a smooth implementation.

Step 1: Upload or Reference the SweetAlert2 Library

You have two options for including the SweetAlert2 library: uploading a local JavaScript file or referencing a Content Delivery Network (CDN). Using a CDN is often preferred for its simplicity and automatic updates.

• For Local Files: Upload the SweetAlert2 JavaScript file to your application’s resources folder in Oracle VB. This ensures the library is bundled with your application, avoiding external dependencies.
• For CDN: Reference the SweetAlert2 library directly via a CDN for faster setup.

To include the library via CDN, navigate to Applications → Web Apps → vbredwoodapplication in Oracle VB. In the HTML section of the application’s main page, add the following script tag:

html

Copy

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js”></script>

This script loads SweetAlert2 into your application, making its functionality available for use.

Step 2: Implement the SweetAlert2 Function

Next, create a JavaScript function to trigger the SweetAlert2 dialog. Navigate to the JavaScript section of your Oracle VB application (typically under AppModule) and add the following code:

javascript

Copy

AppModule.prototype.editShowSweetAlert2 = function() {

    require([‘https://cdn.jsdelivr.net/npm/sweetalert2@11’], function(Swal) {

        Swal.fire({

            icon: “success”,

            title: “Third Party Library is Linked With Oracle VB in Redwood Template”,

            showClass: {

                popup: `animate__animated animate__fadeInUp animate__faster`

            },

            hideClass: {

                popup: `animate__animated animate__fadeOutDown animate__faster`

            }

        });

    });

};

This function does the following:

• Uses the require method to dynamically load SweetAlert2 from a CDN.
• Calls Swal.fire to display a success dialog with a custom title and animations (fade-in and fade-out effects using the Animate.css library, which SweetAlert2 supports).
• Defines the dialog’s appearance with an icon (success) and animation classes for a smooth user experience.

By defining this function in AppModule, it becomes globally accessible across your application, allowing you to call it from any page or component.

Step 3: Link the Function to a UI Component

To trigger the SweetAlert2 dialog, you need to call the editShowSweetAlert2 function from a UI component, such as a button or hyperlink. Here’s how to set it up:

1. Add a UI Component: In your Oracle VB page, drag and drop a button or hyperlink component from the Redwood template’s component palette. For example, create a button labeled “Show Alert.”
2. Create an Action Chain: Navigate to the page’s Action Chains editor. Create a new action chain (e.g., ShowSweetAlertChain) and add a “Call Function” action.
3. Call the Function: In the “Call Function” action, select the editShowSweetAlert2 function from AppModule. Ensure the function is correctly referenced (e.g., AppModule.editShowSweetAlert2).
4. Bind the Action Chain: Link the action chain to the button’s onClick event. When the user clicks the button, the action chain triggers the SweetAlert2 dialog.

Upon clicking the button, users will see a vibrant success dialog with the message “Third Party Library is Linked With Oracle VB in Redwood Template,” complete with animations.

Step 4: Verify and Test the Implementation

Test the application by previewing the page in Oracle VB. Click the button or hyperlink to ensure the SweetAlert2 dialog appears as expected. Verify the following:

• The dialog displays with the correct icon, title, and animations.
• The dialog closes properly when the user clicks “OK” or interacts with it.
• The function works across different pages if called globally.

If the dialog doesn’t appear, double-check the CDN link, function definition, and action chain configuration.

Visuals and Code Snippets

To make the implementation more tangible, here are suggested visuals and their placement:

Include screenshots of the implemented alerts in Oracle VB.

Now, we have the above function as global in the application. So we can call the function in our local page itself

Show application of how the function is linked to the UI component.

These visuals provide a clear, step-by-step reference for developers following the tutorial.

Challenges and Solutions

Integrating external libraries in Oracle VB can present challenges. Here are common issues and their solutions:

• Issue: The SweetAlert2 library fails to load.
  • Solution: Verify the CDN URL is correct and accessible. If using a local file, ensure it’s uploaded to the correct resources folder and referenced properly in the HTML section. Test the CDN in a browser to confirm it’s not blocked by network policies.
• Issue: The editShowSweetAlert2 function doesn’t trigger when clicking the hyperlink or button.
  • Solution: Check the action chain configuration to ensure the function is correctly called (e.g., AppModule.editShowSweetAlert2). Verify that the component’s onClick event is linked to the action chain. Use browser developer tools to debug any JavaScript errors.
• Issue: Animations or styles don’t render as expected.
  • Solution: Ensure the Animate.css library is included if using custom animations (SweetAlert2 includes it by default with CDN). Check for CSS conflicts with Oracle VB’s Redwood template styles.

Conclusion

Integrating external JavaScript libraries like SweetAlert2 into Oracle Visual Builder with the Redwood template empowers developers to create modern, engaging user interfaces. By following the steps outlined—uploading or referencing the library, defining a global function, linking it to UI components, and testing thoroughly—you can enhance your application’s functionality and user experience. SweetAlert2’s customizable dialogs offer a significant upgrade over default alerts, making interactions more intuitive and visually appealing.

To ensure success, adhere to best practices like using reliable CDNs, organizing functions globally for reusability, and debugging action chains. With these techniques, you can extend Oracle VB’s capabilities and deliver enterprise applications that stand out.

Call to Action Ready to level up your Oracle VB applications? Try integrating SweetAlert2 in your next project and experience the difference in user engagement. Share your feedback, customizations, or creative uses of SweetAlert2 in the comments or on social platforms like X—we’d love to hear your success stories!

About the Author

Sathish Kumar B is a Senior Practice Manager at OTEC, specializing in Oracle Cloud Application Development. With extensive experience in integrating third-party technologies into enterprise systems, Sathish is passionate about enhancing user experiences and empowering developers to leverage the full potential of Oracle platforms.