Show Image Instead of Icon in Oracle APEX Region Header- Javainhand Tutorial

Show Image Instead of Icon in Oracle APEX Region Header: A Comprehensive Guide

Learn how to replace the standard icons in the Oracle APEX Region header with custom images in a few simple steps.

Step 1: Upload the Image to the Shared Components

The first step in this process is to upload the image that you want to display in the Region header. To do this, you need to access the Shared Components section of the Oracle APEX workspace and select the Static Application Files option. Next, click on the Create button and select the Image option. Finally, upload the image file and give it a meaningful name.

Step 2: Copy Existing Standard Region Template with New Name

Second step in this process is to  copy existing standard region template with new name. To do this, You have to go in the shared components and find template section then find standard region template and Click on the copy icon and Save with the new name.

Step 3: Find the New Template and Done the Below Changes.

Third step in this process is to find the new template which have we created and click on the that template then go to the definition and find (<span class="t-Region-headerIcon"><span class="t-Icon #ICON_CSS_CLASSES#" aria-hidden="true"></span></span>) this line of statement. After that we have to change with the below statement and Save your template.

<span class="t-Region-headerIcon"><img src="#ICON_CSS_CLASSES#" aria-hidden="true"></img></span>

Step 4: Use the new template in your page.

Fourth step in this process is to create a new region and Change region template with new template then Go to template option and Enable the show region icon. After that paste your IMAGE URL in the ICON section. Please check the below screenshot.

Output

Conclusion: Showing an image instead of an icon in the Oracle APEX Region header is a simple and straightforward process that can enhance the visual appeal of your application. By following the steps outlined in this article, you can easily replace the default icon with a custom image in a few minutes. If you have any questions or concerns, please drop the comment in the comment section for additional information.