Learn Oracle Visual Builder (VBCS) from scratch

Get Started with Visual Builder

To use Oracle Visual Builder you should be familiar with the tools available for building your applications.

About Oracle Visual Builder

Oracle Visual Builder is a visual and declarative cloud environment for developing and hosting engaging mobile and web applications.

Visual Development Experience

It provides simple but powerful visual development tools to create responsive web and mobile apps—all without the need to install any additional software. This rich set of visual tools help you quickly design your app by dragging and dropping UI components and customizing their attributes to define behavior. While these tools lend themselves to low-code developers, experienced developers can just as easily access the underlying source code, even extend it using standard HTML5, JavaScript, and CSS techniques for complex needs.

Easy Access to Data

Visual Builder makes it easy to access your app’s data through REST-based services. So you can create reusable business objects to implement your app’s business logic and store its data, which can then be managed through REST endpoints that Visual Builder generates for you. Or you can pick data objects exposed by Oracle SaaS or Oracle Integration applications in an integrated catalog of REST services. You can also access data from any external REST service with just a few clicks.

Development and Hosting Platform

Visual Builder is a complete development tool as well as a hosting platform, which means you can manage your application’s lifecycle right from development to test and final publishing. Version management and data migration are built into an app’s lifecycle, making it easy for you to stage and publish your app and manage its data in every phase.

What’s more, Visual Builder is a managed service. This means that once you provision a Visual Builder instance, there’s very little you need to do beyond developing and publishing your app. Everything the app needs to run successfully (including a web server to host your application and to secure data access) is taken care of. Thus, as a development team, you can take your app from development to stage and publish it in a very short time.

Your Visual Builder instance  provides capabilities for your visual application both as a visual development tool (at the top) as well as an app hosting platform with a built-in web server (indicated by server-side components at the bottom):

• As a visual development tool, Visual Builder provides access to UI components and WYSIWYG interfaces that leverage the open-source Oracle JavaScript Extension Toolkit (JET). This visual environment, known as the Designer, features several visual editors that a development team can use to collaboratively build rich UIs that span multiple devices. It also supports Redwood, the Oracle standard for user experience, that lets you develop apps that provide the same look and feel as apps delivered from Oracle.

  Within this environment, you can develop browser-based responsive web and mobile apps. You can create progressive web apps, which combine the on-device mobile experience with a web app’s ease of distribution—eliminating the need to download updates from app stores.

• As an app hosting platform, Visual Builder provides various capabilities to publish and run your app in the cloud, including an embedded database that stores your app’s business objects—essentially Oracle tables with business logic exposed through REST APIs—and their data.

  It also includes a REST proxy service to manage access to external REST endpoints. When your app’s data comes from REST APIs in Oracle catalogs such as Oracle SaaS or Oracle Integration, the proxy service uses server-side integration with the Oracle Identity Cloud Service (IDCS) to manage authentication and authorization (by default) through identity propagation. When your app’s data comes from other REST endpoints, authenticated REST mechanisms are used to manage credentials.

  Together, these components provide the resources required to host your visual app and manage its data.

When your apps are published, they become available to your users in the cloud, from any desktop or mobile device, with communication to the app’s underlying JET components secured over HTTPS and REST.

How to Begin with Oracle Visual Builder Subscriptions

Here's a summary of the key steps to help Oracle Cloud account administrators get started with Oracle Visual Builder:

1. Sign up for a free credit promotion or purchase a subscription. See Request and Manage Free Oracle Cloud Promotions or Buy an Oracle Cloud Subscription in Oracle Cloud Infrastructure Documentation.

2. Sign in to your Cloud Account. See Access Oracle Visual Builder.

3. Create accounts for your users and assign them appropriate privileges and roles. See Managing Users, User Accounts, and Roles in Managing and Monitoring Oracle Cloud.

Access Oracle Visual Builder

To develop applications using Oracle Visual Builder, you access the service through a web console.

To access Oracle Visual Builder:

1. Sign in to your Oracle Cloud Account using your user name and password. See Signing In for the First Time in Oracle Cloud Infrastructure Documentation.

   For more information about sign-in options, see Understanding the Sign-In Options.

2. Enter your identity domain and user credentials. Click Sign In.

Anatomy of Visual Applications

To develop applications with Oracle Visual Builder, you need to understand a few basic concepts.

The basic components of a visual application are mobile applications, web applications, service connections, business objects, and processes. The basic building blocks of a mobile or web application are user interface (UI) components, variables, action chains, page flows and page navigation, and data access through REST endpoints.

The building blocks and their interactions can be summarized as follows.

• Variables are the mechanism used to store and manage client state. Every variable has a type and a scope.

• An action chain is composed of a set of one or more individual actions. The action chain is triggered by an event. (For example, a button click can trigger navigation to a page.) Each action represents a single asynchronous unit of work. An action chain can define input parameters and local variables that are available only in the context of that action chain, and can also access application-scoped input parameters and variables.

• Page flows and page navigation govern the transmission of information from one page to another. Each individual page has a lifecycle, as does an application. Each lifecycle event (entry or exit from a page, for example) can provide a trigger for an action chain.

• A UI component encapsulates a unit of user interface through a defined contract – specifically, the Oracle JavaScript Extension Toolkit (JET) components contract. Component attributes are bound to variables, and component events and variable changes trigger action chains.

• All data entering a mobile or web application is based on REST. This data can come from business objects and service connections. Actions and variables control how data is sent to and from a REST endpoint in a mobile or web application. A developer can create a type that matches the REST payload and pass the data using a variable of that type.

Variables and Lifecycles

Application and page variables are constructed automatically in a specific application or page lifecycle stage.

Input parameters that are passed by means of navigation rules, or bookmarkable variables that are provided on the URL, are automatically assigned to their corresponding variables. When you modify the value of a bookmarkable variable, the URL is automatically adjusted to match that new value (that is, a new history state is pushed). In this way the page is always bookmarkable and does not require any specific user action in order to be bookmarked.

Variables and Events

A variable triggers an onValueChanged event when it is modified. This event is triggered only when the value is actually changed; setting a variable value to the same value does not trigger an event. The variable must be explicitly changed to send the event. For example, if a variable is a complex type, modifying an inner property does not fire this event; the entire variable must be set by means of an API call. In this case, the framework can add to the payload those parts of the structure that have changed. For example, if you changed the name property of an Employee and then reset the Employee, the framework would send an event that the Employee changed, and as part of the payload indicate that the name has changed.

An onValueChanged event can trigger a user-defined action chain. The trigger has the payload of the former and new values of the variable.

For more information, see Understanding Actions and Action Chains.

Understand Actions and Action Chains

An action chain is made up of one or more individual actions, each of which represents a single asynchronous unit of work. Action chains are triggered by events.

An action chain, like a variable, has a scope: it can be defined at the application level or the page level. You can call an application-scoped action chain from any page. You can call a page-scoped action chain only from the page on which it is defined.

To create an action chain, you can define your own actions and can also use predefined actions. Actions within a particular chain run serially, and multiple action chains can run concurrently. Action chains simplify the coordination of asynchronous activities.

A single event may simultaneously trigger multiple action chains. For example, the page enter event may trigger multiple data fetch action chains simultaneously.

An action is a specific function that performs a task. In JavaScript terms, an action is a Promise factory. An action can exist only within an action chain, not independently.

Action Chain Context and Contract

Action chains have a well-defined context and contract: an action chain orchestrates its underlying actions, coordinating state flow and the execution path. The action chain can define input parameters and local variables that are only available in that context. An example of an action chain is one that makes a REST call (first action), then takes the result of that and stores that in a variable (second action).

An action chain maintains its own context, which is accessible through an implicit object called $chain. Actions may export new state to that context, but it is only available to future actions along that same action chain. An action chain can be created in the context of a page or the application and exists within the scope of the page or the application. It has a defined interface and contract and can be called by event triggers using its ID.

The action chain contract has three parts.

Action Chain PartDescriptionIDString identifier for the action chainInput parametersZero or more variables that can be passed into the action chain and added to the action chain contextVariablesZero or more variables that are internal to the action chain and usable internally by actions

For more information, see Action Chains in the Oracle Visual Builder Page Model Reference.

Built-in Actions

Visual Builder comes with a set of built-in (or predefined) actions for an action chain, used for example navigation or assigning variable values. An action has the following parts that the developer can define:

Action PartDescriptionIDString identifier for this action instance. This action part is optional, since the ID is necessary only if you wish to refer to the action’s results later in the action chain.ConfigurationAny properties of the action that the user can configure. For example, for the Navigate action, the page to navigate to and any parameters required for that navigation.Outcomes and ResultsAn action may have multiple potential outcomes (such as success or failure, or a branch). It can also return results.Exported StateAn action may export state that is available to future actions within the context of the same action chain.

The predefined actions include conditionals and other processing instructions. For example, you can use if and switch actions that take an expression and offer multiple different chain continuations depending on the result.

For details about predefined actions, see Actions in the Oracle Visual Builder Page Model Reference.

Event Handling for Action Chains

Action chains are defined at the application or page level and triggered by a specific event, such as onValueChange (for a variable), or vbEnter. An event may include a payload, which can then be used within the action chain. A payload may be passed into an action chain through the input parameters. The Visual Builder user interface can help you create action chains automatically (with appropriate input parameters) based on a particular event.