• Title and Copyright Information
• About This Content
  • Information About Cookies
• Part I The Essentials
  • The Basics
    • What Can You Do with Oracle Visual Builder Studio?
      • Which Tool Do I Use to Customize?
    • What Is an Extension?
    • What Is a Workspace?
    • What Is the Designer?
    • What Are Dependencies?
    • What Are Dynamic Components?
    • What Are Fragments?
    • How Do I Use My Sandbox in Visual Builder Studio?
    • Visual Builder and Visual Builder Studio: What’s the Difference?
    • What’s the Extension Lifecycle?
      • How Are Extensions Applied at Runtime?
    • Extension Best Practices
  • Get Started
    • What Do You Want To Do in VB Studio?
    • Configure an Oracle Cloud Application
    • Create an Extension
      • Collaborate on an Extension
        • Clone an Existing Repository
        • Import an Extension Archive
      • Use a Scratch Repository
    • Add a New Page to an Oracle Cloud Application
    • Add an Application to the Oracle Cloud Applications Ecosystem
    • Add a Resource to the Oracle Cloud Applications Ecosystem
    • Create a Bespoke Application
    • Use the Page Designer
      • The Components Palette
      • The Structure View
      • The Data Palette
      • The Properties Pane
        • Variables Picker
        • Expression Editor
• Part II Build an Extension
  • Extension-Level Actions
    • Establish Extension-Level Settings
    • Migrate Runtime Dependencies
      • Resolve Upgrade Issues
    • Export Your Workspace as an Archive
    • Import Resources to Your Workspace
    • Migrate Imported Resources
    • Switch a Workspace
    • Switch a Workspace’s Environment
  • Manage Your Extension with Git
    • Get Oriented with Git
    • Pull Changes from the Remote Branch
    • Make Your Changes Public
      • Commit Your Changes to the Local Branch
      • Push Your Changes to the Remote Branch
    • File-Management Operations
    • Refresh Your Workspace
    • Resolve Conflicts Using the Git Panel
      • Use the Context Menu
      • Use the Conflict Editor
    • Stash Your Changes
      • Create a Stash
      • Apply a Stash
      • Delete a Stash
    • Revert Commits
    • Cherry-Pick Commits Between Branches
      • Get the Revision ID of a Commit
      • Cherry-Pick a Commit From Another Branch
    • Create or Switch a Branch
    • Rename a Branch
    • Delete a Local Branch
    • Merge Remote Branches
    • Push a Scratch Repository to a Remote Repository
    • Using Branches with a Sandbox
    • View Git History
    • How Do Sandboxes Relate to Git Branches?
      • Switch a Sandbox
      • Refresh a Sandbox
      • Disassociate a Sandbox
      • Publish a Sandbox
  • Work With Services
    • Manage Backends
      • What Are Backends?
      • What Are In-Source Servers?
      • What Are Local Servers?
      • Set the Backend’s Authentication Method and Connection Type
        • How Does the Identity Propagation Authentication Method Work?
        • How Does the Fixed Credentials Authentication Method Work?
        • How Does the OAuth 2.0 Authorization Code Grant Authentication Method Work?
        • What is CORS?
        • Decide Between Direct Calls and Using a Proxy
        • OAuth and JWT Token Validity
      • Create a Backend
        • Add Server Variables for Backends
        • Create a Custom Backend
        • Provide a Backend’s Runtime Server Details
        • Create a Child Backend
          • Create a Child Backend for a Top-Level Custom Backend
          • Create a Child Backend for the Oracle Cloud Applications Backend
      • Edit a Backend
        • Add Transforms
          • Service Level Transforms
    • Manage Service Connections
      • What Are Service Connections?
        • Service Connections: Static Versus Dynamic
      • Create a Service Connection
        • Create a Service Connection from a Catalog
          • Create Service Connections from the Oracle Cloud Applications or Integration Applications Catalog
        • Create a Service Connection from a Service Specification
        • Create a Service Connection from an Endpoint
      • Edit a Service Connection
        • Manage Service Endpoints
        • Retrieve Service Metadata for a Dynamic Service Connection
        • Add Server Variables for Service Connections
        • Add Transforms to a Service Connection or an Endpoint
        • Convert a Service Connection
        • Test Service Connection Responses
        • Update Schema of the Request or Response
    • Connect to Other Services
      • Connect to OCI Process Automation Services
      • Connect to Google Drive Using the OAuth 2.0 Authorization Code Grant
  • Work With Layouts in Your Extension
    • Exploring a Layout
    • Extending a Layout in a Dependency
    • Create a Layout
    • Create a Rule Set in a Layout
    • Override Field Properties
  • Preview, Share, and Publish Your Extension
    • Preview Your App UI
    • Share Your App UI
    • Customize Optimization
      • Optimization Configurations for build.json
      • How to Migrate Gruntfile.js Configuration Into build.json
    • Debug and Audit Your Code
      • Troubleshoot Build Issues
      • Suppress Optimization
      • Change the Log Level
    • Publish Your Extension
      • Enable or Disable the CI/CD Pipeline for Publishing
      • Publish Your Changes Without CI/CD Pipelines
      • Publish Your Changes Through CI/CD Pipelines
      • Deploy to Test and Production Instances
      • Create or Renew OAuth Tokens to Deploy Your Extension
      • Impact of P2T on Extensions
      • Deploy an Extension From Your Local System
      • Specify a Different Version for the Extension
      • What If Dev and Prod Instances Aren’t On the Same Release?
    • Deploy Changes From the Remote Branch
    • View Your Deployments
    • Manage Your Published Extensions
    • Roll Back a Published Extension
    • Build and Package Your Extension Manually
      • Build Your Extension Using Grunt
      • Deploy Your Extension Using Grunt
  • Work With Translations
    • What are Translation Resources?
    • Create a Translation Bundle
    • Create Translation Keys
    • Associate a Translation Key with a UI Component
    • Expressions in Translatable Strings
      • Use an Expression in a Translatable String
    • Override a Translation Key Value
    • Download and Upload Translation Bundles
• Part III Configure an App UI
  • Customize an App UI
    • How Tos
  • Customize Dynamic Tables and Forms
    • Control Your Display with Rule Sets
      • Determine What’s Displayed at Runtime With a Rule Set
      • Open a Rule Set From Oracle Cloud Applications
        • Edit a Component’s Layout in the Properties Pane
        • Open a Rule Set From Visual Builder Studio
      • Create a Rule in a Rule Set
        • Create a Rule Based on User and Device
      • Create a Layout in a Rule Set
        • Edit a Field’s Properties in a Layout
        • Use Conditions to Hide and Show Fields in a Layout
        • Configure How Columns Are Rendered in a Dynamic Table Layout
        • Set a Field to Display as a Text Area in a Form
        • Set How User Assistance is Rendered in a Layout
        • Group Fields in Dynamic Form Layouts
      • Control How a Field is Rendered with Templates
        • Create a Field Template
        • Apply a Template to a Field
        • Set the Default Template for a Field in a Layout
        • Add and Group Fields in Dynamic Form Layouts
        • Add a Link to a Page in an App UI
      • Create Templates for Form Layouts
        • Apply a Template to a Form
      • Create Fields For a Layout
        • Create a Virtual Field
      • Add Converters and Validators to Fields
      • Use Context Parameters in Extensions
      • Work with Polymorphic Objects in a Layout
    • Control Your Display with Business Rules
      • What Are Business Rules?
      • Work with Business Rules
        • Create a Rule for Forms
        • Create a Rule For Tables
        • Use Nested Rules
        • Add an If/Else Rule
        • Add a Switch Rule
        • Filter Your Rules
        • Set Conditions for a Rule
          • Create Condition Using a Field’s Initial Value
          • Build Advanced Expressions
        • Override Field Properties in a Form
          • Set a Default Value for a Field
          • What Do the Blue Indicators Mean?
          • Locks, Blanks, and Dashes
          • Set Properties at the Region Level
        • Understand What Will Be Shown at Runtime
          • Interpret the Pop-Up Viewer
          • Identify the Regions and Fields Impacted By a Rule
      • Display Messages in a Form
        • Create a Rule to Validate a Field
        • Use Templates with Validation Rules
  • Customize Dynamic Containers
    • How Do Cases Work?
    • Configure a Dynamic Container
    • Guidelines for Working with Container Sections
    • Add Content From a Custom Object to Your Page
    • Extend a Container in a Fragment
  • Customize Variables and Constants
    • Change the Value of an Extendable Constant
    • Hide and Show an Element Using a Constant
    • Create and Edit Variables and Constants
    • Set Property Values Using Rules
  • Trigger Actions in Dynamic Components
    • Trigger Actions in Layouts
      • Define Behavior for Components in Layouts
      • Start an Action Chain From an Action Chain
      • Start an Action Chain from a Field or Variable
      • Use Lifecycle Events to Start Action Chains in a Layout
      • Call Custom JavaScript Functions
      • Use Events Defined in a Dependency
    • Trigger Actions in Dynamic Containers
  • Work With Fragments From Dependencies
    • What are Referenceable and Extendable Fragments?
    • Add a Fragment From a Dependency
    • Extend a Fragment in a Dynamic Form or Table
    • Extend a Fragment in a Dynamic Container
• Part IV Build an App UI or Fragment
  • Develop an App UI or Fragment
    • Create an App UI or Fragment
      • How Are App UIs Structured?
      • What Are Scopes?
    • Add a Dependency
    • Establish App UI Settings
      • Brand Your App UI with a Custom Root Page
      • Control Access to Your App UI
  • Work With Pages and Flows
    • Create and Manage Pages
      • Manage Page Settings
      • Set a Page’s Layout
    • Create Pages From Templates
      • Create Pages From Patterns
      • Create Pages From Fragments
      • Change Page Templates
    • Create and Manage Flows
      • Manage Flow Settings
      • Embed a Flow Within a Page
    • Display SaaS Data In Your App UI
    • Navigate Between Pages and Flows
      • Navigate Between Pages in the Same Flow
      • Navigate Between Pages in Different Flows
      • Navigate Between Pages in Different App UIs
      • Navigate From Fragments and Layouts to App UIs
  • Work With Components
    • Add Components to Pages
      • Add a Component Using Code Completion
      • Work With JET Core Pack Components
      • Bind a Component to Data
      • How Do Quick Starts Work?
      • Add an Image to a Page
      • Add an Icon to a Page
      • Add a Camera Component to a Page
      • Filter Data Displayed in a Component
        • Filter Data by Filter Criteria
        • Filter Component Data by Text
        • Filter Component Data by URL
      • Use Conditions to Show or Hide Components
      • Use Converters to Change Date and Time Formats and Time Zones
    • Add Dynamic Components to Pages
      • Add a Dynamic Table to a Page
      • Add a Dynamic Form to a Page
      • Determine What’s Displayed at Runtime With Rule Sets
        • Create a Layout for a Dynamic Table or Form
        • How To Write Expressions If a Referenced Field Might Not Be Available Or Its Value Could Be Null
      • Use Field and Form Templates
        • Control How a Field is Rendered with Field Templates
        • Apply a Template to a Field
        • Start an Action Chain from a Field
        • Control How a Form Layout is Rendered
        • Apply a Template to a Form
      • Use Business Rules With Your Rule Sets
        • Create a Rule for Forms
          • Set Properties For Form Fields
        • Create a Rule for Tables
        • Include and Exclude Rule Sets in Business Rules
        • Create Templates for Business Rules
      • Edit a Field’s Properties
        • Set a Field to be Read Only
        • Set How User Assistance is Rendered in a Layout
        • Set a Field to Display as a Text Area in a Form
        • Set a Field as Required
        • Specify How a User Input Overrides a Field Value
        • Map a Field to a Global Field Template
        • Use Conditions to Show or Hide Fields in a Layout
        • Control How Fields With a Null Value are Displayed in Forms
        • Configure How Columns Render in a Dynamic Table’s Layout
        • Add Converters and Validators to a Field
      • Create Fields For a Layout
        • Create a Calculated Field
        • Create a Virtual Field
      • Add a Dynamic Container to a Page
        • Add Fragments as Sections in a Dynamic Container
        • Re-Ordering a Container’s Content
        • Guidelines for Working with Container Sections
        • Change a Dynamic Container’s Layout
        • Make a Container Available to Extensions
      • Make a Rule Set Extendable
    • Add Custom Web Components to Pages
      • Install a Web Component from the Component Exchange
      • Update a Web Component from Component Exchange
      • Import a Web Component Using a ZIP Archive
      • Create a Web Component
      • Uninstall a Web Component
  • Work With Variables, Types, and Constants
    • What are Variables?
    • Create Variables
      • Enable Variables as Input Parameters
      • Track Variables to Detect Unsaved Changes
      • Create Variables to Temporarily Store Data Changes in a Buffer
    • Create Types
      • Create a Custom Object or Array Type
      • Create a Type From an Endpoint
      • Create a Type From Code
    • Make Variables and Types Available to Extensions
      • Configure How Variables are Customized in the Properties Pane
      • Organize How Constants Are Listed in the Properties Pane
    • Service Data Provider
      • Creating a Custom Fetch Action Chain - An Example
      • Delay Display of SDP Data
  • Work With JavaScript Action Chains
    • About Action Chains
    • About the Action Chain Editor
      • Create Action Chains in Design View
      • Create Action Chains in Code View
    • About the Action Chain Code
    • Visually Create an Action Chain
    • Built-In Actions
      • Add an Array Operation Action
      • Add an Assign Variable Action
        • Use Filter Builder to Create Filter Criteria for an SDP
        • Filter Builder’s Code Editor
      • Add a Call Action Chain Action
      • Add a Call Component Action
      • Add a Call Function Action
      • Add a Call REST Action
        • Service Definitions
        • Transform Functions
      • Add a Call Variable Action
      • Add a Code Action
      • Add a Fire Data Provider Event Action
      • Add a Fire Event Action
      • Add a Fire Notification Action
      • Add a For Each Action
      • Add a Get Dirty Data Status Action
      • Add a Get Location Action
      • Add an If Action
      • Add a Navigate Back Action
      • Add a Navigate To Application Action
      • Add a Navigate To Flow Action
      • Add a Navigate To Page Action
      • Add an Open URL Action
      • Add a Reset Dirty Data Status Action
      • Add a Reset Variables Action
      • Add a Return Action
      • Add a Run In Parallel Action
      • Add a Scan Barcode Action
      • Add a Share Action
      • Add a String Operation Action
      • Add a Switch Action
      • Add a Try-Catch Action
    • Custom Actions
      • Create a Custom Action
        • Create the Action Files
        • Add the Metadata
          • Define the Custom Action’s Properties
          • Define Input Parameters for a Custom Action
        • Add the Code
          • How Are Input Parameters Passed?
          • How are Values Returned?
        • Specify Path to Code
    • Start an Action Chain
      • From a Component
      • When a Variable Changes
      • From a Lifecycle Event
      • By Firing a Custom Event
    • Test Action Chains
      • Create a Test for a Test Case
      • Run the Tests
      • Use the Tests Footer in Your App UI
  • Work With JSON Action Chains
    • What is an Action Chain?
    • Create an Action Chain
    • Built-in Actions
      • Add an Assign Variables Action
        • Filter Builder’s Code Editor
      • Add a Call Action Chain Action
      • Add a Call Component Action
      • Add a Call Function Action
      • Add a Call REST Action
      • Add a Call Variable Action
      • Add a Fire Data Provider Event Action
      • Add a Fire Event Action
      • Add a Fire Notification Action
      • Add a Get Location Action
      • Add a Reset Variables Action
      • Add a Scan Barcode Action
      • Add a Share Action
      • Add a Take Photo Action
      • Add a For Each Action
      • Add an If Action
      • Add a Return Action
      • Add a Run In Parallel Action
      • Add a Switch Action
      • Add a Navigate Action
      • Add a Navigate Back Action
      • Add an Open URL Action
    • Custom Actions
      • Create a Custom Action
        • Create the Action Files
        • Add the Metadata
          • Define the Custom Action’s Properties
          • Define Input Parameters for a Custom Action
        • Add the Code
          • How Are Input Parameters Passed?
          • How are Values Returned?
        • Specify Path to Code
    • Test Action Chains
      • Manage All Tests in Your App UI
    • Start an Action Chain
      • From a Component
      • When a Variable Changes
      • By Firing a Custom Event
      • From a Lifecycle Event
  • Work With Events and Event Listeners
    • Define Events in Your App UI
    • Create Event Listeners for Events
    • Choose How Custom Events Call Event Listeners
    • Enable Asynchronous Handling for Component Events
    • Raise Fragment or Layout Events that Emit to the Parent Container
    • Use Events Defined in the Unified App
    • Make an Event Available to Extensions
  • Work With Resource Files
    • Import Resources
    • Work with the Image Gallery
    • Create Declarative References to Imported Resources
  • Work With Code
    • Work With JavaScript
      • Add a Custom JavaScript Function
      • Use Variables with a JavaScript Module
      • Work With Third-Party JavaScript Libraries
      • Use RequireJS to Reference Third-Party JavaScript Libraries
      • Add JavaScript Modules As Global Functions
        • Manage Global Functions
        • Example JS Module Defined As a Global Function
        • Example functions.json to Declare Global Functions
    • Work With JSON
    • Trigger Code Insight
    • Manage Code Editor Settings
    • Files in Source View
  • Work With the Diagram View
    • View a Flow’s Navigation in Diagram View
    • Add Pages and Action Chains to a Flow in Diagram View
      • Add a Page in the Flow Diagram
      • Create an Action Chain in the Flow Diagram
      • Bind an Action Chain in the Flow Diagram to an Existing Event Listener
      • Show or Hide an Action Chain in the Flow Diagram
  • Work With Fragments
    • Create and Add a Fragment to a Page
    • Define Actions and Events in Fragments
    • Manage Fragment Settings
    • Reuse a Fragment
    • Pass Data Between a Fragment and Its Parent Container
      • Enable Fragment Variables as Input Parameters
      • Enable Page Variables to Provide Initial Values for a Fragment’s Input Parameters
      • Bind Fragment Input Parameters to Page Constants
      • Automatically Write Back a Fragment Variable’s Value to Its Container Variable
      • Automatically Create and Wire a Fragment Variable on Its Container
      • Sample Scenario: Create a Fragment and Pass Values
      • Create Custom Events that Emit to a Fragment’s Parent Container
      • Automatically Wire a Fragment’s Custom Event to the Parent Container
      • Set the Binding Type for Variables in Dynamic Components
      • Resolve Expressions in Page Properties Based on Fragment Data
      • Pass a Fragment’s Context to VDOM or Custom Web Components
    • Defer Rendering of a Fragment’s Content
    • Make a Fragment Available to Other Extensions
    • Add Slots to a Fragment
      • Add Default Content to a Fragment Slot
      • Set Data Context for a Fragment Slot
    • Customize How Fragment Properties Display in the Properties Pane
      • Customize How a Fragment Variable is Displayed in the Properties Pane
      • Section Fragment Properties for Display in the Properties Pane
  • Common Use Cases
    • Populate a List of Values Based on Another LOV
    • Selectively Enable a Field
    • Selectively Display a Field
    • Add Offline Support for Your App UI
    • Abort Pending REST Calls in VB Studio
• Part V Troubleshooting
  • Troubleshooting and FAQs
    • Resolve the “Page cannot be previewed” Message
    • Resolve the "Loading Completed with Errors" Message
    • Resolve the Empty Page State in the Designer
    • Fix Table Columns Showing As Text
    • How Do I Clear My Extension’s Resource Cache?
    • How Do I Recover My Extension After Deleting the Project?
    • Can I Change My Extension’s Extension ID After Deployment?