The Shared Components
Shared components are application structures used in application pages. These structures are called shared components because you create them once and utilize them across all the pages in the application. For example, in this tutorial, you will create a list comprising application menu options that will appear on every application page. The Page Shared Components tab in the Page Designer displays a list of common elements applied to that particular page. Note that shared components are only displayed in this section after you add them to a page.
The following subsections provide details about shared component
elements. The Shared Components page in Oracle APEX can be accessed through the
Shared Components icon (A).
Application Definition Attributes
This link (which appears under the Application
Logic section on the Shared Components page) will take you to the Edit Application Definition page where you can modify your
application attributes, including its name, version, and availability options. Application
attributes control the behavior of an entire application and are divided into
the categories: Definition, Security, Globalization, and User Interface.
Application Processes
Application Processes run PL/SQL logic at a specific point from
multiple pages of an application. You can apply conditions to control when the
process executes. Currently, there are eight different types of processes that you
can include in your application. A significant one among these processes is the On-Demand Application Process. It is a special type of application process that executes when called
from a page-level On Demand process or from an Ajax call from the browser. The On-Demand processes are useful when you have PL/SQL logic that you would like to
run from different execution points across multiple pages. For example,
assessing a customer’s outstanding balance and using that value on a customer
invoice, age analysis report, customer balances report, and so on.
Authentication Schemes
The significance of security cannot be ignored when building web applications, as it enables us to prevent unauthorized access and activity in our applications. Not all applications require security; a public website doesn’t, for example. However, for many applications, we need to be able to control who can run and gain access to them. Once users are logged into our application, we also need to further control what functionality they have permission to access. In Application Express, these security features are implemented through the use of Authentication and Authorization Schemes. These schemes enable us to declaratively define the security for our applications quickly and easily. Authentication is the process of establishing the identity of every user of your application. The most common type of authentication process requires a user to provide some type of credentials such as a username and password. These credentials are then evaluated either through the built-in Application Express Authentication scheme or using a custom scheme with more control. Authentication could involve the use of digital certificates or a secure key, too. If the credentials pass, the user is allowed to access the application. Otherwise, access is denied. Once a user has been identified, the Application Express engine keeps track of each user by setting the value of the built-in substitution string APP_USER.
As you create your application, you must determine whether to include authentication. You can:
- Choose to not require authentication. Oracle APEX does not check any user credentials. All pages of your application are accessible to all users. A public informational application website is a good candidate, which doesn’t require authentication.
- Select a built-in authentication scheme. Create an authentication method based on available preconfigured authentication schemes. Here are the preconfigured authentication schemes available in Oracle APEX. Each scheme follows a standard behavior for authentication and session management.
–
Application Express Accounts. These are user accounts created within and
managed in the Oracle APEX user repository. When you use this method, your
application is authenticated against these accounts.
–
Database Account Credentials. It utilizes database schema accounts. This
authentication scheme requires that a database user (schema)
exist in the local database. When using this method, the username and password
of the database account is used to authenticate the user.
–
HTTP Header Variable. It
supports the use of header variables to identify a user and to create an
Application Express user session. Use this authentication scheme if your company employs a
centralized web authentication solution like Oracle Access Manager, which
provides single sign-on across applications and technologies.
–
LDAP Directory Verification. You can configure any authentication scheme that uses a login page to
use Lightweight Directory Access Protocol (LDAP) to verify the username and
password submitted on the login page. App Builder includes wizards and pages that
explain how to configure this option. These wizards assume that an LDAP
directory accessible to your application for this purpose already exists and
that it can respond to a SIMPLE_BIND_S call for credentials verification.
– Application Server Single Sign-On Server. This one delegate authentication to the Oracle AS Single Sign-On (SSO) Server. To use this authentication scheme, your site must have been registered as a partner application with the SSO server.
- Create a custom authentication scheme. Using this method you can have complete control over the authentication interface. To implement this approach you must provide a PL/SQL function the Application Express engine executes before processing each page request. The Boolean return value of this function determines whether the Application Express engine processes the page normally or displays a failure page. This is the best approach for applications when any of the following is true:
- Database authentication or other methods are not adequate
- You want to develop your own login form and associated methods
- You want to control security aspects of session management
- You want to record or audit activity at the user or session level
- You want to enforce session activity or expiry limits
- Your application consists of multiple applications that operate
seamlessly (for example, more than one application ID)
Authorization Schemes
By defining authorization schemes, you control users' access to specific components
of your application. It is an important security measure implemented to augment
the application's authentication scheme. An authorization scheme
can be specified for an entire application, page, or specific page components
such as a region, button, or item. For instance, you can apply an authorization
scheme to determine which menu options a user can see, or whether he is allowed
to create a new order (using the Create button).
List of Values
A list of values (abbreviated as LOVs) is defined
by running the LOV wizard. Once created, LOVs are stored in the List of Values
repository and are utilized by page items. You can create two types of LOVs:
static and dynamic. A static LOV displays and returns predefined values such as
Yes and No, while a dynamic list is populated using a SQL query that fetches values from
database tables. After creating a LOV you associate it to page items such as
select list, radio group, checkbox, and so on. By creating a list of values at
the application level, you have the advantage to add it to any page within an
application, and since all LOV definitions are stored in one location, it makes
them easy to locate and update.
Plug-Ins
With the increase in Application Express usage, the demand for specific features also surfaced. To meet these demands, the plug-ins framework was introduced in Oracle APEX 4.0, which allows developers to create their own plug-ins to add additional functionality in a supported and declarative way.
Usually, a tool like Ajax is used to add custom functionality. The con of this approach is to place the code in different locations such as within the database, in external JavaScript files, and so on. On the other hand, turning that code into a plug-in is more convenient to use and manage because the code resides in one object. With the help of open-source jQuery components, you can create plug-ins without generating a huge amount of code manually.
Plug-ins are shared component objects that allow you to extend the functionality of item types, region types, dynamic actions, and process types. The plug-in architecture includes a declarative development environment that lets you create custom versions of these built-in objects. For example, you can create your own star rating item that allows your user to provide feedback using a one-to-five star graphic. This new item type can then be used across all your applications. The main part of a plug-in consists of PL/SQL code and can be supplemented with JavaScript and CSS code. A plug-in consists of one or more PL/SQL functions. These functions can either reside in the database (in a package or a set of functions) or be included within the plug-in.
Shortcuts
By using shortcuts you can avoid repetitive
coding of HTML or PL/SQL functions. You can use a shortcut to
define a page control such as a button, HTML text, or a PL/SQL procedure. Once defined, you can
invoke a shortcut using specific syntax unique to the location in which the
shortcut is used. Shortcuts can be referenced many times, thus reducing code
redundancy.
When you create a shortcut, you must specify the type of shortcut you want to create. Oracle APEX supports the following shortcut types:
- PL/SQL Function Body
- HTML Text
- HTML Text with Escaped Special Characters
- Image
- Text with JavaScript Escaped Single Quotes
- Message
- Message with JavaScript Escaped Special Quotes
Lists
A list is a collection of links. For each list entry, you specify display text, a target URL, and other attributes to control when and how the list entry displays. Once created, you can add a list to any number of pages within an application by creating a region and specifying the region type as a List. You control the display of the list and the appearance of all list entries by linking the list to a template. Lists are of two types:
- Static Lists – When you create a static list you define a list
entry label and a target (either a page or a URL). You can add list entries
when you create the list (from scratch), by copying existing entries or by
adding the list entries. You can control when list entries are displayed by defining
display conditions.
- Dynamic Lists – Dynamic lists are based
on a SQL query or a PL/SQL function executed at runtime.
Navigation Menu
You might have seen a horizontal bar at the top
of a website. The options provided on this bar help you navigate to different
pages within that site. Application Express provides you with a similar component
called Navigation Menu. It
is an effective way to navigate users between pages of an application. A navigation menu is basically a list with
hierarchical entries. When you create an application, the Create Application
Wizard automatically creates a navigation menu for you and populates it with one
or more list entries. Types
of navigation menus include Side Menu, Top Menu, or Mega Menu.
By default, the navigation menu is displayed as a left sidebar. Users can
expand or collapse the Side Navigation Menu by clicking on the menu icon from the header.
This navigation menu renders the navigation items using a tree component that
enables users to expand or collapse sub-items. A Top Navigation Menu displays
at the top of the application. You can change how and where a navigation menu
displays by editing the application User Interface Details. The Top
Navigation Mega Menu template renders your application
navigation in a pop-up panel that can be opened or closed from the header menu
button. Users can expand or collapse a Mega Menu by clicking on the menu icon
from the header. Mega menus are especially useful when you want to display all
navigation items at once to your user.
Breadcrumb
A breadcrumb (A) is a hierarchical list of links
rendered using a template. For example, you can display breadcrumbs as a list
of links or as a breadcrumb path. A breadcrumb trail indicates where you are
within the application from a hierarchical perspective. In addition, you can
click a specific breadcrumb link to instantly view the page. For example, in
the screenshot below you can access the application home page by clicking its
breadcrumb entry (B). You use breadcrumbs as a second level of navigation at
the top of each page, complementing other navigation options such as Navigation
Menu and Navigation Bar.
Navigation Bar List
Just like menus, lists, and breadcrumbs, a
navigation bar is also created to link users to various pages within an
application. Typically, a navigation bar carries links such as user id, logout,
feedback, help, and so on. It appears on the top-right of every application page.
While creating a navigation bar, you can specify an image name, label, display
sequence, and target location.
User Interface Attributes
The application user interface determines the default characteristics of the application and optimizes the display for the
target environment. This is the place where you define your application logo
and set other useful attributes.
Themes and Templates
Instead of telling the App Builder how to design and style your pages using HTML, CSS, and JavaScript code that you may not be familiar with, you only apply the theme and templates you want to use and the Oracle APEX engine does the rest of the job for you.
A theme is a named collection of templates that defines the look and feel of the application user interface. Each theme contains templates for every type of application component and page control, including individual pages, regions, reports, lists, labels, menus, buttons, and lists of values.
The Application Express engine constructs the appearance of each page in an application using Templates. Templates define how pages, page controls, and page components display. Templates control the look and feel of the pages in your application using snippets of HTML, CSS, JavaScript, and image icons. As you create your application, you specify templates for pages, regions, reports, lists, labels, menus, buttons, and pop-up lists of values. Groups of templates are organized into named collections called themes.
The App Builder also allows you to access the themes and template mechanism so you can create new ones according to your own requirements or amend existing ones. Oracle APEX ships with an extensive theme repository. Administrators can add themes to the theme repository, as follows:
- Workspace administrators can create themes that are available to all
developers within the workspace. Such themes are called workspace themes.
- Instance administrators can create public themes by adding them
to the Oracle APEX Administration Services. Once added, these public themes are
available to all developers across all workspaces in an instance.
- Applications you create with the Create Application Wizard use the
Universal Theme. Universal Theme - 42 features a responsive design, and versatile
UI components and enables developers to create web applications without
extensive knowledge of HTML, CSS, or JavaScript. Responsive design enables you
to design web pages so that the layout fits the available space regardless of
the device on which the page displays (for example, a desktop computer, laptop
computer, tablet, or smartphone).
Static Application/Workspace Files
Use these two links to upload, edit, and delete static files including images, custom style sheets, and JavaScript files. An application file can be referenced from a specific application only, whereas a workspace file can be accessed by any application in the workspace. In this book, you will use the Static Application Files option to upload your application logo and CSS files.
Report Queries
A report query is a printable document, which
can be integrated with an application using buttons, list items, branches, or any other navigational components that allow for using URLs as
targets. A report query is based on a standard SQL query. It can be downloaded as a
PDF document, a Word document (RTF based), an Excel Spreadsheet
(HTML based), or an HTML file. The
layout of a report query is customizable using RTF templates.
Report Layouts
Use Report Layouts in conjunction with a report
region or report query to render data in a printer-friendly format, such as PDF, Word, or Excel. A report layout can be designed using the Template
Builder Word plug-in and uploaded as a file of type RTF or XSL-FO. Report regions use a generic XSL-FO
layout, which is customizable.
Globalization Attributes
If you want to develop applications that can run
concurrently in different languages, then Application Express is the right
platform for this. In the Globalization interface, you can specify options such
as the application's Primary Language, Date/Time format, and some other options
related to application globalization.
Translate Application
A single Oracle database and Oracle APEX instance can support an application in multiple languages. Translating an application involves multiple steps. To translate an application developed in App Builder, you must map the primary and target language, seed and export text to a translation file, translate the text, apply the translation file, and publish the translated application.
Having gone through the conceptual sections, the following are some of the Shared Components you will create for the Sales Web Application:
- Lists
- List of Values (LOV)
- Application Logo
- Cascading Style Sheet (CSS)
If you are logged off, log back into the
application development environment to create some shared components. Execute
the following three steps to access the Shared Components page.
1. Select Database Applications from the App Builder menu.
2. Click the Edit icon (A) under
Sales Web Application.
3. On the next screen, use either of the two Shared Components icons.
Create Lists
First, we are going to play with the Lists
shared component. A list is a collection of links rendered using a template.
For each list entry, you specify display text, a target URL, and other properties
to control when and how the list entry displays. You control the display of the
list and the appearance of all list entries by linking the list to a template.
Modify Navigation Menu List
Oracle APEX creates a default navigation list named Navigation Menu (under Navigation | Navigation Menu)
as a shared component for each new application. It is a hierarchical list of
navigation, which appears either as a responsive sidebar or at the top of the
window. Based on the available space, the navigation bar either displays a full
menu or collapses to a narrow icon bar. The default menu list (Navigation Menu) carries two items
labeled: Home & Administration. In this exercise, you'll modify this list
to add more application menu entries, as illustrated in the following figure.
1. In Shared Components, click the Navigation Menu option in the Navigation section.
2. On the Lists page, click the Navigation Menu option, which carries two entries (Home and Administration, as illustrated in Figure 3-6) created by the App Builder wizard to access the application Home & Administration pages.
3. On the List Details page, click the Create Entry button (A) to create a new menu item named Setup. This menu entry will have sub-entries that will allow you to access the Products and Customers modules. Fill in the values for this menu entry as highlighted in Figure 3-7. Do not select anything in the first attribute (Parent List Entry), because initially, you will create level-one entries that do not have parent entries. Click the pop-up LOV icon representing the Image/Class attribute. From the Show list, select Font APEX, and from Category, select Web Application. Click the Go button to refresh the view. Scroll down to the middle of the icons list and select the fa-database icon. This image will be displayed for the Setup menu at run time. Note that you can select any image from the list or input its name directly in the Image/Class attribute if you do not want to bother selecting it from the image list. Type Setup in the List Entry Label field. This label will appear in the application menu. In the Target Type attribute you specify a page in the current application or any valid URL. Since the Setup menu entry itself is not associated with any application page, its Target Type is set to No Target.
4. Using the button labeled Create
and Create Another, create two more level-1 entries as follows. After
adding the last entry (Reports), click the Create
List Entry button. The Target Type and Page properties inform Oracle APEX where to land when a menu item
is clicked – for example, the Orders
entry will take you to page 4.
|
Parent List Entry |
Image/Class |
List Entry Label |
Target Type |
Page |
|
No Parent List Item |
Choose any image |
Orders |
Page in this Application |
4 |
|
No Parent List Item |
Choose any image |
Reports |
Page in this Application |
26 |
These entries along with the Setup entry (created in step 3) will form
the main menu of our application and because of this reason, we set No Parent List Item for all three entries.
Note that the Setup entry has no
target because it is not directly linked to any application page. In the next step,
you will create submenus under this main entry to call respective pages.
5. Using the same process you executed in the previous step, create the
following level-2 menu entries:
|
Parent List Entry |
Image/Class |
List Entry Label |
Target Type |
Page |
|
Setup |
Select an image |
Manage Customers |
Page in this Application |
2 |
|
Setup |
Select an image |
Manage Products |
Page in this Application |
3 |
|
Reports |
Select an image |
Graphical Reports |
Page in this Application |
26 |
|
Reports |
Select an image |
Advance Reports |
Page in this Application |
26 |
The first two entries will come under the main Setup menu item, while the Reports
menu will contain two child entries (Graphical Reports and Advance Reports).
6. Now create level-3 entries as follows. Note that the Page attribute for Monthly Review Report entry is set to zero because it will be
invoked through a print request that is configured in this video.
|
Parent List Entry |
List Entry Label |
Target Type |
Page |
|
Graphical Reports |
Customer Orders |
Page in this Application |
17 |
|
Graphical Reports |
Sales By Category/Products |
Page in this Application |
16 |
|
Graphical Reports |
Sales by Category/Month |
Page in this Application |
5 |
|
Graphical Reports |
Order Calendar |
Page in this Application |
10 |
|
Graphical Reports |
Product Order Tree |
Page in this Application |
19 |
|
Advance Reports |
Monthly Review Report |
Page in this Application |
0 |
|
Advance Reports |
Customer Invoice |
Page in this Application |
50 |
The first six entries will appear as submenu choices under the Graphical Reports menu. Similarly, Monthly Review Reports and Customer Invoices will be placed under Advance Reports. All the previous
settings will set up a hierarchical navigation for your application, as shown previously
in Figure 3-5.
Reports List
In this section, you will create a list named Reports List. The list will have several links that will lead to
different reports in your application. Note that you created the same links in
the navigation menu in the previous section to call some of these reports from
the application menu. The Reports List
being created here will be used on a dedicated report page to call respective
reports – see this video.
1. Go to Shared Components | Navigation | Lists. Click the Create button to create a new list.
2. Select From Scratch on the Source wizard screen and click Next. On the next screen, enter Reports List for Name, select Static as the list Type, and click Next. When you create a static list you define a list entry label and a target (either a page or URL).
3. Enter the following values in Query
or Static Values screen. Initially, the wizard
allows you to create five entries. The remaining entries and Image/Class properties are created and set after
saving the first five.
|
List Entry Label |
Target Page ID |
Image/Class |
|
Customer Orders |
17 |
Choose any image |
|
Sales by
Category and Product |
16 |
Choose any image |
|
Sales by
Category / Month |
5 |
Choose any image |
|
Order
Calendar |
10 |
Choose any image |
|
Product
Order Tree |
19 |
Choose any image |
|
Gantt Chart |
20 |
Choose any image |
|
Box Plot |
21 |
Choose any image |
|
Pyramid Chart |
22 |
Choose any image |
|
List View (Mobile) |
23 |
Choose any image |
|
Column
Toggle Report (Mobile) |
24 |
Choose any image |
|
Reflow
Report (Mobile) |
25 |
Choose any image |
4. After entering the first five list entries click Next, accept the default values in the next screen, and click the Create List button. You will be taken back to the Lists page, where you will see this new list.
5. Modify the list by clicking the Reports List link in the Name column.
6. Click the Create Entry button to add the sixth entry. Enter Product Order Tree in List Entry Label. Set Target Type to Page in this Application and enter 19 in the Page attribute. Click the Create and Create Another buttons to add the remaining entries, as shown in the table.
7. Modify each entry by clicking its name in the List Details interface and add image references. Click the Apply Changes button after adding the image reference.
Order Wizard List
This is another utilization of lists. Rather than associating list items
to pages in the application, you’ll use it for visual representation. It will
be used while creating orders in this video. In our application, we will create
an order using a set of wizard steps in the following sequence:
a) Identify Customer
b) Select Items
c)
Order Summary
1. Go to Shared Components | Navigation | Lists and click the Create button.
2. Select the first From Scratch option and click Next.
3. Type Order Wizard in the Name box, set Type to Static, and click Next.
4. On the Query or Static Values screen, enter the following
values and click Next.
5. Click the Create List button on
the Confirm screen.
6. Modify the newly created Order
Wizard list.
7. Edit each list item and set the Target
Type attribute to No Target for all three
list items. The No Target value
is set because this list is intended to display the current order wizard step where
the user is within the order processing module, and not to call a page in the
application. In the Current List Entry
section, set List Entry Current for Pages
Type to Comma Delimited Page List for the three list items, and set
the List Entry Current for Condition attribute individually, as shown in the following table and screenshot. Click
the Apply Changes button to save the
modifications.
|
Property |
Identify
Customer |
Select
Items |
Order
Summary |
|
List
Entry Current for Condition |
11 |
12 |
14 |
The List Entry Current for Pages
Type attribute specifies when this
list entry should be current. Based on the value of this attribute, you define
a condition to evaluate. When this condition is true, the list item becomes
current. The template associated with the list item gives users a visual indication
of the active list item. The following figure illustrates the use of the Order
Wizard list. Being the first step in the
order wizard, the Identify Customer
list item is marked as current (when Page 11 is called to enter a new order),
while the remaining two are displayed as non-current. After selecting a customer, when you move on
to the next step to select ordered items, the Select Items entry becomes current and the
first and last entries become inactive.
Navigation Bar
As discussed earlier, a navigation bar is also used to link various
pages within an application. Typically, a navigation bar is used to access Help
pages and also carries a SignOut link. The location of a
navigation bar depends upon the associated page template. When you create a
navigation bar, you specify an image name, label, display sequence, and target
location (a URL or a page). The navigation bar used in our application will
show the feedback page icon, Page Help entry, About Page entry, the
id of the currently logged-in user, and a SignOut link. All these entries are
created automatically when you create a new application.
List of
Values (LOV)
A list of values is used to control input values and limits the user’s
selection. You can define two types of
lists: Static and Dynamic. A static list of values is based on predefined
display and return values. A dynamic list of values is based on a SQL query, and
it is executed at runtime. In the following exercise, you will create both
types of LOVs.
CATEGORIES LOV
In our application, we have a Product setup
module. The module will make use of three product categories. Each product in
the application will fall under one of these categories. This LOV is created
with the intention to present the three categories to the user (while creating
a product record) to associate each product with one of these categories. The
LOV will be utilized in subsequent blogs.
1. In Shared Components, click Lists of Values under the Other Components section.
2. Click the Create button.
3. Select the From Scratch option and click Next.
4. Enter Categories for the LOV Name, select Static as the LOV type, and click Next.
5. Fill in the values as shown in the following figure and click the Create List of Values button.
In the last step, you entered a pair of static Display and Return
values. At runtime these entries will display in the order they are entered. Return Value does not display, but is
the value that is returned as a user selection to the Application Express
engine.
PRODUCTS WITH PRICE LOV
Similar to the categories list of value, this
one also limits the user’s selection by displaying product names with prices during the order creation. Here you’ll generate the list dynamically with the help of a
SQL statement. The first column in the query,
which concatenates product name and price, is used to display product
information to the user, while the second column (product id) is returned for
backend processing. You will utilize this LOV further.
1. Once again, click the Create button in Lists of Values.
2. Select From Scratch and click Next.
3. Enter Products with Price in the Name box. This time, select the Dynamic Type and click Next.
4. On the List of Values Source screen, select SQL Query for the Source Type, and enter the following query in the Enter a SQL SELECT statement box. The SQL query is available in the SourceCode\part3 folder.
SELECT apex_escape.html(product_name) || ' [$' || list_price || ']' d, product_id r
FROM demo_product_info
WHERE product_avail = 'Y'
ORDER BY 1
5. On the final Column
Mappings screen, select R for Return Column, D for Display Column, and
click the Create button to finish the wizard.
APEX_ESCAPE.HTML
The
function APEX_ESCAPE.HTML is used to protect against XSS (Cross Site
Scripting) attacks. It replaces characters that have
special meanings in HTML with their escape sequence.
It converts the occurrence of & to
&
It converts the occurrence of “ to "
It converts the occurrence of < to <
It converts the occurrence of > to >
STATES LOV
This is a dynamic LOV and is based on a SQL SELECT query to
fetch State names from the DEMO_STATES table. The query fetches both columns
from the table. The LOV will be used further, where it will
be attached to an input form page item.
1. In Lists of Values, click the Create button.
2. Select the From Scratch option and click Next.
3. Enter States in the Name box, select Dynamic for its type, and click Next.
4. On the List of Values Source
screen, select SQL Query for the Source Type, and enter the following
query in the Enter a SQL SELECT statement
box. Click Next.
select state_name display_value, state_id return_value
from demo_states order by 1
5. On the final Column Mappings
screen, select RETURN_VALUE for Return Column, DISPLAY_VALUE for Display
Column, and click the Create
button to create the LOV.
NEW OR EXISTING CUSTOMERS LOV
This static list will be incorporated in the
initial Order Wizard step to select an existing customer for a new order or to create a
new one.
1. In Lists of Values, click Create.
2. Select From Scratch and click Next.
3. Enter NEW OR EXISTING CUSTOMER in the Name box, select Static as its Type, and click Next.
4. Fill in the display and return values as shown in the following figure
and click the Create List of Values button.
Images
You can reference images within your application by uploading them to the Images Repository. When you upload an image, you can specify whether it is available to all applications or a specific application. Images uploaded as shared components can be referenced throughout an application. They may include images for application menus or buttons or may represent icons that, when clicked, allow users to modify or delete data. One important point to remember here is that the images uploaded to the images repository should not be directly related to the application’s data such as images of products and employees. Such images must be stored in the application’s schema alongside the data to which the image is related. You’ll follow this approach to save each product’s image along with other information in a database table.
Application Express images are divided into two categories:
- Workspace images are available to all applications
for a given workspace
- Application images are available for only one application
In the following set of steps, you’ll add your application’s logo to the images repository. The logo appears at the top of every page of the application.
1. In Shared Components, click Static Application Files under the Files section.
2. Click the Create File button.
3. Click the Drag and Drop Files
button and select the logo.ico file,
which is available in the SourceCode/part3 folder.
4. Click the Create button. After uploading the image, you need to tell Oracle APEX to use this file as your application logo. To pass this information, execute the following steps.
5. In Shared Components click User Interface Attributes under the User Interface section.
6. In the Logo section, select Image and Text for the Logo property.
7. Enter #APP_FILES#logo.ico in the Image URL box, and enter Sales Web Application in the Text box. An application logo can be an image, text, image, and text, or based on custom markup. When you select a type for your application logo, additional attributes appear depending upon your selection. With this selection, your application logo and application name will be displayed on each application page. The APP_FILES built-in template substitution string is used to reference uploaded images, JavaScript, and cascading style sheets that are specific to a given application and are not shared over many applications. You must use this substitution string if you upload a file and make it specific to an application. Note that you must use the correct case for the image file name and extension, else the logo will not be displayed at runtime. Click the Apply Changes button.
Run the application. The application logo and text should resemble the
following figure.
