Ticker

6/recent/ticker-posts

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

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

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.

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

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.

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

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

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

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');

Oracle APEX Tutorial - Display User Profile Image  into Navigation Menu in Oracle Apex
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:-

You can also watch Oracle APEX Video Tutorial


If You Like This Tutorial Please Like Share And Comment.

Post a comment

0 Comments