How to display company logo for APEX application?

A basic requirement in most implementations is displaying company logo. This article shows how to achieve it in Application Express.

Requirement:
Display Apps2Fusion logo on Person Details application http://apex.oracle.com/pls/otn/f?p=62577. To take step forward, I want to make the image clickable to redirect user to apps2fusion website in separate window.

Implementation:

Brief Steps are

Upload company logo image in Shared Components > Images > Create button.
Go to Shared Components > Definition (Under Application section). In Logo section, enter logo type as Image and logo as #WORKSPACE_IMAGES#a2f_logo_s.JPG. #WORKSPACE_IMAGES# is a substitution string which is replaced with actual location of image.
To make logo clickable, enter logo type as Text and logo as <a target="_blank" href="/at/kr"><img src="#WORKSPACE_IMAGES#a2f_logo_s.JPG" alt="Apps2Fusion.com" title="Apps2Fusion.com"/></a>

Why I switched to logo type as Text to implement clickable logo?

When logo type Image is chosen, APEX uses img tag to display image. You can use logo attributes (field below logo) to set image attributes like width, height etc. There is no href attribute for img tag unlike anchor tag. So I wrote html tags bundling anchor and image tags, to put them under logo type Text. #WORKSPACE_IMAGES# substitution string is still applicable in HTML text.

Lets see the detailed steps with screenshots.

Go to Shared Components > Images (Under Files section). This displays all the available images in application. Choose create to upload new image. Note that application field is optional.

Go to Shared Components > Definition (Under Application section). For non-clickable logo, choose logo type as Image and logo as #WORKSPACE_IMAGES#a2f_logo_s.JPG. I've used logo attributes for setting alternate text and title. Alternate text (alt) is used when image cannot displayed.

For clickable logo, choose logo type as Text and logo as <a target="_blank" href="/at/kr"><img src="#WORKSPACE_IMAGES#a2f_logo_s.JPG" alt="Apps2Fusion.com" title="Apps2Fusion.com"/></a>. This HTML text is image tag wrapped around anchor tag with href and target attributes.

Apply Changes and run the application.

Apps2Fusion logo is shown in top left portion of the application.

How #WORKSPACE_IMAGES# substitution string works?
Viewing page source is good way to check how substitution strings are replaced. In case of #WORKSPACE_IMAGES#a2f_logo_s.JPG substitution string, it is replaced with a function call wwv_flow_file_mgr.get_file?p_security_group_id=5937624817042064053&p_fname=a2f_logo_s.JPG
where p_security_group_id is workspace identifier. Package wwv_flow_file_mgr is in FLOWS_020100 which APEX 3.2 schema. wwv_flow_file_mgr.get_file fetches file from APEX_WORKSPACE_FILES table which contains images, css files and javascript files. Since APEX_WORKSPACE_FILES is one-stop table for above files, to reference css/javascript files in HTML code you can use same substitution string #WORKSPACES_IMAGES# like #WORKSPACE_IMAGES#custom.css or #WORKSPACE_IMAGES#customjs.js

What is difference between #WORKSPACE_IMAGES# and #APP_IMAGES# substitution strings?
APEX Workspace can contain one or more applications. If application field is left NULL when creating an image, image take global or workspace scope. It means it is not attached to any specific application.

#WORKSPACE_IMAGES# substitution string is used for accessing workspace and application images. It is replaced with wwv_flow_file_mgr.get_file?p_security_group_id=<Workspace_Id>&p_fname=<Image>

#APP_IMAGES# substitution string is used for accessing only application images. It is replaced with wwv_flow_file_mgr.get_file?p_security_group_id=<Workspace_Id>&p_flow_id=<Application_Id>&p_fname=<Image>
Note the extra parameter p_flow_id added to same function call.

If image is workspace image, #APP_IMAGES# substitution string cannot be used.

What is difference between #WORKSPACE_IMAGES# substitution string and /i/ notation for accessing images?
/i/ notation can also be used for accessing images. /i/ points to physical directory on the server where images are located. Suppose if APEX3.2 is installed on windows, /i/ points to <APEX Install location>\apex\images. For above requirement if I placed logo file in physical directory, I can use logo Image as /i/a2f_logo_s.JPG

Which notation to use? Personally I prefer #WORKSPACE_IMAGES# notation as I can upload images from APEX application which does not require access to server physical directories. I can also see the images in Shared Components > Images when they are uploaded from APEX application.

URL for the application:

My application can be accessed using the url http://apex.oracle.com/pls/otn/f?p=62577:1

Set as favorite

Bookmark

Email This

Comments (7)

Subscribe to this comment's feed

companylogo
written by lakshman , June 08, 2009

I am using only oracle erp 11.5.10.2 is it possible for change the logo. pls tell how. more usefull ur source but am not using fusion

advance thanks.

report abuse

vote down

vote up

Votes: +0

Re: companylogo in EBS 11i
written by Kishore Ryali , June 08, 2009

Hi,

If you are talking about changing Oracle logo to your company logo in 11i, please follow instructions in metalink note 395663.1

Thanks
Kishore

report abuse

vote down

vote up

Votes: +0

Add trace details in log for concurrent program
written by Saravanan Ayyanar , June 18, 2009

Hi

I have concurrent program defined. I have added the debug message in the program to track the status. When I run this program, I couldn't see this message. Once this program is completed, I could see the debug messages.

When program is running, I want to see the debug messages. Can you please help me on this.

Regards
Saravanan.A

report abuse

vote down

vote up

Votes: +0

Re: Add trace details in log for concurrent program
written by Kishore Ryali , June 19, 2009

Saravanan,

You may write your debug messages to custom error table and include it in autonomous transaction if you dont want to commit in your original program.

Kishore

report abuse

vote down

vote up

Votes: +0

Dependant LOV Tutorial
written by naushad , June 13, 2010

Hi, Thanks a lot for this tutorial. Do you have a tutorial on how to create Dependant LOV (you have created this on your apex workspace)?

Thank you very much.
naushad.

report abuse

vote down

vote up

Votes: +0

good stuff
written by susan mark , July 17, 2010

Thank you very much for posting such valuable information. As i am associated with Logo Design & Web Banner Business, so i am very well aware of usefulness of the info..

report abuse

vote down

vote up

Votes: +0

Logo Design
written by susi jhons , July 17, 2010

hank you very much for posting such valuable information

report abuse

vote down

vote up

Votes: +0

Write comment

Name