Oracle Visual Builder Cloud Service: How to Access Application Configuration JSON Files in JavaScript

Introduction

Oracle Visual Builder Cloud Service (VBCS) provides a low-code development environment for building web and mobile applications. In addition to its visual development capabilities, it allows developers to write custom JavaScript code to implement application-specific logic.

In many applications, we need to maintain configuration values such as API endpoints, application settings, feature flags, or other static data. Instead of hardcoding these values directly into JavaScript files, we can store them in custom JSON files under the application's config folder and access them from our code.

In this post, we will explore how to create custom JSON configuration files in Oracle Visual Builder and use them in a page's JavaScript code.

Step 1: Create a JSON Configuration File

First, open your application in Oracle Visual Builder.

Navigate to the application's Sources section and locate the config folder. Create a custom JSON file inside this folder.

For example, let's create a file named appConfig.json with the following content:

{
  "applicationName": "My VBCS Application",
  "apiBaseUrl": "https://api.example.com",
  "enableFeatureX": true,
  "defaultPageSize": 20
}

Here, we have defined a few configuration properties that can be used throughout our application.

The config folder can contain multiple JSON files, allowing us to organize configuration settings based on the requirements of our application.

For example, we might create separate files for API configuration, application preferences, and feature-specific settings.

Step 2: Access the Configuration File in JavaScript

Once the JSON file has been created, the next step is to access its contents from a page's JavaScript code.

In Oracle Visual Builder, the exact method used to load a configuration file depends on the application's structure and how the file is exposed by the application. A JSON file located under config should not automatically be assumed to be available as a JavaScript module or through a particular URL.

If the file is exposed as a static resource at a known URL, we can use JavaScript's fetch() API to retrieve its contents.

For example:

async function loadAppConfig() {
  try {
    const response = await fetch(
      './config/appConfig.json'
    );

    if (!response.ok) {
      throw new Error(
        `Failed to load configuration: ${response.status}`
      );
    }

    const appConfig = await response.json();

    console.log(appConfig.applicationName);
    console.log(appConfig.apiBaseUrl);
    console.log(appConfig.enableFeatureX);
    console.log(appConfig.defaultPageSize);

    return appConfig;
  } catch (error) {
    console.error(
      'Error loading application configuration:',
      error
    );
    throw error;
  }
}

This example demonstrates the general JavaScript approach for loading a JSON resource.

Important: The relative URL ./config/appConfig.json is only an example. In a Visual Builder application, the correct URL depends on the runtime application's base path and how the file is deployed. Verify that the JSON file is accessible at the resulting URL before using this approach.

If the JSON file is not published as a directly accessible static resource, use the appropriate resource-loading mechanism supported by your Visual Builder application.

Step 3: Use the Configuration Values in Page Logic

After loading the JSON file, we can use its values in our page's JavaScript code.

For example, suppose we want to retrieve the API base URL and use it to call a REST endpoint.

async function loadData() {
  try {
    const appConfig = await loadAppConfig();

    const apiUrl =
      `${appConfig.apiBaseUrl}/employees`;

    const response = await fetch(apiUrl);

    if (!response.ok) {
      throw new Error(
        `API request failed: ${response.status}`
      );
    }

    const employees = await response.json();

    console.log('Employees:', employees);

    return employees;
  } catch (error) {
    console.error('Error loading employee data:', error);
    throw error;
  }
}

In this example, the API base URL is read from the configuration file rather than being hardcoded in the page's JavaScript.

This makes the code easier to maintain because configuration values can be managed separately from application logic.

The example assumes that the API supports browser-based requests and that any required authentication, authorization, and cross-origin access settings are configured correctly.

Step 4: Handle Configuration Loading Properly

When working with external JSON configuration files, remember that loading the file is an asynchronous operation.

Therefore, the application should wait for the configuration to load before accessing its properties.

For example:

async function initializePage() {
  const appConfig = await loadAppConfig();

  if (appConfig.enableFeatureX) {
    console.log('Feature X is enabled.');
  } else {
    console.log('Feature X is disabled.');
  }

  console.log(
    'Default page size:',
    appConfig.defaultPageSize
  );
}

Call initializePage() from the appropriate page initialization or lifecycle hook in your Visual Builder application.

You should also decide how the page should behave if the configuration file cannot be loaded. Depending on the application, you might display an error message, use safe defaults, or prevent the page from continuing.

Benefits of Using Application Configuration Files

Using JSON configuration files offers several advantages:

• Separation of concerns: Configuration values are kept separate from JavaScript business logic.
• Maintainability: Settings can be updated without modifying every JavaScript function that uses them.
• Reusability: Multiple functions can consume the same configuration values.
• Readability: JSON provides a simple, structured format for organizing application settings.
• Feature management: Boolean properties can be used to control optional functionality.

However, client-side configuration is visible to users who can inspect the application. Do not store passwords, private API keys, client secrets, or other sensitive information in these files.

Conclusion

Oracle Visual Builder Cloud Service allows developers to extend low-code applications with custom JavaScript logic. By organizing configuration values in JSON files under the application's config folder, we can keep application settings separate from our page code and make the application easier to maintain.

The key steps are to create the JSON configuration file, make sure it is accessible through a supported loading mechanism, parse its contents, and use the resulting JavaScript object wherever the configuration is needed.

Note: Before adopting the fetch() approach in a production Visual Builder application, verify the deployed resource URL and confirm that the application's runtime and deployment model support direct access to the JSON file. The folder location alone does not guarantee that the file will be published at a particular URL.