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 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 the illustration page-designer-toolbar.png
The following table describes the tools that are available in the toolbar.
|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 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 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 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 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 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 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 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 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 the illustration pagedesigner-responsive-prop.png
To configure the responsive properties of a component:
- In the Page Designer, select the component on the canvas.
- 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 the illustration pagedesigner-responsive-prop1.png
- 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.
- 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 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 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 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:
- Open the Themes palette in the Page Designer.The Themes palette displays a list of the themes available in your application.
Description of the illustration pagedesigner-themes-palette.png
- 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.
To create a new empty page in the Create Page wizard:
- 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.
- Click New Page to open the Create Page wizard.
Description of the illustration create-page-wizard.png
- Type a name for the new page.
- Select the Landing template.
- Click Create.
About Configuring Button Actions
You can configure the behavior of buttons in the Actions tab of the Property Inspector.
Description of the illustration propinsp-config-actions.png
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:
Description of the illustration button-createpage.png
Select the button on the canvas.
Open the Actions tab in the Property Inspector.
Description of the illustration button-propertyinspector.pngThe Actions tab displays the following list of the default actions that are performed when the button is clicked:
Navigate Back with “Customer”
Show Success Message
Click Edit in the Actions tab to open the Configure Actions dialog.
Description of the illustration button-configureactions-default.png
Description of the illustration button-configureactions-custom.png
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
getValuemethod for the field is added at the insert cursor in the code editor.
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
discountfield. Clicking Discount in the list of fields in the Customer business object adds a
discountin the editor. The code can be modified to change the
setValue, specify a value for the field and add a call to
Description of the illustration button-configureactions-savecustom.png
The custom code looks like the following:
$Customer.setValue('discount', 0.20); resolve($Customer);
Select the appropriate Code Resolve Result Type for the promise in the dropdown list. Click Save.
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.