Page Templates

13.3.14 Page Templates

Define the appearance of a page using page templates.

Parent topic: Creating Custom Themes

13.3.14.1 Page Template Attributes

About Page Templates

Each 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 Application Express 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 section 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.

Parent topic: Page Templates

13.3.14.1.1 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 check box 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.

13.3.14.1.2 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.

Parent topic: Page Template Attributes

13.3.14.1.3 JavaScript

Available attributes include:

Tip:

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

File URLs - Enter JavaScript file URLs for code to be loaded on this page. Each URL must 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 in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You can also use the substitution string #APP_VERSION# 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 Application Express. Code you enter here replaces the #GENERATED_JAVASCRIPT# substitution string in the page template.
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.

Parent topic: Page Template Attributes

13.3.14.1.4 Cascading Style Sheet

Available attributes include:

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 in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You can also use the substitution string #APP_VERSION# to include the application's version in the file URL. File URLs you enter here replace the #TEMPLATE_CSS# substitution string in the template.

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.

Parent topic: Page Template Attributes

13.3.14.1.5 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.

Parent topic: Page Template Attributes

13.3.14.1.6 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.

Parent topic: Page Template Attributes

13.3.14.1.7 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.

Parent topic: Page Template Attributes

13.3.14.1.8 Display Points

Available attributes include:

Breadcrumb Display Point - Applies to generated components that use breadcrumbs. It defines where the breadcrumbs are placed on the page. Sidebar Display Point
Sidebar Display Point - Applies to generated components that use Sidebars. It defines where sidebars are placed on the page.

Parent topic: Page Template Attributes

13.3.14.1.9 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.

Oracle Application Express 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

13.3.14.1.10 Error Page Template Control

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

Parent topic: Page Template Attributes

13.3.14.1.11 Substitution Strings

Table 13-11 describes the available page template substitution strings. Substitution strings are used within subtemplates to reference component values.

Tip:

All template substitution strings must be in uppercase letters and begin and end with a number sign (#). To view a report of substitution strings supported by a given template, see the Substitution Stings section of the Edit Page Template page.

Table 13-11 Page Template Substitution Strings

Referenced From	Substitution String	Description
All	`#HIGH_CONTRAST_TOGGLE#`	High Contrast toggle.
All	`#PAGE_STATIC_ID#`	Page Static ID (for example `'P100'`)
All	`#PARENT_TAB_CELLS#`	Display of parent tabs.
All	`#REGION_POSITION_01#`	Region Position 1.
All	`#REGION_POSITION_02#`	Region Position 2.
All	`#REGION_POSITION_03#`	Region Position 3.
All	`#REGION_POSITION_04#`	Region Position 4.
All	`#REGION_POSITION_05#`	Region Position 5.
All	`#REGION_POSITION_06#`	Region Position 6.
All	`#REGION_POSITION_07#`	Region Position 7.
All	`#REGION_POSITION_08#`	Region Position 8.
All	`#REQUESTED_URL#`	Page URL requested by the browser
All	`#SCREEN_READER_TOGGLE#`	Screen Reader toggle.
All	`#SWITCH_UI_TO_DESKTOP#`	Hyperlink for home page of desktop user interface.
All	`#SWITCH_UI_TO_JQM_SMARTPHONE#`	Hyperlink for home page of smart phone user interface.
All	`#TITLE#`	Defines the page title. Typically included within HTML title tags.
Body	`#BODY#`	Page Body.
Body	`#BOX_BODY#`	Where the Body displays. If the Body is null, then `#BOX_BODY#` is used instead.
Body	`#FORM_OPEN#`	Where the HTML open form tag `<form>` is placed. You must include this substitution string to submit a form.
Body	`#GENERATED_CSS#`	Cascading style sheet files created by components.
Body	`#GLOBAL_NOTIFICATION#`	Displays the Global Notification attribute. Global notifications are intended to communicate system status, such as pending system downtime. You can also use `APEX_APPLICATION`.`G_GLOBAL_NOTIFICATION` to set this value programmatically. See Also: "Global Notification"
Body	`#LOGO#`	Application image or log. In the Logo section of the Edit Application Definition page, you can identify an image and image attributes for an application logo. To use this feature, you must also include the `#LOGO#` substitution string in the Header or Body page template. See Also: "Logo"
Body	`#NAVIGATION_BAR#`	Navigation bar. See Also: "Subtemplate" for information about the Navigation Bar subtemplate
Body	`#NOTIFICATION_MESSAGE#`	Defines where a summary of inline error messages displays. Inline error messages can display next to a field, inline in the notification area, or both.
Body	`#SUCCESS_MESSAGE#`	Success message. Defines where page success and error messages appear. If the page process runs without raising errors, then this text displays. You can customize the display of the success message for each template by adding HTML to be displayed before and after the success message.
Body	`#TAB_CELLS#`	Display of standard tabs.
Body	`#TEMPLATE_JAVASCRIPT#`	Display of standard tabs.
Footer	`#CUSTOMIZE#`	Customize link.
Footer	`#FORM_CLOSE#`	Where the HTML close form tag `<form>` is placed.
Footer	`#BUILT_WITH_LOVE_USING_APEX#`	Displays "Built with ♥ using Oracle APEX."
Header	#`APEX_CSS`#	Cascading Style Sheet files used by Application Express.
Header	`#APEX_JAVASCRIPT#`	JavaScript files and code used by Oracle Application Express.
Header	`#APPLICATION_CSS#`	CSS files defined on user interface level.
Header	`#APPLICATION_JAVASCRIPT#`	JavaScript files defined on user interface level.
Header	`#GENERATED_JAVASCRIPT#`	JavaScript code created by components as needed.
Header	`#HEAD#`	Used after the `<head>` open tag but before the `</head>` close tag. You can optionally define the contents of `#HEAD#` for each page (for example, to reference additional style sheets or JavaScript libraries).
Header	`#ONLOAD#`	Page onload. Use this string as a substitute in a JavaScript call to be executed when a page is loaded by the web browser. The JavaScript to be called can vary for each page.
Header	`#PAGE_CSS#`	Cascading style sheet files and inline style defined on the page-level.
Header	`#PAGE_JAVASCRIPT#`	JavaScript files and code defined on the page-level.
Header	`#TEMPLATE_CSS#`	Cascading style sheet files and inline style defined on page template-level.
Header	`#THEME_CSS#`	Cascading Style Sheet files defined at the theme-level.
Header	`#THEME_JAVASCRIPT#`	JavaScript files defined on theme-level.
Header	`#THEME_STYLE_CSS#`	Cascading Style Sheet files defined on the theme style level.
Page	`#FAVICONS#`	Enables support for the application User Interface attribute, Favicon. Developers can use the Favicon attribute for creating a favicon (or shortcut icon). To use this feature, your page template must include the`#FAVICONS#` substitution string.
Page	`#PAGE_URL#`	Page URL.
JavaScript	`#DIALOG_ATTRIBUTES#`	Defines dialog attributes not declaratively supported.
JavaScript	`#DIALOG_CSS_CLASSES#`	Dialog CSS Classes.
JavaScript	`#DIALOG_HEIGHT#`	Dialog Height.
JavaScript	`#DIALOG_MAX_WIDTH#`	Dialog Maximum Width.
JavaScript	`#DIALOG_WIDTH#`	Dialog Width.
JavaScript	`#IS_MODAL#`	Dialog Page Mode (for example, `true` when modal and `false` when non-modal).
JavaScript	`#SIDE_GLOBAL_NAVIGATION_LIST#`	Navigation Menu (Side).
JavaScript	`#TOP_GLOBAL_NAVIGATION_LIST#`	Navigation Menu (Top).
JavaScript	`#TRIGGERING_ELEMENT#`	Triggering Element (for example, the current DOM element).

Parent topic: Page Template Attributes

13.3.14.2 Required Dialog Page Template Attributes

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

Table 13-12 Required Attributes for Dialog Page Templates

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. Application Express 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.