5.8.4 Editing User Interface Attributes

Use the User Interface page to determines the default characteristics of the application and optimize the display.

• Accessing the User Interface Page
  
• User Interface Page
  
• Defining an Application Logo
  

5.8.4.1 Accessing the User Interface Page

To access the User Interface page:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.

   The Application home page appears.

3. From the Application home page, you can access the User Interface page in two ways:
   • Go to Shared Components:

     1. Click Shared Components.

     2. Under User Interface, click User Interface Attributes.

   • Edit Application Properties button:

     1. Click Edit Application Properties to the right of the application name.

     2. Click the User Interface tab.

   The User Interfaces page appears.

4. Edit the appropriate attributes.
5. Click Apply Changes to save your changes.

5.8.4.2 User Interface Page

The User Interface page is divided into the following sections: General, Logo, Favicon, Attributes, Navigation Menu, Navigation Bar, JavaScript, Cascading Style Sheet, and Concatenated Files.

Tip:

To learn more about the attributes on this page, see field-level Help.

• General
  
• Logo
  
• Favicon
  
• Attributes
  
• Navigation Menu
  
• JavaScript
  
• Navigation Bar
  
• Cascading Style Sheets
  
• Concatenated Files
  

5.8.4.2.1 General

Use the attributes under General to define basic characteristics of the application user interface.

Table 5-15 User Interface, General

Attribute	Description
Static File Prefix	Determines the virtual path the Web server uses to point to the static files when using the #APP_FILES# substitution string. Do not specify anything to reference files which are stored with your application definition in the database. For performance reasons you can also store your application files on your Web Server. Use any valid URL to reference them. Examples: /myFiles/ http://contentDeliveryNetwork.com/myFiles/
Image Prefix	Determines the virtual path the web server uses to point to the images directory distributed with App Builder. During installation, the virtual path is configured as /i/. If you are unsure, contact your administrator. When embedding an image in static text (for example, in page or region headers or footers), you can reference an image using the substitution string #APEX_FILES#. For example, to reference the image go.gif, you would use the following syntax: <img src="#APEX_FILES#go.gif"> Note: If the entered image prefix is equal to the instance image prefix, then the application-level attribute will always be null. This easily facilities the movement of an application across different instances that may have different image prefixes. See Also: "APEX_FILES"
Media Type	Enter the Internet media type. An Internet media type is two-part identifier for file formats on the internet. A Media Type is composed of at least two parts: a type, a subtype, and one or more optional parameters. This Media Type is used in the Content-Type HTTP header when rendering the page. The page-level Media Type overrides the application-level Media Type. The default value for this attribute is NULL. If both the page-level and application-level values for Media Type are NULL, the Media Type text/html is used.

5.8.4.2.2 Logo

Use Logo attributes to define an application logo. An application logo can be an image, text, image and text, or based on custom markup.

Table 5-16 User Interface, Logo

Attribute	Description
Logo	For Logo, select a logo type. Options include: None Image Text Image and Text Custom Additional atttibutes appear based depending upon your selention. To learn more about an attribute see item Help. If you select Image, Text, Image and Text, or Custom, additional attributes display and your page template your page template must include the #LOGO# substitution string.

See Also:

"Defining an Application Logo" and

5.8.4.2.3 Favicon

In Favicon HTML, enter Favicon HTML code to create a favicon (or shortcut icon). To use this feature, your page template must include the #FAVICONS# substitution string. Example:

<link rel="shortcut icon" href="/i51/favicon.ico">
<link rel="icon" sizes="16x16" href="/i51/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="/i51/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/i51/favicon-180x180.png">

5.8.4.2.4 Attributes

Table 5-17 Attributes

Attribute	Description	To Learn More
Enable End Users to choose Theme Style	If set to On, end users can choose a Theme Style for their sessions within a customization dialog. Only Theme Styles marked as Public are eligible for selection.	See "Enabling Users to Select a Theme Style"
Add "Built with APEX" to Footer	If set to On, Oracle Application Express will add the text "Built with ♥ using Oracle APEX" to the footer of every page.	n/a
Auto Detect	Select whether the user interface should be automatically detected. If auto-detection is enabled, the user will be redirected to the corresponding login page or home page.	n/a
Home URL	Specify the home page of the application.	n/a
Login URL	Specify the login page of the application.	n/a
Theme	Shows the theme currently associated with the user interface.	See "Switching Themes"
Theme Style	Select a theme style. This option only displays for newer themes that support theme styles.	See "Using Theme Styles"
Global Page	If defined, displays the global page for the application.	See "Creating a Global Page to Display Components on Every Page"

5.8.4.2.5 Navigation Menu

Applications using newer themes, such as Universal Theme - 42, provide navigation with navigation menus.

Table 5-18 Navigation Menu

Attribute	Description
Display Navigation	Select On to include or Off to exclude a navigation men in your application.
Navigation Menu List	Select the list utilized for the navigation menu for the application.
Position	Select the position where you would like your navigation menu to be placed on this application.  Side  renders the navigation menu list template in the #SIDE_GLOBAL_NAVIGATION_LIST# position on your page template.  Top  renders the navigation menu list template in the #TOP_GLOBAL_NAVIGATION_LIST# position on your page template.  For example, if you choose Side, your navigation could be rendered as a tree on the left side of your pages; and choosing Top can render your navigation as a menu bar in the header of your pages.
List Template	Select the List Template used to render the navigation menu for this application.
Template Options	Set Template Options for the List Template used for the navigation menu list for the application.

See Also:

"Managing Navigation Menus"

5.8.4.2.6 JavaScript

Use these attributes to control or modify how an application handles JavaScript.

Table 5-19 JavaScript

Attribute	Description
Content Delivery Network	Specify the Content Delivery Network (CDN) that Application Express will try to use to load the libraries jQuery. If Application Express cannot load these libraries from the CDN, they will be loaded from your web server instead. Using a CDN can reduce the loading time of your application if the user has already visited other web sites which also use the same CDN to load the same libraries.
File URLs	Enter JavaScript file URLs for code to be loaded on every 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. JavaScript file URLs you enter here replaces the #APPLICATION_JAVASCRIPT# substitution string in the page template. Note: You do not need to include opening or closing script tags. Just write the URL. Examples: Standard file reference: /myjs/main.js Standard file reference which loads the minified file main.min.js from /myjs/minified/ for regular page views and main.js from /myjs/ in debug mode: /myjs/#MIN_DIRECTORY#main#MIN#.js Use this syntax if the library is also used from a RequireJS require call. The define name must match what is used in the requirejs.config paths and the value must be the global symbol exposed by the library. Only applies when using RequireJS. This avoids RequireJS loading that library a second time. [define hammerjs=Hammer]/myjs/hammer.js Use this syntax if the file has a dependency on RequireJS. This will automatically load RequireJS before this file. [require requirejs]/myjs/main.js Use this syntax if the file has a dependency on Oracle JET. This will automatically load RequireJS and the Oracle JET RequireJS configuration before this file. [require jet]/myjs/main.js
Include Deprecated or Desupported Javascript Functions	Specifies if deprecated or desupported JavaScript functions are included on every page in the application. The functions deprecated or desupported are listed in the Release Notes for every release. If you are confident your application does not contain any references to deprecated or supported functions, do not make a selection and reduce the overall size of the JavaScript files loaded.
Include j Query Migrate	Specifies if the jQuery Migrate plug-in should be included on every page in the application. The plug-in restores deprecated features and behaviors of jQuery so that old JavaScript code and jQuery plug-ins will still run properly with the j Query version loaded by Application Express. If you are confident your application and any used jQuery plug-in does not contain any references to deprecated jQuery features, set this to No to reduce the overall size of the JavaScript files loaded.

5.8.4.2.7 Navigation Bar

Applications using newer themes, such as Universal Theme - 42, include navigation bar lists. Navigation Bar settings enable you to select list and list templates. Selecting classic implementation uses tabs instead of a list. Navigation Bar attributes only display with newer themes.

Table 5-20 Navigation Bar

Attribute	Description
Implementation	Select how to you wish to implement the navigation bar in this application. Classic renders the navigation bar as a classic navigation bar in the #NAVIGATION_BAR# position on your page template.  List renders the navigation bar as a list, using the selected list and list template in the #NAVIGATION_BAR# position on your page template.
Navigation Bar List	Select the list utilized for the navigation bar on this application.
List Template	Select the List Template used to render the navigation menu for this application.
Template Options	Set Template Options for the List Template used for the navigation menu list for the application.

See Also:

"Managing Navigation Bar Lists"

5.8.4.2.8 Cascading Style Sheets

In File URLs, enter Cascading Style Sheet file URLs to be loaded on every 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.

File URLs you enter here will replace the #APPLICATION_CSS# substitution string in the page template.

Note: You do not need to include opening or closing link tags. Just include the file URL.

Examples:

• Standard file reference.

  /mycss/main.css

• Standard file reference which loads the minified file main.min.css from /mycss/minified/ for regular page views and main.css from /mycss/ in debug mode.

  /mycss/#MIN_DIRECTORY#main#MIN#.css

• Conditional media query.

  [media="only screen and (max-device-width: 480px)"]/mycss/smartphone.css

• File reference using a query string in the URL referencing the application version, such that when the application is upgraded (and the version is incremented), the browser is instructed to always load the new file and ignore any previously cached files.

  /mycss/main.css?version=#APP_VERSION#

5.8.4.2.9 Concatenated Files

Using a concatenated file can increase the performance of loading your page because instead of issuing multiple HTTP requests for each single file, the browser only loads one file. This approach gives you the option to use smaller, more modular files during development and to use a single concatenated file when running the application outside of the Application Express development environment.

To create a concatenated file, click Concatenated File and follow the on-screen instructions. To learn more and view examples, see field-level Help.

5.8.4.3 Defining an Application Logo

To define an application logo:

1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. From the Application home page, you can access the User Interface page in two ways:
   • From Shared Components:

     1. Click Shared Components.

     2. Under User Interface, click User Interface Attributes.

   • Click the Edit Application Properties button:

     1. Click Edit Application Properties to the right of the application name.

     2. Click the User Interface tab.

   The User Interfaces page appears.

4. Under Logo, select a logo type. Additional atttibutes appear depending upon your selection.

   • None - No logo is shown in the app.

   • Image- Creates a logo based on a valid image file type.

     • Logo - Select Image.

     • Image URL - Enter the url for the image to be used as the logo, including the filename extension. Note your page template must include the #LOGO# substitution string. For example:

       #APP_FILES#my-logo.png

   • Text - Defnes a text only logo.

     • Logo - Select Text.

     • Text - Select Text - Enter the text that should be display in the application logo.

   • Image and Text - Defines an image and text logo.

     • Logo - Select Image and Text.

     • Image URL - Enter the url for the image to be used as the logo, including the filename extension. Note your page template must include the #LOGO# substitution string. For example:

       #APP_FILES#my-logo.png

     • Text - Select Text - Enter the text that should be display in the application logo.

   • Custom

     • Logo - Select Custom.

     • Custom HTML - Enter markup of your application's logo. The value in this field will be inserted into the #LOGO# substitution string of your page template.

5. Click Apply Changes.

Tip:

You can also reference an image uploaded to the static file repository using a substitution string. See "Referencing Static Application Files" and "About Referencing Static Workspace Files."

See Also:

• "Managing Static Application Files"

• "Managing Static Workspace Files"

• "Creating Custom Themes"

• "Page Templates"