Page Templates

Define the appearance of a page using page templates.

About Page Templates

Learn about page templates available in the Universal Theme.

Page Templates define the layout and purpose of your pages. The Universal Theme supports two types of navigation menus: side tree-based navigation and top tab-like navigation.

To view samples of all the available page templates:

1. Run the Universal Theme Reference app.

2. From the Main Navigation menu, select Design and then Page Templates.

See Also: Accessing the Universal Theme Reference App

Page Template Attributes

Learn about page template attributes.

A page template consists of a header template, a body template, a footer template, and several subtemplates. If you do not specify a page template as a page-level attribute, then the Oracle APEX engine uses the default page template defined on the Create/Edit Theme page.

Page templates combine static HTML with substitution strings that are replaced at runtime. You use substitution strings to indicate the existence and placement of a component within a page template. You can further specify how a component should display using subtemplates.

This topic describes specific sections of the Edit Page Template page. To learn more about a specific attribute, such as supported substitution strings, see field-level Help.

Name

Name identifies the name of the template. Theme indicates the theme to which the template is a member.

Template Class identifies a specific use for the template. When you switch to a new theme, all templates in one theme are mapped to corresponding templates in another theme. App Builder accomplishes this template mapping through the assignment of a template class.

Use the Translatable checkbox to indicate if this template contains text strings that require translation.

Template Type identifies the page template type. If set to Dialog Page, the template is only be available for selection by a page with a page mode of Modal or Non-Modal. If set to Normal Page, the template is only be available for selection by a page with a page mode of Normal.

See Also: Creating Dialog Pages and Required Dialog Page Template Attributes

Definition

Each template consists of a header, a body, a footer, and subtemplates. Use substitution strings to include dynamic content. All template substitution strings must be in uppercase letters and begin and end with a number sign (#).

Tip: For a list of supported substitution strings and to view examples, see field-level Help.

Definition attributes include:

• Header - Enter HTML that defines the <Head> section of the HTML document. Oracle recommends you include at least #TITLE# and #HEAD# in this template section.

• Body- Enter HTML that makes up the <Body> section of the HTML document. Include substitution strings to define where the body content is placed and to define additional positions for regions.

• Footer - Enter HTML to define third section in the page template that displays after the Body.

JavaScript

Tip: For a list of supported substitution strings and to view examples, see field-level Help.

Available attributes include:

• File URLs - Enter JavaScript file URLs for code to be loaded on this page. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string#APP_VERSION# if you want to include the application’s version in the file URL.

  JavaScript file URLs you enter here replaces the #TEMPLATE_JAVASCRIPT# substitution string in the page template.

  Do not include opening or closing script tags, just write the URL.

• Function and Global Variable Declaration - Enter JavaScript code (for example, functions or global variable declarations) for code to be used in this page template. Consider putting it into an external file to avoid duplication and to leverage browser caching of static files. Code you enter here replaces the #TEMPLATE_JAVASCRIPT# substitution string in the page template.

  Do not include opening or closing script tags, just include the JavaScript code.

  To reference a shortcut, use "SHORTCUTNAME".

• Execute when Page Loads - Enter JavaScript code to execute when the page loads. The code is executed after the JavaScript code generated by Oracle APEX. Code you enter here replaces the #GENERATED_JAVASCRIPT# substitution string in the page template.

  You do not need to add any opening or closing script tags, just the JavaScript code.

• Dialog Initialization Code - This attribute only displays if the Template Type is Dialog Page. Enter JavaScript code to initialize the page as a dialog. The substitution strings will be replaced with their respective values at rendering time.

• Dialog Closure Code. This attribute only displays if the Template Type is Dialog Page. Enter JavaScript code to close the dialog page.

• Dialog Cancel Code. This attribute only applies if the Template Type is Dialog Page. Enter JavaScript code to cancel the dialog page.

Cascading Style Sheet

File URLs

Enter Cascading Style Sheet file URLs to be loaded for this page template. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string #APP_VERSION# if you want to include the application’s version in the file URL.

Do not include opening or closing script tags, just include the file URL.

Inline

Enter Cascading Style Sheet code to be used for this page template. Consider putting it into an external file to avoid duplication and to leverage browser caching of static files. Code you enter here replaces the #TEMPLATE_CSS# substitution string in the template.

Do not include opening or closing style tags, just include the cascading style sheet code.

Subtemplate

Enter the HTML for subtemplates below. Subtemplates are placed inside the body of the page template using substitution strings.

Subtemplates include:

• Success Message- Enter HTML to replace the string #SUCCESS_MESSAGE# in the template body, header, or footer.

• Navigation Bar- Enter HTML or text to replace the string #NAVIGATION_BAR# in the template header, body, or footer. Use the substitution string #BAR_BODY# to indicate where in the Navigation Bar the entries should appear.

• Navigation Bar Entry- Enter HTML or text to be substituted into the navigation bar #BAR_BODY# substitution string for each navigation bar entry.

• Notification- Enter HTML or text to be substituted when the #NOTIFICATION_MESSAGE# substitution string is referenced in the template header, body, or footer.

Image Based Tab Attributes

Use this subtemplate for tabs that are entirely based on images. Available attributes include:

• Current Image Tab - Enter HTML to be used to indicate that an image-based tab is currently selected. Include the #TAB_TEXT# substitution string to show the displayed name of the tab.

• Non Current Image Tab - Enter the HTML to be used to indicate that an image tab is not currently selected. Include the #TAB_TEXT# substitution string to show the displayed name of the tab.

Layout

Specified the type of layout used for the page. The Type you select determines what attributes displays. To learn more about an attribute, see field-level Help.

From Type, select a layout:

• HTML Table - Uses HTML Tables to position regions, page items, and buttons.

• Fixed Number of Columns - Used for grids which divide the screen into a fixed number of grid columns.

• Variable Number of Columns - Used for grids which can display up to “n” number of grid columns depending on how the regions, page items and buttons are positioned.

Positions

Create positions for this page template. Positions enable you to identify where components (that is, regions, items, buttons) display on this page template. The substitution string of a position cannot be one of the reserved page substitution strings, (for example, NOTIFICATION_MESSAGE).

Navigate to the Edit Page Template, Positions tab to see a complete list of reserved substitution strings.

Dialog

Dialog attributes only appear if you select a Template Type of Dialog Page. These settings are overwritten by a similar attributes specified at page-level.

Available Dialog attributes include:

• Width - Enter the width of the dialog, in pixels or a percentage.

• Height- Enter the height of the dialog in pixels, for example, 500.

• Maximum Width - Enter the maximum width of the dialog, in pixels.

• CSS Classes - Enter additional CSS classes you wish to be applied to the dialog, as a space delimited list.

• Allow Embed in Frames - Your page template level browser frame options are listed below, along with the current setting for each. Make a selection to control if the browser is allowed to display your application’s pages within a frame. The current setting will be the default for each modal and non-modal page using this page template. To learn more, see field-level Help.

  APEX embeds modal dialogs in iframes. If you set the application security attribute Browser Frame to Deny, checking Allow Embed In Frame for Modal Dialog will instead use Allow from same origin for dialog pages that use this template

See Also: Required Dialog Page Template Attributes

Error Page Template Control

Use this attribute when a page template is designated as an error template.

Substitution Strings

Note: Template directives are supported by specific attributes of page templates. See Using Template Directives.

Substitution strings are used within templates to reference component values. To view the most current list supported substitution strings for a given template, view the template and find the Substitution Strings report.

Tip: All template substitution strings must be in uppercase letters and begin and end with a number sign (#).

Required Dialog Page Template Attributes

Learn about required dialog page template attributes.

To create a dialog page template, you must define the following Page Template attributes.

Attribute	Description
Name, Template Type	Must be defined as Dialog Page.
JavaScript, Dialog Initialization Code	Enter JavaScript code to initialize the page as a dialog. See field-level Help for function call syntax.
JavaScript, Dialog Closure Code	Enter JavaScript code to close the dialog page. See field-level Help for function call syntax.
JavaScript, Dialog Cancel Code	Enter JavaScript code to cancel the dialog page. See field-level Help for function call syntax.
Dialog, Width	Sets the default width for dialogs. The page template-level setting can be overwritten at page-level.
Dialog, Height	Sets the default height for dialogs. The page template-level setting can be overwritten at page-level.
Dialog, Maximum Width	Sets the maximum width for dialogs, in pixels. The page template-level setting can be overwritten at page-level.
Dialog, CSS Classes	Enter additional CSS classes you wish to be applied to dialogs. The page template-level setting can be overwritten at page-level.
Dialog, Allow Embed in Frame	Select the page mode to use this attribute to control if the browser is allowed to display your application’s pages within a frame. APEX embeds modal dialogs in iframes. If you set the application security attribute Browser Frame to Deny, checking Allow Embed In Frame for Modal Dialog will instead use Allow from same origin for dialog pages that use this template.

See Also: Creating Dialog Pages