Editing User Interface Attributes

5.12.4 Editing User Interface Attributes

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

Accessing the User Interface Page
Access the User Interface page from the Application home page.
User Interface Page
The User Interface page is divided into the following sections: Icon, Logo, Attributes, Navigation Menu, Navigation Bar, JavaScript, CSS, Concatenated Files, OpenTelemetry, and Advanced.

Parent topic: Managing Application Attributes

5.12.4.1 Accessing the User Interface Page

Access the User Interface page from the Application home page.

To access the User Interface page:

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

The Application home page appears.
From the Application home page, you can access the User Interface page in two ways:
- Edit Application Definition button:
  1. Click Edit Application Definition to the right of the application name.
  2. Click the User Interface tab.
- From Shared Components:
  1. Click Shared Components.
  2. Under User Interface, click User Interface Attributes.
The User Interfaces page appears.
Edit the appropriate attributes.
Click Apply Changes to save your changes.

Parent topic: Editing User Interface Attributes

5.12.4.2 User Interface Page

The User Interface page is divided into the following sections: Icon, Logo, Attributes, Navigation Menu, Navigation Bar, JavaScript, CSS, Concatenated Files, OpenTelemetry, and Advanced.

Note:

Required values are marked with a red asterisk (*).

Tip:

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

Parent topic: Editing User Interface Attributes

5.12.4.2.1 Icon

Use the Icon region to manage icons in your APEX applications. When you add an icon to an application it is propagated to the following places: the Favicon, the PWA icon, the Apple touch icon, and the App Builder icon.

Application icons are stored in Shared Components, Static Application Files in five different sizes. 32x32, 192x192 and 512x512 are saved as square icons. 144x144 and 256x256 are saved as rounded icons. Any new uploaded icons are automatically resized and propagated to the appropriate places at runtime.

Tip:

For applications created prior to Oracle APEX 23.1, click Change Icon on User Interface Attributes page to regenerate the full suite of icons.

To view details or update an existing icon:

Click Edit.
In the Edit Application Icon dialog, you can either:
- Navigate to file by clickingChoose File.
- Drag and drop a new file to the region provided.

To choose a new icon from library:

Click Change Icon.
In the Edit Application Icon dialog you can:
- Upload an icon. Click the plus (+) sign and navigate to the icon, or drag and drop the icon to the Upload your own icon region.
- Select an icon from the library. Select the icon color and then the icon.

To control the upload for all icon sizes, upload your icons to the Static Application Files and use the following file paths:

#APP_FILES#icons/app-icon-32.png
#APP_FILES#icons/app-icon-144-rounded.png
#APP_FILES#icons/app-icon-192.png
#APP_FILES#icons/app-icon-256-rounded.png
#APP_FILES#icons/app-icon-512.png

See Also:

Parent topic: User Interface Page

5.12.4.2.2 Logo

Use Logo attributes to define an application logo that displays in the top navigation bar. An application logo can be an image, text, image and text, or based on custom markup.

Attribute Description

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.

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:

Managing Application Logos

Parent topic: User Interface Page

5.12.4.2.3 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 APEX adds the text "Built with ♥ using Oracle APEX" to the footer of every page.	n/a
Auto Dismiss Success Messages	Dismiss success message automatically by enabling or disabling the Auto Dismiss Success Messages attribute: If set to On - All success messages in the application are dismissed automatically after 5 seconds. If a user interacts with a message before it is dismissed, the time will be reset and it will be another 5 seconds before the message gets dismissed. If set to Off - Success messages will remain visible until the application user manually dismisses them. Note: Enabling this attribute may impact accessibility. Some users may not see or read a success message before it is dismissed and could miss the information in the message. If turning Auto Dismiss Success Messages on, consider providing users with settings that enable them to opt in or out of auto-dismiss, using the apex.message.setDismissPreferences API in Oracle APEX JavaScript API Reference	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

Parent topic: User Interface Page

5.12.4.2.4 Navigation Menu

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

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

Parent topic: User Interface Page

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

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

Parent topic: User Interface Page

5.12.4.2.6 JavaScript

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

Attribute Description

Attribute	Description
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 jQuery Migrate	Specifies if the jQuery Migrate plug-in should be included on every page in the application. The jQuery Migrate 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 APEX. This plug-in also helps find where you are using deprecated or removed jQuery APIs by logging warnings to the browser console. If you are confident your application does not use a jQuery plug-in and does not contain any references to deprecated jQuery features, disable Include jQuery Migrate to reduce the overall size of the JavaScript files loaded. See Also: Reviewing Old JavaScript

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 jQuery Migrate

Specifies if the jQuery Migrate plug-in should be included on every page in the application.

The jQuery Migrate 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 APEX. This plug-in also helps find where you are using deprecated or removed jQuery APIs by logging warnings to the browser console.

If you are confident your application does not use a jQuery plug-in and does not contain any references to deprecated jQuery features, disable Include jQuery Migrate to reduce the overall size of the JavaScript files loaded.

5.12.4.2.7 CSS

In File URLs, enter CSS 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#
```

Parent topic: User Interface Page

5.12.4.2.8 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 APEX 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.

Parent topic: User Interface Page

5.12.4.2.9 OpenTelemetry

OpenTelemetry is a standard for collecting user experience data in web applications, such as page load times and user interactions. Enabling OpenTelemetry makes it easier to monitor and analyze how users engage with an application.

To configure OpenTelemetry, first set the Client Logging Service URL and the Token Relay URL in Workspace Utilities, OpenTelemetry.

Then, for a specific application, in Shared Components, edit the User Interface Attributes. In OpenTelemetry, specify the Product Family.

Parent topic: User Interface Page

5.12.4.2.10 Advanced

Use the attributes under Advanced to define the virtual path the Web server uses to point to the images directory distributed with Oracle APEX.

Attribute Description

Attribute	Description
#APP_FILES# Path	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/`
#APEX_FILES# Path	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.

#APP_FILES# Path

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/

#APEX_FILES# Path

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.