Tour the Designer

A visual application is your ticket to the Designer, a declarative environment that you use to design and develop apps within your visual application.

The Designer has five distinct areas (as highlighted in this image):
Description of newvisapp.png follows
Description of the illustration newvisapp.png

Label Element
1 Header
2 Navigator
3 Canvas/Editors
4 Properties pane
5 Footer

Let's take a look at each of these areas to learn more about what each one does.

The Header

The header contains information about your current Visual Builder session, as well as access to the tools you need to develop your application.

Label/Icon Element Description
Toggle main menu icon Toggle main menu Open a side panel, where you can select All Applications to go to the Home page. If you're an administrator, you'll see additional options to manage Settings and Certificates.
MyFirstVisualApp Visual app name Name of the visual application you're working with.
Development, Stage, or Live Status indicator Status of the visual application.
1.0 Version Version of the visual application.
Undo icon Undo Undo one or more of your changes. To undo your most recent change, click the Undo icon (hover your cursor over the icon to view the action that will be undone). To undo multiple changes, click the Undo drop-down list and select the actions you want to undo. For example, selecting the Insert Heading action in this image will remove the heading and undo other changes you made after adding the heading:
This image shows a list of actions when a user clicks the Undo drop-down. Actions shown here are Insert Panel, Set text of Heading, Insert Heading, and Create mywebapp. The third action (Insert Heading) is selected, adding a check mark next to all the actions up to the selected one.


You can undo up to 10 of your changes at a time (your last 500 actions are stored in the browser and will be lost if you clear the browsing cache). To undo more than 10 actions, simply undo a few items, then open the drop-down list again.
Redo icon Redo Redo one or more changes after undoing them. To redo your most recent change, click the Redo icon (hover your cursor over the icon to view the action that will redone). To redo multiple changes, click the Redo drop-down list and select the actions you want to redo. For example, selecting the Set text of Heading action in this image will revert two of the previously undone actions:
This image shows a list of actions when a user clicks the Redo drop-down. Actions shown here are Insert Heading, Set text of Heading, and Insert Panel. The second action (Set text of Heading) is selected, adding a check mark next to all the actions up to the selected one.

Git icon Git Integrate your visual application with a Git repository.
Go to file icon Go to File Search the Git repository by file name.
Preview Preview Use the Preview icon to see how your pages look and behave in a browser. Typically, you'd use Preview mode, but you can also use the Debug Preview mode to debug issues with your application.
Menu icon Menu Open a menu containing the Share, Import, and Export actions, as well as options to open the Settings editor. You can also navigate to the Visual Builder Help Center and discussion forum.

The Navigator

The Navigator helps you move between the artifacts in your extension, and provides access to the Visual Builder editors:
Icon Element Description
Web Apps icon Web Apps This is where you:
Services icon Services

To interact with external REST APIs in your visual app, you can create connections to the services that provide access to these API endpoints.

You also have access to a catalog of predefined services through backends such as Oracle Cloud Applications and Oracle Integration. The Oracle Cloud Applications backend, for example, exposes REST APIs—from Human Capital Management, Sales, and more—that your visual app can consume right out of the box. You can also connect to services that aren't listed in this catalog. See Manage Service Connections.

Business Objects icon Business Objects Business objects are custom data objects that implement your app's business logic. Your visual app can access and interact with the business objects you create through REST endpoints that Visual Builder generates for you. By default, this data is stored in an embedded database associated with your environment's Visual Builder instance. See Work with Business Objects.
Layouts icon Layouts A Layout represents a set of data fields that can appear in one or more related dynamic components, like a table or form. Create a new Layout here by choosing a data source, then defining the rule set that governs how that data looks and behaves. See How to Create Layouts With Dynamic Components.
Components icon Components The Components tab helps you to install and manage custom web components that you download from the Component Exchange, a repository of components that can be installed in your Visual Builder instance. See Work with the Component Exchange.
Processes icon Processes You can create business processes to help automate tasks that need to be performed by application users. A process might include tasks such as reviewing data, approving or rejecting requests, and submitting files. After registering your business processes in your visual application, you can add UI components to your pages that start processes and that can be used to complete user tasks. See Work with Business Processes.


Process for Visual Builder, which is included in the Enterprise edition of Oracle Integration Gen 2, is deprecated. See Deprecated Features for details.
Source icon Source Although the Designer is primarily a visual editor, you can always work with source code if you prefer. See Work With Code Editors.

The Canvas/Editors

The canvas, which appears to the right of the Navigator when you open a page, is where you do the bulk of your work in Visual Builder. When you open a page, you'll see different editors along the top to help you modify and create artifacts used in the page, like Page Designer, Actions, Event Listeners, and so on:
Description of canvas-editors.png follows
Description of the illustration canvas-editors.png

Depending on which aspect of the page you're customizing or building, Visual Builder invokes the proper editor to provide the experience you need, and displays that editor in the canvas. Perhaps the most important editor is the Page Designer, described in detail in Use the Page Designer.

All of the changes you make through the editors—the Page Designer, Actions, Event Listeners, etc.—are saved as JSON, which you can access through the JSON pane, next to Settings. In addition, you can use the JavaScript pane to enter any custom functions you may need. For details about the different editors, see Which Editor Do I Use?.


When working with multiple artifacts (pages, flows, business objects, and so on), each artifact opens as a separate tab on the tab bar. Here's how you can better manage these in your work area:
  • Right-click a tab to see options to close the particular tab, close other tabs, close tabs to the right, or close all tabs. You can also use this menu to select a particular tab in the Navigator:

    If the tabs overflow available space on the tab bar, click Tab bar overflow icon at the edge of the tab bar and select the tab you want to open. Note that the active tab always stays in focus.

  • Right-click the empty space on the tab bar and select the option to reopen closed tabs. Recently closed tabs are saved in session history, so you can keep reopening tabs until you get to the one you want.

The Properties Pane

As the name suggests, the Properties pane lets you specify the properties that control the appearance and behavior of whatever is currently selected in the canvas. While you're in the Variables editor, for example, you use the Properties pane to set the variable's default value, type, and other attributes. When you click a component on a page in the Page Designer, the Properties pane is immediately updated to reflect the component's properties. Depending on the component, the Properties pane might display additional tabs for modifying the component’s attributes or its behavior.

When you add a collection component to the canvas, like a table or list, you'll see a Quick Start tab added to the Properties pane:
Description of propertiespane.png follows
Description of the illustration propertiespane.png

Quick Start wizards help you add some actions and components that are typically associated with the component, such as mapping the collection to data and adding Create and Detail pages.

To hide or show the Properties pane, just click the tab itself.

The Footer

At the bottom of the Designer, you have several tools that can help you debug your visual application:

Element Description
Audits Scan your visual application's code for errors and warnings. Your code is scanned when you open the Audits pane. See Audit Application Code.
Find in Files Search your application's Git repository for a text string.
Logs View build logs when a visual application is staged or published. See Troubleshoot Build Issues.

Also, enable logging to assist with debugging when developing rules for a business object. See Enable Logging for Scripting Events.

Tests Run all test cases defined for action chains in a visual app and run them to make sure code changes haven’t broken any functionality. See Use the Tests Footer in a Visual Application.
Trace Enable tracing of a business object's endpoint requests to diagnose performance bottlenecks. See Enable Tracing to Monitor Endpoint Calls.


The Designer, by default, uses a light theme based on Redwood to set the color palette for your work environment. You can personalize this theme to switch to a dark theme or sync with your OS settings.
  1. Click the Menu option in the upper-right corner of the Designer.
  2. Select Theme, then choose an option:

    • Select Dark to use a dark color display, more suited for low-light conditions. This option switches the background and text used in all the editors, except the Page Designer canvas, where application pages continue to display against a lighter background with dark text.
    • Select OS Default to inherit the theme used in your operating system's settings. If your system settings are configured to use dark mode, the Designer will also use those settings.
    • If you changed the default, select Light to switch back to a lighter background with dark text display.