Updated Oracle Visual Builder Studio
Here are some key things you can now do to extend your application pages using Visual Builder Studio:
- Distinct repositories or workspaces for extensions in a pillar
When you use the Edit Page in Visual Builder Studio option to configure Oracle Fusion Cloud Applications, distinct repositories and workspaces aren't created for every pillar you're extending. For instance, if you're configuring pages that belong to both the Oracle Fusion Cloud HCM and Oracle Fusion Cloud SCM pillars, you'll have one repository for all changes related to Oracle Cloud HCM and another for all changes related to Oracle Cloud SCM changes within a single project. This way, you can isolate changes in the same pillar to one repository and workspace in a project. For more information, see Configure an Oracle Cloud Application.
- Removal of the Application Extension template
The Application Extension template, featured in the Templates step of the New Project wizard, is no longer available. While you can derive the same functionality by creating an empty project, an environment that points to your Fusion Applications instance, and a workspace, the best practice is to use the Edit Page in Visual Builder Studio option in your Fusion Applications instance. This workflow automatically creates a project for your extension that includes all the required artifacts, such as a Git repository that contains the extension's source code, an environment that points to a development instance where your Fusion Cloud Application is running, and default build jobs that package and deploy the extension's artifact to your target instance. For more information, see Create a Simple Extension or Configure an Oracle Cloud Application.
- Removal of the Base Oracle Cloud Application list
The Base Oracle Cloud Application list, shown in the New Application Extension dialog box when trying to create a new extension from the Workspaces page, is no longer available. This option allowed you to select the extension whose App UIs are installed as dependencies for your extension when creating an App UI, but users typically add multiple extensions as dependencies when developing the App UI. It's simpler, therefore, to add the dependencies you need when working on the App UI, rather than having dependencies added that you may or may not use when creating the App UI. With this change, an extension created from the Workspaces page now uses the Unified Application as the base app. Once the extension is created, you can add dependencies when you actually begin to extend a Fusion Applications page from within the designer. For more information about how to add dependencies, see Add a Dependency.
- Changed dependency view for extensions in other pillars
When displaying an extension's dependencies by a pillar, uncategorized extensions show under Other only when one or more extensions from this pillar are added as a dependency. Further, only these explicitly added extensions show as dependencies (instead of all dependencies showing for other pillars, except CX). For more information, see What are Dependencies? and Add a Dependency.
- Pillar setting at extension level
The pillar setting has been moved to the extension level from the App UI level. While the setting still shows in an App UI's settings, its value is inherited from the extension and is now read-only. For more information, see Establish Extension-Level Settings and Establish App UI Settings.
- Custom root pages across extensions
You can now share a custom root page across extensions by adding the ID of the extension where the custom root page is defined, along with the root page ID. For more information, see Brand Your App UI With a Custom Root Page.
- Expression support
It's now possible to use expressions to identify your root page. This functionality is useful when you've defined multiple root pages (say, one for anonymous users and another for authenticated users) and want to switch between the two. For more information, see Brand Your App UI With a Custom Root Page.
- Support for optional parameters
If you define JavaScript modules as global functions, you can now define an optional parameter by setting its Default Value in the Functions editor. The Default Value field corresponds to defaultValue
in the parameter's definition in functions.json
. For more information, see Manage Global Functions.
- Display names for functions and parameters
Global functions have their own function and parameter names defined in functions.json
. These labels are now shown in the Functions editor and the Call Function action in the Action Chains editor. For more information, see Manage Global Functions.
- Simplified editing of fragment input parameters
You can now easily set the input parameters for fragments used in dynamic components. The input parameters are listed in the Properties pane when the dynamic component using the fragment has only one rule. For more information about Advanced mode, see Change the Value of an Extendable Constant. For more information about Express mode, see Work With Page Properties.
- Ability to set page properties in express mode
You can now use a dialog box to enter a page's input parameters in express mode. You can open the dialog box from a button in the header. The button is badged when the page requires an input parameter. For more information, see Other Views of the Designer.
- Support to call JavaScript action chain from a JSON action chain
With new action chains created as JavaScript actions, we've now added functionality that allows your existing JSON actions to call newer JavaScript actions. For more information about visual applications, see Add a Call Action Chain Action. For more information about extensions, see Add a Call Action Chain Action.
- Ability to reset dirty data status of specific variables
A new Variables to Reset property in the Reset Dirty Data Status action now allows you to reset the dirty status of only the variables you want. For more information about visual applications, see Add a Reset Dirty Data Status Action. For more information about extensions, see Add a Reset Dirty Data Status Action.
- The coverage tab for action chain tests
The tests footer now includes a coverage tab to display the average coverage of all tests, along with the number of failed and not-run tests, for the visual application or extension, and includes details for each of its web apps or App UIs, flows, and pages. For more information about visual applications, see Use the Tests Footer in a Visual Application. For more information about extensions, see Use the Tests Footer in Your App UI.
- Improvements to action chains editor
The Action Chains editor in design mode now has a search box at the top of the canvas to help you find text within your action chain. For more information about visual applications, see Create Action Chains in Design Mode. For more information about extensions, see Create Action Chains in Design Mode.
- Addition of Merge Request Description field
The publish dialog box now provides a Merge Request Description field, so you can describe everything in this field, not just a single commit. For more information about visual applications, see Deploy a Visual Application. For more information about extensions, see Publish Your Extension.
- Option to disable build jobs and pipeline creation
When you push changes in a scratch repository to a brand new repository, Visual Basic Studio by default creates packaging deploy jobs and adds them to a CI/CD pipeline. You now have the option to not create these build jobs and pipelines. For more information about visual applications, see Push a Scratch Repository to a Git Repository. For more information about extensions, see Push a Scratch Repository to a Git Repository.
- Support for autowiring fragment events on the parent container
Fragments propagate values to the parent container (like a page or a dynamic container) through custom events, but this requires manual configuration. Now you can use a new Auto Wire Event ID property to automatically wire the event to the fragment's parent container. So, when you try to create an event listener on the container where the fragment is used, you'll see the autowired event listed under Fragments Events on the parent container, allowing you to simply select the event and link it to an action chain.
Autowiring fragment events are especially useful in the context of extensions. Where previously you might have had to define event listeners on the base parent container as well as the extended parent container, autowiring allows the event listener on the parent container to be invoked whenever the event is fired on the fragment, whether on the base parent container, the extended parent container, or both.
For more information about visual applications, see Automatically Wire a Fragment's Custom Event to the Parent Container. For more information about extensions, see Automatically Wire a Fragment's Custom Event to the Parent Container.
- Option to enable asynchronous event handling
You now have the option to enable asynchronous event handling for components such as editable tables that accept asynchronous event listeners. Asynchronous event handling allows the component that fired the event to cancel it asynchronously if needed. However this functionality isn't enabled by default, so you must explicitly enable this behavior for your event listeners. For more information about visual applications, see Enable Asynchronous Handling for Component Events. For more information about extensions, see Enable Asynchronous Handling for Component Events.
- Create business rules templates
You can now create business rule templates to help users when they create business rules. By providing templates, a user can create a rule from a template and modify it as needed, instead of starting with an empty rule. A template can provide examples of how to configure business rules, for example, how to specify rule conditions, how to write advanced expressions, or how to override properties. Templates themselves are not evaluated. For more information about visual applications, see Create Templates for Business Rules. For more information about extensions, see Create Templates for Business Rules.
- Improved condition builder
The condition builder for business rules and validations has been improved to support additional operators. The operator's list now includes is null, is not null, includes, and does not include. You can now create conditions that compare the criterion's value to another field's value by selecting a field in the value drop-down list. For more information about visual applications, see Set Conditions for a Rule. For more information about extensions, see Set Conditions for a Rule.
- Support for adding message text
You can now include a message text when you set a field to read-only or required in a business rule. This message is displayed in the form when the rule is applied. For more information about visual applications, see Override Field Properties in a Form. For more information about extensions, see Override Field Properties in a Form.
- List of values in the page input parameters dialog box
It's now possible to display a list of values retrieved from a service (like a REST endpoint) for an input parameter by adding @dt metadata to the variables JSON and setting the subtype to lov. For more information about visual applications, see Enable Variables as Input Parameters. For more information about extensions, see Enable Variables as Input Parameters.
- Support for the new
oj-if
component
With JET 17.0.x introduced in this release, you can now use the oj-if
component to conditionally show or hide components in your pages. This component is similar to the oj-bind-if
component, but unlike oj-bind-if
the element isn't removed from the DOM after bindings are applied. oj-if
stays in the DOM and can therefore directly be used as the slot content of a custom element. If you want to conditionally render the content of a slot or if you want the element to stay in the DOM, oj-if
is recommended over oj-bind-if
. For more information about visual applications, see Use Conditions to See or Hide Components. For more information about extensions, see Use Conditions to See or Hide Components.
This functionality requires JET 17.x, or Fusion Applications 25A (with JET 17.x) or later for extensions.
- Core pack component versions for quick start fields
If you've enabled core pack components in your visual application, you can now choose the core pack component version for a field when using quick starts such as Add Create Page, Add Edit Page, and Add Details Pager. This option is also available in extensions, where the core pack version is automatically selected as the component for a field if the component's legacy version was superseded by the core pack version. If the legacy and core pack versions are both available, you can choose to use the core pack version. For more information about visual applications, see Use the Create Page Quick Start, Use the Add Edit Page Quick Start, and Use the Add Detail Page Quick Start. For more information about extensions, see Work With Core Pack Components.
- Improved breadcrumbs to view component children and siblings
You can now use breadcrumbs in the Page Designer to switch to a component's sibling in the page hierarchy. You can also view its children by hovering over at the end of the breadcrumb trial. For more information about visual applications, see Use the Page Designer. For more information about extensions, see Use the Page Designer.
The new Visual Builder Studio functionality provides you with a platform to extend your Fusion Applications extensively.
Steps to Enable
You don't need to do anything to enable this feature.
Key Resources
- Configure an Oracle Cloud Application
- Create a Simple Extension
- Add a Dependency
- What are Dependencies?
- Establish Extension-Level Settings
- Establish App UI Settings
- Brand Your App UI With a Custom Root Page
- Manage Global Functions
- Change the Value of an Extendable Constant (Advanced Mode)
- Work With Page Properties (Express Mode)
- Other views of the Designer
- Add a Call Action Chain Action (For Visual applications)
- Add a Call Action Chain Action (For extensions)
- Add a Reset Dirty Data Status Action (For Visual applications)
- Add a Reset Dirty Data Status Action (For extensions)
- Use the Tests Footer in a Visual Application
- Use the Tests Footer in Your App UI
- Create Action Chains in Design Mode (For Visual Applications)
- Create Action Chains in Design Mode (For extensions)
- Deploy a Visual Application
- Publish Your Extension
- Push a Scratch Repository to a Git Repository (For Visual applications)
- Push a Scratch Repository to a Git Repository (For extensions)
- Automatically Wire a Fragment's Custom Event to the Parent Container (For Visual applications)
- Automatically Wire a Fragment's Custom Event to the Parent Container (For extensions)
- Enable Asynchronous Handling for Component Events (For Visual applications)
- Enable Asynchronous Handling for Component Events (For extensions)
- Create Templates for Business Rules (For Visual applications)
- Create Templates for Business Rules (For extensions)
- Set Conditions for a Rule (For Visual applications)
- Set Conditions for a Rule (For extensions)
- Override Field Properties in a Form (For Visual applications)
- Override Field Properties in a Form (For extensions)
- Enable Variables as Input Parameters (For Visual applications)
- Enable Variables as Input Parameters (For extensions)
- Use Conditions to See or Hide Components (For Visual applications)
- Use Conditions to See or Hide Components (For extensions)
- Use the Create Page Quick Start
- Use the Add Edit Page Quick Start
- Use the Add Detail Page Quick Start
- Work With Core Pack Components
- Use the Page Designer