1 How Do I Use Visual Builder Studio to Extend Oracle Cloud Applications?

Application extensions in Oracle Cloud Applications are built with Oracle Visual Builder Studio and Oracle JET. VB Studio has tools for creating, editing and publishing these extension.

What Is Oracle Visual Builder Studio?

Oracle Visual Builder Studio (VB Studio) is a robust application development platform that helps your team effectively plan and manage your work throughout all stages of the app dev lifecycle: design, build, test, and deploy.

In addition, VB Studio makes it easy for your entire team to develop the artifacts they need, including:

  • Oracle Cloud Applications developers, who need to extend their Apps with business-specific customizations;
  • Low-code developers, who want to create web or mobile apps using a visual designer;
  • Experienced programmers, who want to modify the source code for web and mobile apps created by others, or to develop bespoke apps using the web programming language of their choice.

With VB Studio you get:

  • Built-in repositories for hosting code in Git and for hosting binaries, such as Maven dependencies
  • A continuous integration service so you can automate your build and test systems
  • A continuous delivery service that tightly integrates with Oracle Cloud Applications
  • A rich visual designer integrated with source control (Git) so that developers can manage changes, apply version control best practices, and collaborate with their teammates to develop applications
  • The ability to build and display different flavors of the UI to meet the needs of discrete users of certain Oracle Cloud Applications (those built with VB Studio and Oracle Java Extension Toolkit (Oracle JET)), also within a Git framework
  • Agile boards and an issue tracking system for tracking sprints, tasks, defects, and features

VB Studio enables developers to easily deploy their applications to their preferred target, whether it’s a staging or production instance of Oracle Cloud Applications or an Oracle Cloud Infrastructure (OCI) service instance.

How Can Visual Builder Studio Help Me Extend My Oracle Cloud Application?

VB Studio provides tools to help you work with your team members to develop an application extension and manage the entire development lifecycle, from creation to publication. VB Studio can help you and your team members:

  • Create new application extensions and edit existing ones.
  • Edit page layouts and display logic using a visual editor.
  • Version the changes made to an extension so you can revert to previous versions, if needed.
  • Collaborate on an application extension, so that both experienced and novice developers can contribute.
  • Participate in the code review process.
  • Test the changes on your Oracle Cloud Application development environment.
  • Share your changes during development and provide feedback.
  • Publish the changes to the application’s production instance.

How Do Visual Builder Studio and Oracle Cloud Applications Work Together?

Configuring and Extending Applications describes how you can use Oracle Cloud Application tools to customize most Oracle Cloud Applications to meet your business needs. However, if you check the Settings and Actions menu while in an Oracle Cloud Application and see an option for “Edit Pages in Visual Builder”, that’s your signal that you need to use VB Studio to make your changes to the app’s user interface:

If you require any underlying data model changes, you should use Application Composer to make them first, then use the Edit Pages in Visual Builder option to expose those changes in the UI with VB Studio. For example, you may want to add a new field to a table, or rearrange the fields in a form so that those you care about the most are featured. You can use the Designer in VB Studio to manipulate the dynamic forms and tables that appear on your Oracle Cloud Application’s pages. When allowed by the application, you can also edit some of the constants and variables and even the behavior of some components.

The Designer's dynamic layout editor lets you create and edit the rules that determine what is displayed in a component. For example, you may want to display one set of options for a form when the user is based on the West Coast, but another set of options when the user is based elsewhere. You can create a different layout for each case, then set a rule to apply the correct layout based on the user’s location.

Extend Oracle Cloud Applications with VB Studio

The changes you make to your Oracle Cloud Application in VB Studio are stored in an artifact called an application extension. Physically, the source code associated with the app extension is stored in a Git repository off its master branch. When working on an app extension, best practice is to have only one app extension for the base app in the project, and to store all the sources for the app extension in the same Git repository in the project. Multiple developers can work together to develop the app extension, but they should all be working from the same repository. (Your individual work in VB Studio is also referred to as an application extension.)

Here are the key components of the VB Studio ecosystem as it pertains to application extensions:

  • Within a single VB Studio instance, you and your team members who use that instance are considered an organization. Within your organization, you will likely belong to one or more projects, each of which is devoted to a discrete software effort. For example, you might have a project for building an application extension for an Oracle Cloud Application, and another project for building a bespoke web or mobile application for use by your own department. A project brings together all the tools you need to create those artifacts, such as a Git repository for storing your source code, a pipeline to provide continuous integration and delivery, an issue tracking system, team wikis, and more.
  • Each base app should have only one app extension, and all work on the app extension is stored in the same Git repository. The workspaces of developers working on the app extension should all use clones of the same Git repository.
  • When you work on an application extension, you do so within the editors provided in the VB Studio Designer. Depending on which aspect of the page you're customizing, VB Studio invokes the proper editor to provide the experience you need.
  • All of your work in VB Studio is done in the context of a workspace, a completely private area where you can work on your application extension. A workspace provides several important components:
    • A reference to the base application, which is the Oracle Cloud Application you're extending;
    • A pointer to the Oracle Cloud Application sandbox, which contains any data model changes you may have made;
    • A pointer to the Oracle Cloud Application development or test environment where you plan to deploy your app. You can deploy your app manually, or wire it up to a pipeline to do it automatically, such as when a developer on your project merges his or her branch to the master branch.
    • Your own clone of the app extension's Git repository, where the source code for your application extension lives. Your work is not visible to others until you a) merge it to the project's Git repo, b) choose to Share it with other for testing, or c) deploy it.

What Is a Workspace and Why Do I Need One?

A workspace defines the resources available to you when you open the Designer. You can think of a workspace as your editing context while you're working with the Designer.

Before you can use the Designer to create or edit an application extension, you must first select or create a workspace to identify the source files you'll be editing. A workspace defines the repository—and the branch—containing the source files you want to use, the Application's development environment, and, in certain cases, a sandbox. The Application repository and development environment must already be set up and defined in the application extension project in VB Studio before you can create a workspace. If the development environment isn't defined, you won't be able to create a workspace.

You're the only one who can access your workspace. Changes to files you make in your workspace aren't visible to other team members until you save them to a branch. You can have multiple workspaces, each with a different branch and sandbox, or you can use one workspace and switch to a different branch and sandbox when you are in the Designer.

Use Your Oracle Cloud Application Sandbox

VB Studio can access the sandboxes in your Oracle Cloud Application that have changes to the application's data model that haven't been published yet.

If the changes in a sandbox are relevant to your app extension, you can associate the sandbox you want to use with your workspace so you can access it when you are creating the app extension. You'll want to save all your work in a branch that is associated with the sandbox with those changes, and you'll want to continue to use the same branch with that sandbox until you are finished. If you need to edit the app extension using a different sandbox as well, it's better to associate it with a new branch than to use an existing branch. This will help isolate the changes you make for each sandbox. If it helps, for each branch-sandbox pair you can create a separate workspace instead of switching a workspace's branch and sandbox. VB Studio helps keep your changes in sync by automatically recommending a sandbox for your workspace if you choose a branch that is already using it.

When you are ready to publish your app extension to your Oracle Cloud Application environment, you should publish the associated sandbox at the same time or shortly before to minimize the risk that the data model and app extension will be out of sync.

Use Branches to Isolate Changes

The repository for your app extension was already created in your project by your administrator. When you create a workspace, you use a branch of the repository for the changes you will make. You can have separate branches for each new feature or change to your app extension.

You can use separate branches for changes you want to make for two different sandboxes, or for different versions of a feature that use the same sandbox. For example, when you are modifying a table component in your app extension, you might want to work on two different versions of the table. By creating a branch for each version, you can work on one version in one branch with a Workspace A mapped to it, and then switch to another branch by using Workspace B to work on the other version. This way you can use your workspaces to help you isolate the branches with your changes. After you decide which version you want to use you can share the branch with others and delete branches you no longer need.

Share the Application Extension

It's good practice to ask your team members to review the changes you make to an app extension before you publish it.

VB Studio has a share feature that allows you to share a preview of your changes with team members. The preview version of your application runs on your Oracle Cloud Application development environment and includes the changes you made to the app extension. If you made changes based on a sandbox, the preview will use the same sandbox.

What is the Process for Creating and Publishing an Application Extension?

VB Studio provides all the tools you need for managing the development lifecycle of your app extension.

Here's the typical process for editing and publishing an application extension.

  1. In Oracle Cloud Applications, open the application you want to customize.
  2. Open the Settings and Actions menu, then click Edit Pages in Visual Builder to open the page in the Designer in VB Studio.

    You should take care to make any necessary data model changes before you launch VB Studio.

    If your admin has set things up for you, you automatically land in the correct app extension project for the Oracle Cloud Application. (If you belong to more than one project you might have to choose.) If this is your first time to VB Studio, we’ll create a workspace for you (assuming your admin has properly set up the app extension project.)

  3. Using the Designer's dynamic layout editor, make the customizations you want to be part of the application extension.

    When you click on a component, the editor will show you the component’s properties, where you can select and change configuration details. At the top is the Quick Actions panel. This holds a selection of useful configuration options, dynamically chosen for each component, and most of the time, you'll want to make changes to one of these. Sometimes you may need to change something that’s not in the Quick Actions. You can find other component properties below the Quick Actions panel, such as the object properties and the applicable rule set.

    When you start editing a component, each of its rule sets has a default base layout that's read-only. You’ll have to duplicate the rules set's default base layout or create a new one to make changes. In the layout you’ve made, you can move, edit and delete the fields displayed in the component, or add any field that’s in your app’s data model.

    You extend a component's rule set in the editor to add, duplicate, and update the rules that govern which layout a dynamic component displays. The default base layout is used when none of the rules apply.

  4. View your changes with the preview tools.

    Use the Layout Preview when editing a page to check your layouts in the Designer, and Preview to see your changes as they will appear in the page in a browser.

  5. Share your changes to get feedback.

    Use the Share tool to generate a URL for the app extension preview that you can share. If you're working with a sandbox, you can send this URL and the sandbox name to team members so they can see it and comment. If you're not working with a sandbox, simply share the URL.

  6. Save your changes to a branch.

    You use the Git commands in the menu to commit and push the changes in your workspace to the remote branch.

  7. Create a merge request asking team members to review your changes.

    Your team members can review the changes to the source files in the branch and approve the request if they look good.

  8. Merge your branch into the main repository.

    When your changes have been reviewed and approved, you can merge your branch into the main repository (master). The administrator can configure the project so that merging changes to master will automatically trigger a build job. The build job will create the build artifact that is deployed to the Oracle Cloud Application test environment. After testing, a separate build job will publish the build artifacts to the live application.