APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.

html

Freitag, 5. Mai 2017 Über mich

alli pierre yotti

APEX BUILDER PROFIL MENU
Let's start Mein Profil vollständig
anzeigen
1- Create a custom Report Template using Named Column (row template) .

Blog-Archiv
- add in Row Template 1 the below Code
2018 (5)
<div id="accountMenu_menu" class="a-Header-accountDialog" tabindex="-1">
2017 (25)
<div class="a-MediaBlock a-Menu-content">
Dezember (1)
<div class="a-MediaBlock-graphic">
Oktober (1)
<span class="a-Header-userPhoto a-Header-userPhoto--large">
<img src="#IMAGE#" height="64" width="64" class="a-Header-photo" September (4)
alt="Profile image for user #FIRSTNAME#"> Mai (4)
</span> Show Maximize Page after Submit
<a href="#EDIT_PROFIL#" class="a-Header-accountDialog-editProfile
APEX BUILDER PROFIL MENU
a-Menu-item a-Menu-label" id="EDIT_PROFILE_LINK">Edit Profile</a>
How to hide the Navigation bar
</div>
<div class="a-MediaBlock-content"> Overflow the navigation Bar with the
Background im...
<div class="a-Menu-label a-Menu-item" tabindex="-1">
<span class="a-Header-dialogText a-Header- April (15)
dialogName">#FIRSTNAME# #LASTNAME#</span>
2016 (6)
<span class="a-Header-dialogText a-Header-
dialogUsername">#EMAIL#</span></div>

1 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

<div class="a-Menu-label a-Menu-item" tabindex="-1">

<span class="a-Header-dialogLabel">
Workspace</span><span class="a-Header-dialogValue">#WORKSPACE#</span></div>
<div class="a-Menu-label a-Menu-item" tabindex="-1">
<span class="a-Header-dialogLabel">Role</span><span class="a-
Header-dialogValue">#ROLE#</span></div>
</div>
</div>
</div>

2- Create your Inline Dialog in Page 0

3- Add to the Inline Dialogthe below Sql Query. You can call direct the Data for the
Database

4- Add in your inline region a Static ID. Example exitpopup_bg

5- Add a Class to your inline Dialog

$("#exitpopup_bg").dialog({

2 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

autoOpen: false,

modal: false,
dialogClass: 'PROF_DID'

});

6- Add the below Css to make the Profil Menu Beautiful and at the Top Right of the Page

:focus {
outline: none !important
}

.PROF_DID .t-DialogRegion-buttons{
background-color: #FBFBFB;
}

.t-Button.t-Button--header:active, .t-Button.t-Button--header:focus:active {
background-color: rgba(0, 0, 0, 0) !important;
}
.t-Button.t-Button--header:focus:before, .t-Button.t-Button--header:active:focus:before {
box-shadow: none !important;
}
.t-Button.t-Button--header:hover {
background-color: rgba(0,0,0,0);
box-shadow: none !important;
}

3 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

.image_icon {
background-image:url(pierrealli/r/123868/files/static/v99/imagep.png);
background-repeat: none !important;
background-repeat: no-repeat !important;
background-size: 40px;
border-radius: 50px;
padding-bottom: 16px;
}

.PROF_DID.ui-widget.ui-dialog {
right:0px !important;
left:initial !important;
float:right !important;
top:47px !important;
border-radius:.4rem !important;
box-shadow:rgba(0,0,0,.1) 0 0.4rem 1.6rem !important;
}

.PROF_DID.ui-dialog{
width:320px !important;
height:260px !important;
}

#exitpopup_bg{
height:260px !important;
}

.PROF_DID.ui-dialog .ui-dialog-titlebar {
background-color: #ffffff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
display: none;
}

.a-MediaBlock.a-Menu-content {

4 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

background: none;
border: none;
box-shadow: none;
}
.a-Header-accountDialog .a-MediaBlock-graphic {
margin-right: 16px;
}
.a-MediaBlock-graphic {
float: left;
margin-right: 8px;
}
.a-Header-accountDialog .a-Header-userPhoto--large {
background-color: #F8F8F8;
}
.a-Header-userPhoto {
box-shadow: 0 0 0 1px #B0B0B0 inset;
}
.a-Header-userPhoto {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 100%;
vertical-align: top;
overflow: hidden;
position: relative;
}
.a-Header-accountDialog.a-Menu .a-Menu-label {
padding: 0;
}
.a-Header-accountDialog.a-Menu .a-Menu-item {
display: inherit;
color: inherit;
line-height: inherit;
float: none;
}
.a-Header-accountDialog-editProfile.a-Menu-item.a-Menu-label {
text-align: center;
}
.a-Header-accountDialog-editProfile.a-Menu-item.a-Menu-label, .a-Menu-content .a-Header-
dialogLink.a-Menu-item .a-Menu-label {
display: block;
margin-top: 4px;

5 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

color: #146fb8;
}
.a-Header-accountDialog-editProfile.a-Menu-item.a-Menu-label, .a-Header-dialogLink.a-
Menu-item .a-Menu-label {
font-size: 11px;
line-height: 16px;
padding: 0;
border-radius: 2px;
transition: none;
}
.a-Header-accountDialog .a-MediaBlock-content {
padding: 4px 0;
}
.a-Header-userPhoto--large, .a-Header-userPhoto--large .a-Icon, .a-Header-userPhoto--large img
{
width: 64px;
height: 64px;
}
.a-Header-dialogName {
font-weight: 300;
font-size: 20px;
line-height: 24px;
}
.a-Header-dialogText {
display: block;
line-height: 16px;
}
.a-Header-photoPlaceholder {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 100%;
box-shadow: 0 0 0 1px rgba(0,0,0,.15)inset;
}
.a-Header-accountDialog.a-Menu .a-Menu-item {
display: inherit;
color: inherit;
line-height: inherit;
float: none;
}

6 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

.a-Header-accountDialog.a-Menu .a-MediaBlock-content .a-Menu-item.a-Menu-label {

cursor: default;
}
.a-Header-dialogUsername {
font-size: 11px;
font-weight: 400;
}
.a-Header-dialogLabel, .a-Header-dialogUsername {
color: #777;
}
.a-Header-dialogLabel {
margin-top: 16px;
line-height: 10px;
font-size: 9px;
text-transform: uppercase;
display: block;
}
.a-Header-dialogValue {
font-size: 12px;
line-height: 16px;
}
.a-Header-dialogName, .a-Header-dialogValue {
color: #404040;
}
.profile-icon {
background-color: transparent;
background-repeat: no-repeat;
background-size: 24px;
display: inline-block;
height: 24px;
width: 24px;
vertical-align: baseline;
cursor: pointer;
border-radius: 100%;
margin-right: 5px;
}

7 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

6- Add 2 classes to your Nagivation Bar Item. Example image_icon and st

7- Add the List Entry Label for the Navigation Bar Item like the below Picture

8- Add this Javascript to Close the Menu when clicked outside it

/* Close when click Outside the Dialog*/

$('html')
.bind(
'click',
function(e) {
if ($('#exitpopup_bg').dialog('isOpen') && !$(e.target).is('.ui-dialog, a') &&
!$(e.target).closest('.ui-dialog').length && !$(e.target).is('.image_icon')&&!$(e.target).is('.ui-dialog-
titlebar-close')) {
$('#exitpopup_bg').dialog('close');

8 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

$('.image_icon').removeClass('et');
$('.image_icon').addClass('st');
}
}
);

9- Create a DA On Click to Open The Menu( Inline Dialog)

- Event: Click

- Selection Type: Jquery Selector

- jquery Selector: .image_icon.st ( Remenber that we add this class before in the Navigation Bar
Item)

- Event Scope: Dynamik

- Action: Javascript

openModal("exitpopup_bg");
$('.image_icon').removeClass('st');
$('.image_icon').addClass('et');

10- Create a DA On Click to CloseThe Menu( Inline Dialog)

- Event: Click

- Selection Type: Jquery Selector

- jquery Selector: .image_icon.et

- Event Scope: Dynamik

- Action: Javascript

closeModal("exitpopup_bg");
$('.image_icon').removeClass('et');
$('.image_icon').addClass('st');

11- Demo

9 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

Eingestellt von alli pierre yotti um 06:02

Kommentare:

Thamarai NMTS 7. Mai 2017 um 02:21

Hi its very useful.. can you please demonstrate in apex.oracle.com because its difficult to
understand also to learn easily.

Thanks in advance

Antworten

10 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

Oracle Apex Solution 18. Mai 2017 um 02:41

Hi.. i don't understand your step.. please give a tutorial video please ??

Antworten

Antworten

alli pierre yotti 23. Mai 2017 um 03:19

Hey Apex Solution,

What is the Issue?

Oracle Apex Solution 10. Juni 2017 um 02:21

The code is not working for me.

please give me a full video.please sir.

My Email- benq.mamun@gmail.com

Oracle Apex Solution 10. Juni 2017 um 02:23

I'm your big friend sir.

I see all your videos.

Oracle Apex Solution 10. Juni 2017 um 02:26

I'm your big friend sir.

I see all your videos.

Oracle Apex Solution 10. Juni 2017 um 02:26

The code is not working for me.

please give me a full video.please sir.

My Email- benq.mamun@gmail.com

alli pierre yotti 19. September 2017 um 10:06

Hi,

what is the issue?

11 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

Regards
Pierre

Antworten

Mayur Vaghasiya 21. Mai 2017 um 21:29

Can you share username/password for this account menu demo

Antworten

alli pierre yotti 23. Mai 2017 um 03:18

Hey Mayur,
I Remove the Authentication, you can have access to the Demo now

Antworten

Thamarai Selvan 24. Mai 2017 um 06:18

We are accessing the demo but if you share the development credentials it will better to us..

Antworten

Antworten

mrtyrr 23. November 2017 um 07:37

++

Antworten

Worldwide Official Entertainment 31. Juli 2017 um 12:29

$('html')
.bind(
'click',
function(e) {
if ($('#exitpopup_bg').dialog('isOpen') && !$(e.target).is('.ui-dialog, a') && !$(e.target).closest('.ui-
dialog').length && !$(e.target).is('.image_icon')&&!$(e.target).is('.ui-dialog-titlebar-close')) {
$('#exitpopup_bg').dialog('close');

12 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

$('.image_icon').removeClass('et');
$('.image_icon').addClass('st');
}
}
);

WHERE ADD I DO

Antworten

soukaina idrissi 27. September 2017 um 01:12

Hi Mr YOTTI,
I followed your article but i dont know where should i add the code wrote in the step 5,6 and 8.
Please, can you specify exactly the place in my inline dialog ?

Antworten

Antworten

alli pierre yotti 27. September 2017 um 04:50

Hi Idrissi,
add the Code in step 5 and 8 in Execute when Page Loads.

Step 6 in Inline

Thanks
Pierre

soukaina idrissi 27. September 2017 um 06:32

Thank you Mr Yotti.

I have one last question:
When i click on edit profile link, the account_menu still visible. How can i remove it
when the edit profile link is clicked (because the edit profile page is modal page)

alli pierre yotti 27. September 2017 um 07:38

Hi Idrissi,

did you use Inline Dialog for the Menu?

13 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

Thanks Pierre

soukaina idrissi 27. September 2017 um 08:36

yes in layout section, the position is inline dialog

Antworten

soukaina idrissi 27. September 2017 um 03:18

Hi Mr YOTTI,
I cant get the preferences and Sign out Buttons. How can i add them ?

Antworten

soukaina idrissi 11. Oktober 2017 um 09:53

Hi Mr YOTTI,
Its me again, i want to ask you some questions:
1- Is it possible to change image existing in Menu Bar(Not in inline dialog),to connected user
picture, because here the image is static included in the css code.
If yes, how can i do it ?

2- Is it possible to resize the inline dialog?

Antworten

mrtyrr 23. November 2017 um 07:29

Hello Mr YOTTI;

This is the menu design you have made, I have been dreaming since the first day I started
working with Oracle APEX. Thank you for making this work and sharing it. I would like you to add
step by step detailed explanations and screenshots or a video. I was surprised at what I would do
in the third step. Unfortunately, the Oracle APEX and JavaScript experience is not enough to
understand such a concise statement yet. I ask you for your followers who are in the same
situation as me.
Best regards...
Murat Yürür
email: admin@muratyurur.com

Antworten

14 of 15 2/21/2018 10:19 PM
APEX LEARNING BY ALLI PIERRE YOTTI: APEX BUILDER PROFIL MENU http://allipierreapex.blogspot.co.id/2017/05/apex-builder-profil-menu.html

Kommentar schreiben als:

Veröffentliche Ich möchte Benachrichtigungen erhalten

Neuerer Post Startseite Älterer Post

Abonnieren Kommentare zum Post (Atom)

Design "Einfach". Powered by Blogger.

15 of 15 2/21/2018 10:19 PM