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