Freitag, 5. Mai 2017

APEX BUILDER PROFIL MENU

Let's start

1- Create a custom Report Template using Named Column (row template) .

    - add in Row Template 1 the below Code

<div id="accountMenu_menu" class="a-Header-accountDialog" tabindex="-1"> <div class="a-MediaBlock a-Menu-content"> <div class="a-MediaBlock-graphic"> <span class="a-Header-userPhoto a-Header-userPhoto--large"> <img src="#IMAGE#" height="64" width="64" class="a-Header-photo" alt="Profile image for user #FIRSTNAME#"> </span> <a href="#EDIT_PROFIL#" class="a-Header-accountDialog-editProfile a-Menu-item a-Menu-label" id="EDIT_PROFILE_LINK">Edit Profile</a> </div> <div class="a-MediaBlock-content"> <div class="a-Menu-label a-Menu-item" tabindex="-1"> <span class="a-Header-dialogText a-Header-dialogName">#FIRSTNAME# #LASTNAME#</span> <span class="a-Header-dialogText a-Header-dialogUsername">#EMAIL#</span></div> <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

SELECT 'Alli Pierre' FIRSTNAME,
                     'Yotti' LASTNAME,
                             'pierrealli/r/123868/files/static/v99/imagep.png' IMAGE,
                                                                               'yottiallipierre@gmail.com' EMAIL,
                                                                                                           'achsnrw6' WORKSPACE,
                                                                                                                      'Administrator' ROLE,
                                                                                                                                      apex_util.prepare_url('f?p='||:APP_ID||':23:'||:APP_SESSION) EDIT_PROFIL
FROM dual


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

5- Add a Class to your inline Dialog

$("#exitpopup_bg").dialog({

    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;
}



.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 {
    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;
    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;
}
.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;
}



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


                $('.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












Kommentare:

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

    Thanks in advance

    AntwortenLöschen
  2. Hi.. i don't understand your step.. please give a tutorial video please ??

    AntwortenLöschen
    Antworten
    1. Hey Apex Solution,
      What is the Issue?

      Löschen
    2. The code is not working for me.
      please give me a full video.please sir.

      My Email- benq.mamun@gmail.com

      Löschen
    3. I'm your big friend sir.
      I see all your videos.

      Löschen
    4. I'm your big friend sir.
      I see all your videos.

      Löschen
    5. The code is not working for me.
      please give me a full video.please sir.

      My Email- benq.mamun@gmail.com

      Löschen
  3. Can you share username/password for this account menu demo

    AntwortenLöschen
  4. Hey Mayur,
    I Remove the Authentication, you can have access to the Demo now

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

    AntwortenLöschen
  6. $('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');


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


    WHERE ADD I DO

    AntwortenLöschen
  7. 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 ?

    AntwortenLöschen
    Antworten
    1. Hi Idrissi,
      add the Code in step 5 and 8 in Execute when Page Loads.

      Step 6 in Inline

      Thanks
      Pierre

      Löschen
    2. 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)

      Löschen
    3. Hi Idrissi,

      did you use Inline Dialog for the Menu?


      Thanks Pierre

      Löschen
    4. yes in layout section, the position is inline dialog

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

    AntwortenLöschen
  9. 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?

    AntwortenLöschen
  10. 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

    AntwortenLöschen