5.8.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, and Advanced.
Parent topic: Managing Application Attributes
5.8.4.1 Accessing the User Interface Page
Access the User Interface page from the Application home page.
To access the User Interface page:
Parent topic: Editing User Interface Attributes
5.8.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, 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.8.4.2.1 Icon
Tip:
If an application uses legacy icons, a note displays at top of the Icon region. Oracle recommends replacing legacy icons by clicking Change Icon button.Use the Icon region to manage Favicon, the PWA icon, the Apple touch icon, and the App Builder icon. Any uploaded icons are automatically resized and propagated to the appropriate places at runtime.
Click Edit to view details or update an existing icon. In the Edit Application Icon dialog, you can either navigate to the file by clicking Choose File, or drag and drop a new file to the region provided.
To choose a new icon from library, click the Change Icon button. In the Choose 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.
See Also:
Managing Application IconsParent topic: User Interface Page
5.8.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.
Table 5-14 User Interface, Logo
See Also:
Managing Application LogosParent topic: User Interface Page
5.8.4.2.3 Attributes
Table 5-15 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. |
|
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 |
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. |
|
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.8.4.2.4 Navigation Menu
Applications using newer themes, such as Universal Theme - 42, provide navigation with navigation menus.
Table 5-16 Navigation Menu
See Also:
Managing Navigation MenusParent topic: User Interface Page
5.8.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.
Table 5-17 Navigation Bar
See Also:
Managing Navigation Bar ListsParent topic: User Interface Page
5.8.4.2.6 JavaScript
Use these attributes to control or modify how an application handles JavaScript.
Table 5-18 JavaScript
Parent topic: User Interface Page
5.8.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 andmain.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.8.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.8.4.2.9 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.
Table 5-19 User Interface, Advanced
Attribute | Description |
---|---|
#APP_FILES# Path |
Determines the virtual path the Web server uses to point to the static files when
using the 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:
|
#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 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
<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 |
Parent topic: User Interface Page