What are the components of Visual Builder Studio's Express mode?
Title and music.
In an Oracle application, you may be asked to change the appearance or behavior of a page. In this video I’ll give you an overview of using Visual Builder Studio’s Express mode to modify Redwood pages.
To use Visual Builder Studio, you must have been granted an application administrator role. To modify a Redwood page, first navigate to the page. For this demonstration, we’ll use the Change Salary page. Once you’re there, from the Settings and Actions menu select Edit Page in Visual Builder Studio. If this option isn’t available, it’s likely you’re not on a Redwood page. The first time you start Visual Builder Studio, or VB Studio, it generates a default project. This is a container for everyone’s modifications.
Sign in to the application.
From the Home page, click My Client Groups.
Under the Quick Actions section, click Show More.
In the Compensation section, click Change Salary.
In the list of users, click on Walter Gibson.
In the upper right, click the Settings and Actions menu.
Select Edit Page in Visual Builder Studio.
The first thing to notice is the Express/Advanced selection at the top center of the page. For Oracle Cloud HCM applications, you should make sure you’re working in Visual Builder Studio’s Express mode. You should remain in Express mode unless instructed to change by Oracle support. You’re immediately placed in the designer so you can start working on your page as shown here. The designer is divided into three areas. The canvas area shows the page you’re currently working on. The header area provides a lot of general functionality, so let’s walk through it next.
First, you have the page selector, letting you quickly navigate to any available page. Notice that it includes all pillars, has search functionality, and, most importantly, keeps track of your recently-visited pages so you can quickly return to them.
Expand the page selector.
Collapse Customer Experience (CX).
Expand Human Capital Management (HCM).
Click elsewhere on the page to close the menu.
When available, the page properties let you view and adjust the current page properties; for example, you can change the person ID to see how the page would look for a different user.
Notice the Live/Design buttons in the header. In live mode, as you make changes, the canvas is updated to reflect your modifications so you can always see what the user will be seeing. You can even navigate the application, so you can test your changes. However, while you’re working, you probably don’t want the canvas constantly updating with your changes, so you can toggle the canvas to design mode until you’re ready to test. In design mode, you’ll still see major changes such as adding a Journey or hiding a region, but the number of updates will be significantly reduced.
Click the Set Page Properties icon.
Click Cancel.
The next two icons let you undo or redo your changes; in fact, the drop-downs let you select exactly which recent action you want to undo or redo.
Expand the Undo drop-down list.
You can enter an application sandbox while you’re working in VB Studio. This is more common when you’re working with Application Composer to create new fields, but it’s important to know that VB Studio is aware of your application sandboxes and can enter them.
You can provide product feedback here.
As an alternative to Live mode, you can preview your current configuration in a new browser tab.
The Publish button lets you start the process of publishing your changes to make them visible to all users. See the documentation for a detailed list of steps to publish.
In the Actions list, the Share action lets you copy a URL that you can provide to application users so they can test your changes themselves. Be sure to click Share before you click Copy. Sharing is similar to Preview mode, but the person using the URL doesn’t need access to VB Studio; they sign in as themselves and they can explore your changes before you publish them.
Expand the Actions (…) list.
Click Share.
In the dialog, click Share.
Click Copy.
Click Done.
Expand the Actions list to view the other options.
The Extension Lifecycle lets you review all changes made in this project, or even all changes ever made.
The rest of the items are helpful or quality of life items. You can use About to get your current version and access to various documents such as copyright information or your privacy rights. You can use a light or dark Theme or match your system settings. Help will take you to the Visual Builder Studio documentation landing page, where you'll find a guide dedicated to using Express mode. Code examples takes you to the Oracle Visual Builder Cookbook, with dozens of recipes representing real-world implementations. Discussion forums takes you to Cloud Customer Connect discussions on Visual Builder. And Getting Started takes you to the getting started tutorials.
Click anywhere else on the page to close the Actions list.
Finally, The Properties pane is where you’ll spend most of your time, so let’s review the available options you may see there.
Business rules are used to manage field and region properties. If you click Configure Fields and Regions, you can create a rule, set conditions for the rule, and select whether fields are hidden, read-only, or required or whether a page region is visible. Some fields also support setting default values for them. Check the HCM documentation to find out if defaulting is supported for this page, and which fields. For more information on navigating the documentation, see the associated video.
Click the Configure Fields and Regions button.
In the Form Rules section, click the Create (+) icon.
In the Label field, enter Demo Rule.
Click Create.
In the Conditions section, click Edit.
In the Regions and Fields section, expand When and Why.
Right-click Demo Rule.
Select Delete.
Click the Close (X) icon.
If you click Validate Field Values, you can create validation rules where you set conditions and either display a warning to a user or generate an error and prevent the user from saving the invalid value. It’s important to check the documentation to make sure the validation you’re trying to configure is supported. Conditions, defaulting, and validation all support using advanced expressions, which let you express more complex conditions than you can achieve with the basic condition builder.
Click the Validate Field Values button.
Click the Create (+) icon.
In the Label field, enter Demo Rule.
Click Create.
In the Conditions section, click Edit.
Click the Full screen icon.
Expand the Severity list.
Click elsewhere on the page to close the Severity list.
Click the Exit Full screen icon.
Right-click Demo Rule.
Select Delete.
Click the Close (X) icon.
The remaining values in the properties pane depend on the page you’re editing. Some of the common properties let you add guided journeys and select which journey tasks to include, or to enable AI assist if it’s available for that page. You may also be able to use page properties to hide or show specific sections of a page. If you’re not sure how to find a property, the filter at the top of the page is a convenient way to start searching. As mentioned, at any time as you modify properties or rules, you can preview your changes and test the navigation.
Scroll down as needed to expose additional page properties.
Scroll up.
In the Filter field, enter URL.
Clear the Filter field.
In the Admin Salary Guided Journey Code field, enter CHANGE_SALARY.
Click Live to change to live mode.
Click Know Before you start.
This concludes our review of Visual Builder Studio in Express mode.
Oracle copyright and music.