Wednesday

How to Import a Page Between Oracle VBCS Applications Using ZIP Source Import (With Action Chains & JavaScript)

🧭 Introduction

If you are working with Oracle Visual Builder Cloud Service (VBCS), you may already know that it is a powerful low-code platform for building enterprise web applications.

However, one major limitation developers face is:

❌ There is no direct option to import or export a single page between VBCS applications.

While full applications can be exported and imported, moving just a single page with Action Chains, JavaScript, and UI bindings is not officially supported.

In this article, you will learn a practical and tested workaround to migrate a VBCS page from one application to another using a ZIP-based source import approach.


πŸ” Problem Statement: Why Page Migration is Difficult in VBCS

A VBCS page is not just UI—it is a complete structured module consisting of:

  • HTML View Template
  • JSON Page Metadata
  • JavaScript Page Module
  • Action Chains (Event Logic)
  • Variables (Page + Flow level)
  • Service Bindings

Because all these components are tightly coupled, copying a page manually is not straightforward.


πŸ’‘ Solution Overview: ZIP-Based Page Import

The workaround is to package all page-related artifacts into a ZIP file and import it into another application using the Source Import option in VBCS.

This allows VBCS to reconstruct the page as a complete module inside the target application.


🧱 Architecture Flow (Recommended Diagram)



πŸ› ️ Step-by-Step Guide to Import a VBCS Page Using ZIP


πŸ“ Step 1: Collect Page Artifacts from Source Application

Navigate to your source VBCS application and locate the page inside the flow.

You need to gather:

  • .html → UI layout
  • .json → page metadata
  • .js → page module (JavaScript logic)
  • chains/ → action chains folder
  • Optional resources (images, modules, etc.)

πŸ“¦ Step 2: Create a Structured ZIP File

Organize all files into a clean structure:

employee-page.zip

├── employee-page.html
├── employee-page.json
├── employee-page.js
├── chains/
│ ├── loadDataChain.json
│ ├── saveDataChain.json

└── resources/

⚠️ Best Practices:

  • Keep file names consistent with page name
  • Avoid unnecessary nested folders
  • Ensure all dependencies are included

πŸ“€ Step 3: Import ZIP into Target VBCS Application

Now move to the target application:

  1. Open Oracle Visual Builder Designer
  2. Navigate to the target Flow
  3. Click Import
  4. Select Import From Source
  5. Upload the ZIP file
  6. Confirm import

πŸ”— Step 4: Integrate the Imported Page into Flow

After import, the page will appear in your target flow.

Now complete the integration:

✔ Add Navigation

  • Use Flow Menu OR Action Chain navigation

✔ Verify Action Chains

  • Ensure all events are correctly mapped

✔ Check JavaScript Module

  • Validate all functions and handlers

✔ Reconnect Services

  • REST or Business Objects must be re-linked manually

πŸ§ͺ Step 5: Test the Imported Page

Run the application and validate:

  • UI rendering
  • Action Chain execution
  • API calls
  • Data binding
  • Navigation flow

⚙️ Key Observations

During real-world usage of this method, the following behavior is observed:

  • VBCS successfully reconstructs page structure from ZIP
  • Action chains are restored correctly when included
  • JavaScript modules remain functional
  • Some manual fixing is required for dependencies

πŸ“Š Advantages of ZIP-Based Page Import in VBCS

✔ Enables page-level reuse across applications
✔ Faster than manual recreation
✔ Preserves UI + logic + actions together
✔ Useful for modular enterprise development


⚠️ Limitations

❌ Not an official Oracle-supported feature
❌ Requires manual dependency management
❌ Risk of ID or variable conflicts
❌ Service connections must be recreated


🧠 Best Practices for Oracle VBCS Page Migration

To improve reliability:

  • Maintain consistent naming conventions
  • Document all dependencies (services, variables, chains)
  • Avoid tight coupling with app-level variables
  • Standardize ZIP structure across projects
  • Prefer reusable JavaScript modules for shared logic

πŸ“Œ Conclusion

Although Oracle Visual Builder does not provide a direct way to import individual pages between applications, the ZIP-based source import method is a powerful and practical workaround.

It allows developers to migrate complete pages—including UI, JavaScript logic, and Action Chains—between applications efficiently.

This approach is especially useful in enterprise environments where modular development and reuse are critical.

No comments:

Post a Comment