This discussion is archived
1 2 Previous Next 16 Replies Latest reply: Nov 26, 2012 3:50 AM by Mahmoud_Rabie RSS

Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme

Mahmoud_Rabie Journeyer
Currently Being Moderated
Dear Experts,

Given:
- Apex 4.2
- Application Theme: Bluejay-22
- Page Template Class: Two Level Tabs

Required:
- Convert 2nd Level Tabs of (Bluejay-22 Theme) to be Drop-Down Menus as in (Application Builder Theme)
- Where can I find documentation for app_AppMenuMultiOpenBottom3

Current Situation
- Only the first level tabs are converted to match the (Application Builder Theme).
- The Drop-Down menus of the second level tabs are not working

Steps tried
1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
<link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />
2) link the following Scripts into the Header section of the Page Template
<script type="text/javascript">
var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
</script>
<script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<style> html {visibility:hidden;} </style>
<script type="text/javascript">
apex.security.framebreaker("D");
</script>
<script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>
3) Re-write the Body section to be as the following
<div id="page-header">
      
  .... LOGO AND WELCOME HERE ......  
 
   <div class="apex-top-bar-end">
       <div class="apex-top-bar">
              <div id="tabs" class="dhtmlMenuLG">
                  #PARENT_TAB_CELLS#
                  <ul id="" htmldb:listlevel="1" 
                    class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
                      #TAB_CELLS#
                      <li class="last" dir="RTL"><span></span></li>
                  </ul>
              </div>  
       </div>
   </div>   
</div>

<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
    <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
    <tbody>
      <tr>
        <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
        <td class="tbl-sidebar">#REGION_POSITION_03#</td>     
      </tr>
    </tbody>
    </table>
</div>
4) Update the section of Standard Tab Attributes to have
Current Tab as the following
<li class="#TAB_STATUS#">
  <a href="#TAB_LINK#" 
     class="dhtmlSubMenuN" onmouseover="dhtml_CloseAllSubMenusL(this)" 
     title="#TAB_LABEL#">
     "#TAB_LABEL#
  </a>
</li>
{code}
and *Non Current Standard Tab* as the following
{code}
<li class="#TAB_STATUS#">
  <a href="#TAB_LINK#" 
     class="dhtmlSubMenuN" onmouseover="dhtml_CloseAllSubMenusL(this)" 
     title="#TAB_LABEL#"> 
      "#TAB_LABEL#
  </a>
</li>
5) Update the section of Parent Tab Attributes to have
Current Parent Tab as the following
<div id="#TAB_ID#" class="current">
   <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
   <a href="#"    
      onclick="app_AppMenuMultiOpenBottom3(this,
                                         'S#TAB_ID#',
                                         '#TAB_ID#',
                                         false); return false;" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
</div>
and Non Current Parent Tab as the following
<div id="#TAB_ID#" class="non-current">
   <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
   <a href="#"    
      onclick="app_AppMenuMultiOpenBottom3(this,
                                         'S#TAB_ID#',
                                         '#TAB_ID#',
                                         false); return false;" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
</div>
How to achieve the required above??

Best Regards
Mahmoud
  • 2. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud

    You have probably already noticed that #TAB_CELLS# only replaces the standard tabs belonging to the current parent tab.
    To generate all standard tabs you have to use either a plugin like [url http://www.apex-plugin.com/oracle-apex-plugins/region-plugin/tab-menu_203.html] Tab menu  or do it you self.

    Nicolette
  • 3. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Nicolette

    Thank you for your response.

    Yes I need to generate lists for all 2nd level tabs so I need to replace #TAB_CELLS# with the list of standard tabs under a parent tab clicked.

    The question is HOW TO DO IT MYSELF? Is there other way away from using plugins.
    Can I accomplish this with Page Template by adding some jQuery code_

    I have viewed a tabs-concerned piece of source code of a page of Application Builder. It is like the following:
        onclick="app_AppMenuMultiOpenBottom3(this,'SL171313604592527903','L171313604592527903',false); return false;"
    - How can I use app_AppMenuMultiOpenBottom3 in the sections Parent Tab in the Page Template
    - What are *'SL171313604592527903' , 'L171313604592527903'* ?

    Best Regards
    Mahmoud

    Edited by: Mahmoud_Rabie on Nov 22, 2012 4:25 PM

    Edited by: Mahmoud_Rabie on Nov 22, 2012 4:39 PM
  • 4. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud_Rabie wrote:
    Dear Nicolette

    Thank you for your response.

    Yes I need to generate lists for all 2nd level tabs so I need to replace #TAB_CELLS# with the list of standard tabs under a parent tab clicked.

    The question is HOW TO DO IT MYSELF? Is there other way away from using plugins.
    Can I accomplish this with Page Template by adding some CSS and JS updates._
    CSS won't do anything the standerd tabs of the not current parent tabs are simply not renderd on the page.
    You could use some ajax to get the standerd tabs of the non current parent tabs.
    Or create a PL/SQL region and use PL/SQL code to render the appropiate html.
    Have a look at the code of the plugin to get an idea of which apex views hold the information of the tabs and how they are connected.
    I have viewed a tabs-concerned piece of source code of a page of Application Builder. It is like the following:
    onclick="app_AppMenuMultiOpenBottom3(this,'SL171313604592527903','L171313604592527903',false); return false;"
    - How can I use app_AppMenuMultiOpenBottom3 in the sections Parent Tab in the Page Template
    - What are *'SL171313604592527903' , 'L171313604592527903'* ?
    This looks like ID's of the particular list items. See if you can get access to the not minimed javascript files used by apex. They are in the approximate same location as the minified files on your image directory.
    And have a look at the different functions used by this list template to see what they actualy do.

    How many parent and standard tabs do you have?
    A faster approach could be to simple replace the tabs by a list.
    This also gives you the possibility to add more levels to your menu.
    Be awere though that there is a difference in behavior between list and tabs.
    Standard tabs do a submit. List are a link and don't do a submit.

    Nicolette
  • 5. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    You could use some ajax to get the standerd tabs of the non current parent tabs.
    How to do that?
  • 6. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud Rabie
    Mahmoud_Rabie wrote:
    You could use some ajax to get the standerd tabs of the non current parent tabs.
    How to do that?
    The basic are some javascript code that calls a apex page process that runs some pl/sql code.
    The pl/sql page process is of the type ondemand process.(Search the forum for more on this)
    This process will use sys.htp procedures to return the required html.
    The javascript function makes sure everything is shown at the correct time and place.

    With which step in the process do you have problems?
    What is stopping you from using the plugin I have mentioned?

    Nicolette
  • 7. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    What is stopping you from using the plugin I have mentioned?
    1) If using plugin don't conflict with my theme mentioned above, then no thing is preventing me.
    2) How to keep the current parent tab highlighted when using this plugin?
    3) In the region attributes of the plugin how to put the class of tabs dhtmlMenuLG

    The plugin page says
    The plug-in uses the (parent) tab setting of the page template as a template for the menu. To position the tabs within the parent tab use the #TABS# substitution string. The other tab substitution strings are also available.
    I will put plugin in #REGION_POSITION_08# in Page 0 then refer to
    #REGION_POSITION_08# instead of #TAB_CELLS#

    What  are the steps to employ this plugin to show the second level tabs as drop down menu?

    Mahmoud
  • 8. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud
    Mahmoud_Rabie wrote:
    What is stopping you from using the plugin I have mentioned?
    1) If using plugin don't conflict with my theme mentioned above, then no thing is preventing me.
    That is the beauty of this plugin you're in control of the html and CSS so you decide how the tabs are displayed.
    2) How to keep the current parent tab highlighted when using this plugin?
    The plugin page says
    The plug-in uses the (parent) tab setting of the page template as a template for the menu.
    This means that the following from your original post is used to render the parent tabs
    Mahmoud_Rabie wrote:
    5) Update the section of Parent Tab Attributes to have
    Current Parent Tab as the following
    <div id="#TAB_ID#" class="current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
    <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
    class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
    </a>
    </div>
    and Non Current Parent Tab as the following
    <div id="#TAB_ID#" class="non-current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
    <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
    class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
    </a>
    </div>
    >
    The plugin page says
    To position the tabs within the parent tab use the #TABS# substitution string. The other tab substitution strings are also available.
    This means that the html for the current parent tab would be changed to something like
    <div id="#TAB_ID#" class="current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>
    The html for the non-current parent tab should be changed in the same way.

    >
    I will put plugin in #REGION_POSITION_08# in Page 0 then refer to
    #REGION_POSITION_08# instead of #TAB_CELLS#
    Taking the body second from your original post it should become
      <div class="apex-top-bar-end">
           <div class="apex-top-bar">
              #REGION_POSITION_08#
           </div>
       </div>
    The following of the plugin settings should than be
    Before html:
    <div id="tabs" class="dhtmlMenuLG">
    After html:
    </div>
    Mahmoud_Rabie wrote:
    What  are the steps to employ this plugin to show the second level tabs as drop down menu?
    Assuming you installed the plugin and read the documentation (Tab menu.pdf).
    If you have understood and done everything mentioned above then you have done the most important and hardest part.

    Some other settings I can give you now assuming that the changes you mentioned in you first post are done to a page template in your current theme.
    Theme number: leave empty (the current theme is used)
    Template: Name of the page template you made the changes on.
    jQuery selector submenu: ".pulldown-tabs"

    The setting Tab is probably "main" but check the "Parent Tab Set" attribute of your parent tabs.

    Now keep in mind that everything I said above isn't tested yet and may need some tweaking.
    I try to set up something in the weekend.
    In the mean time if you run in to any more problems set up an demonstration of what you have done on apex.oracle.com so I can have look.

    Nicolette
  • 9. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Nicolette

    What about these attributes
    jQuery selector submenu:     .submenu
    Tab set:                              main
    Include single subtab     
    Class first parent     
    Class last parent     
    Class first child     
    Class last child     
    File Prefix:                              #WORKSPACE_IMAGES#
    Javascript libraries     
    CSS file:                              Tabmenu_horizontale.css
    Onload code     

    I think the CSS file and File Prefix need to be changed to get match the theme

    Best Regards
    Mahmoud
  • 10. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud
    Mahmoud_Rabie wrote:
    File Prefix:                              #WORKSPACE_IMAGES#
    Javascript libraries     
    CSS file:                              Tabmenu_horizontale.css
    Onload code     

    I think the CSS file and File Prefix need to be changed to get match the theme
    The CSS file only have to be filled with the name of the file if you are using a separated file with the CSS for the menu.
    If you want to style your tab menu to be the same as a list template all the CSS is already in the CSS file linked on the page. Then there is no need for an extra file and the setting can be left empty.

    If you don't have a CSS file or javascript libraries then you don't need the File prefix setting either.
    Mahmoud_Rabie wrote:
    Dear Nicolette

    What about these attributes
    jQuery selector submenu:     .submenu
    Tab set:                              main
    The Tab set is the tabset where the parent tabs belong too. As already mentioned you can find that in the "Parent Tab Set" attribute of the parent tabs.

    The jQuery selector submenu: is the jQuery selector that selects the submenu container(s). In your case that is a selector that selects the ul statement surrounding the #TABS#.
    Because we are going to use a javascript function to show the standard tabs of the parent tab we clicked on it would probably do no harm in leaving this empty.

    In the mean time I did some investication on my on.
    I used the Pull down menu list template of my theme as example to create the tab menu.
    This template uses the javascript function app_AppMenuMultiOpenBottom2(this,'L18963330840850448',false) to show the drop down menu on click of a icon button.
    The *'L18963330840850448* is the id of the container that holds the li elements that make up the second level of the menu.
    Translate to the tab menu that would be the ul statement surrounding the #TABS#

    The parent tab templates need to be changed to include the onclick html attribute on the icon to be clicked and a id attribute added to the submenu container
    <a href="#" class="link_icon" onclick="app_AppMenuMultiOpenBottom2(this,'#TAB_NAME#',false);return false;">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    I already have an example working on my local oracle XE instance and will add it to my demo page tomorrow.
    (Or rather later today because it is already past midnight and way past bed time here.)
    Just to see if we are really talking about the same kind of menu.

    Nicolette

    Edited by: Nicolette on 23-nov-2012 0:48
    A empty messages was posted added the orginal text of the message
  • 11. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Nicolette

    The current situation
    With plugin : The plugin drop down behavior is working however the lists are displayed incorrectly without any theme. This may be fixed if I have demo of Option 2 below
    Without plugin: #PARENT_TAB_CELLS# are displayed correctly and using the function app_AppMenuMultiOpenBottom2 if clicked the #TABS# is displayed which needs replacement with JS in Option 1 below

    Now, I have two options to accomplish what I need

    Option 1
    I need to do the following:
    1) Write PL/SQL on-demand process generates HTML list items under parent tab id passed.
    2) Write JS function to call the above process when the parent tab clicked (inside the parent tab template)

    Option 2
    I am waiting for your demo using the plugin with the theme of Application Builder

    Best Regards
    Mahmoud
  • 12. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud
    Mahmoud_Rabie wrote:
    Dear Nicolette

    The current situation
    With plugin : The plugin drop down behavior is working however the lists are displayed incorrectly without any theme.
    Just use the developer options of your favorite browser to see the CSS that is used on the menu you are using as example.
    And either add that too the CSS file's you are already using.
    Or created a new CSS file and add that using the already mentioned plugin settings.
    Mahmoud_Rabie wrote:
    Option 2
    I am waiting for your demo using the plugin with the theme of Application Builder
    Just to be clear the demo I will set up later today will be based on the list template "Pull Down Menu" and the color scheme of my own theme.
    I won't be making an exact match to the apex builder menu.
    To get the menu to look exactly like you want you have to define the CSS.
    And tweak the HTML and plugin settings to your exact needs.

    Without an example of what you have so far on apex.oracle.com nobody will be able to make any suggetions on what your missing or what tweak to make.

    Nicolette
  • 13. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    974630 Newbie
    Currently Being Moderated
    Mahmoud

    As promised [url https://apex.oracle.com/pls/apex/f?p=VANBARENPLUGINS:TABSUBMENU]here are two examples of the plugin using a list template Pull down menu a basis.

    The main navigation of the demo application is a list using the "Pull down menu" template.
    With the tab menu in the region "List template pull down menu" I have made it to be exactly the same as the navigation of the application.

    With the tab menu in the region "List template pull down menu classes" I changed the CSS a bit and split the class ui-corner-all in ui-corner-left and ui-corner-right.
    To stack the parenttabs neatly together.
    Using the settings Class first parent and Class last parent the beginning and end of the menu are nicely rounded.

    In the region to the right of the page shows all the settings used for all the tab menu's demoed on the page.

    Want to see the effect of different colors. Choose a different theme in the select list in the top right corner of the page.

    The reason I have chosen the list template Pull down menu as basis for these demo's is because I think that is the same list template that is used for the drop down menu in the apex builder.
    Secondly it is the template that I have used for my main navigation list.
    And not unimportandly it stays in line with the theme of the rest of the demo application.

    Nicolette
  • 14. Re: Convert Tabs in the 2nd Level to Drop-Down Menu as App Builder Theme
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    Dear Nicolette

    Please enter the workspace on apex.oracle.com containing the application TestDropDownAppBuilderTabs
    with the following:
    Workspace : ralab
    User : nicolette
    Password : abc123

    I have done the following steps:
    1) Adjust Page template to match the theme which I need
    2) Install plugin and update the Page Template Name to be WithNicolettePlugin
    3) Set the Theme number to 2 (Builder Blue)
    4) Put the Plugin in region #REGION_POSITION_08# of Page 0

    The parent tabs of the plugins are displayed correctly however th drop downmenu of #TABS# is not displayed correctlty.

    Best Regards
    Mahmoud
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points