Display User Profile Image into Navigation Menu in Oracle APEX - Javainhand Tutorial

Hello Friends,

Today I will tell you, How can you Display User Profile Image into Navigation Menu in Oracle APEX. This implementation is very easy if you follow the below steps.

Lets Start,

Step 1:- Create a Region with static content in Global Page or Any Page(Note if you want to show user profile image in every page then you create a region in Global Page otherwise you can create a region on any page.), Here I am creating on Page Number 1 below screenshot will you help.

Step 2:- After creating Region use <image> tag for display image.The below code will help you.

<img src="https://yt3.ggpht.com/a-/AAuE7mAlH8Dm8mD0t5mzPfMrWs5iiCFORHSmlP7cKA=s176-mo-c-c0xffffffff-rj-k-no" alt="logo" height="100" width="100" class="side_image">

Step 3:- After that change region properties Appearance>Choose template>Blank with attributes>css classes>javainhand. The below screenshot will help you.

Step 4:- Create a Dynamic Action on Page Load. The below screenshot will help you.

Step 5:- Now Create a True Action with Execute javascript on existing Page load Dynamic Action. Use the below code and screenshot will help you.

     $('.javainhand').prependTo('#t_TreeNav');

Step 6:- Last step use below CSS code.

#t_TreeNav {

    display: flex;

    flex-direction: column;

    height: 100%;

}

#t_TreeNav ul {

    flex: 1 0 auto;

}

div.javainhand{

    flex: 0 0 auto;

}

#t_PageBody.apex-side-nav.js-navCollapsed .javainhand {

   display: none;

}

.side_image {

    border-radius: 50%;

    display: block;

    margin-left: auto;

    margin-right: auto;

    width: 50%;

} 

Reference:-

https://askmax.blog/2016/04/01/region-in-left-side-navbar-menu/

You can also watch Oracle APEX Video Tutorial

If You Like This Tutorial Please Like Share And Comment.