What Is the Designer?

In Express mode, the Designer is divided into three main areas:

Description of designerareasexpress.png follows
Description of the illustration designerareasexpress.png

  1. Header
  2. Canvas/Editors
  3. Properties pane

Read on to discover what's contained within each area.

The Header

The header contains information about your current VB Studio session, and provides access to tools that help you share and publish your changes when you're ready.

Description of designerexp.png follows
Description of the illustration designerexp.png

Here's what each element does:

Label Element Description
A Page title Displays the title of the page open in the Designer. Click the page title to open a list of pages in the Navigator, which you use to locate and open Oracle Cloud Application pages.
B Express / Advanced Toggles between the full view of Visual Builder Studio (called "Advanced" mode) and Express mode. Express mode is tailored for the needs of Oracle Cloud Applications functional administrators.
C Live / Design Toggles between Live and Design modes.
  • Live mode: Displays the page as it will look and behave when it is published. Use Live mode to interact with the page and to confirm that your application is behaving as you expect.
  • Design mode: The mode you use most frequently, to select components on the page.
D 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 Remove Section slotted action in this image will re-add the section and undo the two other changes you made after removing the section:
This image shows a list of actions when a user clicks the Undo drop-down. Actions shown here are Remove Section hcmfoldoutpage, Add Section /hcm-foldout-page, Remove Section slotted, Add Section /slotted, and Remove Section sectioned. The third action (Remove Section slotted) is selected, adding a check mark next to all the actions up to the selected one.

Tip:

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.
E 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 Remove Section hcmfoldoutpage action in this image will also revert the previously undone action:
This image shows a list of actions when a user clicks the Redo drop-down. Actions shown here are Add Section /hcm-foldout-page and Remove Section hcmfoldoutpage. The first action (Add Section /hcm-foldout-page) is selected.

Tip:

You can redo 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 redo more than 10 actions, simply redo a few items, then open the drop-down list again.
F Feedback Submit your feedback about VB Studio to Oracle.
G Preview Use the Preview action to see how your page looks and behaves in a browser.
H Publish After you're done testing your changes, use the Publish action to apply them to your development environment.
I Menu Open a menu containing the Share action, so you can make your changes available to others before publishing. The menu also provides options for navigating to the Visual Builder Studio Help Center and discussion forums, changing the Designer theme, and signing out.

VB Studio constantly saves your changes as you work, so there's no need to save them explicitly.

Canvas/Editors

When you open a page, it opens in the canvas area. When you're in Design mode, you can select configurable items on the canvas to view their details in the Properties pane. When you open the Visual Builder Studio editors, for example, the business rule editors, they open in this area, on top of the page on the canvas. In wide browser windows, you can see the page to the left of the editors.

Properties Pane

The content of the Properties pane changes, depending on how your page was configured. If your page was configured with business rules, you'll have access to the business rule editors from the Properties pane. For pages controlled by rule sets, a link to the rule sets editor is provided.

If an Oracle Cloud Application page has configurable containers or page properties, you can edit them from the Properties pane.