Using the Page Designer

The Page Designer provides tools and palettes for building pages and creating business objects.

The Page Designer is organized with a toolbar at the top, palettes on the left, a canvas representing the page in the center and the Property Inspector on the right.


Description of page-designer-page1.png follows
Description of the illustration page-designer-page1.png

Design and Live Modes

The Page Designer has two modes that you can switch between using the toggle in the toolbar. The default mode is Design mode and is used for building pages and for creating business objects. In Design mode you drag elements from the palettes and position them on the canvas. You can select an element on the canvas and move the element to reposition it and to modify the element’s properties in the Property Inspector.

In Live mode all the UI components on the canvas are active and you can interact with them to navigate between pages and add, edit and save data to your database.

Tip:

Hold the Ctrl key (Cmd on Mac) to momentarily switch modes. For example, in Design mode you can hold the Ctrl key to switch to Live mode and click links to navigate to other pages or click form elements to enter and submit data.

The Page Designer Toolbar

The toolbar at the top of the Page Designer provides a context breadcrumb trail and tools for modifying the appearance of the Page Designer.


Description of page-designer-toolbar.png follows
Description of the illustration page-designer-toolbar.png

The following table describes the tools that are available in the toolbar.

Toolbar Item Description
Context Breadcrumb Trail The breadcrumb trail provides the context of the item that is selected on the canvas. You can click an element in the trail to select objects in the page hierarchy.

You can navigate to other pages in your application by clicking the page name in the trail and selecting a page in the menu. The menu also contains a link to the Create Page wizard.

Design / Live Toggle The Design / Live toggle switches between the Design and Live modes of the Page Designer. You can also hold the ctrl key (cmd on Mac) to momentarily switch between modes, for example, to check the values in a drop-down menu by holding the ctrl key and clicking the menu on the canvas.
Page Zoom Menu The Page Zoom menu changes the magnification of the canvas.
Test Application Button The Test Application button opens the application in Application Test mode. In Application Test mode you can preview the pages and the behavior of the application in your browser without the Page Designer components such as the palettes and Property Inspector.
Undo Button The Undo button reverses changes you have made in your current session, starting with the most recent. You can also use ctrl-Z (cmd-Z on Mac) to access the Undo feature.
Redo Button The Redo button restores a change you have removed using the Undo button. You can also use ctrl-Y (cmd-Y on Mac) to access the Redo feature.
Property Inspector Button The Property Inspector button toggles the Property Inspector in the Page Designer.

The Page Designer Canvas

You design each page of your application in the canvas area of the Page Designer. Depending on the template of your application, each page typically includes some default elements such as a header and footer that surround the central canvas area.


Description of page-designer-canvas.png follows
Description of the illustration page-designer-canvas.png

The canvas uses a pre-defined layout grid of columns and rows to help with aligning elements when you position them. When you drag an element onto the canvas, some elements will expand to fit all the available columns in the row, other elements have a default column span that you can adjust. You can add additional layout elements from the Components palette to help organize the elements on the canvas.

The pages in your application incorporate responsive design to resize gracefully based on the size of the display area of the device.

The Components Palette

The Components Palette contains UI components and organizational elements that you use to build your pages. You add an element to a page by dragging it from the palette onto the canvas.


Description of page-designer-components-full2.png follows
Description of the illustration page-designer-components-full2.png

The Data Palette

The Data Palette is used to work with the business objects in your application. You can use the Data Palette to create new business objects, create relationships between objects and add fields to objects. You can drag elements from the palette into a form to create data-bound components.


Description of page-designer-data-full2.png follows
Description of the illustration page-designer-data-full2.png

Use the drop-down list in the Data Palette to select a business object in your application and view a list of the fields in the object and any related objects. You can quickly add fields in the Data Palette, but use the Data Designer if you want to configure more advanced properties such as validation rules.

The Themes Palette

The Themes palette displays the themes that you can apply to the pages in your application. The application theme defines the basic layout and style information for the application and is used to apply a look and feel to the elements wrapping the main content in your pages, and can also be used to determine the placement and behavior of navigation elements.


Description of page-designer-themes-full2.png follows
Description of the illustration page-designer-themes-full2.png

The Property Inspector

The Property Inspector displays the properties of the component that is currently selected on the canvas. Depending on the component that is selected, the Property Inspector might have additional tabs for modifying the attributes or behavior. When you add a collection component such as a table or list to the canvas, a wizard for mapping the collection to a business object opens in the Property Inspector. You can use the toggle button in the toolbar to hide or display the Property Inspector.


Description of page-designer-property-inspector1.png follows
Description of the illustration page-designer-property-inspector1.png

About Using Live Mode in the Page Designer

Your application is always a live application that you can interact with by entering Live mode.

When you are building your application in the Page Designer you are editing a live application. The Page Designer has two modes: Design mode and Live mode. The default mode is Design mode and is used for building pages and for creating business objects. In Design mode you drag components from the palettes and position them on the canvas. You can select a component on the canvas and reposition it and modify the component’s properties in the Property Inspector.

In Live mode all the components on the canvas are active and behave as they would in a web application. You can interact with the pages in your application to navigate to different pages, create and modify business objects stored in your database and confirm that your application is behaving as you expect.

You can use the Design/Live toggle in the toolbar to switch between modes. Alternatively, holding the Ctrl key (Cmd on Mac) temporarily switches the mode.

Description of page-designer-livetoggle.png follows
Description of the illustration page-designer-livetoggle.png

Tip:

In Design mode you can ctrl-click an element on the canvas to test an element’s behavior without switching to Live mode. For example, you can ctrl-click links to navigate to other pages and ctrl-click form elements to enter and submit data.

Configuring Responsive Behavior

To optimize your application’s usability on different devices, you can configure how the design of your pages and page components respond to the screen size of the device.

The position and size of elements in your pages automatically respond to the screen size of devices. For example, a form that is displayed in two columns on a tablet in landscape mode is automatically displayed in a one-column layout when viewed on a tablet in portrait mode.


Description of pagedesigner-responsive-tablet1.png follows
Description of the illustration pagedesigner-responsive-tablet1.png

You can use the Screen Size toolbar at the top of the Page Designer to select the canvas size and see how the layout changes. The screen size options in the toolbar are grouped by types of devices and the device orientation.

Description of pagedesigner-responsive-toolbar.png follows
Description of the illustration pagedesigner-responsive-toolbar.png

Note:

When designing pages for smaller screen sizes, you might want to place components below each other on the smaller screen size first and then switch to a larger screen size to adjust the responsive behavior.

You configure the responsive behavior for individual components in the Responsive tab in the Property Inspector. When a component is selected on the canvas, the Responsive tab displays the responsive properties that can be configured for that component. For example, for a table component you can change the default properties to hide some columns when viewed on a phone.  


Description of pagedesigner-responsive-prop.png follows
Description of the illustration pagedesigner-responsive-prop.png
To configure the responsive properties of a component:
  1. In the Page Designer, select the component on the canvas.
  2. Open the Responsive tab in the Property Inspector.
    The responsive properties that you can configure in the Responsive tab depend upon the component that is selected.
    Description of pagedesigner-responsive-prop1.png follows
    Description of the illustration pagedesigner-responsive-prop1.png
  3. Select a device in the Set Properties For dropdown list.
    The size and orientation of the canvas changes to reflect the device that you select in the list.
  4. Modify the responsive properties of the component.
    The page on the canvas is automatically updated when you change a property.

    Each component has default property settings. Click Clear Custom Settings to restore the default property settings for the selected screen size.

Activating Role-Based Application Preview

Application roles can be used to secure access to components, pages and objects in your application. You can preview how the role-based security settings of your application will affect the layout of pages and the behavior of your application.

Role-based security enables you to configure the data and pages that are accessible to users based on the user’s role. The security settings for your pages, components and business objects will determine the pages, components and data that are visible to users, how users can navigate between the pages and the layout of the pages in your application. See Enabling Role-Based Security.

When viewing pages in the Page Designer or the Test Application mode, by default the pages that you see are not affected by the security settings. To see how your security settings will affect your application, click Who am I? in the Screen Size toolbar to open the Who am I? role selector.


Description of pagedesigner-device-toolbar-whoami.png follows
Description of the illustration pagedesigner-device-toolbar-whoami.png

The Who am I? role selector displays a list of the application roles defined in the application. By default, all the pages and data are accessible because all roles are selected and active. You use the Who am I? role selector to select the roles that are currently active. When you close the role selector, the pages displayed in the Page Designer or Test Application mode will reload and display the pages based on the security settings for the active roles. The selected roles remain active until you change them in the role selector. The Who am I? icon in the toolbar is highlighted when one or more roles are deactivated in the Who am I? role selector.


Description of security-who.png follows
Description of the illustration security-who.png

Multiple roles can be active simultaneously, but at least one role must always be active. For a more accurate representation of how your application will look and behave for a specific role, you might want to deactivate all the roles except the one you are interested in. For example, if Anonymous User and Authenticated User are both active, you are seeing the application as it appears to users that are signed in and to users that are not signed in. By deactivating the Authenticated User role you will see and experience the application as an Anonymous User would see it. An anonymous user that was not granted rights to view data in a business object would not see any data if they visited the collection page for the object. Additionally, if View access was not granted, links in the UI to the collection page would be hidden from the anonymous user.


Description of pagedesigner-security-deactive.png follows
Description of the illustration pagedesigner-security-deactive.png

Applying a Theme to Your Application

Use the Themes palette to change the look and feel of your application.

Themes are used to define the basic layout and style information for an application. Typically a theme is used to apply a look and feel to the elements wrapping the main content in your pages, and can also be used to determine the placement and behavior of navigation elements. Some themes are available to all applications by default, and you can apply them to your application using the Themes palette.

The Themes palette in the Page Designer displays a list of the themes that can be applied to your application. Any themes that are included in your application template or that you add as an application extension are listed in the Themes palette. The Themes palette displays a preview of the theme if one is available.

Note:

Two versions of the Oracle Applications Cloud UI theme are available by default. The theme named Oracle Applications Cloud UI R12 is an older version.

To apply a theme to your application:

  1. Open the Themes palette in the Page Designer.
    The Themes palette displays a list of the themes available in your application.
    Description of pagedesigner-themes-palette.png follows
    Description of the illustration pagedesigner-themes-palette.png
  2. Select a theme in the palette.
    The theme is immediately applied to the pages in your application when you select it in the palette. You do not need to drag the theme onto the canvas.

Creating a New Empty Page

You can create new empty pages for a collection component or static content using the Create Page wizard.

You can use the Create Page wizard to create empty pages that are not associated with a business object. You can use an empty page as a top level page, for example, as an entry point for your application or as a page that contains static content. After you create the page you will need to manually configure links to and from other pages.

To create a new empty page in the Create Page wizard:

  1. In the toolbar of the Page Designer, click the page title in the breadcrumb context trail.
    A menu displays a list of the pages in your application.
  2. Click New Page to open the Create Page wizard.
    Description of create-page-wizard.png follows
    Description of the illustration create-page-wizard.png
  3. Type a name for the new page.
  4. Select the Landing template.
  5. Click Create.
The new page opens in the Page Designer. To build the page you can drag components from the Components Palette onto the canvas. You can add a top-level link to your new page by modifying the application menu. See Modifying the Application Menu.

About Configuring Button Actions

You can configure the behavior of buttons in the Actions tab of the Property Inspector.

When you select a button on the canvas, you can use the Configure Actions dialog to configure the behavior of the button. You can program the button’s behavior by dragging one or more items from the list of suggested actions or navigation targets into the recipe area. You can also choose to enter custom JavaScript code for the button. For example, you might want the button to navigate to a specific page, perform an action on a business object, or display a message.


Description of propinsp-config-actions.png follows
Description of the illustration propinsp-config-actions.png

Button actions are JavaScript functions. When you add an action to the recipe for the button, click Show JavaScript in the dialog box to view the JavaScript source for that action. To customize the behavior of a button, drag Custom JavaScript Code into the list of actions that will be invoked and click Edit Custom Code to open the Edit Custom Code dialog box. You can add local and global variables to your custom code by selecting the variable in the dialog box.

Important:

Your custom JavaScript code must be written as a JavaScript promise so that the result either resolves to a value (success) or an error (failure). You will usually want to specify additional actions, for example, displaying a message, based on the result.

The following steps show how to add custom JavaScript code to modify the behavior of a button on a page.

  1. In the Page Designer, open the page with the button that you want to modify.

    In this example, a Create page is used to create a new Customer business object with three fields: name, telephone and discount.


    Description of button-createpage.png follows
    Description of the illustration button-createpage.png

    The user can enter the name and telephone of a new customer, but cannot view or enter a value for the discount. New customers usually receive a default discount, but customers created by this user receive a discount that is not the default value. The Save and Close and Save and Continue buttons can be modified to run some custom JavaScript code that sets the value of the discount when the button is clicked.

  2. Select the button on the canvas.

  3. Open the Actions tab in the Property Inspector.


    Description of button-propertyinspector.png follows
    Description of the illustration button-propertyinspector.png
    The Actions tab displays the following list of the default actions that are performed when the button is clicked:
    1. Save Customer

    2. Navigate Back with “Customer”

    3. Show Success Message

    The new custom JavaScript code needs to run before the Save action.

  4. Click Edit in the Actions tab to open the Configure Actions dialog.


    Description of button-configureactions-default.png follows
    Description of the illustration button-configureactions-default.png
  5. Drag Custom JavaScript Code from the left menu into the top position in the list of actions and enter a description of the new action.


    Description of button-configureactions-custom.png follows
    Description of the illustration button-configureactions-custom.png
  6. Click Edit Custom Code to open a JavaScript code editor.


    Description of button-configureactions-editcustom.png follows
    Description of the illustration button-configureactions-editcustom.png

    The Edit Custom Code dialog contains a code editor and a list of fields in the business object to help you locate objects. When you click a field in the list, a getValue method for the field is added at the insert cursor in the code editor.

  7. Type your code in the editor.

    The custom code can be as simple or complex as you require, but you need to confirm that the code runs as a promise.

    In this example the code will assign a value to the discount field. Clicking Discount in the list of fields in the Customer business object adds a getValue method for discount in the editor. The code can be modified to change the getValue method to setValue, specify a value for the field and add a call to resolve.


    Description of button-configureactions-savecustom.png follows
    Description of the illustration button-configureactions-savecustom.png

    The custom code looks like the following:

    $Customer.setValue('discount', 0.20);
    resolve($Customer);
  8. Select the appropriate Code Resolve Result Type for the promise in the dropdown list. Click Save.

  9. Click Save and Close.

About Error Handling

When creating the recipe for button actions you do not need to define behavior in the case of an error. Visual Builder manages errors at runtime. If an error occurs, for example, when submitting a form because data is not formatted correctly or is missing, an error message will automatically appear in the UI that notifies the user that the action was not successful. Where possible, the message will provide details about the cause of the error.